Photoshop CS6. Top-Features & Tricks für Webdesigner

photoshop-cs6-icon-logo

Jedes Mal wenn eine neue Photoshop-Version in den Startlöchern steht stellen wir uns die gleichen Fragen. Soll ich updaten? Lohnt sich der Kauf überhaupt? Überspringe ich die Version nicht lieber?
Ich habe mir Photoshop CS6 Extended angeschaut und möchte euch zeigen welche neuen Funktionen das Update mit sich bringt. Dabei habe ich mich neben den Features die ganz allgemein den Workflow beschleunigen, vor allem auf den Einsatz im Webdesign konzentriert.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Hand aufs Herz

In meinen Seminaren und Workshops habe ich gelernt, dass viele Designer einen Großteil der Funktionen von CS4 und CS5 nicht einsetzen. Das kann natürlich daran liegen dass die Funktionen nicht bekannt sind. Häufig finden die neuen Features aber einfach nicht den Weg in den Arbeitsalltag. Und dann gibt es natürlich noch einige Funktionen die man zwar kennt, aber nicht braucht.
Die Content-Aware-Methoden (inhaltssensitive Techniken) sind für mich so ein Beispiel: in CS4, CS5 und CS6 wurde je eine dieser Techniken als „Killer-Feature“ vorgestellt. Webdesigner brauchen die Funktionen allerdings deutlich seltener als beispielsweise Bildbearbeiter.

Photoshop CS6 Standard
Quelle: adobe.com

Die Entscheidung ob ein Photoshop-Update lohnt sollte daher meiner Meinung nach davon abhängig gemacht werden ob es genügend Funktionen gibt von denen man glaubt, dass sie den Workflow spürbar beschleunigen oder erleichtern. Die 30-Tage Testversion von Photoshop hilft euch dabei diese Entscheidung zu treffen.
Darüber hinaus werden die Update-Kosten i.d.R. höher, je mehr Versionsnummern zwischen den Programmen liegen. Auch das sollte bei der Entscheidung berücksichtigt werden.

Aber nun zu den Features.

Interface und Dokumentvorlagen

Starten wir mit dem offensichtlichen Feature. Das Interface von Photoshop ist nun dunkel und kann in vier verschiedenen Helligkeitsstufen angepasst werden. Das geht übrigens auch während der Arbeit über SHIFT + F1 / SHIFT + F2. Leider sind die Dialogfelder nicht angepasst und werden nach wie vor in Hell dargestellt. Das finde ich allerdings halb so schlimm.

Photoshop CS6 - Das Interface in vier Helligkeitsstufen
Photoshop CS6 - Das Interface in vier Helligkeitstufen

In den Dokumentvorlagen können nun mehr mobile Endgeräte ausgewählt werden. Das hilft dabei Layouts für Responsive Webdesign und Apps zu entwerfen. Die Auswahl der mobilen Geräte gab es zwar auch schon in CS5, die angebotenen Formate wurden jedoch modernisiert.

Photoshop CS6 Dokumentvorlagen für mobile Endgeräte

Mehr Features als je zuvor setzen auf Grafikkarten-Beschleunigung. Dadurch verbessert sich zum Einen die Performance des Programms, es werden jedoch auch neue Hilfsmittel möglich. Wenn ihr ein Objekt transformiert oder die Pinselspitzen vergrößert, werden euch nun beispielsweise direkt am Werkzeug Informationen zum Objekt angezeigt. Das Info-Bedienfeld hat somit weitestgehend ausgedient.

Photoshop HUD

Skriptbasierte Muster

In den Einstellungen für „Fläche füllen“ können nun „Skriptbasierte Muster“ ausgewählt werden. Wenn ihr eine dieser Füllmethoden auswählt, kachelt Photoshop das Muster nicht wie üblich von links oben nach rechts unten, sondern wendet ein Skript zur Berechnung an. Im Hintergrund des Bildes seht ihr eine angewendete „Spirale“.

Skriptbasierte Muster in Photoshop CS6 - Beispiel Spirale

Mit dieser Funktion lassen sich erstaunliche Effekte im Handumdrehen erstellen. Jetzt muss nur noch CSS nachziehen.

Das neue Ebenen-Bedienfeld

Das Bedienfeld „Ebene“ hat ein massives Update erfahren und einige wirklich gute Features spendiert bekommen. Alle diese Funktionen dürften den Workflow von Profis spürbar beschleunigen.

Im Kopf des Bedienfeldes findet ihr nun einen Filter. Hier könnt ihr in den Ebenen nach Namen suchen oder die Ansicht nach Art, Effekt, Modus, Attribut und Farbe filtern. Die Farben für Ebenen lassen sich jetzt auch deutlich einfacher über das Kontextmenü vergeben. Insbesondere für Webdesigner ist der Filter sehr praktisch – Web-Layouts verfügen in der Regel über sehr viele Ebenen.

Ebenenbedienfeld in PS CS6

Wenn Ihr viele Ebenen auf einmal umbenennen möchtet, musstet ihr bisher jede Ebene einzeln doppelt anklicken und anschließend den Namen ändern. In Photoshop CS6 doppelklickt ihr nur noch eine Ebene und ändert den Text. Anschließend könnt ihr mit Tab in die nächste Ebene springen. So lassen sich Umbenennungen viel schneller und komfortabler durchführen.

Ebeneneffekte lassen sich nun auch auf ganze Ordner anwenden und Ordner können per Shortcut Cmd/Strg + J genau wie Ebenen kopiert werden.

