Photoshop ist tot!

Ok, Photoshop für Screendesigns ist tot!

Dieser Eindruck kann zumindest leicht entstehen, wenn man den gängigen Meinungen und Berichten rund um Responsive Webdesign und den neuen Webdesign-Workflows glauben darf.

Photoshop ist aber nicht tot für Screendesigns. Der Einsatz hat sich nur gewandelt.

Es ist zwar seltener so, dass komplette Screendesigns zuerst in Photoshop erstellt werden und dann – nach Freigabe durch den Kunden – pixelgenau umgesetzt werden. Es war „früher“ keine Seltenheit, dass sogar alle Unterseiten zuerst in in Photoshop gestaltet wurden. Da kamen schnell eine zweistellige Anzahl an Bilddateien zusammen. Änderungen waren mühsam. Diese Zeiten sind zum Glück vorbei (ok, nicht immer und überall).

Photoshop hat aber nach wie vor auch für Webdesigner seine Daseinsberechtigung.

Bilder, Grafiken, Illustrationen werden nach wie vor sinnigerweise zuerst in Photoshop bearbeitet und dann in die Webseite eingefügt.

Und ab und an eben doch noch einmal auch komplette Screendesigns. Für diese verschiedenen Fälle hat Photoshop ja schon einige Bearbeitungsmöglichkeiten. Es gibt aber einige Plugins, die die Funktionalitäten noch erweitern. Und einige davon sind vor allem für Webdesigner interessant.

17 hilfreiche Photoshop-Plugins, die Screendesigner brauchen.

GuideGuide

guideguide – Rastererstellung in Photoshop.Hilfslinien sind ein nützliches Tool. Aber damit umfangreiche Raster zu erstellen, kann in Photoshop eine Qual werden. Die Erweiterung GuideGuide hilft hierbei druch umfangreiche Einstellungsmöglichkeiten.

Anzahl der Spalten, Spaltenbreite, Abstände, Außenabstände sind nur einige der Optionen. Für jeden der Screendesigns in Photoshop erstellt, ein unverzichtbares Tool.

GuideGuide »

Web Font Plug-in

Webfonts im Screendesign dank des Web Font Plug-insDie Schriften der Google Fonts sind sehr beliebt bei Webdesignern. Dank dieses Plugins können Sie nun auch einfach in den Screendesigns in Photoshop eingesetzt werden. So kann schon im Gestaltungsprozess die spätere Schriftart getestet werden.

Web Font Plug-in »

FlatIcon

FlatIcon-pluginDie Webseite FlatIcon bietet eine Auswahl an zigtausenden Icons zur freien Verfügung. Mit dieser Erweiterung stehen diese Icon auch schnell in Photoshop zur Verfügung ohne die Prorgrammoberfläche verlassen zu müssen.

FlatIcon »

Velositey

Velositey ist eine Photoshop-Erweiterung, um schnell Design-Prototypen zu erstellen.

Es stehen jede Menge Standard-Inhaltselemente zur Verfügung. Mit einem Mausklick lassen sich so für die verschiedenen Inhaltsbereiche wie Header, Content oder Footer typische Elemente einfügen:

Die Bedienelemente der Velositey-Erweiterung.

Die Bedienelemente der Velositey-Erweiterung.

Eine typische mit Velositey erstellte Webseite.

Eine typische mit Velositey erstellte Webseite.

Die Funktionsliste hat einiges zu bieten:

  • 5 unterschiedliche Headerelemente
  • 6 unterschiedliche Slider
  • 5 unterschiedliche Inhaltsbereiche
  • 11 unterschiedliche Footer
  • 8 unterschiedliche Inhaltsmodule
  • 1170px Rastersytem
  • Map Icon Generator
  • Favicon Generator
  • Photoshop CS6 & CC support

Das Plugin eigent sich daher natürlich gut für Wireframes oder erste Designideen.

Die eingefügten Elemente sind optisch kein Highlight. Da aber verschiedene Ebenen in Photoshop erstellt werden, lassen sich diese schnell anpassen und so recht simpel ein individuelles Design erzeugen.

Das mit Velositey erstellte Raster hat übrigens die gleichen Maße wie das beliebte Bootstrap-Framework.

Ein hilfreiches Tutorial, erklärt das Prototyping mit Velositey: Prototyping Layouts With Velositey for Photoshop.

Velositey »

FontAwesome PS

