Vermehrt sieht man auf 'modernen' Websites hauchdünne Schattierungen die zwischen Paragraphen o.ä. hauptsächlich als Trennlinien eingesetzt werden. (Bei Collylogic ist es z.B. im Header nett anzusehen)
Zu den Enden wird die Schattenlinie immer dünner bis sie schliesslich ganz 'im Hintergrund verschwindet'.
Dieses kleine und ganz einfache Tutorial zeigt wie man eine solche Schattenlinie in Photoshop erzeugt.
Die Schritte:
Werkzeuge
Auswahlwerkzeug - [M]
Zeichenstift / Pen-Tool - [P]- Filter > Bewegungsunschärfe / Motion Blur
Einrichten der Zeichenfläche / Canvas Setup
Um vernünftig etwas in Photshop zu produzieren braucht man eine Arbeitsfäche und Hilfslinien.
Da ich eine Trennlinie für meine Blogartikel brauche habe ich die Breite des Contentbereichs abzüglich 50 Pixel gewählt (=350px).
Die Höhe soll zum Arbeiten auch noch übersichtlich sein, daher sind 350x20px für die Abmessungen der Arbeitsfläche eine gute Wahl.
Insgesamt benötigen wir noch 4 Hilfslinien (hier in 3 Schritten):
- vertikal, zentriert
Eine vertikale Hilfslinie erstellen die man vom linken Lineal bis zur Mitte des Dokuments zieht (automatischer Snap-In). - vertikal +30px/-30px von der Mitte
Auswahl [M] von der zentralen Hilfslinie mit gedrückter ALT-Taste auf 120px Breite (ca. 10px Höhe) ziehen.
Danach zieht man zwei vertikale Hilfslinien an den linken und rechten Rand der Auswahl bis sie 'einrasten' - horizontal, unterer Rand
Die letzte Hilfsline wird horizontal am unteren Rand der Auswahl platziert.
Die Arbeitsfläche sollte dann in etwa so aussehen (Screenshots bei 300% Zoom in Photoshop):
Zeichnen
Eigentlich kann man nicht von 'Zeichnen' sprechen da es sich nur um vier Mausklicks handelt, dafür aber mit dem Zeichenstift [P]. Dazu benutzen wir das Hilfslinien-Konstrukt.
- Klick links unten im Hilfslinien-Kreuz
- Klick rechts unten im Hilfslinien-Kreuz
- Etwas höher auf der mittleren Hilfslinie eine Bezier-Kurve ziehen. Dazu mit gedrücktem Zeichenwerkzeug circa um 30 Pixel mit gedrückter Shift-Taste nach links ziehen.
Dieser Punkt legt die Schattenform und -tiefe fest. Hier kann man natürlich nach eigenem Ermessen den Abstand zur unteren Kante wählen. - Nun noch erneut auf den Anfangspunkt links unten klicken und die Vektormaske ist fertig. Die Füllfarbe sollte schwarz gewählt werden (Hier grau zur Verdeutlichung der Punkte).
Blurring
Nun duplizieren wir die Ebene, um später eventuell noch Änderungen an der Form vorzunehmen. Die Original-Ebene kann ausgeblendet werden.
Für den nächsten Schritt muss die Ebene mit der Vektormaske geraster werden. Dazu im Ebenenmanager Rechtsklick auf die kopierte Ebene und "Ebene rastern" wählen.
Nun wenden wir einen Weichzeichnungsfilter an. Konkreter: Bewegungsunschärfe. Für die Beispielform mit 60px Breite und einer gesamten Bildbreite von 350px sollte ein Wert von 300 etwa das gewünschte Ergebnis erzielen.
Finishing
Weniger ist mehr.
Daher sollte die Transparenz der Schattenebene auf ungefähr 50 Prozent und der Ebenenmodus auf Multiplizieren gestellt werden, damit der Untergrund auch auf den Schatten wirkt ( Auch wenn man's kaum sieht ).
Fertig nun fehlt nur noch eine Anwendung ( Beispiel siehe Teaser ).
CSS-Beispielanwendung
In Webseiten könnte man die Schattenlinie zum Beispiel als Hintergrund eines
-Tags verwenden:
-
div.hr {
-
background: url(hairshadow.gif) no-repeat center;
-
padding: 5px;
-
height: 10px;
-
}
-
hr { display: none; }
Die horizontal rule (
) sollte man in ein
div einbetten, da eine Hintergrundgrafik direkt im hr-Tag in berüchtigten Browsern einen Rahmen um das Element zeigt.
RT @dertimbo Hair Shadows mit Photoshop
Posted in Design, Tags:photoshop, shadow, thin, tutorial
Possibly Related Entries
Who is this?
freshlabs journal is the bi-lingual weblog and digital playground of Tim Isenheim, designer and webdeveloper from Hamburg, Germany. More →
