#

TUTORIAL: EINKERBUNGEN IM SCREENDESIGN

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:

Beispiel einer Einkerbung im Screendesign

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.

Verlauf Einkerbung im Screendesign

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).

Farbe auswaehlen Einkerbung im Screendesign

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)

Farbe auswählen Einkerbung im Screendesign

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:

Schlagschatten Einkerbung im Screendesign

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.

Fertig Einkerbung im Screendesign

Und how much is the fish?

Finden wir es heraus! Ob Einsteiger oder erfahrener Webdesigner, es gibt für jedes Budget die passende Lösung:

  • Keine Angaben
  • 1.500 - 2.500€
  • 2.500 - 4.000€
  • 4.000 - 6.000€
  • 6.000 - 8.000€
  • über 10.000€