Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 24. April 2013

Webdesign mit Photoshop: diese 5 Plugins machen den Alltag angenehmer

Viele Weblayouts entstehen in Photoshop und werden anschließend auf unterschiedliche Weise in HTML und CSS umgesetzt. Dank zahlreicher Plugins kann man sich die Arbeit mit Photoshop etwas erleichtern. Fünf Plugins, die sich speziell an Webdesigner richten, habe ich für Sie ausgesucht.

Schnelle Rastererstellung mit GuideGuide

Der erste Schritt zum Weblayout ist ein Raster, welches in der Regel aus mehreren Spalten und gegebenenfalls auch Zeilen besteht und mit Hilfslinien in Photoshop realisiert wird. GuideGuide erstellt Raster auf der Grundlage bestimmter Werte. Dank des Plugins müssen die Hilfslinien für ein Raster also nicht manuell erstellt werden.

photoshop_plugins_guideguide

Stattdessen werden nur die Anzahl der Spalten sowie die Breite der Spalten oder alternativ die Breite des Zwischenraums angegeben. Auch Hilfslinien für die Begrenzung des Rasters lassen sich einstellen. Wer immer wieder mit denselben Rastern arbeitet, kann die Rastereinstellungen auch abspeichern.

Die aktuelle Version von GuideGuide unterstützt Photoshop ab CS5.

Schneller Export von Grafikelementen mit Cut&Slice me

Wenn es darum geht, die Grafiken eines fertigen Layouts zu exportieren, ist meist viel Handarbeit gefragt. Die Slice-Option von Photoshop ermöglicht zwar das Exportieren vordefinierter Bereiche als einzelne Grafiken, berücksichtigt aber nicht, dass es beispielsweise für ein Menü mehrere Grafiken für einzelne Menüzustände gibt.

photoshop_plugins_cutandsliceme

Cut&Slice me hilft beim Exportieren von Grafiken, indem es Ebenen aufgrund ihrer Bezeichnung exportiert und auf Wunsch Weißraum dabei automatisch entfernt. Enthält der Name einer Gruppe beispielsweise die Zeichenkette _BTN, weiß das Plugin, dass die darin enthaltenen Gruppen einzelne Zustände für den Button enthalten. Diese Untergruppen müssen dann mit normal, hover, clicked etc. gekennzeichnet sein und werden als separate Grafiken exportiert.

Cut&Slice me gibt es nur für die aktuelle Version CS6 von Photoshop.

Favicons erstellen mit Plugins von Telegraphics und Sibcode

photoshop_plugins_ico

Favicons sind ja mittlerweile fester Bestandteil einer Website geworden. Auch hierfür gibt es entsprechende Plugins, um Dateien in diesem Format mit Photoshop erstellen zu können. Während das ICO-Plugin von Sibcode das Speichern mehrerer Icons in einer Datei ermöglicht, ist das Plugin von Telegraphics auch für 64-bit-Versionen von Photoshop erhältlich. Es speichert aber lediglich ein Icon in einer Datei ab.

Schriften per Plugin einbinden und ausprobieren

Nicht immer hat man eine Schrift, die man verwenden möchte, auf dem Rechner installiert. Mittlerweile stellen Anbieter von Desktop- und Webfonts Plugins zur Verfügung, die die Verwendung nicht installierter beziehungsweise nicht erworbener Schriften ermöglicht.

photoshop_plugins_fonts

Entsprechende Plugins gibt es vom Webfont-Anbieter WebINK, der neben seinen Schriften auch Googles Webfonts bereitstellt. Der Anbieter Fontshop bietet für seine Schriften ebenfalls ein solches Plugin an. Mit dem Fontshop-Plugin kann man Schriften zudem bequem kaufen, wenn man sie über einen Entwurf hinaus verwenden will.

Kleinere PNGs mit SuperPNG

photoshop_plugins_superpng

PNGs haben gegenüber GIFs einige Vorteile – mehr Farben und einen 8-bit-Alphakanal für Transparenz. Der Nachteil ist, dass PNGs deutlich größer sind als GIFs. SuperPNG generiert jedoch kleinere Dateien, als es Photoshop von Hause aus macht. Der Unterschied ist optisch nicht erkennbar.

SuperPNG setzt Photoshop ab Version CS5 voraus.

Links zum Beitrag

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

12 Kommentare

  1. Ich benutze immer GuideGuide sehr gerne. Cut&Slice kannte ich nicht, werde heute mal ausprobieren. Danke für die Plugin Empfehlungen!

  2. Danke. Hier sind ein paar Plugins dabei, welche ich auf jeden Fall testen werde.

  3. Ich kenn ja so Spezialexperten, die machen Web-Layouts mit Indesign – und ich muss das dann umsetzen. Nehmt das, Ihr Photoshopverflucher.

  4. Von den ganzen Argumenten mal abgesehen, danke für die Liste der Plugins. =)

  5. Photoshop gut und schön. Ab CS6, dank ein paar guten Features, kann mann es auch verwenden. Und man kann auch schon länger alle Ebenen (Smart Objekte) als einzelne – magisch korrekt beschnittene – Grafiken im Wunschformat ausgeben. Aber Fireworks ist zum Sreenen „geboren“ und sollte daher auch dafür genutzt werde. Killer Argument dürfte hier der Export sowie die CSS Funktionen sein. Weiter kann man mit Fireworks funktionierende Dummies erstellen (ohne Front End Frameworkk like Foundation), was ja auch den einen oder anderen Kunden/Auftraggeber/Chef zufriedenstellen kann.

    Aber, jedem das seine – mir nur das Meine! Schöne Zusammenstellung hilfreicher Tools in diesem Post. Gerade GuideGuide habe ich immer gern genutzt – wenn kein FW bei der Hand war! Ö_ö

  6. Und trotzdem sollte man nicht ewig für Fotosbearbeitung erstellte Software für Screendesign nutzen. Wir reiten ja auch nicht mehr auf Pferden, sondern erlernten das Autofahren, weil es vorteilhafter ist ;-)

  7. Das alles kann Fireworks von Haus aus und viel besser. Photoshop ist kein Tool für Webdesigner. Wann verstehen das die Leute endlich :-)

Schreibe einen Kommentar

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