Long Shadow Design (Photoshop Tutorial)

Der Design Trend „Flat Design“ hat sich mittlerweile durchgesetzt. Nicht zuletzt aufgrund des neuen UI von Windows 8 ist der als ehemals Metro Stil bekannte Look längst in der Designszene angekommen und in abgewandter Form ebenfalls als Flat Design auf vielen Webseiten weltweit zu sehen. Seit neustem schwirrt ein neuer Trend durch die Internetwelt, welcher vor allem in der englisch sprachigen Design Community dribbble.com sehr großen Anklang findet.

In dem heutigen Tutorial möchte ich anfängerfreundlich erklären, wie man mit Photoshop ein Logo im Long Shadow Design erstellt, bzw. ein bestehendes bearbeitet und zeige später auch noch ein paar ausgewählte Logos zur weiteren Inspiration.

Hierzu benötigen wir nicht mehr als Photoshop, je nach Kenntnissen ca. 10-30 Minuten Zeit und ein Logo. Wer das Tutorial 1:1 mitmachen möchte, kann sich hier das von mir verwendete Logo laden:

Das W – unser Ausgangspunkt

Ich hab für dieses Tutorial Tobias sein „The-WebDesign.net“-Logo genommen, aber es kann natürlich auch mit jedem anderen Logo machen.

1. Schritt: Anlegen einer neuen Arbeitsfläche

Zunächst einmal legen wir uns in Photoshop einen neuen Arbeitsbereich an. Das geht über Datei » Neu oder alternativ über das Drücken der Tastenkombination STRG+N. Die Größe entscheidet ihr natürlich selbst, da ich hier nur ein Beispiel erstelle, wähle ich eine Arbeitsfläche von 600×400, die von dem Seitenverhältnis zu den Thumbnails hier im Blog passt.

Wenn ihr z.B. ein Wallpaper erstellen möchtet, müsste als Größe eure Auflösung wählen (z.B: 1920×1080). Die restlichen Settings könnt ihr dem Screenshot entnehmen und da es sich hier um Standardsettings handelt, will ich euch gar nicht langweilen sondern direkt weiter machen.

Unsere Photoshop Einstellungen

2. Schritt: Hintergrund Einfärben & Logo einfügen

Nun wird‘s spannend. Nachdem wir unseren Arbeitsbereich erstellt haben, müssen wir zunächst den Hintergrund einfärben. Ich habe mir zu Beginn bereits ein paar Gedanken über die Farbgestaltung gemacht und habe mir daraufhin 4 Farben von the-webdesign.net geschnappt, mit denen ich in diesem Tutorial arbeiten werde.

Unser Farb-Schema

Um den Hintergrund zu erstellen müssen wir eine neue Ebene einfügen. Hierzu gehen wir unter Ebene » Neu » Ebene… oder drücken SHIFT+STRG+N und nennen diese „Hintergrund„.

