Zurück zur Übersicht
Sie sind unscheinbare Kleinigkeiten in jedem Screendesign. Gerademal 2 Pixel hoch oder breit, können sie dennoch Akzente setzen. iTunes hat es schon lange und viele Websites haben es auch: Einkerbungen im Hintergrund, als Trennung von Boxen und Elementen, Als Navigations-Trennstriche, oder zur Unterstreichung und Vorhebung von plastischen Höhen und Tiefen. Sicherlich gibt es viele Wege, diese kleinen aber feinen Elemente herzustellen. In diesem ersten Tutorial möchte ich Euch zeigen, wie ich das mache. Viel Spass damit.
Als erstes ist es wichtig ein Gefühl für den Hintergrund, bzw. die Farben auf dem die jew. Einkerbung entsteht zu bekommen. Diese Kerben wirken am schönsten und stärksten, wenn man sie auf einem Verlauf anbringt. Dabei spielt es keine Rolle ob es sich um einen hellen oder dunklen Hintergrund handelt. Siehe Beispiel:
Zeigen möchte ich Euch das anhand eines hellen Beispiels. Legt Euch also nun eine Neue Photoshop-Bühne an (Datei – Neu/ oder Strg+N). Auf dieser Bühne zieht Ihr nun mit dem Rechteck-Werkzeug (Taste U) einfach mal eine neue Fläche auf und füllt diese per Doppelklick auf die Ebene mit einer Verlaufsüberlagerung.
Wichtig ist hierbei das die beiden Verlaufsfarben sich möglichst stark ähneln. Eine Einkerbung wird nicht als solche wirken, wenn Ihr Beispielsweise einen Rot-Grün Verlauf auswählt. In diesem Fall habe ich zwei helle, ähnliche Töne ausgewählt. (A: #f4f4f4 und B: #e8e8e8)
Eine Einkerbung besteht in diesem Fall immer nur aus 2 Elementen, die jew. nur 1Pixel hoch, bzw. breit sind. Da meine Kerbe in diesem Beispiel von oben nach unten verlaufen soll, ziehe ich mit dem Maskenwerkzeug eine 1Pixel schmale und etwa 150Pixel hohe Linie auf. Diese fülle ich als neue Ebene mit einem etwas dunkleren Farbton als B (Siehe oben #e8e8e8).
Im nächsten Schritt dubliziere ich diese neue, 1Pixel breite Linie (Rechtsklick auf Ebene – Ebene dublizieren, oder Strg+J) und positioniere diese exakt daneben. Anschließend versehe ich dieses Dublikat per Doppelklick auf die Ebene mit einer neuen Farbüberlagerung und wähle als Farbe einen etwas helleren Farbton als A (Siehe oben #f4f4f4)
Gleiches lässt sich auch problemlos horizontal erstellen. Wichtig bleibt in erster Linie immer, dass sich hinter der Einkerbung immer ein Verlauf befindet. Das kann beispielsweise aber auch ein dezenter Schatten sein (der ja im Prinzip auch nichts anderes darstellt als ein Verlauf). Dazu habe ich folgende Einstellungen für den Schlagschatten vorgenommen:
Nun müsst Ihr nur noch das selbe Spielchen wie vorhin wiederholen, allerdings nun natürlich die beiden Linien horizontal zueinander ausrichten. Ihr werdet erstaunt sein, wo man diese Elemente überall einsetzen kann. Das Prinzip funktioniert natürlich auch bei allen Runden Elementen.
