Galileo Computing < openbook > Galileo Design - Know-how für Kreative
Know-how für Kreative

Inhaltsverzeichnis
Vorwort
1 Was gibt es Neues in Photoshop CS4?
2 Camera Raw, DNG und HDR
3 Probleme bei Digitalfotos beheben
4 Retusche
5 Schwarzweiß, Duplex und Schmuckfarben
6 Farb- und Tonwertkorrekturen
7 Farbmanagement
8 Fotomontage und Composing
9 Effekte für Text und Bild
10 Filter
11 Photoshop und Web
12 Photoshop und Druck
13 Automatisierung in Photoshop
14 Datenhandling und Teamwork
15 Tipps und Tricks
16 Photoshop und 3D
17 Photoshop und Video
18 Die DVD zum Buch
Stichwort
Ihre Meinung?

Spacer
<< zurück
Adobe Photoshop CS4 - Fortgeschrittene Techniken von Thomas Bredenfeld
Kreative Lösungen für den professionellen Arbeitsalltag
Buch: Adobe Photoshop CS4 - Fortgeschrittene Techniken

Adobe Photoshop CS4 - Fortgeschrittene Techniken
geb., komplett in Farbe, mit DVD
843 S., 59,90 Euro
Rheinwerk Design
ISBN 978-3-8362-1237-3
Pfeil 13 Automatisierung in Photoshop
Pfeil 13.1 Möglichkeiten der Automatisierung
Pfeil 13.2 Automatisierung durch Photoshop-Funktionen
Pfeil 13.2.1 Aktionen
Pfeil 13.2.2 Stapelverarbeitung
Pfeil 13.2.3 Der Bildprozessor
Pfeil 13.2.4 Droplets
Pfeil 13.2.5 Mehrfachscans freistellen und ausrichten
Pfeil 13.3 Arbeiten mit Variablen
Pfeil 13.3.1 Aufgaben der Variablen
Pfeil 13.3.2 Variablen anwenden
Pfeil 13.4 Photoshop mit Skripten steuern
Pfeil 13.4.1 Visual Basic, AppleScript und JavaScript
Pfeil 13.4.2 Das Photoshop-Objektmodell
Pfeil 13.4.3 Skripten am Beispiel
Pfeil 13.4.4 Hilfsmittel zum Skripten
Pfeil 13.5 Panels
Pfeil 13.5.1 Grundsätzliche Funktionsweise
Pfeil 13.5.2 Panels erstellen
Pfeil 13.5.3 Aufbau eines Panels


Galileo Computing - Zum Seitenanfang

13.5 Panels Zur nächsten ÜberschriftZur vorigen Überschrift

Eine konsequente Weiterentwicklung der Scripting-Technologie bei Creative-Suite-Programmen ist die Kombination von JavaScript mit Flash und dessen Programmiersprache ActionScript, die mit der Übernahme von Macromedia ins Produkt-Portfolio von Adobe gewandert ist.

Abbildung

Abbildung 13.38 Identisches User Interface mit JavaScript und Flash im Dialog Dateiinformation

Beispielsweise können sich Flash-Dateien (»*.swf«) über JavaScript mit Photoshop »unterhalten«. Flash zeichnet sich durch die Möglichkeit aus, schnell interaktive Oberflächen zu schaffen, die noch dazu plattformunabhängig sind. Die Schnittstelle hat zwar schon mit Photoshop CS3 funktioniert, doch wurde sie kaum genutzt. Mit der Creative Suite 4 hat Adobe dieses Zusammenspiel nicht nur mit Namen und Dokumentation versehen, sondern nutzt es auch selbst. z. B. beim Dialog von DateiDateiinformation. Dieser Dialog zeigt bereits die typischen Oberflächenelemente von Flash.

Abbildung 13.39 Schema zum Erstellen und zur Funktionsweise von Panels

Wie man sieht, sind beide Dialoge innerhalb des Betriebssystemfensters identisch aufgebaut.


Galileo Computing - Zum Seitenanfang

13.5.1 Grundsätzliche Funktionsweise Zur nächsten ÜberschriftZur vorigen Überschrift

