kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

13 Kommentare

  1. Oliver

    Verfasst am 9. Mai 2012 um 11:57 Uhr.

    Mir fehlen immer noch Funktionen für Interface Entwicklung. Bessere Werkzeuge, um Grids zu erstellen oder mehrere Hilfslinien zu erzeugen. Es funktioniert zwar irgendwie, aber ich finde es zu umständlich.

    Schade, dass es das „CSI Feature“ wohl nicht geschafft hat. http://www.youtube.com/watch?v=XLLJBfRzXIQ

  2. Lars Mielke

    Verfasst am 9. Mai 2012 um 12:09 Uhr.

    Ein schöner Artikel, der kurz und knapp beschreibt, wo die Neuerungen bei CS6 gegenüber seinen Vorgängern liegen.
    Vor allem die Absatz- und Zeichenformate dürften für die Designer – die ihre Webseitenentwürfe in PS anlegen – arbeitssparend und von daher interessant sein.

    Zu einer auch immer besseren Quelle entwickelt sich übrigens die Photoshophexe -> http://photoshophexe.de/

    Gruss

  3. Luis

    Verfasst am 9. Mai 2012 um 12:39 Uhr.

    Mit CS6 wird Photoshop ja wirklich langsam interessanter für mich.
    Ich setze momentan lieber auf Fireworks, was Grafiken angeht führt aber einfach kein weg an PS vorbei.

    Schöner Artikel, danke.

  4. Romsch

    Verfasst am 9. Mai 2012 um 14:52 Uhr.

    Danke für diesen Artikel!

    Ja schöne Sachen gibt es da wieder! Für Frontend Layouts bleibt Fireworks einfach besser. Vor allem was den Workflow angeht wenn mal mehr als eine Startseite bzw. mehrere Varianten davon gestaltet werden muss …

  5. nitnat

    Verfasst am 10. Mai 2012 um 9:14 Uhr.

    toller artikel, vor allem die absatz- und zeichenformate dürften die arbeit in zukunft um einiges erleichtern. der nächste logische schritt wäre, die formate direkt als css exportieren zu können… ebenso wie fülloptionen. ich frag mich, warum das immernoch nicht möglich ist :/

  6. hans

    Verfasst am 10. Mai 2012 um 12:58 Uhr.

    das mit den formatvorlagen ist echt super. trotzdem ist fireworks immer noch erste wahl für mich. DA könnten sie mal ein wenig schweiß reinstecken finde ich …

  7. David Vielhuber

    Verfasst am 18. Mai 2012 um 23:38 Uhr.

    Einige Features waren mir bis dato noch gar nicht bekannt! Vielen Dank für diesen sehr hilfreichen Artikel.

  8. Volkward

    Verfasst am 21. Mai 2012 um 12:46 Uhr.

    Vielen Dank für diesen Artikel, einiges war mir tatsächlich komplett neu. Und CMD+Shift+H wird sich bei mir mit Sicherheit größter Beliebtheit erfreuen! Die Absatzformate werde ich gleich mal austesten, gibt es sowas inzwischen vielleicht auch für Ebenenstile?

    @Oliver: Für diese Belange gibt es zwei tolle Extensions: Guideguide und ModularGridPattern. Einfach mal danach googeln. Klar wäre es schön wenn Adobe standardmäßig solche Dinge implementieren würde aber PS ist nunmal immer noch kein Layout Tool. Und die Extensions fügen sich ja nahtlos in die Bedienoberfläche ein…

  9. max

    Verfasst am 13. Juni 2012 um 19:11 Uhr.

    Vielen Dank für den Artikel. Also ich denke für mich steht fest, ich brauch das update nicht. Absatz und Zeichenformate mag ja ganz nett sein, aber das ist für mich kein Update wert. Dass man Ebenen filtern kann auch nicht. Der dunkle Hintergrund ist auch nicht wirklich mein Geschmack und auch ansonsten finde ich die ganzen Verbesserungen nicht wirklich so revolutionär, um dafür mehrere 100 Euro auszugeben. Hatte erst letztens auf 5.5 upgedatet und bin am Suchen, ob sich ein weiteres Update lohnt. Habe auch den Artikel bei gizmodo gelesen, der überschrieben ist mit „bestes Update überhaupt“. Dann lese ich den Artikel und frage mich, wie er zu der Überschrift kommt. Das mögen alles nette Features sein, aber ich habe für mich wirklich nichts gefunden, was ich wirklich so dringend bräuchte, dass ich mit dazu das Update holen müsste. Aber danke für die ausführliche Beschreibung, hat mir bei der Entscheidungsfindung geholfen.

  10. Hermann Schwarz

    Verfasst am 25. Juni 2012 um 14:12 Uhr.

    Hallo,
    könnte man fragen, mit welchen Werkzeugen Sie die Hintegrundgrafiken Ihrer Webauftritte kreiert haben? Ein Tutorial für benutzte Tricks (Unschärfe, Gras, Spiegelung im Wasser, Wolken) wäre super.
    MfG

  11. Daniel

    Verfasst am 24. April 2013 um 15:16 Uhr.

    Ich arbeite gerade mit den Zeichenformaten und bin mäßig begeistert, da mein Rechner sich jedesmal für ca 1 Minute verabschiedet, wenn ich eine einzelne Änderung an einem Format vornehme. Schon für die Änderung „Vorschau deaktivieren“ nimmt er sich sehr viel Zeit. Mich würde interessieren: Hast du dieses Phänomen auch schon beobachtet?

    • Jonas Hellwig

      Verfasst am 25. April 2013 um 11:35 Uhr.

      Ja, die Performance der Absatz- bzw. Zeichenformate ist auch bei mir recht mies.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.