Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 3. Juli 2015

Brandneu: Photoshops Zeichenflächen erleichtern das Webdesign

Eine der größ­ten Neuerungen der aktu­el­len Creative Cloud von Adobe ist die Einführung von Zeichenflächen in Photoshop. Aus Illustrator kennt man die­se Funktion bereits. Sie erlaubt es, inner­halb eines Dokumentes meh­re­re eigen­stän­di­ge Bereiche anzu­le­gen, die unab­hän­gig zu ande­ren gestal­tet wer­den kön­nen. Gedacht ist die­se neue Möglichkeit vor allem für das Erstellen von Weblayouts.

photoshop-zeichenflaeche-teaser_DE

Eine Website, mehrere Layouts

Dank der Verbreitung von Smartphones und Tablets wird das Aussehen einer Website auf den ver­schie­de­nen Mobilgeräten immer wich­ti­ger. Als Webdesigner muss man daher neben dem klas­si­schen Desktoplayout auch sol­che für Mobilgeräte berück­sich­ti­gen. Hier kom­men die neu­en Zeichenflächen von Photoshop ins Spiel. Sie erlau­ben es, inner­halb einer Photoshop-Datei gleich meh­re­re Layouts für unter­schied­li­che Geräte bezie­hungs­wei­se Auflösungen anzu­le­gen.

photoshop-zeichenflaechen_neu
Neues Dokument mit Zeichenflächen anle­gen

Beim Anlegen einer neu­en Photoshop-Datei („Datei“ -> „Neu“) fin­det man in der aktu­el­len Version unter dem Menüpunkt „Dokumenttyp“ die neue Option „Zeichenflächen“. Wählt man die­se aus, erscheint die Auswahl „Größe der Zeichenfläche“. Hier ste­hen einem eine Vielzahl an spe­zi­el­len Geräten und gän­gi­gen Auflösungen für Smartphones und Tablets zur Verfügung – unter ande­rem ver­schie­de­ne iPhones, das Surface Pro 3 sowie die Apple Watch. Außerdem sind Auflösungen für ver­schie­de­ne Weblayouts und Icons vor­han­den.

Bei den Weblayouts kann man unter ande­rem zwi­schen „Am häu­figs­ten“ und „Minimal“ aus­wäh­len. Alternativ kann man natür­lich auch eine eige­ne Größe für die Zeichenfläche ange­ben.

Mit Zeichenflächen arbeiten

Hat man ein neu­es Dokument mit einer Zeichenfläche ange­legt, fällt auf, dass das neu erstel­le Dokument sich von nor­ma­len Photoshop-Dateien unter­schei­det. Statt einer lee­ren Datei befin­det sich im Dokument ein Rahmen, der die Zeichenfläche dar­stellt. Über Anfasser kann die Größe und Position der Zeichenfläche manu­ell ver­än­dert wer­den. In der Menüleiste befin­det sich zudem ein Bereich, über den die Auflösung per Zahleneingabe ange­ge­ben wer­den kann. Die eigent­li­che Größe des Dokumentes ist immer abhän­gig von den Zeichenflächen und passt sich auto­ma­tisch an.

photoshop-zeichenflaechen_menue
Neues Menü und Werkzeug für Zeichenflächen

In den Werkzeugen fin­det man beim Verschieben-Werkzeug zusätz­lich das Zeichenflächen-Werkzeug. So kann man zwi­schen dem Verschieben von Ebenen und dem Verschieben von Zeichenflächen wech­seln. Dabei wech­selt Photoshop aber auto­ma­tisch zwi­schen den Werkzeugen – je nach dem, was man gera­de aus­ge­wählt hat.

photoshop-zeichenflaechen_ebenen
Zeichenflächen in den Ebenen