Im Gegensatz zur Interaktion zwischen JavaScript und Photoshop, an der nur zwei Partner beteiligt sind, hat man es bei den Panels mit drei Stationen zu tun, die miteinander kommunizieren müssen. Flash stellt das User Interface zur Verfügung, JavaScript ist die Schnittstelle, und Photoshop führt die Befehle aus. Diese Kommunikation muss in beide Richtungen gehen, denn man braucht ja auf der Benutzeroberfläche auch Rückmeldungen aus dem Inneren von Photoshop.


Galileo Computing - Zum Seitenanfang

13.5.2 Panels erstellen Zur nächsten ÜberschriftZur vorigen Überschrift

Panels sind eine Kombination aus Flash- und JavaScript-Dateien, deren Zusammenspiel bei Panels allerdings nicht so ganz einfach zu durchschauen ist. Bevor wir später ein einfaches Beispiel näher betrachten, sei deshalb zuvor der Grundaufbau geschildert.

Schauen wir zunächst den oberen Teil des Schemas an. Adobe Flash und meist zusätzlich Adobe Flex Builder sind für die Elemente der Benutzeroberfläche zuständig, wobei Flex (sehr vereinfacht) nichts anderes ist als ein Baukasten (Entwicklungsumgebung) für User-Interface-Elemente aus gebrauchsfertigen Flash-Dateien (Komponenten), der gerade für solche Zwecke viel Arbeit spart. Flex gibt wie Flash auch SWF-Dateien aus. Das ExtendScript Toolkit liefert die JavaScript-Dateien.

Im Betrieb (unterer Teil »Ausführen« des Schemas) ist es etwas komplizierter. Man liest das am besten von rechts. Die JavaScript-Datei kommuniziert mit Photoshop in beide Richtungen, indem sie direkt auf das Objektmodell von Photoshop zugreift, dorthin Befehle gibt und umgekehrt Zustände abfragt. Die Benutzeroberfläche wird von der Flash-Datei zur Verfügung gestellt. Diese kann nicht direkt mit Photoshop reden. Sie ruft in die eine Richtung Javascript-Funktionen auf, die Photoshop-Befehle auslösen. Damit das User Interface auch Rückmeldungen von Photoshop auswerten und darstellen kann, gibt die JavaScript-Datei solche Daten in Form von XML, das Flash gut versteht, an die Flash-Datei zurück. Damit diese Kommunikation reibungslos verläuft, muss die Flash-Datei wissen, wie Photoshops Objektmodell funktioniert. Das steht in der CSXS-Bibliothek (Creative Suite eXtensible Services), die beim fertigen Panel in die Flash-Datei eingebettet wird und diese Informationen im Betrieb an die Flash-Datei weitergibt.


Galileo Computing - Zum Seitenanfang

13.5.3 Aufbau eines Panels topZur vorigen Überschrift

Im Folgenden soll mit einem eigenen Farbwähler demonstriert werden, welche Arbeitsschritte für ein solches Panel nötig sind. Die Werkzeuge für das Erstellen eines Panels werden nicht mit Ihrer Creative Suite 4-Installation mitgeliefert. Sie finden ein Paket mit einer ganze Reihe von Beispielen (darunter auch das diesem Abschnitt zugrunde liegende) unter www.adobe.com/devnet/photoshop und dort im Artikel »Photoshop Panel Developer´s Guide«. Detailliertere Informationen finden Sie zusätzlich noch hier: labs.adobe.com/wiki/index.php/PatchPanel. Für das Erstellen der Benutzeroberfläche wird der Einfachheit halber meist der Adobe Flex Builder 3 benutzt.

Abbildung 13.40 Einfacher Farbwähler als Beispiel für ein eigenes Photoshop-Panel


Daten auf der DVD

Sie finden die Dateien zu diesem Beispiel auf der Buch-DVD unter Beispieldateien/13_Automatisieren/Panels/GD_ColorPicker.


