<?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>Netway Media &#187; tutorial</title>
	<atom:link href="http://www.netway-media.com/blog/tag/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.netway-media.com</link>
	<description>Agentur für Webdesign und SEO</description>
	<lastBuildDate>Fri, 27 Jan 2012 18:16:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
	<atom:link rel='hub' href='http://www.netway-media.com/?pushpress=hub'/>
		<item>
		<title>Photoshop Tutorial: Coole Hintergründe erstellen</title>
		<link>http://www.netway-media.com/blog/2009/11/photoshop-tutorial-coole-hintergrunde-erstellen/</link>
		<comments>http://www.netway-media.com/blog/2009/11/photoshop-tutorial-coole-hintergrunde-erstellen/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 10:17:41 +0000</pubDate>
		<dc:creator>Birger</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[grafik]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.netway-media.com/blog/?p=142</guid>
		<description><![CDATA[Heute möchte ich euch zeigen , wie man mit Photoshop innerhalb weniger Minuten unterschiedliche Hintergründe erstellen kann. Die so erstellten Backgrounds kann man z.B. für Header Grafiken, als Desktop Backgrounds oder als Hintergrund für den eigenen Blog verwenden. Denn gerade &#8230; <a href="http://www.netway-media.com/blog/2009/11/photoshop-tutorial-coole-hintergrunde-erstellen/">mehr lesen <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Heute möchte ich euch zeigen , wie man mit Photoshop innerhalb weniger Minuten unterschiedliche Hintergründe erstellen kann. Die so erstellten Backgrounds kann man z.B. für Header Grafiken, als Desktop Backgrounds oder als Hintergrund für den eigenen Blog verwenden. Denn gerade in Zeiten der schnellen Breitband Verbindungen, spielt die Dateigröße von Hintergründen immer weniger eine Rolle. So werden z.B. bei Twitter oftmals sehr große Hintergrundgrafiken genutzt.</p>
<p>Nun will ich euch als erstes das Produkt dieses Tutorials präsentieren:<span id="more-142"></span></p>
<div id="attachment_143" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg1.jpg"><img class="size-medium wp-image-143" title="Hintergrund" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg1-300x225.jpg" alt="Der fertige Hintergrund" width="300" height="225" /></a><p class="wp-caption-text">Der fertige Hintergrund</p></div>
<p>Das schöne an der Methode ist, dass sie sich sehr leicht anpassen und verändern lässt, wodurch sich je nach bedarf ganz unterschiedliche Backgrounds erstellen lassen.</p>
<p>Was man braucht:</p>
<p>Als Grundlage für den Background wird zunächst eine hochauflösende Textur benötigt. Viele Blogs veröffentlichen regelmäßig wirklich schöne Texturen zur freien Verwendung. Ein bisschen googlen hilft hier <img src='http://www.netway-media.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> .  Ich habe mich hier jedoch nicht bei einem Blog, sondern bei <a title="Free Textures" href="http://freetextures.org" target="_blank">http://freetextures.org</a> bedient. Genau gesagt benötigt ihr für dieses Tutorial <a title="Wood" href="http://freetextures.org/pu/wood/wood-%285%29.html" target="_blank">diese Textur</a>.</p>
<p>Als erstes erstellen wir in Photoshop ein neues Dokument mit den Maßen 800px x 600px. Im Prinzip könnt ihr die Auflösung je nach Bedarf auch deutlich größer wählen, dies hängt letztendlich von der Auflösung der verwendeten Textur ab. Aber in diesem Tutorial beschränken wir uns auf 800&#215;600.</p>
<p>Wir beginnen in unserem neuen Dokument mit einem reflektierenden Verlauf<br />
(hier: Vordergrundfarbe: #c8866d, Hintergrundfarbe: #93527f). Den Verlauf ziehen wir von der unteren linken in die obere rechte Ecke:</p>
<div id="attachment_144" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg2.jpg"><img class="size-medium wp-image-144" title="hg2" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg2-300x203.jpg" alt="Verlauf" width="300" height="203" /></a><p class="wp-caption-text">Verlauf</p></div>
<p>Wie schon erwähnt lassen sich die Farben natürlich nach belieben ändern, aber ich mag Lila (wie man an unserer Seite sieht <img src='http://www.netway-media.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> ).</p>
<p>Nun öffnen wir die Textur und stellen diese über &#8220;Bild-&gt;Modus&#8221; auf &#8220;Graustufen&#8221; um. Außerdem verkleinern wir das Bild über &#8220;Bild-&gt;Bildgröße&#8221; auf 800px x 600px. Die entfärbte und verkleinerte Textur ziehen wir nun über unseren Verlauf und stellen die Deckkraft auf 17%:</p>
<div id="attachment_145" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg4.jpg"><img class="size-medium wp-image-145" title="hg4" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg4-300x143.jpg" alt="Textur über unseren Verlauf" width="300" height="143" /></a><p class="wp-caption-text">Textur über unseren Verlauf</p></div>
<p>Das sieht doch für&#8217;s Erste schon einmal ganz nett aus, allerdings ist es noch weit entfernt von dem gewünschten Ergebnis. Die Ebene mit der Textur (&#8220;Ebene 1 im Bild&#8221;) duplizieren wir nun und drehen sie um 180°:</p>
<div id="attachment_146" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg5.jpg"><img class="size-medium wp-image-146" title="hg5" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg5-300x161.jpg" alt="Ebene drehen" width="300" height="161" /></a><p class="wp-caption-text">Ebene drehen</p></div>
<p>Nun öffnen wir ein weiters mal die Textur und stellen sie wieder auf Graustufen um, die Größe lassen wir jedoch unberührt (auf 1200px x 900px). Jetzt ziehen wir die Textur in voller Größe in unseren Hintergrund und drehen sie um 90°. Theoretisch hätte man die Ebene mit der Textur auch ein weiteres mal duplizieren können und dann um 90° drehen. Da das Bild jedoch höher als es breit ist, ließe sich so nicht die volle Fläche füllen.</p>
<div id="attachment_147" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg6.jpg"><img class="size-medium wp-image-147" title="hg6" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg6-300x161.jpg" alt="90° Drehung" width="300" height="161" /></a><p class="wp-caption-text">90° Drehung</p></div>
<p>Die Deckkraft der gerade gedrehten Ebene stellen wir wiederum auf ca. 15%. Man könnte die Textur noch weitere Male einfügen, drehen und die Deckkraft runterstellen, für diesen Hintergrund soll es jedoch reichen. Insgesamt sollte das ganze bis jetzt so aussehen:</p>
<div id="attachment_148" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg7.jpg"><img class="size-medium wp-image-148" title="hg7" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg7-300x161.jpg" alt="Aktueller Stand der Dinge ;)" width="300" height="161" /></a><p class="wp-caption-text">Aktueller Stand der Dinge <img src='http://www.netway-media.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p></div>
<p>Nun fehlt noch ein letzter Schritt, welcher sehr viel ausmacht. Und zwar werden wir die Kanten des Bildes mit Hilfe eines großen Pinsels leicht und sanft verdunkeln. Hierzu erstellen wir als nächstes über &#8220;Ebene-&gt;neu&#8221; eine neue Ebene, welche vorerst ganz vorne sein sollte. Jetzt wählen wir das Pinselwerkzeug und hier einen sanften Pinsel mit etwa 200px Durchmesser:</p>
<div id="attachment_149" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg8.jpg"><img class="size-medium wp-image-149" title="hg8" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg8-300x161.jpg" alt="Pinsel wählen" width="300" height="161" /></a><p class="wp-caption-text">Pinsel wählen</p></div>
<p>Mit diesem Pinsel malen wir nun am Rand des Bildes entlang, sodass das Ganze dann etwa so aussehen sollte (Nicht vergessen, die Vordergrundfarbe auf schwarz zu stellen&#8230;):</p>
<div id="attachment_150" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg9.jpg"><img class="size-medium wp-image-150" title="hg9" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg9-300x161.jpg" alt="Mit dem Pinsel" width="300" height="161" /></a><p class="wp-caption-text">Mit dem Pinsel</p></div>
<p>Ich empfehle hierbei nicht allzu penibel zu sein, sondern lieber frei darauf loszuzeichnen: Einmal rum und fertig. Die Ebene, welche wir gerade so schön mit dem Pinsel bemalt haben, stellen wir jetzt noch auf eine Deckkraft von ca. 30 % und voila: Fertig ist unser hübscher Background:</p>
<div id="attachment_151" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.netway-media.com/wp-content/uploads/2009/11/hg10.jpg"><img class="size-medium wp-image-151" title="hg10" src="http://www.netway-media.com/wp-content/uploads/2009/11/hg10-300x142.jpg" alt="Der fertige Background" width="300" height="142" /></a><p class="wp-caption-text">Der fertige Background</p></div>
<p>So das war es auch schon. Geht ziemlich schnell, oder?</p>
<p>Das ganze soll jedoch nur ein sehr einfaches Beispiel darstellen, welches wirklich schnell zu erstellen ist. Es soll die lediglich Grundprinzipien dieser Methode zeigen. Durch Kombination verschiedener Texturen und Verläufe und Änderungen in der Ebenenreihenfolge und Deckkraft, stehen einem wirklich unmengen an Möglichkeiten zur Verfügung, sich einen individuellen Background zu erstellen.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.netway-media.com/blog/2009/11/photoshop-tutorial-coole-hintergrunde-erstellen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

