Zum Inhalt springen
Der Guide für ein smartes Leben.
Variable Bilder

Photoshop: Bildbearbeitung und Automatisierung

Verschiedene Versionen derselben Grafik spart im Webdesign viel Zeit. Der Workshop zeigt, wie Sie dies mithilfe von Photoshop-Variablen umsetzen.

Autoren: Redaktion pcmagazin und Anna Kobylinska • 22.7.2009 • ca. 2:20 Min

Bildbearbeitung und Automatisierung
Bildbearbeitung und Automatisierung
© Archiv

Photoshop bringt seit etlichen Versionen eingebaute Unterstützung für Variable und somit die Fähigkeit, Inhalte auf der Basis einer Vorlagendatei aus einer externen Datenquelle automatisch zusammenzustellen.Der Einsatz von Variablen erlaubt es, die Erstellung von Website-Projekten zu automatis...

Photoshop bringt seit etlichen Versionen eingebaute Unterstützung für Variable und somit die Fähigkeit, Inhalte auf der Basis einer Vorlagendatei aus einer externen Datenquelle automatisch zusammenzustellen.Der Einsatz von Variablen erlaubt es, die Erstellung von Website-Projekten zu automatisieren. Eine typische Aufgabe, die durch den Einsatz vonVariablen vereinfacht werden kann, ist das Erstellen von Navigationselementen einer Webseite.

Zu viele Schaltflächen

Typografische Einschränkungen des Internets lassen sich umgehen, indem die betreffenden Texte als Bilder statt als HTML-Text eingebunden werden.

Ein nicht zu unterschätzender Nachteil dieser Arbeitsweise besteht darin, dass jede Änderung des Inhalts einen umständlichen Weg zurück zu Photoshop bedeutet und die Erstellung der verschiedenen Versionen einer Datei gehörig Zeit kostet.

Beim Einbinden der einzelnen Grafiken in die Webseite kann man in Adobe Dreamweaver CS4 dank sogenannter Smart Objects jeweils die Photoshop-Originaldatei verwenden und somit bereits Zeit sparen und den Aufwand senken. Für jede Version der Grafik wird in der Praxis eine separate Ausgangsdatei verwendet.

Dank des Einsatzes von Variablen kann man die umständliche Erstellung der einzelnen Versionen der Grafik weitgehend automatisieren.

Der Produktivitätsvorteil wird besonders deutlich, wenn man bedenkt, dass sich damit die gesamte Navigationsumgebung einer Website unter Verwendung einer einzigen Musterschaltfläche erstellen lässt, falls gewünscht sogar mehrsprachig. Es entfällt hierbei die Notwendigkeit, sich durch diverse Bildebenen duchzuklicken und ebenso das Risiko, dabei ein anderes Element versehentlich zu ändern.

Externe Datenquelle

Als externe Datenquelle kann eine tabulatorgetrennte TXT- oder CSV-Datei verwendet werden. Die Anzahl der Variablennamen in der Datenquelle und die Anzahl aktivierter Variablen in der PSD-Datei müssen genau übereinstimmen.Dabei müssen die Namen der Variablen in der Textdatei den Namen der Variablen in der PSD-Daten entsprechen, nicht jedoch den Namen der einzelnen Ebenen. Bilddateien, die Ebenen-Platzhalter der Mustervorlage ersetzen sollen, sollten sich in demselben Verzeichnis wie die Vorlage befinden, damit Photoshop sie garantiert findet.

Bildbearbeitung und Automatisierung
Zuweisen von Ebenen zu Variablen in Photoshop CS4.
© Archiv

Einschränkungen, Workarounds

Beim automatischen Ersetzen der Pixel einer Ebene werden Ebeneneffekte beibehalten. Effekte, die auf eine Platzhalter-Ebene in der PSD-Vorlagendatei angewendet wurden, werden daher nach dem Ersetzen der Pixel eventuell vorhandene Effekte der Ersatzgrafik überlagern.

Das führt bei der großen Anzahl möglicher Kombinationen praktisch zu unvorhersehbaren Resultaten. Es ist daher generell empfehlenswert, Ebeneneffekte entweder auf die Vorlagendatei oder auf die Ersatzgrafik anzuwenden, nicht jedoch auf beides.

Bei Textebenen stellt sich das Problem nicht, denn eine externe Datenquelle kann die Formatierung von Text nicht erfassen. Möchte man die Textformatierung durch Variablen verändern, muss man jeweils eine zusätzliche Textebene erstellen und die Sichtbarkeit der beiden betreffenden Ebenen mit einer Sichtbarkeitsvariablen umschalten.

Leider unterstützt Photoshop keine Variablen, mit deren Hilfe die Position von Designelementen auf der Leinwand beeinflusst werden könnte. Diese Einschränkung erschwert das Zusammenstellen von Textabschnitten, deren Zeichenlänge von Datensatz zu Datensatz variiert. Auch hier muss man auf die Sichtbarkeitsvariable als Workaround ausweichen.

Mit dem Befehl Datensatz anwenden aus dem Menü Bild können Sie die Platzhalter der PSD-Datei mit den Variablenwerten aus einem bestimmten Datensatz füllen.

Musterdokument, Datenquelle

Photoshop unterstützt drei Typen von Variablen: Textersetzung, Pixelersetzung und Sichtbarkeit. Mithilfe einer Variablen vom Typ Textersetzung können Sie den Inhalt einer Textebene automatisch austauschen lassen. So lässt sich zum Beispiel die Beschriftung einer Schaltfläche verändern, wenn mehrere Versionen benötigt werden.