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-Dateien verknüpfen und inkludieren

link-photoshop-files

Bei der Programmierung einer Website lagert man identische Seitenelemente, also beispielsweise den Header oder die Hauptnavigation, in separate Dateien aus. Anschließend verknüpft man die verschiedenen Dokumente untereinander. Diese Vorgehensweise hat den Vorteil, dass Änderungen immer nur an einer Stelle vorgenommen werden müssen. Das geht schneller und minimiert gleichzeitig das Risiko einen Bereich beim Update zu übersehen.
Das Plugin „Can Link It“ erweitert Photoshop um die Möglichkeit externe Dokumente zu inkludieren. Eine Funktion die Smartobjekte eigentlich schon bieten sollten. Photoshop hat in Version 14.2 diese Funktion erhalten. Einen ausführlichen Beitrag findet ihr hier.

Beitrag zu Ende lesen

Frame-Animation mit Photoshop – Einen Ladebalken animieren

frame-animation-mit-photoshop-einen-ladebalken-animieren

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

Die wichtigsten non-destruktiven Photoshop-Techniken + Tipps, Tricks & Videos

photoshop-cs6-non-destruktiv

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

Ebenenstile in Ebenen umwandeln – Photoshop-Tipp

photoshop-ebenenstile-umwandeln

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

Photoshop: Schärfen mit dem Hochpass-Filter

schaerfen-hochpass-photoshop

In Photoshop existieren verschiedene Standards was die Schärfung eines Bildes angeht. Die Klassiker dürften wohl die Filter "unscharf maskieren" oder "selektiv scharfzeichnen" sein. Eine alternative Methode das Motiv nachträglich zu schärfen führt über den Hochpass-Filter und den Blendmodus "weiches-" bzw. "hartes Licht". Bei dieser Methode muss zwar manuell vorgegangen werden, das Ergebnis kann jedoch sehr detailliert eingestellt werden und bietet sich je nach Bild oder Workflow besser an. In diesem Photoshop-Screencast möchte ich euch zeigen wie ihr ein Bild mit dem Hochpass-Filter bearbeiten könnt.

Auch dieser Screencasts ist auf Wunsch eines Lesers dieses Blogs entstanden.

Beitrag zu Ende lesen

Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS

css3-photoshop-plugin-icon-logo

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

Photoshop-Screencast: Erweiterte Pinsel-Einstellungen am Beispiel des Bokeh-Effekts

photoshop-pinsel-bokeh

Vor kurzem bin ich in einem meiner Photoshop-Seminare gebeten worden die Erstellung von Pinselspitzen, sowie die individuellen Einstellungsmöglichkeiten von Pinseln im Blog noch einmal aufzuarbeiten. Diesem Wunsch möchte ich nun mit einer Verzögerung nachkommen.
Im folgenden Screencast zeige ich am Beispiel des Bokeh-Effekts wie ihr eine eigene Pinselspitze erstellt und das Verhalten des Pinsels anschließend entsprechend eurer Vorstellungen anpasst. Im letzten Schritt wird der Effekt mit Blendmodi und Smart-Filtern fertiggestellt.

Beitrag zu Ende lesen