- Grundlagenwissen Photoshop
- Arbeit mit Einstellungsebenen
Was Du benötigst:
- Bildvorlagen für den Workshop
- Photoshop CC (Abonnement)
Layoutelemente aus Photoshop zu exportieren ist ein Zeitfresser par excellence, den die meisten Webdesigner nur zu gut kennen werden. Egal ob es sich um ein Screendesign für eine Website, Visuals für ein soziales Netzwerk, oder Icons in verschiedener Größe handelt, immer müssen einzelne Ebenen, mitunter auch mehrfach, als separate Dateien exportiert werden.
Die Lösung, die Adobe mit dem Update auf Photoshop Version 14.1 anbietet, nennt sich „ Generator“ und stellt dem Nutzer einen automatisierten Prozess zur Seite, der speziell ausgezeichnete Ebenen im Hintergrund permanent speichert (Assets). Wohlgemerkt: Einzelne Ebenen und nicht das gesamte Dokument.
Grundlegende Funktionsweise des Generators
Damit Photoshop weiß, welche Ebenen es überwachen und speichern soll, erhalten deren Namen ergänzende „Parameter“, die in Ihrer Grundform Dateiendungen wie .jpg oder .png sind. Erkennt Photoshop mindestens einen gültigen Parameter, erstellt es einen Asset-Ordner auf der Festplatte und legt dort fortan die einzelnen Ebenen als Bilddateien ab.
In der Regel befindet sich der Ordner an der Stelle, an der auch das PSD-Dokument liegt. Wurde das Dokument bislang noch nicht gespeichert, so wird der Asset-Ordner auf dem Desktop/Schreibtisch abgelegt.
Praxisbeispiel
Begeben wir uns direkt in ein kleines Praxisbeispiel für eine fiktive Microsite, an dem ich den grundlegenden Ablauf und einige Fallstricke der Assets näher bringen möchte. Detaillierte Informationen zu den verschiedenen Parametern für noch mehr Flexibilität findet ihr am Ende des Artikels in den Infoboxen.
Vorarbeit
Als Erstes wird die Datei „assets.psd“ geöffnet. Alle Ebenen und Ordner darin besitzen noch reguläre Namen, ohne Besonderheiten. Diese wirst Du gleich ergänzen. Zuvor gilt es jedoch zwei Punkte zu prüfen:
Über Datei > Generieren > Bild-Assets aktivierst Du die Wunschfunktion. Standardmässig ist sie in jedem neuen Dokument deaktiviert. Sollte die Funktion ausgegraut sein, prüfe bitte, ob unter Voreinstellungen > Zusatzmodule > Generator aktivieren angehakt ist. An dieser Stelle kann die Asset-Funktionalität übrigens auch komplett ausgeschaltet werden.
Testlauf
Als Nächstes gibst Du dem Dokument den Startschuss. Dazu erhält die unterste Ebene „hintergrundrapport“ den Suffix .png8 (1). Wenn Du direkt daraufhin einen Blick in den Ordner mit der Arbeitsdatei wirfst, ist dort bereits ein neuer Ordner mit der Bezeichnung „dokumentname-assets“ entstanden, in dem sich die Datei „hintergrundrapport.png“ befindet.
Verändere nun testweise den Inhalt der Hintergrundebene (Rechtsklick auf die Ebene in der Ebenenpalette > Inhalt Bearbeiten) und wirf dann erneut einen Blick in den Assets-Ordner. Photoshop hat die Änderungen direkt in der exportierten Datei verändert.
Tipp bei stockender Synchronisierung
Sollte die automatische Aktualisierung nicht funktionieren – diese Erfahrung habe ich einmal bei einer noch ungespeicherten Datei gemacht, speichere die Datei einfach ab. Spätestens jetzt sollte die automatische Aktualisierung anstandslos funktionieren.
Ebenen benennen
Das eigentliche Vorgehen für den erfolgreichen Export ist ein Kinderspiel: Entweder wird eine einzelne Ebene mit entsprechender Endung, oder aber der gesamte Inhalt eines Ebenenordners als eigene Datei gespeichert.
In jedem der Kartenordner (Herz, Kreuz,…) bilden die obersten drei Ebenen die Komposition für den Kartenstapel (Symbol, vordere und hintere Karte). Fasse diese drei Ebenen jeweils in einem Ebenenordner zusammen und gib ihm einen prägnanten Namen wie karte_herz.png (2), karte_pik.png, etc. Im Handumdrehen erscheinen die Grafiken im Assets-Ordner.
Benenne zudem den obersten Ordner „Schriftzug (Titel)“ in „logotype.png um (3) und zu guter Letzt eine der vier Ebenen „Trennlinie“ (jeweils in einem Karten-Ordner) in „trennlinie.png“. (4)
Somit liegen alle Basisdateien gesammelt in Ihrem Assets-Ordner. Soweit unkompliziert und brauchbar, aber es geht noch einiges mehr. 🙂
Größen-Varianten
Um von jeder bisher exportierten Datei eine doppelt so große HiRes-Kopie für Retina- und andere hochauflösende Displays zu erhalten, notierst Du den Ebenennamen einfach ein zweites Mal mit einem Komma getrennt neben den bereits bestehenden, mit einem vorangestellten „200%“. Wichtig ist, dass Du zudem noch die Ebenenbezeichnung, also zugleich den auszugebenden Dateinamen, anpasst. Sind beide Namen identisch, exportiert Photoshop nämlich nur eine Datei. Am Beispiel der Trennlinie könnte die Ebenenbezeichnung wie folgt lauten:
„200% trennlinie@2x.png, trennlinie.png“ (5) (anstatt „200% trennlinie.png, trennlinie.png„)
Ergänze jede der in Schritt 3 ausgezeichneten Ebenen auf diese Weise mit einer auf 200% vergrößerten Kopie. Natürlich bist Du nicht nur auf die Vergrößerung auf 200% festgelegt. Die Infobox „Größen-Parameter“ am Ende des Artikels zeigt weitere vielfältige Optionen und Tipps auf.
Problemfall: Füllebenen
Als letztes widmen wir uns einem eventuellen Problemfall, der sich bei der Arbeit mit Einstellungsebenen ergibt.
Im Ebenenordner namens „Hintergrund mit Schatten“ befindet sich einerseits ein Smartobjekt mit den Hintergrundstreifen, als auch eine Füllebene mit einem Verlauf. Naheliegend ist, es, an dieser Stelle den Ordner wie gewohnt als .png oder auch .gif zu benennen. In der Praxis entstehen jedoch beim Export von Füllebenen mitunter hässliche Artefakte und unsaubere Kanten wenn zugleich eine Größenanpassung stattfindet.
Um diesen Fehler zu umgehen, konvertierst Du den gesamten Ordner per Rechtsklick > In Smartobjekt konvertieren in ein Smartobjekt (6). Abschließend benennst Du diesen Ordner als „hintergrund_schatten.png8“ (7) und gibst ihm ebenfalls ein auf 200% vergrößertes Duplikat mit auf dem Weg (siehe Schritt 4).
Somit sind alle Grafiken exportiert und könnten in eine Website eingebunden werden.
Asset-Parameter und allgemeine Hinweise
In den nachstehenden Boxen findest Du die verschiedenen Parameter, die sich Ebenennamen zuweisen lassen. Größenparameter funktionieren generisch für jedes Dateiformat, formatspezifische Parameter habe ich getrennt in separaten Boxen klar aufgelistet. Abschließend findest Du noch einige allgemeine Tipps zum Umgang mit dem Generator.
JPEG-Parameter
Um die Qualität (Komprimierung) des Exports zu definieren, wird ein Suffix direkt an den Ebenennamen angehängt.
- Typ 1: Ebene.jpg6. Qualitätsangabe auf einer Skala von 1–10
- Typ 2: Ebene.jpg60%. Qualitätsangabe auf einer Skala von 1–100%.
Hinweis: Die prozentualen Angaben entsprechen nicht jenen, aus dem Dialog „Für Web und Geräte speichern“. 60% Qualität beim Asset-Export entsprechen lediglich 20% des Web-Dialogs. Wird garkeine Qualität angegeben, speichert Photoshop mit einem Standardwert von 90% Asset-Komprimierung.
Tipp: Speichern Sie JPGs immer in 100% Qualität und komprimieren Sie diese danach mit Tools wie JPEG Mini.
[/et_pb_text][et_pb_text admin_label=“Hinweisbox“ background_layout=“light“ text_orientation=“left“ background_color=“#fdfafe“ use_border_color=“on“ border_color=“#f4e7fa“ border_style=“solid“ custom_margin=“0px|0px|0px|0px“ saved_tabs=“all“ module_class=“hinweisbox“ module_id=“hinweisbox_mitte“ custom_padding=“10px|10px|10px|10px“]
PNG- und GIF-Parameter
- PNG8: Ebene.png8. Speichert als PNG mit 256 Farben und einfacher Transparenz
- PNG24: Ebene.png24. Speichert als PNG mit 65.536 Farben ohne Transparenz
- PNG32: Ebene.png32. Speichert als PNG mit 65.536 Farben mit 256-stufiger Transparenz
- GIF: Gifs werden grundsätzlich mit einer 1Bit-Transparenz exportiert.
Hinweis: Ohne Angabe eines PNG-Typs speichert Photoshop als PNG32 ab.
Allgemeine Hinweise
- Zur Trennung mehrerer Asset-Varianten kann anstatt „,“ auch ein „+“ verwendet werden.
- Bildinhalte, die über den Rand der Arbeitsfläche hinaus gehen, werden mit exportiert. Ist das nicht gewünscht, in einer Kopie der Arbeitsdatei auf die Arbeitsfläche beschneiden und die umgebenden Pixel löschen.
- Größen-, Qualitäts- und Format-Parameter können beliebig kombiniert werden. z.B. „50% Ebene.jpg, 300% Ebene.jpg6, 500 x 200 Ebene.png24“.
- Ein erneutes Speichern eines Assets erfolgt nur nach Umbenennung der Ebene bzw. der Anpassung des Ebeneninhalts.
- Dateien, deren zugehörige Ebenen gelöscht werden, verschwinden ebenfalls von der Festplatte.
- Sortieren in Ebenenordnern ist nach wie vor problemlos möglich. Übergeordnete Ordner die nur zur Organisation dienen dürfen jedoch nicht mit Asset-Parametern benannt werden.
Slicy und Co werden obsolet – für Abonnenten
Die Photoshop-Assets, so nützlich sie unbestritten sind, stellen keine bahnbrechende Neuheit dar. Das Photoshop Plug-In PNGHat oder auch Slicy für den Mac (ehemals Layer Cake) bieten beispielsweise schon lange einen ähnliche Lösungsansätze, um den Dateiexport zu beschleunigen.
Werden Export-Tools von Fremdanbietern nun obsolet? Auf den ersten Blick: Ja.
Auf den zweiten Blick mag sich der informierte Leser allerdings des neuen und ausschließlichen Abo-Modells seitens Adobe, der Creative Cloud, erinnern: Neue Features kommen nur noch den monatlich zahlenden Kunden zu gute – somit bleiben auch die Assets (vorerst) ein Exklusiv-Feature. Alle Abo-Verweigerer und Nutzer älterer Photoshop-Versionen finden in PNGHat und Slicy also nach wie vor großartige Alternativen, die sich mit überschaubaren Investition schnell wieder hineinwirtschaftet.
Was dich zu diesem Thema interessieren könnte
- JPEG Mini: Sehr gute Komprimierung von JPEGs
- PNG Hat: Plug-In für automatisierter Export aus Photoshop.
- Slicy: Stand-Alone App zum Export von Ebene aus einem PSD-Dokument.