Funktionaler Teil: JavaScript | Dieser Teil wird mit dem Extend-Script Toolkit bearbeitet. Der Kern des Codes besteht aus vier Funktionen, die jeweils die Vordergrund- und die Hintergrundfarbe in Photoshop setzen und umgekehrt von dort auslesen und per XML an die Flash-Oberfläche weitergeben können. Zwei Hilfsfunktionen sorgen für die Umwandlung der Farbwerte in ein für Photoshop verständliches Format (translateColor) und für die Übersetzung der Werte von Photoshop in das Flash-kompatible XML (convertToXML).

Abbildung 13.41 Funktionaler Code in der JavaScript-Datei

Für die Vordergrundfarbe wird zuerst die Funktion setForeground() definiert, die Photoshop über app. foregroundColor() einen entsprechenden Wert übergibt. Das Gleiche tut die Funktion setBackground() für die Hintergrundfarbe. In die andere Richtung geht es mit getForeground() und getBackground(). Damit werden die aktuellen Photoshop-Werte als XML-Zeichenketten an Flash übergeben.

User Interface | Die Benutzeroberfläche basiert auf der Flex-Technologie. Der dazugehörige MXML-Code wurde in diesem Fall im Flex Builder erstellt.

Abbildung 13.42 Gestaltung der Oberfläche in Flex Builder 3


Adobe Flex

Flex ist eine Technologie für das Design und die Programmierung von interaktiven Anwendungen, die sowohl im Webbrowser auf der Basis des Flash-Plugins als auch lokal als AIR-Anwendung (Adobe Integrated Runtime) laufen. Flex basiert auf dem XML-Dialekt MXML, den man mit dem Adobe Flex Builder bearbeitet (ab 215 €, 60-Tage-Testversion unter: www.adobe.com/de/products/flex). Alternativ können technisch versiertere Nutzer auf das kostenlose Entwicklungskit (SDK) für Entwicklungsumgebungen wie Eclipse zurückgreifen (labs.adobe.com/technologies/flex).


Da wir hier hauptsächlich das User Interface erstellen wollen, ist es natürlich angenehm, dass Flex Builder eine grafische Oberfläche (Design) hat, auf der sich das einfach gestalten lässt.

Flex Builder arbeitet auf der Basis eines Projekts, das wir mit allen beteiligten Dateien im Flex Navigator sehen. Markiert ist hier die Kerndatei »ColorPicker.mxml«. Flex Builder bringt eine ganze Bibliothek an gebrauchsfertigen User-Interface-Elementen (Components) mit, die man im Hauptfenster einfach per Drag&Drop platzieren kann. Ausgewählt ist hier die Komponente ColorPicker, die einen einfachen Farbwähler zur Verfügung stellt. Unter Outline kann man die Struktur des Dokuments sehen. Sie ist hier sehr einfach. Auf der rechten Seite werden unter Flex Properties die Eigenschaften des gerade ausgewählten Elements angezeigt, hier das Hintergrundbild mit seinem Dateipfad und der Größe.

Nun müssen wir noch die Oberfläche mit Leben versehen.

Abbildung 13.43 Der ColorPicker in der Ansicht Design (oben) und die Funktion, die er aufruft in der Codeansicht (unten)

Zu fast jedem User-Interface-Element gehören mehr oder weniger viele Ereignisse (»Events«). Hier interessiert uns das Ereignis On change, also wann die Farbe geändert wird. Bei diesem Ereignis wird eine Funktion (changePSForeground()) aufgerufen (Abbildung 13.43, unten), die den geänderten Wert des Elements weitergibt bzw. auswertet.

Abbildung 13.44 Einbinden der CSXS-Bibliothek

Damit das funktioniert, brauchen wir die CSXS-Bibliothek, die im Kopf der MXML-Datei mit import eingebunden wird und die Befehle bereithält, die die Kommunikation mit Photoshop über das JavaScript sicherstellt.

Abbildung 13.45 Die Kommunikationsfunktionen der CSXS-Bibliothek

Die eigentliche Definition der Oberfläche findet mit wenigen und anschaulichen Zeilen MXML-Code am Schluss der Datei statt.

Abbildung 13.46 Code für die Elemente der Benutzeroberfläche

Abbildung 13.47 Die wichtigsten Dateien im Flex-Projekt

