<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>tutorial &#8211; LGK Blog</title>
	<atom:link href="/tag/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>/</link>
	<description>Design, Ideas and Thoughts</description>
	<lastBuildDate>Mon, 08 May 2017 10:36:08 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.0</generator>

<image>
	<url>/wp-content/uploads/2022/04/favicon-150x150.png</url>
	<title>tutorial &#8211; LGK Blog</title>
	<link>/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Regular expression collection</title>
		<link>/regular-expression-collection/</link>
					<comments>/regular-expression-collection/#comments</comments>
		
		<dc:creator><![CDATA[Lars Kliesing]]></dc:creator>
		<pubDate>Mon, 08 May 2017 10:36:08 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Code Snippets]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Tipps]]></category>
		<category><![CDATA[example]]></category>
		<category><![CDATA[regex]]></category>
		<category><![CDATA[regular expression]]></category>
		<category><![CDATA[tutorial]]></category>
		<guid isPermaLink="false">/?p=1971</guid>

					<description><![CDATA[On this post I want to collect different regular expressions, that I used in my projects so I can find them very quick, when I need them in the future. For more useful regular expressions you should check out this page: Containing a string but not multiple others See the Pen Regex example: Containing String&#8230; <a class="more-link" href="/regular-expression-collection/">Continue reading <span class="screen-reader-text">Regular expression collection</span></a>]]></description>
										<content:encoded><![CDATA[<p>On this post I want to collect different regular expressions, that I used in my projects so I can find them very quick, when I need them in the future.<br />
For more useful regular expressions you should check out this page: <a href="https://projects.lukehaas.me/regexhub/" title="undefined" target="_blank"></a></p>
<h2>Containing a string but not multiple others</h2>
<p data-height="600" data-theme-id="0" data-slug-hash="GmOVBR" data-default-tab="js,result" data-user="lgkonline" data-embed-version="2" data-pen-title="Regex example: Containing String but not multiple others" class="codepen">See the Pen <a href="https://codepen.io/lgkonline/pen/GmOVBR/">Regex example: Containing String but not multiple others</a> by Lars Gerrit Kliesing LGK (<a href="http://codepen.io/lgkonline">@lgkonline</a>) on <a href="http://codepen.io/">CodePen</a>.</p>
<p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script></p>
]]></content:encoded>
					
					<wfw:commentRss>/regular-expression-collection/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Tutorial: &#8220;Long Shadow&#8221;-Icon (Flat) mit Photoshop</title>
		<link>/tutorial-long-shadow-icon-flat-mit-photoshop/</link>
					<comments>/tutorial-long-shadow-icon-flat-mit-photoshop/#respond</comments>
		
		<dc:creator><![CDATA[Lars Kliesing]]></dc:creator>
		<pubDate>Mon, 22 Jul 2013 13:04:25 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Downloads]]></category>
		<category><![CDATA[Tipps]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Anleitung]]></category>
		<category><![CDATA[Flat Design]]></category>
		<category><![CDATA[Long Shadow]]></category>
		<category><![CDATA[Modern UI]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[tutorial]]></category>
		<guid isPermaLink="false">http://lgkonline.de/blog/?p=836</guid>

					<description><![CDATA[Flaches Design ist der neue Trend. Vor allem Microsoft hat mit seiner &#8220;Modern UI&#8221; einen guten Teil dazu beigetragen. Aber auch Google und nun auch Apple ziehen nun mit. Ein Bestandteil von Flat Design sind &#8220;Long Shadows&#8221;. Vor allem bei App-Icons findet man diese. Seht einfach selbst: Weitere Beispiele findet ihr in diesem Artikel auf&#8230; <a class="more-link" href="/tutorial-long-shadow-icon-flat-mit-photoshop/">Continue reading <span class="screen-reader-text">Tutorial: &#8220;Long Shadow&#8221;-Icon (Flat) mit Photoshop</span></a>]]></description>
										<content:encoded><![CDATA[<p>Flaches Design ist der neue Trend. Vor allem Microsoft hat mit seiner &#8220;Modern UI&#8221; einen guten Teil dazu beigetragen.</p>
<p>Aber auch Google und nun auch Apple ziehen nun mit.</p>
<p>Ein Bestandteil von Flat Design sind &#8220;Long Shadows&#8221;. Vor allem bei App-Icons findet man diese.</p>
<p>Seht einfach selbst:</p>
<figure id="attachment_839" aria-describedby="caption-attachment-839" style="width: 600px" class="wp-caption aligncenter"><img loading="lazy" class="size-full wp-image-839" alt="Das Icon zu Google Fonts. (Quelle: designmodo.com)" src="http://blog.lgkonline.com/wp-content/uploads/2013/07/flat-shadow.jpg" width="600" height="320" srcset="/wp-content/uploads/2013/07/flat-shadow.jpg 600w, /wp-content/uploads/2013/07/flat-shadow-300x160.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /><figcaption id="caption-attachment-839" class="wp-caption-text">Das Icon zu Google Fonts. (Quelle: <a href="http://designmodo.com/long-shadows-design/" target="_blank">designmodo.com</a>)</figcaption></figure>
<p>Weitere Beispiele findet ihr <a href="http://designmodo.com/long-shadows-design/" target="_blank">in diesem Artikel auf designmodo.com</a>.</p>
<h2>Tutorial</h2>
<p>Aber dies soll ein Tutorial sein, darüber wie man &#8220;Long Shadow&#8221;-Icons mit Photoshop verwirklichen kann.<span id="more-836"></span></p>
<p><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-4.png"><img loading="lazy" class="size-medium wp-image-847 alignleft" title="Die Vorlage für den 45°-Schatten." alt="Die Vorlage für den 45°-Schatten." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-4-300x168.png" width="300" height="168" srcset="/wp-content/uploads/2013/07/Screenshot-4-300x168.png 300w, /wp-content/uploads/2013/07/Screenshot-4-1024x575.png 1024w, /wp-content/uploads/2013/07/Screenshot-4.png 1366w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Für den Schatten verwende ich eine selbstgemachte Vorlage, womit es einfacher ist den Schatten zu erstellen.</p>
<p>Die Vorlage hier als PSD: <a href="/files/45-Grad-Form.psd" target="_blank">45-Grad-Form.psd</a></p>
<p>Wie bei dem Beispiel mit dem Google Fonts-Icon, erstellen wir einen 45°-Schatten, welcher nach unten rechts scheint.</p>
<div class="clear-both"></div>
<p>Für den Icon-Hintergrund erstellen wir ein abgerundetes Quadrat in der Farbe <strong><span style="color: #00a89b;">#00a89b</span></strong>.</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-5.png"><img loading="lazy" class="aligncenter size-large wp-image-851" title="Für den Icon-Hintergrund erstellen wir ein abgerundetes Quadrat in der Farbe #00a89b." alt="Für den Icon-Hintergrund erstellen wir ein abgerundetes Quadrat in der Farbe #00a89b." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-5.jpg" width="600" height="337" /></a></p>
<p>Für das Tutorial wollen wir ein &#8220;Home&#8221;-Icon machen.<br />
Also fügen wir ein Haus-Symbol ein. Das Icon stammt von <a href="http://iconmonstr.com/" target="_blank">iconmonstr.com</a>. Dort findet ihr noch viele weitere Icons, die ihr verwenden könnt.</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-7.png"><img loading="lazy" class="aligncenter size-full wp-image-855" title="Für das Tutorial wollen wir ein “Home”-Icon machen. Also fügen wir ein Haus-Symbol ein." alt="Für das Tutorial wollen wir ein “Home”-Icon machen. Also fügen wir ein Haus-Symbol ein." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-7.png" width="600" height="368" srcset="/wp-content/uploads/2013/07/Screenshot-7.png 866w, /wp-content/uploads/2013/07/Screenshot-7-300x183.png 300w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>Da das Symbol aus zwei Körpern (Haus und Schornstein) besteht, erstellen wir zwei voneinander getrennte Schatten.</p>
<p>Zuerst ist das Haus dran. Wir fügen die beiden Ebenen aus der Schatten-Vorlage ein und bewegen diese zu der jeweils äußersten Kante des Hauses.</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-6.png"><img loading="lazy" class="aligncenter size-large wp-image-860" title="Wir fügen die beiden Ebenen aus der Schatten-Vorlage ein und bewegen diese zu der jeweils äußersten Kante des Hauses." alt="Wir fügen die beiden Ebenen aus der Schatten-Vorlage ein und bewegen diese zu der jeweils äußersten Kante des Hauses." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-6.jpg" width="600" height="337" /></a></p>
<p>In einer neuen Ebene unter dem Haus-Symbol färben wir den unteren Bereich mit dem Pinsel-Werkzeug (B) schwarz. Das Schwarz muss dabei über der Vorlage liegen.</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-8.png"><img loading="lazy" class="aligncenter size-large wp-image-863" title="In einer neuen Ebene unter dem Haus-Symbol färben wir den unteren Bereich schwarz." alt="In einer neuen Ebene unter dem Haus-Symbol färben wir den unteren Bereich schwarz." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-8.jpg" width="600" height="337" /></a></p>
<p>Das Schwarze soll unser Schatten werden. Der Teil des Schattens, das nun über die Vorlage steht soll nun abgeschnitten werden.</p>
<p>Dafür müssen wir die beiden Vorlagen-Ebenen in eine Auswahl umwandeln. Am einfachsten geht das, wenn man STRG gedrückt hält und auf die entsprechende Ebenen-Miniatur klickt.</p>
<p>Halte ich zu STRG auch noch SHIFT (Umschalt) gedrückt, kann ich eine Ebene zur Auswahl hinzufügen.</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-9.png"><img loading="lazy" class="aligncenter size-large wp-image-863" title="Halte ich zu STRG auch noch SHIFT (Umschalt) gedrückt, kann ich eine Ebene zur Auswahl hinzufügen." alt="Halte ich zu STRG auch noch SHIFT (Umschalt) gedrückt, kann ich eine Ebene zur Auswahl hinzufügen." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-9.jpg" width="600" height="337" /></a></p>
<p>Wechseln wir nun wieder zur &#8220;Schatten&#8221;-Ebene und drücken ENTF, werden die überschüssigen Teile sauber abgetrennt.</p>
<p>Die Auswahl kannst du übrigens mit STRG + D aufheben.</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-10.png"><img loading="lazy" class="aligncenter size-large wp-image-863" title="Wechseln wir nun wieder zur &quot;Schatten&quot;-Ebene und drücken ENTF, werden die überschüssigen Teile sauber abgetrennt." alt="Wechseln wir nun wieder zur &quot;Schatten&quot;-Ebene und drücken ENTF, werden die überschüssigen Teile sauber abgetrennt." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-10.jpg" width="600" height="337" /></a></p>
<p>Blendest du nun die Vorlagen-Ebenen aus (in meinem Fall sind es Ebene 4 und Ebene 3), wirst du sehen, dass ein Teil des Schattens noch über den Icon-Hintergrund übersteht.</p>
<p>Auch hier, geht es am einfachsten, wenn du den Icon-Hintergrund mit STRG und Klick auf die Miniatur auswählst.</p>
<p>Allerdings musst du danach die Auswahl noch umkehren, da wir ja den Teil des Schattens außerhalb des Icon-Hintergrundes entfernen wollen.</p>
<p>Nun, auch dafür gibt es einen Tastenkürzel, und zwar STRG + SHIFT (Umschalt) + I.</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-11.png"><img loading="lazy" class="aligncenter size-full wp-image-871" title="Blendest du nun die Vorlagen-Ebenen aus (in meinem Fall sind es Ebene 4 und Ebene 3), wirst du sehen, dass ein Teil des Schattens noch über den Icon-Hintergrund übersteht." alt="Blendest du nun die Vorlagen-Ebenen aus (in meinem Fall sind es Ebene 4 und Ebene 3), wirst du sehen, dass ein Teil des Schattens noch über den Icon-Hintergrund übersteht." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-11.jpg" width="600" height="337" srcset="/wp-content/uploads/2013/07/Screenshot-11.jpg 600w, /wp-content/uploads/2013/07/Screenshot-11-300x168.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>Wechseln wir nun wieder zur &#8220;Schatten&#8221;-Ebene und drücken ENTF, wird der unschöne Überschuss entfernt.</p>
<p>Nun können wir noch die Deckkraft des Schattens regulieren. Ich habe sie bei mir auf 23% gestellt.</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-12.png"><img loading="lazy" class="aligncenter size-full wp-image-875" title="Nun können wir noch die Deckkraft des Schattens regulieren. Ich habe sie bei mir auf 23% gestellt." alt="Nun können wir noch die Deckkraft des Schattens regulieren. Ich habe sie bei mir auf 23% gestellt." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-12.jpg" width="600" height="337" srcset="/wp-content/uploads/2013/07/Screenshot-12.jpg 600w, /wp-content/uploads/2013/07/Screenshot-12-300x168.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>Das Resultat ist doch schon mal ganz ansprechend. Die vorherigen Schritte wiederholen wir jetzt, allerdings beim Schornstein.<br />
Das sieht dann so aus:</p>
<p style="text-align: center;"><a href="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-13.png"><img loading="lazy" class="aligncenter size-full wp-image-879" title="Das Resultat ist doch schon mal ganz ansprechend." alt="Das Resultat ist doch schon mal ganz ansprechend." src="http://blog.lgkonline.com/wp-content/uploads/2013/07/Screenshot-13.jpg" width="600" height="337" srcset="/wp-content/uploads/2013/07/Screenshot-13.jpg 600w, /wp-content/uploads/2013/07/Screenshot-13-300x168.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>Das fertige Projekt könnt ihr hier als PSD runterladen: <a href="/files/home-long-shadow.psd" target="_blank">home-long-shadow.psd</a></p>
]]></content:encoded>
					
					<wfw:commentRss>/tutorial-long-shadow-icon-flat-mit-photoshop/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Photoshop Tutorial: Logo-Grafik als Form abspeichern</title>
		<link>/photoshop-tutorial-logo-grafik-als-form-abspeichern/</link>
					<comments>/photoshop-tutorial-logo-grafik-als-form-abspeichern/#respond</comments>
		
		<dc:creator><![CDATA[Lars Kliesing]]></dc:creator>
		<pubDate>Sun, 30 Sep 2012 19:38:45 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Tipps]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Videos]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[deisgn]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[grafik]]></category>
		<category><![CDATA[konvertieren]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[software]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[umwandeln]]></category>
		<guid isPermaLink="false">http://lgkonline.de/blog/?p=652</guid>

					<description><![CDATA[Photoshop Tutorial: Logo-Grafik als Form abspeichern Auf YouTube ansehen Musik: http://www.audioagency.de/ In diesem Video zeige ich euch, wie ihr mit Photoshop eine Pixel-Grafik als Form verwenden könnt. So braucht ihr z.B. ein Logo nicht extra als Datei öffnen sondern könnt es direkt als Form einbinden. Ich hoffe, den einen oder anderen damit einen Tipp geben&#8230; <a class="more-link" href="/photoshop-tutorial-logo-grafik-als-form-abspeichern/">Continue reading <span class="screen-reader-text">Photoshop Tutorial: Logo-Grafik als Form abspeichern</span></a>]]></description>
										<content:encoded><![CDATA[<div class="box">
<h3 class="widget-title">Photoshop Tutorial: Logo-Grafik als Form abspeichern</h3>
<p><center><br />
<iframe loading="lazy" width="640" height="360" src="http://www.youtube.com/embed/bxzVjUi9F2U" frameborder="0" allowfullscreen></iframe></center></p>
<p style="text-align: right;"><a href="http://www.youtube.com/watch?v=bxzVjUi9F2U" target="_blank">Auf YouTube ansehen</a></p>
<p>Musik: <a href="http://www.audioagency.de/" target="_blank">http://www.audioagency.de/</a></p>
<p>In diesem Video zeige ich euch, wie ihr mit Photoshop eine Pixel-Grafik als Form verwenden könnt.<br />
So braucht ihr z.B. ein Logo nicht extra als Datei öffnen sondern könnt es direkt als Form einbinden.</p>
<p>Ich hoffe, den einen oder anderen damit einen Tipp geben zu können.</p>
<p>&nbsp;</p>
</div>
]]></content:encoded>
					
					<wfw:commentRss>/photoshop-tutorial-logo-grafik-als-form-abspeichern/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Meldung nur zu einer bestimmten Zeit anzeigen</title>
		<link>/meldung-nur-zu-einer-bestimmten-zeit-anzeigen/</link>
					<comments>/meldung-nur-zu-einer-bestimmten-zeit-anzeigen/#respond</comments>
		
		<dc:creator><![CDATA[Lars Kliesing]]></dc:creator>
		<pubDate>Mon, 14 May 2012 17:38:30 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Tipps]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[kurz]]></category>
		<category><![CDATA[meldung]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[zeit]]></category>
		<guid isPermaLink="false">http://lgkonline.de/blog/?p=437</guid>

					<description><![CDATA[Wenn du auf deiner Website eine Meldung nur zu einer bestimmten Zeit anzeigen möchtest, ist das mit PHP ganz einfach zu lösen: In der ersten Zeile wird geprüft, ob das heutige Datum der 14.05. ist. Trifft dies zu, wird die Meldung in der zweiten Zeile ausgegeben. Das gleiche lässt sich auch mit der Uhrzeit machen:&#8230; <a class="more-link" href="/meldung-nur-zu-einer-bestimmten-zeit-anzeigen/">Continue reading <span class="screen-reader-text">Meldung nur zu einer bestimmten Zeit anzeigen</span></a>]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" src="http://lgkonline.de/blog/wp-content/uploads/2012/05/php-logo.jpg" alt="" title="php-logo" width="250" height="134" class="alignleft size-full wp-image-438" /></p>
<p>
Wenn du auf deiner Website eine Meldung nur zu einer bestimmten Zeit anzeigen möchtest, ist das mit PHP ganz einfach zu lösen:
</p>
<pre class="prettyprint lang-php">
<?php

    if(date('d.m') == '14.05') {
        echo 'Diese Meldung sehen Sie nur am 14.05.';
    }

?>
</pre>
<p><span id="more-437"></span></p>
<p>
In der ersten Zeile wird geprüft, ob das heutige Datum der 14.05. ist.<br />
Trifft dies zu, wird die Meldung in der zweiten Zeile ausgegeben.
</p>
<p>
Das gleiche lässt sich auch mit der Uhrzeit machen:
</p>
<pre class="prettyprint lang-php">
<?php

    if(date('H:i') == '06:30') {
        echo 'Es ist 06:30 Uhr.';
    }
    else {
        echo 'Es ist nicht 06:30 Uhr.';
    }

?>
</pre>
<p>
Mit <code>else</code> (Zeile 4) wird hier auch gleich der Sonst-Befehl gesetzt.<br />
Ist es nicht 06:30, wird dieser Befehl ausgeführt.</p>
]]></content:encoded>
					
					<wfw:commentRss>/meldung-nur-zu-einer-bestimmten-zeit-anzeigen/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
