Slices können ein nützliches Hilfsmittel sein, wenn man ein Webseiten Design in Photoshop erstellt. Der Entwurf, oder Teile davon, müssen möglicher Weise als Hintergrundgrafiken in der Webseite eingebaut werden, wenn reines HTML-Styling über CSS nicht ausreicht.
Hier kommen die Slices in Photoshop zum Einsatz, die sich besonders bei komplizierten, umfangreichen und dauerhaften Projekten auszahlen.

Vereinfachtes Design für die Arbeit mit Slices.Projekt anlegen
Die Datei der Webseite muss mittels Photoshop angelegt und gestaltet werden. In der Regel kommen hierbei bereits Hilfslinien zum Einsatz, deren Abgrenzungen später für die Slices verwendet werden können. Wir gehen in unserem Beispiel einmal von einer slice.psd aus, die vereinfacht (wie rechts dargestellt) aufgebaut ist.

Hilfslinien ziehen
Um Hilfslinien zu erstellen, sofern dies noch nicht geschehen ist, können diese zum Beispiel aus den Linealen (Strg + R zum Einblenden) des Fensters heraus gezogen werden. Diese werden auf dem Projekt sinnvoll positioniert.

Die Slices (dunkelblau) sind an den zuvor erstellten Hilfslinien (hellblau) ausgerichtet und erhalten Nummern.Slices anlegen
Nun wird mit dem Slice-Werkezeug (K zum Auswählen) definiert, wo das gesamte Bild später zerschnitten werden soll. Zwar lässt sich dies auch automatisch an den Hilfslinien ausrichten, allerdings entstehen somit im Zweifel überflüssige Slices. Entsprechend der Layouts sollten alle Slices angelegt werden. In diesem Beispiel sind es insgesamt drei.

Web optimiert speichern
Nun muss die Datei über “Datei” als weboptimiert (Strg + Shift + Alt + S) gespeichert werden. In dem sich öffnenden Fester sollten noch ein paar Anpassungen vorgenommen werden. Die Slices sind auch hier sichtbar.

Slices bearbeiten
Ein Doppelklick auf ein Slice öffnet die Optionen. Hier sollte insbesondere der Name eingestellt werden, da dieser später der Dateiname des gespeicherten Bildstückes ist. Diese Einstellung ist für sämtliche Slices vorzunehmen.

Slices auswählen
Je nachdem, ob alle Slices oder nur eine Auswahl gespeichert werden sollen bietet es sich an, die zu speichernden Slices zu selektieren. Dazu werden die gewünschten Slices bei gedrückter Shift-Taste der Reihe nach angeklickt. Ein oranger Rahmen bestätigt die Auswahl der Slices.

Beim optimierten Speichern erhalten die Slices zuvor noch eindeutige Namen. Die orange Selektion ist ebenfalls zu sehen.

Slices speichern
Anschließend können Komprimierungseinstellungen vorgenommen und die Slices über “speichern” im gewählten Format gespeichert werden. Wieder öffnet sich ein Fenster, in dem der Pfad gewählt (es wird automatisch ein Unterordner “Bilder” angelegt) und die passende Einstellung der zu speichernden Slices (ganz unten) gewählt werden muss.
Als Dateiname kann hier der Standard, in unserem Fall slice.jpg, beibehalten werden, da die Slices die zuvor eingestellte Benennung bekommen.

Nachdem die Dateien gespeichert wurden ist es wichtig, die Photoshop Datei erneut zu speichern. So bleiben die Einstellungen erhalten und im Falle von Änderungen können die zerschnittenen Teile schnell und unkompliziert erneut gespeichert werden.

keine Kommentare zu " Photoshop Slices anlegen, bearbeiten und speichern "

Kommentieren

  Name (Pflichtfeld)

  E-Mail (Pflichtfeld)

  Webseite

Beachte: Die Komentare erscheinen nicht direkt. Sie werden durch den Moderator
freigeschaltet.