Photoshop Tutorial: Coole Hintergründe erstellen

von Birger | Tags: , , ,

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.

Nun will ich euch als erstes das Produkt dieses Tutorials präsentieren:

Der fertige Hintergrund

Der fertige Hintergrund

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.

Was man braucht:

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 ;) .  Ich habe mich hier jedoch nicht bei einem Blog, sondern bei http://freetextures.org bedient. Genau gesagt benötigt ihr für dieses Tutorial diese Textur.

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×600.

Wir beginnen in unserem neuen Dokument mit einem reflektierenden Verlauf
(hier: Vordergrundfarbe: #c8866d, Hintergrundfarbe: #93527f). Den Verlauf ziehen wir von der unteren linken in die obere rechte Ecke:

Verlauf

Verlauf

Wie schon erwähnt lassen sich die Farben natürlich nach belieben ändern, aber ich mag Lila (wie man an unserer Seite sieht ;) ).

Nun öffnen wir die Textur und stellen diese über “Bild->Modus” auf “Graustufen” um. Außerdem verkleinern wir das Bild über “Bild->Bildgröße” auf 800px x 600px. Die entfärbte und verkleinerte Textur ziehen wir nun über unseren Verlauf und stellen die Deckkraft auf 17%:

Textur über unseren Verlauf

Textur über unseren Verlauf

Das sieht doch für’s Erste schon einmal ganz nett aus, allerdings ist es noch weit entfernt von dem gewünschten Ergebnis. Die Ebene mit der Textur (“Ebene 1 im Bild”) duplizieren wir nun und drehen sie um 180°:

Ebene drehen

Ebene drehen

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.

90° Drehung

90° Drehung

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:

Aktueller Stand der Dinge ;)

Aktueller Stand der Dinge ;)

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 “Ebene->neu” eine neue Ebene, welche vorerst ganz vorne sein sollte. Jetzt wählen wir das Pinselwerkzeug und hier einen sanften Pinsel mit etwa 200px Durchmesser:

Pinsel wählen

Pinsel wählen

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…):

Mit dem Pinsel

Mit dem Pinsel

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:

Der fertige Background

Der fertige Background

So das war es auch schon. Geht ziemlich schnell, oder?

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.

Kommentiere diesen Beitrag

Hinterlasse ein Kommentar

Deine E-Mail wird niemals veröffentlicht oder geteilt. Erforderliche Felder sind mit einem * gekennzeichnet

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">