Photoshop Tutorial.
Erstellen einzelner Grafiken mit dem Slice-Werkzeug, für ein Web-Layout welches einen umlaufenden Schatten besitzt.

Das Tutorial dient zur Ergänzung der Seite Css Schatten-Layout, wo detailiert auf das benötigte Css und HTML eingegangen wird, um ein Web-Layout mit umlaufendem Schatten zu erstellen.

Grafik "top" anschauen
Grafik "bottom" anschauen
Grafik "container" anschauen

Schritt 1:
Erstellen einer neuen Datei.
Breite 982px, Höhe 600px.
Die Hintergrundebene in eine neue Ebene umwandeln und mit der Füllfarbe #ffb96e füllen.

Schritt 2:
Die Lineale müßen auf der Arbeitsfläche eingeblendet sein und als Maßeinheit ist Pixel eingestellt.
Mit dem Lineal-Werkzeug an allen vier geraden einen 10px breiten Rand einstellen.

Schritt 3:
Eine neue Ebene erstellen.
Mit dem Rechteckwerkzeug, in das zuvor mit den Linealen erstellte Rechteck, eine Auswahl erstellen.
Diese Auswahl mit der Farbe #ffffff füllen.
Die Auswahl über STRD+D aufheben.

Schritt 4:
Die Ebene mit dem weißen Rechteck ist Aktiv:
Im Ebenenmanager einen Ebenenstil auf das Rechteck anwenden, mit den Einstellungen:
"Schlagschatten-Deckkraft 75%-Abstand 0px-Überfüllen 0%-Größe 9px" restliche Einstellungen belassen wie sie sind.

schlagschatten einstellen

Schritt 5:
Die äußeren Ränder mit den Linealen auf 20px erweitern.
Nun mit dem Slice-Werkzeug die Grafik zerschneiden.
Von oben: Vertikal 20px und Horizontal 982px.
Von unten: Vertikal 20px und Horizontal 982px.
Wenn Sie "Ansicht-Ausrichten an-Slices" aktiviert haben, richten sich die Slices automatisch an den Linealen aus.
Für die Letzte Grafik reicht ein Slice von 982x1px vollkommen aus, da die Grafik beim Einsatz in einem Web-Layout gekachelt wird.
Klicken Sie mit der rechten Maustaste auf die erstellten Slices und vergeben Sie in dem sich öffnenden Popup aussagekräftige Namen für die drei Grafiken (bg_top, bg_bottom, bg_content).
Als letztes die Grafiken für "Web und Geräte" als JPG, PNG oder GIF speichern.

slicen