Font Awesome ist ein sogenannter Icon-Font. Die Schriftart beinhaltet über 500 Icons (anstatt Buchstaben), die sich per CSS einbinden und in der Webseite anzeigen und formatieren lassen.

Um auf diesen Icon-Pool auch schon beim Gestalten in Photoshop zugreifen zu können, gibt es das FontAwesome PS-Plugin. Per Drag & Drop können die Icons dannganz einfach in die eigenen Designs eingefügt werden.

FontAwesome PS »

Font Awesome-Icons ganz einfach in Photoshop einsetzen.

Font Awesome-Icons ganz einfach in Photoshop einsetzen.

Layrs Control

Photoshop-Plugin für Ebenen – Layrs Control.Layrs Control ist eine Sammlung von 7 Skripten, die die alltägliche Photoshop-Arbeit erleichtern.

Die Funktionen nehmen vor allem einfacher, aber langwierige Ebenen-Arbeiten ab:

  • Die Namen von mehreren Ebenen ändern.
  • Aufgeblendete Ebeneneffekte löschen.
  • Ebeneneffekte rastern.
  • Leere Ebenen löschen.
  • Smartobjekte rastern.
  • Ähnliche Ebenen und Ebeneordner finden.
  • Ebene in ein Smartobjekt umwandeln.

Layrs Control »

Cut & Slice me

Plugin, um Photoshop-Ebenen zu exportieren.Wenn ein Design in Photoshop fertig gestellt wurde, müssen einzelne Ebenen/Bilder „herausgeschnitten“ werden für den Einsatz in der Webseite. Das kann durchaus eine langwierige (und langweilige) Arbeit sein. Hier kommt Cut & Slice me ins Spiel.

Es können gezielt Ebenen oder Ordner ausgewählt werden, die exportert werden sollen. Aus den Namen der Ebenen werden dann die entsprechenden Dateinamen.

Dazu gibt es noch einige Export-Einstellungsmöglichkeiten. So lassen sich transparente PNGs erzeugen, verschiedene Button-Zustände oder auch eigene Formate für Apple (Retina-Ready) und Android.

Ein Tutorial für den Umgang mit Cut & Slice me bietet Export Photoshop Layers Easily With Cut&Slice Me.

Cut & Slice me »

Render.ly

Mit Hilfe von Render.ly lassen sich komplette Photoshop-Dateien als Bild exportieren. Das ist natürlich bei der Präsentation von kompletten Screendesigns hilfreich.

Das eigentlich Besondere sind aber die Zusatzfunktionen. Dank einfacher Buchstabenkürzel bei den Ebenennamen lassen sich verschiedene Zustände speichern. Das ist beispielsweise bei Drop-Down-Menüs, hover-Zuständen oder sonstigen Mouseover-Effekten spannend. Auch Einzelbilder aus Ebenen oder Icons lasen so exportieren.

Render.ly »

Photoshop-Plugin für den Export von Bilddateien.

CSS3PS

CSS3PS konvertiert Photoshop-Ebenen in CSS3-Anweisungen. Dazu gehören vor allem die Ebenenstile aber auch einige weitere Einstellungen wie die Größe eines Objekts oder die Abrundung der Ecken.

Die CSS-Umwandlung funktioniert nich immer einwandfrei, kann aber trotzdem viel Arbeit abnehmen.

CSS3PS »

CSS3Ps wandelt Photoshop-Ebenen in CSS3 um.

CSS3Ps wandelt Photoshop-Ebenen in CSS3 um.

CSS Hat

Ebenestile, Textformatierungen, Absatzformate, Abstände – all das wandelt CSS Hat in einer Photoshop-Datei in CSS-Code um. Und das in guter Qualität.

Die knapp 35 Dollar sind in diesem Plugin gut angelegt.

CSS Hat »

CSS Hat wandelt Photoshop-Ebenen in CSS um.

CSS Hat wandelt Photoshop-Ebenen in CSS um.

Composer

Du kennst das Problem:

Mehrere Seiten sind in einer Photoshop-Datei gestaltet. Dann passt du in eine Ebene an, z.B. die Position des Logos, und musst in allen anderen Entürfen die Änderung ebenfalls durchführen. Das ist nervig und zeitaufwendig.