Wenn ihr eine Ebene mit einem Ebenenstil ausstattet, wird dieser aufgeklappt im Ebenen-Bedienfeld angezeigt. Das kann störend sein und viel Platz wegnehmen. In CS6 könnt ihr nun alle diese aufgeklappten Menüs mit einem Klick schließend oder alle öffnen. Dazu drückt ihr Alt und Klickt anschließend auf den Pfeil neben dem „fx“-Icon.

Neues Bedienfeld „Eigenschaften“

In Photoshop gibt es ein neues Bedienfeld namens „Eigenschaften“. Wenn ihr Einstellungsebenen verwendet (beispielsweise über das Korrekturen-Bedienfeld) werden die entsprechenden Eigenschaften dort abgebildet. Das Bedienfeld räumt in erster Linie den Arbeitsplatz auf und erleichtert die non-destruktive Arbeit.

Photoshop CS6 - Eigenschaften Bedienfeld und Korrekturen

Absatzformate und Zeichenformate

Es ist für mich vielleicht DAS Webdesign-Feature der CS6. Photoshop kann jetzt Absatz- und Zeichenformate. Ein Traum wird wahr!
Wie bereits aus InDesign bekannt, könnt ihr nun Voreinstellungen für bestimmte Textelemente festlegen und anschließend per Klick zuweisen oder ändern. Die Absatzformate funktionieren also sehr ähnlich wie eine Auszeichnung per CSS: Absatzformate entsprechen Block-Elementen, Zeichenformat entsprechen Inline-Elementen.

Zeichenformate und Absatzformate und Photoshop CS6

Ein Beispiel: ihr beginnt mit einem neuen Projekt und legt ein Absatzformat für Überschriften und eins für Links an. Anschließend gestaltet ihr die Website und baut diverse Textelemente ein. Nun überlegt ihr, dass die Überschriften vielleicht doch in einer anderen Schrift besser aussehen würden und dass die Links eigentlich nicht unterstrichen dargestellt werden sollen. Anstatt jedes Textelement und jedes Zeichen im Fließtext einzeln zu markieren und anschließend zu ändern, passt ihr nur das Zeichenformat bzw. Absatzformat an. Alle zugewiesenen Objekte der Seite sind davon abhängig und ändern sich ebenfalls.
Dieses Photoshop CS6-Feature dürfte die Arbeit eines Webdesigners unglaublich vereinfachen.

Lorem Ipsum

Nein, das ist keine fehlerhafte Überschrift. Photoshop kann jetzt endlich „Lorem Ipsum“. Über „Schrift → Platzhaltertext einfügen“ füllt Photoshop eine Textauswahl mit einem eigenen Lorem Ipsum.

Lorem Ipsum in Photoshop CS6

Neue Vektor-Formwerkzeuge und Konturen

Die Formwerkzeuge haben ein üppiges Update erhalten. Sobald ihr eine Form z.B. ein abgerundetes Rechteck aufzieht, stehen euch in der Optionsleiste neue Eigenschaften und Vektor-Funktionen zur Verfügung. Ähnlich wie in Illustrator könnt ihr die Fläche und die Kontur auswählen und gestalten. Auch die Stärke der Kontur und die Art (z.B. gestrichelt) kann detailliert eingestellt werden. Als Füllmethoden stehen Farben, Muster und Verläufe zur Verfügung.
Die Einstellungen könnt ihr anschließend - ähnlich wie Ebenenstile - über einen Rechtsklick auf das Element in der Ebenenpalette kopieren und einfügen. Der Eintrag heißt bei Vektorformen „Formattribute kopieren“.

Formwerkzeuge und Vektoren mit Füllung und Kontur

In der Optionsleiste findet sich nun der Eintrag „Kanten ausrichten“. Den Eintrag gab es zwar bisher auch schon, er war aber etwas versteckt. Ist das Feld aktiviert, wird verhindert dass Vektorformen auf halben Pixeln verlaufen und unscharfe Konturen erzeugen. Unscharfe Objekte sind äußerst unprofessionell und führen regelmäßig zu Problemen bei der technischen Umsetzung einer Website. Im Webdesign nennt sich diese Technik „Pixel Perfect“.
Per Cmd + Shift + H kann übrigens der Pfad von Formobjekten aus- und wieder eingeblendet werden.

Hash-Code im Farbwähler

Der Farbwähler erlaubt nun die Eingabe eines Hash-Codes bei Hexadezimalwerten. Wer häufig zwischen Code und Photoshop wechselt und Farben kopiert, wird bereits gemerkt haben wie ärgerlich es war, dass Photoshop die Raute (#) nicht zugelassen hat. Für Designer die auch „im Browser designen“ wird dieses Mini-Feature daher sehr hilfreich sein.

Hashcode im Farbwähler von Photoshop CS6

Weitere Photoshop-Funktionen

Das waren für mich erst einmal die für das Webdesign relevanten neuen Funktionen. Photoshop CS6 bietet natürlich noch einiges mehr, wie das Inhaltsbasierte-Bewegen-Werkzeug, abnutzbare Pinselspitzen, ein überarbeitetes Beschneiden-Werkzeug oder die neuen Weichzeichnungsfilter.
Diese Funktionen gehören allerdings nicht in diesen Artikel und werden daher in einem anderen Beitrag ihren Platz finden.
Sollte ich Funktionen nicht erwähnt haben, die eurer Meinung nach für Webdesigner relevant sind, schreibt mir bitte in den Kommentaren. Ansonsten interessiert mich natürlich brennend was ihr von Photoshop CS6 haltet.

Vielen Dank an Olaf an dieser Stelle. Sein Video zur Photoshop CS6 Beta hat mir geholfen diesen Artikel vorbereiten zu können.