200920Dez

Photoshop: Hilfsebenen mit Größenangaben erstellen

Bei der Umsetzung und Programmierung von Webdesigns, die als Photoshop-Layout vorliegen, kommt es auf pixelgenaue Abstände und Koordinaten von Bildelementen an. Adobe Photoshop bietet mit den Slices eine gute Funktionalität an, um eine Website in entsprechende Teile zu separieren, die bei der HTML/CSS-Entwicklung wieder zusammengesetzt werden.
Neben Slices können auch einfach gewöhnliche Ebenen als Hilfsebenen verwendet werden, um die Größen und Koordinaten von Bildern zu speichern. Markiert man die Transparenz der Hilfsebene (STRG + Klick auf Ebene), kann die Arbeitsfläche auf die Bildgröße zugeschnitten und das Webseiten-Bild exportiert werden.
Um einen besseren Überblick über die verschiedenen Bildgrößen und Koordinaten zu behalten, habe ich ein kleines Skript entwickelt, welches eine halbtransparente Farbfläche erstellt, auf der die Informationen des Auswahlbereiches (Breite x Höhe @ X, Y) vermerkt werden.

Photoshop Script - DummySliceLayer

Dazu muss einfach eine Selektion erstellt werden, welche ein Platzhalter für das spätere Bild darstellt. Wird anschließend mein Skript DummySliceLayer ausgeführt, erstellt Photoshop eine Hilfsebene (siehe Abbildung). So lassen sich Größen- und Positionsangaben von Bildelementen schneller auf den HTML- bzw. CSS-Code übertragen. Das Skript steht auch in den Extras zum Download bereit.
Die Datei funktioniert unter Photoshop ab Version 7 — eine Installationsanleitung liegt wie gewohnt der ZIP-Datei bei.

RSS-Feed abonnieren Bookmark bei Del.icio.us