Variable Bilder

Teil 2: Photoshop: Bildbearbeitung und Automatisierung

Mittels einer Variablen vom Typ Pixelersetzung werden nach demselben Konzept pixelbasierte Elemente der Grafik ebenenweise durch Bildelemente aus externen Datenquellen ausgetauscht.

Die Sichtbarkeitsvariable ermöglicht schließlich das Ein- und Ausblenden beliebiger Ebenen der Ursprungsgrafik, sowohl Textinhalte als auch Bilder.

Um Variablen in Photoshop einzusetzen, benötigen Sie ein PSD-Bild und eine externe Datenquelle, die Sie mit dem Musterdokument mithilfe von Variablendefinitionen verbinden. Wie Sie dazu vorgehen, zeigen wir im Folgenden Schritt für Schritt.

1. PSD-Vorlagendatei erstellen

Erstellen Sie eine PSD-Grafik mit Platzhaltern, die die einzelnen Inhaltselemente repräsentieren. Um mit Variablen Textinhalte in diese Grafik einspeisen zu können, benötigen Sie eine Textebene mit beliebigem Inhalt und der gewünschten Formatierung.

Um ein pixelbasiertes Designelement auszutauschen, benötigen Sie eine gewöhnliche Photoshop-Ebene als Platzhalter, jedoch nicht die Hintergrundebene.

2. Eine Variable definieren

Mit dem Befehl Bild > Variablen > Definieren... öffnet man ein Dialogfenster, in dem sowohl Variablen als auch Datensätze editiert werden können. Wählen Sie aus dem ersten Menü im oberen Bereich des Dialogs den Eintrag Definieren. Erst wenn die benötigten Variablen existieren, können Sie in die PSD-Vorlagendatei die benötigten Datensätze einspeisen.

Bildbearbeitung und Automatisierung

© Archiv

In Photoshop besteht die Möglichkeit, bei einer Variablen vom Typ Pixelersetzung die Methode der Einpassung der Ersatzgrafik zu wählen.

Das Erstellen von Variablen beinhaltet die Zuweisung von Variablennamen zu existierenden Ebenen der PSD-Vorlage. Nachdem Sie die betreffende Ebene gewählt haben, können Sie den gewünschten Variablentyp aktivieren.

Bei einer Textebene werden Ihnen die Variablentypen Sichtbarkeit und Textersetzung angeboten. Handelt es sich bei dem Platzhalter um eine gewöhnliche Pixelebene, kommen als Variablentypen Sichtbarkeit und Pixelersetzung in Frage.

Bei einer Variablen vom Typ Pixelersetzung können Sie zusätzlich festlegen, wie die Bildgröße an die vorgegebenen Dimensionen der Ebene angepasst werden, wenn die Bildmaße nicht der Vorlage entsprechen (Einpassen, Fläche füllen, Wie vorliegend oder Entsprechen).

Wiederholen Sie den Vorgang für jeden Platzhalter der PSD-Vorlage. Danach schließen Sie das Dialogfenster mit OK, damit die Variableneinstellungen übernommen werden.

Inhalte, die mittels Variablen eingefügt werden sollen, kann Photoshop aus einer tabulatorgetrennten Textdatei beziehen. Die Werte der einzelnen Variablen werden hierbei in Spalten angeordnet. Ein Datensatz entspricht einer Zeile.

Die Option Erste Spalte für Datensatznamen verwenden erlaubt es Ihnen, eine Datenquelle zu importieren, die über eine Tabellenüberschrift verfügt. Durch das Deaktivieren der Option Vorhandene Datensätze ersetzen werden die neuen Datensätze an bestehende Datensätze angefügt.

3. Datensätze wählen

Zum Definieren der Datensätze verwenden Sie den Befehl Bild > Variablen > Definieren... und wählen aus dem obersten Menü des folgenden Dialogfensters diesmal den Eintrag Datensätze.

Sie können hier eine von zwei Vorgehensweisen befolgen: entweder die benötigten Datensätze direkt in dem Dialog eintragen oder aus einer externen Datenquelle beziehen. Um die benötigten Datensätze aus einer externen Datei zu beziehen, verwenden Sie Importieren...

Bildbearbeitung und Automatisierung

© Archiv

Importieren externer Datensätze in Photoshop CS4.

Alternativ können Sie die benötigten Datensätze mithilfe der Bedienelemente des Dialogfensters hinzufügen und nachbearbeiten. Durch das Aktivieren der Vorschau erhalten Sie eine Voransicht der jeweiligen Version der Datei, die sich aus den aktuellen Variablenwerten ergibt.

4. Datensätze nachbearbeiten

Um einen Datensatz zu bearbeiten, blättern Sie zu dem gewünschten Eintrag, wählen Sie die betreffende Variable an und verändern Sie ihre Werte im Bereich des Dialoges direkt oberhalb der Liste der Variablen.

5. Ausgabe

Mit dem Befehl Datei > Exportieren > Datensätze als Dateien... können Sie die automatische Erstellung aller Versionen der Grafik veranlassen, die sich aus den existierenden Datensätzen ergeben.

Dank des Einsatzes von Variablen lassen sich unmittelbar in Photoshop aus einer einzigen Datenquelle mehrere Varianten einer Grafik erstellen.

Workflow-Aspekte

In Adobes ursprünglicher Implementierung von Variablen war ein Workflow mit Golive vorgesehen, in dem der Webdesigner direkt in dem Webeditor ein PSD- oder AI-Smart Objekt mit Variablen konfigurieren konnte.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017