Auch wenn der moderne Workflow nicht mehr so linear verläuft wie noch vor ein paar Jahren (Design → Coding), wird Photoshop für Webdesigner immer interessanter. Zwar werden mittlerweile viele Grafiken über CSS3 realisiert, doch gestalten lässt es sich in Photoshop einfach besser. Und seit dem neuesten Update exportiert Photoshop auch CSS-Code. Ich habe die neue Funktion den zwei bekannten Plugins CSS3PS und CSS Hat gegenübergestellt.

Beitrag zu Ende lesen

Mit Photoshop lassen sich verschiedene Arten von Animationen herstellen. Eine davon ist die sog. Frame-Animation, in der verschiedene Einzelbilder nacheinander abgespielt werden. In diesem Video-Tutorial zeige ich euch am Beispiel eines Ladebalkens, wie ihr das Grundobjekt gestaltet und anschließend mit Hilfe der Photoshop-Zeitleiste animiert. Das Ergebnis speichern wir als GIF-Animation ab.

Beitrag zu Ende lesen

Wer kreativ arbeitet, probiert aus, nimmt häufig Korrekturen und Anpassungen vor und verwirft die Entscheidungen evtl. einen Tag später wieder. Um trotz des sprunghaften Ablaufs effektiv zu sein, sollte man möglichst wenig Pixel unwiederbringlich zerstören. Korrekturen lassen sich nur so schnell und unkompliziert vornehmen. Dieses Prinzip nennt sich non-destruktives oder verlustfreies Arbeiten und ist die Basis eines professionellen Workflows. Mit jeder Photoshop-Version kommen neue verlustfreie Methoden hinzu. In diesem Beitrag möchte ich euch die wichtigsten Techniken vorstellen.

Beitrag zu Ende lesen

Die Ebenenstile von Photoshop sind ein beliebter Weg um eine Ebene schnell mit einigen ansehnlichen Effekten wie Schatten, Konturen oder Glanz zu versehen. Darüber hinaus könnt ihr Stile auch abspeichern und anschließend per Klick auch auf andere Ebenen anwenden. Leider lassen sich die Ebenenstile nicht gut weiterbearbeiten oder transformieren. Mit folgendem Tipp wandelt ihr alle Ebenenstile in "echte" Ebenen um. Diese Pixelebenen sind dann zwar kein Stil mehr, können aber umfangreicher angepasst werden.

Beitrag zu Ende lesen

Viele Webdesigner bzw. Frontend-Developer arbeiten immer weniger in Grafikprogrammen wie Photoshop oder Fireworks und wechseln bereits in einer sehr frühen Phase der Website-Erstellung in den Browser. Der Browser ist heute DIE neue Entwicklungsumgebung für Code und Grafik und das Stichwort in diesem Zusammenhang ist „Design in the Browser“. Cloud-Anwendungen und die integrierten Debug-Konsolen der Browser greifen uns dabei mächtig unter die Arme.
Heute möchte ich euch ein neues Photoshop-Plugin vorstellen, dass diese Entwicklung noch weiter beschleunigt: CSS3PS. Mit Hilfe des Plugins wandelt ihr Ebenenstile in CSS3-Code um. Ein Feature das ich mir bereits vor zwei Jahren auf der PhotoCon in München gewünscht habe ist somit endlich Realität geworden!

Beitrag zu Ende lesen

In Folge 69 der Photoshop-Profis wurde ein Screencast von mir zum Thema Icon-Design veröffentlicht. Das etwa 11 Minuten lange Video behandelt die Grundlagen der Icon-Erstellung und zeigt wie man mit Photoshop-Basics wie den Ebenenstilen und Formebenen sehr schnell zu einem ansehnlichen Ergebnis kommt. Auch die Arbeit mit Lichtern und Verläufen wird ausführlich beschrieben.

Die Photoshop-Profis beschreiben den Inhalt so:

Individuelle Icons verleihen Ihrer Webseite einen unverwechselbaren Look. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Webdesigner Jonas Hellwig, wie Sie mit wenigen Mitteln ein Web-Icon erstellen. Dabei erfahren Sie, wie Sie das Icon mit Gold überziehen und ein Symbol einstanzen. [...]

Beitrag zu Ende lesen

Wassertropfen können im Webdesign, wie auch in der Werbung, ein mächtiges Gestaltungselement sein. Verwenden wir Wassertropfen z.B. in Kombination mit der Abbildung von Lebensmitteln oder Getränken, so wirkte das Produkt frisch, kühl und vital. Was wäre die berühmte Coca-Cola-Flasche ohne Wassertropfen? In diesem Screencast möchte ich euch zeigen wie einfach es ist in Photoshop Wassertropfen zu zeichnen.

Beitrag zu Ende lesen