Ausgabe | Um die MXML-Datei zu testen, wird sie nach einem Klick auf den Button Run als SWF-Datei ausgegeben, in eine HTML-Datei eingebettet und im Standardbrowser angezeigt. Wenn das Projekt fertig ist, geschieht im Prinzip das Gleiche, wenn man über FileExportRelease Build geht. Wir brauchen hier aber nur die SWF-Datei, die JSX-Datei und das Hintergrundbild. Die CSXS-Bibliothek und die MXML-Datei werden nicht ausgegeben, sondern betten ihren Code nur in die SWF-Datei ein. Nun muss man nur noch die JSX- und die SWF-Datei gemeinsam mit dem Hintergrundbild im Photoshop-Programmordner in Plugins/Panels kopieren. Nach dem nächsten Start von Photoshop finden Sie es unter FensterErweiterungen.

Abbildung 13.48 Installiertes Panel in Photoshops Plugin-Ordner

Abbildung 13.49 Icons für den Button des Panels im Normalzustand (links) und im Rollover-Zustand (rechts)

Für den Button, der in der Photoshop-Palette für unser neues Panel erscheint, kann man noch statt des Standard-»Lego«-Icons, das Photoshop dafür vorsieht, eigene Grafiken verwenden. Sie dürfen Transparenzen enthalten, müssen 32 x 32 Pixel groß sein, im PNG-Format vorliegen, mit dem gleichen Namen beginnen wie die JSX-Datei, und der Name muss mit »Normal« bzw. »Roll-over« ergänzt werden ( in Abbildung 13.48).

Vorteil des neuen Farbwählers ist die Tatsache, dass er permanent zur Verfügung steht und nicht erst wie sonst mit einem Klick auf das Feld für Vordergrund- und Hintergrundfarbe in der Werkzeugleiste von Photoshop aufgerufen werden muss.

Weitere Beispiele für Panels | Noch gibt es nicht allzu viele Panels. Eine Auswahl können Sie unter share.studio.adobe.com herunterladen, wenn sie von dort aus über »Photoshop« zu »Flash Panels« weitergehen.

Abbildung 13.50 Beispiele für eigene Panels

Der GridMaker (Abbildung 13.50, links) wurde bereits in Ab-schnitt 11.11 erwähnt. Eine sehr fortgeschrittene Version des Farbwählers, der sich an Photoshops Original orientiert, zeigt Abbildung 13.50 in der Mitte. Sie kann man unter anastasiy.com kostenlos herunterladen. Leider funktioniert sie bis jetzt nur für die Vordergrundfarbe. Das Panel »Daily Photoshop Tip« (Abbildung 13.50, rechts) ist ein schönes Beispiel dafür, dass man mit Panels auch Internetverbindungen aufbauen kann. Dieses Panel listet verschiedene Tipps von Adobes Photoshop- und Lightroom-Spezialistin Julieanne Kost auf. Sie finden es hier: www.jkost.com/photoshop.html.

Die Möglichkeiten, die das Photoshop-Scripting zusammen mit den neuen Panels und dem nun viel leichteren Erstellen von Benutzeroberflächen bietet, lassen sich derzeit noch gar nicht abschätzen. Vor allem der mögliche Netz- und Dateizugriff macht dieses Werkzeug sehr mächtig. Auch kommerzielle Anwendungen der Panels werden nicht lange auf sich warten lassen.



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

<< zurück
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Photoshop CS4 - Fortgeschrittene Techniken






Adobe Photoshop CS4
Fortgeschrittene Techniken

bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Photoshop CS6 und CC






 Adobe Photoshop
 CS6 und CC


Zum Rheinwerk-Shop: Photoshop Lightroom 5






 Photoshop
 Lightroom 5


Zum Rheinwerk-Shop: Photoshop Artworks






 Photoshop Artworks


Zum Rheinwerk-Shop: Adobe Photoshop für Fortgeschrittene






 Adobe Photoshop für
 Fortgeschrittene


Zum Rheinwerk-Shop: Die Schöne und das Biest






 Die Schöne und
 das Biest


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo





Copyright © Rheinwerk Verlag GmbH 2010
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern