Workshops

Photoshop CC Generator – Automatisiertes Speichern

Photoshop CC Generator – Automatisiertes Speichern 10. Februar 2016Leave a comment

Ich habe jahrelang als Diplom-Designer mit den Schwerpunkten Web-, UX- und Icondesign gearbeitet. Daneben war ich, als "Adobe Certified Expert Photoshop", Fachautor und Dozent für Digitale Bildbearbeitung und Webdesign. Derzeit mache ich ein Zweitstudium um einen beruflichen Kurswechsel zum Grundschullehrer vorzunehmen. Die Begeisterung für Design und Technik ist jedoch ungetrübt. Deswegen lebt mein Blog (wieder) weiter. :)

Teaserbild Workshop "Photoshop Generator". Spielkarten auf grün gestreiftem Hintergrund.
Mit dem Generator lassen sich ab Photoshop CC die Ebenen überwachen und automatisiert in Dateien exportieren. Wie das geht, erfährst Du hier.
Was Du schon wissen solltest:

  • Grundlagenwissen Photoshop
  • Arbeit mit Einstellungsebenen

Was Du benötigst:

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.

Voreinstellungs-Dialog für den Generator
In den Voreinstellungen wird geprüft, ob der Generator auch aktiviert ist.

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.

Ebenenpalette in Photoshop und Finderfenster mit exportierter Datei.
Die erste Ebene wurde erfolgreich automatisch exportiert.
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.

Spielkarte im Photoshop-Dokument und Ebenenstruktur in der Ebenenpalette.
Die Kartenelemente werden in Ordnern zusammengefasst.

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)

Screenshot der Ebenenpalette mit markierten, zu benennenden Ebenen
Deklaration weiterer Ebenen.

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

Ebenenpalette mit notierter Größenangabe am Ebenennamen.
Mit Größenangaben in der Ebenenbezeichnung wird beim Export eine entsprechende Skalierung vorgenommen.

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.

Darstellungsfehler: Grüne, artefakthafte Blockbildung.
Fehldarstellung beim Export von Einstellungsebenen.

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

Ebenendialog mit Opotion "In Smartobjekt konvertieren".
Mit einem kleinen Zwischenschritt kann die Problematik mit Einstellungsebenen behoben werden.

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Pin It on Pinterest

Share This