Nun setzten wir unsere Vordergrundfarbe mit Hilfe des Color-Picker auf die von uns gewählte Farbe (#34485e) für den Hintergrund und wählen anschließend unser Füllwerkzeug um die soeben erstellte Ebene einzufärben.

Sobald die Ebene in unserer gewählten Farbe erscheint können wir unser Logo einfügen. Das geht entweder via Drag & Drop oder über Datei » Platzieren…

Nun färben wir das soeben eingefügte Logo noch ein. Da unser Farbschema sehr dunkel ist, wähle ich hierbei weiß als Logofarbe. Über einen Rechtsklick auf die „Logo-Ebene“ erhalten wir im Context Menü den Punkt „Fülloptionen„. Diesen klicken wir an, wählen „Farbüberlagerung“ und setzen hier das Farbfeld auf weiß, sodass wir zu folgendem Zwischenstand kommen.

Farbüberlagerung einstellen

3. Schritt: Zweiten Hintergrund einfügen

Nun müssen wir noch einen weiteren Hintergrund einfügen, auf welchem das „W“ (oder euer Logo) später sitzt. Hierzu benutzen wir das Rechteckwerkzeug und ziehen ein Quadrat, das etwas größer ist als unser W. Wer möchte kann die Vordergrundfarbe (wie oben erklärt) bereits auf die 2. Hintergrundfarbe unserer Farbpalette setzen, ansonsten kann die Farbe für „Hintergrund 2“ auch über die Fülloptionen auf #1abb9c gesetzt werden oder über ein Doppeltklick auf das Farbfeld der Ebene „Rechteck 1“.

Das Rechteck müssen wir nun natürlich noch unter die W-Ebene ziehen, sodass das W sichtbar ist. In 99,9% der Fälle werden die Abstände zu den Seiten des Rechtecks vom W ausgehend nicht identisch sein. Wie wir in Hessen sagen würden: „Es is schepp!“. Wir können aber mehrere Objekte automatisch innerhalb unserer Arbeitsfläche automatisch zentrieren. Hierzu wählen wir rechts in unserem Ebenen-Fenster alle 3 Ebenen aus und nehmen nun das „Verschieben-Werkzeug“ (STRG+V) und klicken oben im Menü auf „an vertikaler Mittelachse ausrichten“ und „an horizontaler Mittelachse ausrichten„.

Ausrichten und Zentrieren von Elementen

Sodass wir nun folgendes Ergebnis haben dürften:

Unser Logo ohne Schatten

4. Schritt: Schatten der Box

Nun geht’s ans Eingemachte. Wir makieren die „Rechteck 1“ Ebene und klicken anschließend auf Ebene » Ebene Duplizieren…

Die soeben erstellte Ebene (Rechteck 1 Kopie) verschieben wir nun in eine Gruppe, damit wir gleich kein Problem mit der Übersicht haben. Das geht über Ebene » Ebene gruppieren… oder den Shortcut STRG+G. Da wir diese Ebene nun gleich mehrfach duplizieren müssen, kann es, je nach System, zu Engpässen mit der Performance kommen. Wir machen die Ebene skalierbar indem wir mit der rechten Maustaste auf die Ebene klicken und „Ebene rastern“ wählen.

Nun muss diese Ebene um 1px verschoben werden. In unserem Beispiel möchte ich den Schatten im 45° Winkel nach unten rechts laufen lassen, also müssen wir sowohl 1px nach rechts und 1px nach unten. Das geht am einfachsten über die Pfeiltasten an eurer Tastatur. Nun duplizieren wir die Ebene erneut und verschieben sie wieder 1px nach rechts und 1px nach links. Das Spielchen machen wir nun insgesamt 10 mal. Danach wird es schneller, versprochen. 😉

Nachdem wir nun 10 Ebenen in unserer Gruppen haben, können wir diese markieren. Hierzu die oberste anklicken (nicht das Gruppenicon mit anklicken) und mit gedrückter Shift-Taste die unterste Ebene, sodass alle Ebenen markiert sind und klicken anschließend mit der rechten Maustaste auf eine dieser Ebenen und wählen „Auf eine Ebene reduzieren“ oder optional STRG+E und müssten nun nur noch eine Ebene haben. Diese duplizieren wir nun erneut, aber anstelle nur einen Pixel nach unten/rechts zu gehen, können wir mit gehaltener Shift-Taste über die Pfeile nun 10px auf einmal springen. In unserem Beispiel machen wir das nun 10x, sodass die Boxen bis zum Rand (unten/rechts) gehen.

Anschließend können wir diese Ebenen wieder alle zusammenfügen und die Ebene unter „Rechteck 1“ schieben. Die Gruppe kann anschließend wieder gelöscht werden. Über einen Rechtsklick auf die soeben „zusammenkopierte“ Ebene können wir wieder in Fülloptionen und dort bei Farbüberlagerung die Farbe #223140 setzen. Der aktuelle Stand sollte nun so aussehen:

Unser Rechteck hat jetzt einen Schatten

5. Schritt: Schatten des Logos

Bei dem Schatten für das Logo gehen wir zunächst einmal wie bei Schritt 4 vor, außer, dass wir den „Schatten“ diesmal mit #138b74 einfärben. Nun müsste der Stand soweit sein und wie man sieht, stimmt da irgendwas nicht so ganz.

Too Long Shadow Design 😉

Genau. Der Schatten von unserem Logo geht viel zu weit. Wir können diese Ebene so einstellen, dass sie nur an Stellen angezeigt wird, wo die Box (Rechteck 1) zu sehen ist. Das machen wir indem wir mit der rechten Maustaste auf unseren Logoschatten (W Logo Kopie 28) klicken und anschließend „Schnittmaske erstellen“ auswählen.

Und voilà, unser erstes „Long Shadow Design“ ist fertig.

Das fertige Long Shadow Design Logo

 Wer möchte kann sich die fertige PSD hier herunterladen

Download: Long-Shadow-Design-Tutorial.psd

Long Shadow Design Inspiration

Ich hoffe euch hat mein erster Artikel hier im Blog gefallen und ich würde mich über Feedback und Fragen in den Kommentaren sehr freuen. Als kleine Inspiration, was man in der Richtung alles machen kann, habe ich hier 3 sehr hübsche Beispiele: