Photoshop

Photoshop ist ein Bildbearbeitungsprogramm aus dem Hause Adobe. Ursprünglich für die klassische Bildbearbeitung gedacht, wird Photoshop heute von vielen Web- und Screendesignern eingesetzt. Auch Adobe positioniert Photoshop zunehmend in diesem Bereich, und führt mit jeder Version neue Funktionen für Webdesigner hinzu.
Alternativ zu Photoshop werden meist Fireworks, Illustrator oder die Entwicklungsumgebung des Browsers eingesetzt. Welches Programm sich am ehesten eignet, ist vom jeweiligen Projekt und vom Workflow des Webdesigner abhängig.

Photoshop CC – Neue Features im Überblick

Photoshop CC Icon / Logo

Adobe hat das gesamte Produktsortiment auf die Creative Cloud (CC) umgestellt. Neben der Tatsache, dass Photoshop CC & Co. dann nur noch im Rahmen eines Abonnements nutzbar sind (was Agenturen und Verlage auf die Barrikaden treibt), werden mit der neuen Version natürlich auch neue Funktionen eingeführt.
Ich möchte in diesem Beitrag die Features von Photoshop CC vorstellen. Da mich der Einsatz von Photoshop im Bereich Web- und Interface-Design besonders interessiert, nenne ich Webdesign-Funktionen zuerst. Fireworks wird übrigens eingestellt.

Alle Funktionen kennenlernen

Webdesign mit Photoshop CS6 und CSS3

photoshop-cs6-css3

Mein neues Buch "Webdesign mit Photoshop CS6 und CSS3" ist ab sofort im Handel erhältlich. Da CSS3 mittlerweile große Teile der Webgestaltung abdeckt, habe ich das Buch sowohl auf die gestalterischen Aspekte in Photoshop, als auch auf die Arbeit mit CSS3 ausgerichtet. Auf über 320 Seiten findet ihr daher diverse praxisorientierte Workshops.

Beitrag zu Ende lesen

Vektoren in Photoshop CS6 NICHT am Pixelraster ausrichten

photoshop-pfade-pixelraster

In Photoshop CS6 werden Vektoren, Pfade und Transformationen automatisch am Pixelraster ausgerichtet. Für Webdesigner ist das normalerweise sehr praktisch, denn am Raster ausgerichtete Vektoren sind immer scharf und erzeugen keine unschönen Kanten. Doch leider rasten die Vektoren und Pfade in CS6 auch dann am Pixelraster ein, wenn man in der Optionsleiste die Checkbox „Kanten ausrichten“ deaktiviert hat. Das führt zu einiger Verwirrung, wenn man Pfade absichtlich auf halben Pixel positionieren möchte.

Beitrag zu Ende lesen

Ein Award-Banner (Ribbon) in Photoshop erstellen

photoshop-ribbon

Mit Photoshop lassen sich auf einfache Weise verschiedene Schmuckelementen für Webseiten gestalten. In dieser Folge der „Photoshop-Profis“ zeige ich euch, wie ihr mit dem Pfad-Werkzeug ein Award-Banner bzw. Ribbon erstellt, das sich an mehreren Kanten umschlägt. Zunächst erstellen wir dafür die entsprechenden Pfade, korrigieren die Ankerpunkte und erhöhen mit Glanzkanten die plastische Wirkung.

Beitrag zu Ende lesen

Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64

enigma64-logo-icon

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Beitrag zu Ende lesen

CSS-Code aus Photoshop exportieren. Verschiedene Lösungen im Vergleich.

css-kopieren-photoshop

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 Version 13.1 exportiert Photoshop auch CSS-Code. Ich möchte euch in diesem Beitrag verschiedene Lösungen vorstellen, mit denen sich Photoshop-Grafiken in CSS3-Code umwandeln lassen.

Beitrag zu Ende lesen

Die Photoshop-Voreinstellungen zurücksetzen – mit Backup oder Shortcut

photoshop-presets

Zugegeben – wenn man Photoshop nicht gerade zu Trainingszwecken einsetzt, muss man die Voreinstellungen wahrscheinlich eher selten zurücksetzen. Doch wenn es einmal soweit ist, beispielsweise weil das Programm unerwartet reagiert, ist es gut zu wissen wie es geht. Darüber hinaus könnt ihr mit der hier vorgestellten Methode die Voreinstellungen auch zwischen verschiedenen Rechnern austauschen. Die schnelle Variante funktioniert mit einem Tastaturkürzel.

Beitrag zu Ende lesen