Thomas Maier | Magento & WordPress Develover post@webzunft.de | +49 162 9313 708

Antworten auf die Fragen – nicht nur meiner Kunden 

RSS
Home Photoshop für Web-Programmierer

Photoshop für Web-Programmierer

Mein Schwerpunkt der Programmierung liegt hauptsächlich in der Entwicklung von Plugins, Einrichtung komplexer Seiten mit WordPress und Lösung von Problemen. Häufig gehört dazu auch die Umsetzung eines Templates. Deren Vorlagen erhalten ich häufig als Photoshop-Datei. Da es eher einen geringeren Teil meines Programmierer-Alltags einnimmt, vergesse ich manche Funktionen von Photoshop hin und wieder. Auf dieser Seite notiere ich fortlaufend praktische Dinge, die mir als Programmierer die Umsetzung von Photoshop-Template erleichtern.

Grundlage ist Photoshop CS 5, V. 1.2.0.1 auf dem Mac Book Pro

Elemente finden

Häufig gibt es in einer Photoshop-Datei so viele Ebenen, dass ich keine Lust habe die Liste durchzugehen, um z.B. ein Textelement zu finden.

Hier hilft mir ein Rechtsklick auf das Verschieben-Werkzeug auf die Werkzeugleiste (Fenster > Werkzeuge) und schon werden die Ebenen angezeigt, die an der Stelle liegen, meist mit dem aktuellen ganz oben.

Tastenkürzel für das Verschieben-Werkzeug: V

Schriftgrößen und -informationen

Während ich viele Informationen für ein Template aus einem statischen Bild ableiten kann, ist das bei Schriften schwieriger. Schriftart, -größen, -farben oder die Zeilenhöhe entnehme ich dann lieber der Photoshop-Datei.

Dazu öffne ich zunächst Fenster > Zeichen. Mittlerweile habe ich mir diese Box auch schon in den Bedienelementen abgelegt, so dass das Shorticon immer sichtbar ist.

Dann wähle ich die entsprechende Ebene mit dem Text in der Ebenenübersicht aus (oder siehe Elemente finden oben). In der Box werden dann alle relevanten Informationen angezeigt.

Hilfslinien ein-/ausblenden

Ganz toll ist ein Layout das Hilfslinien nutzt. Sind diese grundsätzlich vorhanden, aber nicht eingeblendet, lassen sie sich unter Ansicht > Einblenden > Hilfslinien einblenden bzw. mit Hilfe der Tastenkombination cmd + , auf dem Mac einblenden.

Schlagschatten

Das meiner Ansicht nach schwierigste der häufigsten Layoutelemente bei der Übertragung einer Photoshop-Datei in ein Template sind Schatten. Das trifft sowohl auf Boxen als auch auf Schrift zu. Hier muss etwas umgerechnet werden. Zum Glück habe ich dazu ein Tool entdeckt.

Die Grundinformationen findet man nach Auswahl des Elementes mit dem Schatten in der Box Ebene > Ebenenstil > Schlagschatten. Dann besucht man diese Seite und trägt die entsprechenden Daten ein. Ein Klick auf Ps to CSS erzeugt den notwendigen CSS-Code.

Schreibe einen Kommentar

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