Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Frank Puscher 14. Mai 2010

CS5-Workshop: Die neue Adobe Suite im Cross-Tools-Test

Bevor Sie von Ihrem CS3- oder CS4-Paket auf CS5 wechseln, sollten Sie sich genaue Gedanken darüber machen, was der Grund dafür sein könnte. Das neue Tool „Flash Catalyst“ könnte zweifellos ein Grund sein, die Integration von Omniture-Tracking-Tools auch, wobei letzteres sicher auch älteren Adobe-Kunden in Form eines PlugIns in Flash oder Dreamweaver angeboten wird. In einem dreiteiligen Workshop beleuchten wir einige der spannendsten Neuheiten aus dem CS5-Paket von Adobe und machen damit gleichzeitig den Praxistest.

Anzeige

Bei den etablierten Produkten Photoshop, Flash und Dreamweaver stellt sich die Frage immer wieder aufs Neue, ob die neuen Werkzeuge und Features den Kostenaufwand rechtfertigen. Bevor Sie den „Buy“-Button drücken, testen Sie die Produkte ausgiebig. Wie immer haben Sie dafür 30 Tage Zeit, denn so lange bietet Ihnen Adobe die Software kostenlos an.

Was die Performance angeht, brauchen sich zumindest die Besitzer von CS4 keine Gedanken zu machen. CS5 läuft ab 2 GB RAM und scheint eher schneller zu arbeiten als sein Vorgänger. Nur eine Ausnahme gibt es: AfterEffects und Premiere verlangen nach einem 64Bit-Betriebssystem. Die neue Engine „Mercury“ setzt ganz auf Hardwareunterstützung beim Rendering und braucht entsprechend viel Arbeitsspeicher.

Anzeige

Testprojekt in 3 Schritten

Im Folgenden legen wir für Sie ein Testprojekt in drei Schritten an. Zunächst bereiten wir die Bilder in Photoshop vor und nutzen dabei ein neues Auswahlwerkzeug, die automatische Hintergrund-Wiederherstellung und ein Spielzeug namens PuppetWarp.

Dann setzen wir in Flash das ganze in ein interaktives Layout um, arbeiten dabei mit der neuen Textengine, den Code-Fragmenten und speichern im neuen, offenen Format XFL. Und schließlich setzen wir den fertigen Flash-Film gemeinsam mit weiteren Assets zu einer Webseite in Dreamweaver um, nutzen dabei die neuen CSS-Tools und testen die fertige Seite in Browserlab.

Wir starten mit Photoshop

Wir haben drei Flickr-Fotos für Sie ausgewählt, die unter CreativeCommons stehen somit zum Training verwendbar sind. Bitte beachten Sie die Urheberrechte und besuchen Sie die Profilseiten der Fotografen, auf die Sie über die Links in der Beispielseite gelangen. Dort können Sie sich natürlich die Bilder auch selbst laden, um damit zu experimentieren.

Alle drei Bilder stellen uns vor Herausforderungen, bei deren Meisterung uns die neuen Werkzeuge von Photoshop helfen sollen. Betrachten Sie zunächst das Bild  das Igels. Eine typische Aufgabe könnte lauten, diesen vor einen neuen Hintergrund zu stellen.


Vorher, nachher: Der Igel bekommt einen neuen Hintergrund

Die klassische Vorgehensweise würde bei einem solchen Bild vielleicht den Zauberstab nutzen, um das satte Schwarz en bloc auszuwählen. Egal, welche Einstellung Sie wählen, das Tool hat ein Problem damit, dass die Stacheln des Igels eher scharfe Kanten aufweisen, das Gras aber einen weichen Verlauf in den Hintergrund zeigt.

Die Auswahl durch den Zauberstab stellt nicht zufrieden.

Es geht also um das Neudefinieren der Kanten der Auswahl und genau so heißt das Tool: „Refine Edges“. Die Funktion gab es schon vorher, neu ist der „Smart Radius“. Stellen Sie diesen an und setzen Sie einen Radius von 10. Sie sehen sofort, dass sich die Auswahl anpasst. Wenn Sie mit dem Pinsel der links angezeigt wird, über die Grenze der Auswahl zeichnen, werden die Details noch etwas feiner herausgearbeitet.

Wenn die Differenz zwischen weichen und harten Kanten sehr groß ist, muss man die Erstauswahl noch etwas genauer anpassen.

Im nächsten Schritt löschen Sie den Hintergrund und schieben einen neuen Hintergrund als Ebene hinter den Igel. Was das Auswahlwerkzeug nicht kann, ist der Ausgleich in der Belichtung, wenn Sie zum Beispiel einen deutlich helleren, neuen Hintergrund wählen. Sie sehen in unserem Igel-Ergebnis, dass die dunklen Bereiche am Rand sehr gut funktionieren, im hellen Zentrum haben die Igelstacheln dunkle Ränder.