Hier kommt der Composer ins Spiel. Mit einem Klick lassen sich entweder einzelne Aspekte wie die Ebenenstile, die Positionierung oder die Sichtbarkeit anpassen oder alle auf einmal. Dies spart viel Zeit.

Composer »

Der COmposer synchonisiert Photoshop-Ebenen.

Der COmposer synchonisiert Photoshop-Ebenen.

Avocode

Avocode bezeichnet sich selbst als die Brücke zwischen Design und technische Umsetzung. Avocode ist zwar kein PSD to HTML-Tool, stellt aber einige Funktionen zur Verfügung, um aus einer Photoshop-Datei passenden Quellcode zu generieren.

So lassen sich in Avocode Photoshop-Datei öffnen und aus einzelnen Elmenten der entsprechende CSS-Code generieren. Textelemente, Abstände, aber auch Farbpaletten lassen sich für CSS, aber Less und Sass generieren. Ebenso lassen sich einzelne Bilder extrahieren, auch aus mehreren Ebenen.

Eine kurze Einführung gibt es im Tutorial Introducing Avocode — PSD to Code Without Photoshop.

Avocode »

Avocode schließt die Lücke zwischen Designer und Developer.

Avocode schließt die Lücke zwischen Designer und Developer.

WebZap

WebZap - Photoshop-Plugin für schnelle Prototypen.WebZap ist ein kostenpflichtes (19 Dollar) Plugin, das sich für schnelle Design-Prototypen eignet.

Verschiedene Design-Elemente stehen zur Verfügung, die sich per Klick in das Design einfügen lassen.

WebZap »

Retinize It

Retinize it - Photoshop Plugin für Retina-ready Bilder.Retinize It ist eine Photoshop-Aktion, das aus einem Bild per Knopfdruck eine Variante in doppeltener und / oder dreifacher Größe abspeichert. Also perfekt für Einsatz auf Retina-Displays.

Im Smashing Magazine gibt es ein erklärendes Tutorial: Retinize It: Free Photoshop Action For Slicing Graphics For HD Screens.

Retinize It »

PageLayers

Ein Plugin, das den umgekehrten Weg geht. PageLayers generiert aus einer Webseite eine Photoshop-Datei. Aus jedem HTML-Element wird dazu eine Ebene erstellt.

Das ist dann praktisch, wenn beispielsweise eine vorhandene Webseite (leicht) überarbeitet /redesigned werden soll. Die Erweiterung kostet knapp 35 Dollar.

Es lassen sich sowohl PSD-Dateien mit allen Ebenen oder auch PNG-Dateien extrahieren. Auch die Breite der Webseite lässt sich einstellen. Per Drag & Drop wird die Seite dann gespeichert.

PageLayers »

Pagelayers macht aus Webseiten PSD-Dateien.

Pagelayers macht aus Webseiten PSD-Dateien.

Subtle Patterns

subtlepatterns - Pattern-Plugin für Photoshop.
Die Webseite Subtle Patterns bietet über 400 dezente, aber ansprechende Hintergrundmuster, die ein Screendesign angenehm aufwerten können. Das dazugehörige Plugin stellt diese Muster in Photoshop zur Verfügung. So können schnell und unkompliziert verschiedene Hintergründe / Muster getestet werden.

Subtle Patterns »

PNG Hat

PNG Hat erzeugt chneller und komprimierter PNG-Dateien.PNG Hat speichert Ebenen als PNG-Dateien ab und das wesentlich schneller als es Photoshop selber könnte. Die Dtaeigröße ist auch wesentlich kleiner und bei Bedarf wird auch eine Retina-Version gespeichert.

PNG Hat »

Fazit

Photoshop lebt. Auch für Screendesigns!

Mit den oben vorgestellten Plugins lässt sich Photoshop noch besser und effizienter für die tägliche Webdesigner-Arbeit nutzen.

Hat Dir die Liste an Photoshop-Plugins weitergeholfen? Oder kennst du noch welche, die ich nicht erwähnt habe, aber unbedingt erwähnenswert sind? Dann ab in die Kommentare damit…

Diese 17 Photoshop-Plugins brauchst du für Deine Screendesigns
4.628 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

designletter abonnieren & als Dankeschön die WEBDESIGN-CHECKLISTE erhalten mit über 90 Checkpunkten für Dein nächstes Projekt:

Schließe dich über 2.300 Newsletter-Abonnenten an

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Webdesign Survival Kit

Autor:
Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln in diesem Blog.

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!