Einem Dokument kön­nen belie­big vie­le Zeichenflächen hin­zu­ge­fügt wer­den. Diese las­sen sich frei inner­halb des Dokumentes anord­nen. In der Ebenen-Ansicht wird jede Zeichenfläche ähn­lich wie Ebenen-Gruppen dar­ge­stellt. Elemente, die in einer Zeichenfläche plat­ziert sind, las­sen sich ein­fach über die Ebenen-Ansicht in eine ande­re Zeichenfläche ver­schie­ben. Der Vorteil zu ein­fa­chen Gruppen besteht dar­in, dass eine Ebene immer rela­tiv zur Zeichenfläche plat­ziert wird. Wird ein Element, das links oben in einer Zeichenfläche liegt, in eine ande­re Zeichenfläche ver­scho­ben, wird es auch dort links oben plat­ziert.

photoshop-zeichenflaechen_mehrere
Dokument mit meh­re­ren Zeichenflächen

Verschiebt man Zeichenflächen auf der Arbeitsfläche des Dokumentes, wer­den alle dar­in ent­hal­te­nen Ebenen eben­falls mit ver­scho­ben. Dieses Verhalten kann aber über die Einstellungen des Zeichenflächen-Menüs aus­ge­schal­tet wer­den. Ebenen einer Zeichenfläche, die nicht voll­stän­dig inner­halb der Zeichenfläche plat­ziert sind, wer­den durch die Zeichenfläche beschnit­ten.

Wer bereits in frü­he­ren Photoshop-Versionen meh­re­re Layouts in einem Dokument unter­ge­bracht hat, kann dar­aus recht schnell Zeichenflächen erstel­len. Die ein­zel­nen Layouts müs­sen nur inner­halb einer Ebenen-Gruppe lie­gen. Per Rechtsklick auf eine Gruppe hat man die Möglichkeit, eine „Zeichenfläche aus Gruppe“ zu erstel­len.

Zeichenflächen exportieren

Fertige Layouts oder Icons wer­den meist als PNG- oder JPEG-Dateien expor­tiert. Hier kommt ein wei­te­rer Vorteil der Zeichenflächen zum Tragen. Denn jede die­ser Flächen kann sepa­rat expor­tiert wer­den. Unter „Datei“ -> „Exportieren“ fin­det man die neue Funktion „Exportieren als“. Dort sind alle vor­han­de­nen Zeichenflächen des Dokumentes gelis­tet und man kann die­se ein­zeln in ver­schie­de­ne Formate expor­tie­ren. Ebenen, die nicht der zu expor­tie­ren­den Zeichenfläche ange­hö­ren, wer­den beim Export aller­dings igno­riert.

photoshop-zeichenflaechen_export
Neuer Export in Photoshop

Neben JPEG und PNG steht zusätz­lich das SVG-Format zur Verfügung. Beim SVG-Export wer­den Texte und alle Vektorgrafiken als sol­che expor­tiert. Bitmaps wer­den per XLink in der SVG-Datei ein­ge­bet­tet.

Nützlich ist zudem die Möglichkeit, die Größe bezie­hungs­wei­se Skalierung der Zeichenfläche für den Export anzu­ge­ben. Gerade in Zeiten hoch­auf­lö­sen­der Displays müs­sen Bilder oft in ver­schie­de­nen Auflösungen bereit­ge­stellt wer­den. Auch Icons müs­sen meist in ver­schie­de­nen Größen zur Verfügung ste­hen. Statt im eigent­li­chen Dokument die Größe anzu­pas­sen, kann man es ein­fach über die Exportfunktion regeln.

Es gibt einen „Schnell-Export“, der die jeweils aus­ge­wähl­te Zeichenfläche in ein vor­her defi­nier­tes Format expor­tiert. Standardmäßig ist das das PNG-Format. Über die „Export-Voreinstellungen“ kann ein ande­res Standard-Format für den „Schnell-Export“ ange­ge­ben wer­den. Im Übrigen erreicht man die Funktionen „Export“ und „Schnell-Export“ über das Kontextmenü in der Ebenen-Ansicht.

Fazit

Die neu­en Zeichenflächen in Kombination mit den neu­en Export-Funktionen ermög­li­chen Webdesignern ein schnel­le­res und Erstellen von Weblayouts. Im Übrigen sind die Zeichenflächen kei­ne ori­gi­nä­re Erfindung von Adobe. Die Mac-Anwendung Sketch besitzt die­ses Feature bereits län­ger.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

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