Dennoch muss das Fazit hier klar positiv ausfallen. Die Unterscheidung zwischen harten und weichen Kanten in einem Bild bringt enorme Zeitersparnis bei Routineaufgaben.

Weg mit dem Vordergrund

Schon im ersten Kurztest von Photoshop CS5 haben wir „Content Aware Fill“ gelobt. Das Tool löscht ein Vordergrundelement aus einem Bild und rekonstruiert den Hintergrund. Und zwar ohne die klassischen Fehler das Klonstempels (Wiederholung bestimmter Bildstellen – Zebraeffekt) oder eines Pinsels (flache, vektorähnliche klar sichtbare Pinselstriche).

Unser Testbild zeigt ein recht komplexes Muster aus Wassertropfen, das einen Lichtstreifen im rechten Teil des Bildes besitzt. Obgleich der Lichtstreifen vielleicht das Bild gerade spannend macht, werden wir ihn entfernen. Jeder geübte Bildbearbeiter weiß, dass das eine Sisyphusarbeit ist.

Der neue Zauberpinsel rekonstruiert den Hintergrund und eignet sich auch perfekt, um läästige Sommersprossen loszuwerden.

Nicht so, mit dem neuen Pinsel. Öffnen Sie das Tropfenbild von Stephanie Ascher, wählen Sie den  „Spot Healing Brush“, den mit dem Pflaster und stellen Sie im Kopf folgende Werkzeugoptionen ein. Sie wählen eine Pinselbreite von 27 Pixel, eine „Härte“ von 50% und auf der rechten Seite schalten Sie „Content Aware“ ein. Nun zeichnen Sie in einem Zug den weißen Strich auf der rechten Seite langsam nach. Loslassen und Schwupps, der Strich ist weg und neue Tropfen dafür da. Nur beim ganz genauen Hinsehen findet man ein paar inhaltslogische Fehler wie etwa abgeschnittene Tropfen. Aber bei 100%-Ansicht ist das Ergebnis nahezu perfekt.

Und biegen …

Ob das neue Werkzeug PuppetWarp tatsächlich wichtig ist, kann bezweifelt werden. Aber man kommt schon gelegentlich in Situationen, wo man den Inhalt eines Bildes manipulieren möchte und gröbere Werkzeuge wie „Verflüssigen“ eher zur Karikatur reichen, denn zur seriösen Bildbearbeitung.

Das Demo-Beispiel von Adobe ist insofern auch eher dämlich. Einem Elefanten den Rüssel mutwillig einrollen, scheint mehr kindliche Spielerei. Wir haben einen anderen Ansatz gewählt. Auf unserem Beispielbild von einem Flickr-Nutzer namens Kelehen ist ein einzelner Ast zu sehen und im Hintergrund ein schräg dazu angesetzter Schatten. Was wäre, wenn der Designer beide Objekte im Bild lieber parallel sähe.

Die gelben Punkte markieren die Gelenke des Astes

Öffnen Sie das Bild des Astes. Um ihn zu biegen, müssen wir den Ast freistellen. Und dazu nutzen wir die zweite Variante von „Content Aware“. Klicken Sie mit dem Zauberstab und einer Toleranz von „100“ in den Ast, um ihn auszuwählen. Vergrößern Sie die Auswahl (Auswahl/Verändern/Erweitern) um drei Pixel. Schneiden Sie nun den Ast aus, kopieren Sie ihn  auf eine eigene Ebene und schieben Sie ihn deckend über die Lücke.

Klicken Sie nun bei gedrückter „Shift-Taste“ auf das Vorschaubild der Ebene des Astes, um die Umrisse erneut auszuwählen. Wechseln Sie auf die Ebene des Hintergrunds. Nun erweitern Sie die Auswahl erneut um 10 Pixel. Und jetzt gehen Sie auf „Bearbeiten/Füllen“ und wählen als Fülloption „Content Aware“. Schwupps sieht das Bild aus, als wäre hier nie ein Ast gewesen.

Zurück zum Ast. Wählen Sie dessen Ebene und gehen Sie auf „Bearbeiten/PuppetWarp“. Der Ast wird mit einem Gitternetz gefüllt. Klicken Sie oben in den Optionen bei Rotation auf „Fixed“ und klicken Sie mit dem Mauszeiger, der eine Pinnwandnadel zeigt, auf Stellen des Astes, die Sie als Gelenke identifizieren. Sie brauchen zumindest zwei. Wenn Sie nun mit der Maus über die Punkte fahren und diese ziehen, wird der Ast in diese Richtung gezogen.

(mm), ™

Serie wird fortgesetzt

Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

Schreibe einen Kommentar

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