Der Trend der Long Shadow Icons neigt sich nun ehrlich gesagt langsam dem Ende, oder? Wir begegnen der beliebten Ausschmückung nur noch selten und das hat auch einen guten Grund: Überdrüssigkeit. Die Medienlandschaft hat diese Technik zu Haufe verwendet und ihre magische Anziehungskraft ausgeschöpft, doch auch heutzutage kann der Effekt durchaus freundlicher wirken als eine kahle Darstellung von Icons.

Benötigte Mittel:
- Bildbearbeitungsprogramm (Photoshop, Illustrator, Gimp, etc.)

Profilbilder mit Initialen

Was die Methode besonders gut kann, ist dass Fokusieren und die daraus folgende Hervorherbung einer bestimmten Sache - zum Beispiel einem Icon. In diesem Tutorial wollen wir euch die Mittel und Schritte zeigen um einen solchen Effekt zu erzielen. Hier müssen nun die Initialen meines Names her halten, die ultimativ für eine Reihe an Profilbilder für eine in sich geschlossene Community gedacht ist, ein einheitlicher Stil ist also zu empfehlen.

Unser Dokument

1. Wir beginnen mit der Erstellung eines Dokuments. Die Größe, Auflösung und ähnliche Werte sind dabei irrelevant und vom Verwendungszweck abhängig. In meinem Fall verwende ich eine 400 x 400 Pixel Grafik mit einer Auflösung von 72 um es für alle gängigen Größen eines Profilbilds vorliegen zu haben.

2. Was alle Long Shadow Bilder gemeinsam haben sind anmutende Farben, meist sogar eher entsättigte, mitteldunkle Farbtöne. Einer meiner Lieblingsfarben ist rot, entsprechend färbe ich den Hintergrund für mein baldiges Profilbild einen solchen Rottone (#8c2323) und erstelle eine Füllebene mit dieser Farbe.

Ebene » Neue Füllebene » Farbe

Das ist eine von unzähligen Methoden die Fläche vollständig zu füllen. Wer lieber ein großes, farbiges Quadrat zieht, die Ebene mit der Vordergrundfarbe färbt, den Fülleimer verwendet oder die Ebene aufwändig einpinselt ist jedem selbst überlassen und Geschmacks-, wie auch Gewohnheitssache.

Die Grafik selbst wird erstellt

3. Nun kommen die Initialen, bzw. deine Auswahl eines Icons oder einer beliebigen anderen Grafik ins Spiel. Wir wählen also in diesem Fall das Textwerkzeug, dass durch ein [T] gekennzeichnet ist und gleichzeitig den Shortcut darstellt, und klicken in die Zeichenfläche. L und D werden in Kleinbuchstaben eingetippt, zentriert, von der Größe harmonisch zum Gesamtverhältnis skaliert und danach weiß eingefärbt. Das könnte ungefähr so aussehen:

Kommen wir zum Schatten

4. Unterhalb der Text- / Iconebene erstellen wir eine neue Ebene. Nun empfehle ich mit [P] das Zeichenstift-Werkzeug anzuwählen und vom unten linken Punkt der Grafik einen 45° diagonalen Pfad zu ziehen. (Umschalt gedrückt halten um einen genauen 45° Winkel zu erhalten) s. Bild 3. Achte darauf, dass in der oberen Menüleiste "Form" statt "Pfad" angewählt ist, denn mit der Form können wir in Zukunft besser arbeiten. Wir fahren fort indem wir den Pfad erweitern, Ankerpunkt für Ankerpunkt. Erst die rechte untere Ecke, danach gerade nach oben, von da aus diagonal zum höchsten Punkt der rechten Seite der Grafik. Es müssen nicht alle Ankerpunkt von Anfang an perfekt sein, mit dem "Direktauswahlwerkzeug", dem weißen Mauszeiger in der Werkzeugleiste, können wir Ankerpunkt einzeln bewegen.

Wenn das Bild bis dato ungefähr so aussieht wie auf dem 4. Bild, habt ihr alles richtig gemacht! Dass die Farbe Schwarz bereits als Füllfarbe für den Pfad dient ist dabei Zufall und kann auch im Laufe des Tutorials jederzeit angepasst werden. Da kommen wir auch noch drauf zu sprechen.

Die Grafik wird nach dieser Methode nachgezeichnet, bedenke jedoch, dass Senkrechten und Abstände ebenfalls mit 45° Diagonalen überbrückt werden. Stellen, die von der Grafik selbst überdeckt werden, bedürfen keiner genauen Befolgung dieser Regel, s. Bild 5

Optimierungsbedarf?

5. Ist der eigentliche Schatten gezogen, können wir anfangen ihn zu optimieren. Dazu zählt für mich zum einen die Deckkraft abzusenken und zum anderen einen leichten Verlauf reinzubringen (je nach Geschmack) um etwas "Realismus" zu "simulieren". Die Deckkraft kann, wenn wir die Ebene ausgewählt haben, durch einen Klick auf einer der Zahlen auf der Tastatur verändert werden: [1] wird die Deckkraft der Ebene auf 10% herabsetzen, [2] auf 20% und so weiter. Ein schneller Klick auf zwei Zahlen kombiniert die beiden Werte, also [5] und [9] ergeben eine Deckkraft von 59%. Wir wählen mit [G] das Verlaufswerkzeug aus, nutzen einen Schwarz / Weiß Verlauf wie in diesem Screenshot und ziehen ihn von der oberen linken Ecke in die unten rechts. Dabei sollte Weiß beim Ziehen des Verlaufs nach oben links zeigen, während Schwarz unten rechts ist.

Danach ist das Grundkonzept fertig und je nach Wunsch kann das Bild so abgespeichert und hochgeladen werden oder weiter bearbeitet werden, zum Beispiel eine Korrektur an den Farben.

Hinweis für folgende Icons / Initialen

6. Das Gute an dieser Technik, ist dass wir in der Photoshop-Datei weiterhin mit der Schrift, dem Schatten und den Farben arbeiten können. Die Form des Schattens kann bei wechselnden Grafiken angepasst werden, ohne dass Rücksicht auf die Darstellung des Schattens, also den Verlauf und die Deckkraft, genommen werden muss. Im folgenden Screenshot zeige ich noch eine Variante mit derselben Photoshop Datei, in der Anpassungen nun schnell vonstatten gehen. Die Anpassungen haben keine 2 Minuten gedauert - also speichert unbedingt die .PSD Datei und achtet beim Korrigieren der Schatten darauf, dass jede Winkelung genau 45° beträgt.