Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Denis Potschien 3. Juli 2015

Brandneu: Photoshops Zeichenflächen erleichtern das Webdesign

Eine der größten Neuerungen der aktuellen Creative Cloud von Adobe ist die Einführung von Zeichenflächen in Photoshop. Aus Illustrator kennt man diese Funktion bereits. Sie erlaubt es, innerhalb eines Dokumentes mehrere eigenständige Bereiche anzulegen, die unabhängig zu anderen gestaltet werden können. Gedacht ist diese 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 verschiedenen Mobilgeräten immer wichtiger. Als Webdesigner muss man daher neben dem klassischen Desktoplayout auch solche für Mobilgeräte berücksichtigen. Hier kommen die neuen Zeichenflächen von Photoshop ins Spiel. Sie erlauben es, innerhalb einer Photoshop-Datei gleich mehrere Layouts für unterschiedliche Geräte beziehungsweise Auflösungen anzulegen.

photoshop-zeichenflaechen_neu
Neues Dokument mit Zeichenflächen anlegen

Beim Anlegen einer neuen Photoshop-Datei („Datei“ -> „Neu“) findet man in der aktuellen Version unter dem Menüpunkt „Dokumenttyp“ die neue Option „Zeichenflächen“. Wählt man diese aus, erscheint die Auswahl „Größe der Zeichenfläche“. Hier stehen einem eine Vielzahl an speziellen Geräten und gängigen Auflösungen für Smartphones und Tablets zur Verfügung – unter anderem verschiedene iPhones, das Surface Pro 3 sowie die Apple Watch. Außerdem sind Auflösungen für verschiedene Weblayouts und Icons vorhanden.

Bei den Weblayouts kann man unter anderem zwischen „Am häufigsten“ und „Minimal“ auswählen. Alternativ kann man natürlich auch eine eigene Größe für die Zeichenfläche angeben.

Mit Zeichenflächen arbeiten

Hat man ein neues Dokument mit einer Zeichenfläche angelegt, fällt auf, dass das neu erstelle Dokument sich von normalen Photoshop-Dateien unterscheidet. Statt einer leeren Datei befindet sich im Dokument ein Rahmen, der die Zeichenfläche darstellt. Über Anfasser kann die Größe und Position der Zeichenfläche manuell verändert werden. In der Menüleiste befindet sich zudem ein Bereich, über den die Auflösung per Zahleneingabe angegeben werden kann. Die eigentliche Größe des Dokumentes ist immer abhängig von den Zeichenflächen und passt sich automatisch an.

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

In den Werkzeugen findet man beim Verschieben-Werkzeug zusätzlich das Zeichenflächen-Werkzeug. So kann man zwischen dem Verschieben von Ebenen und dem Verschieben von Zeichenflächen wechseln. Dabei wechselt Photoshop aber automatisch zwischen den Werkzeugen – je nach dem, was man gerade ausgewählt hat.

photoshop-zeichenflaechen_ebenen
Zeichenflächen in den Ebenen

Einem Dokument können beliebig viele Zeichenflächen hinzugefügt werden. Diese lassen sich frei innerhalb des Dokumentes anordnen. In der Ebenen-Ansicht wird jede Zeichenfläche ähnlich wie Ebenen-Gruppen dargestellt. Elemente, die in einer Zeichenfläche platziert sind, lassen sich einfach über die Ebenen-Ansicht in eine andere Zeichenfläche verschieben. Der Vorteil zu einfachen Gruppen besteht darin, dass eine Ebene immer relativ zur Zeichenfläche platziert wird. Wird ein Element, das links oben in einer Zeichenfläche liegt, in eine andere Zeichenfläche verschoben, wird es auch dort links oben platziert.

photoshop-zeichenflaechen_mehrere
Dokument mit mehreren Zeichenflächen

Verschiebt man Zeichenflächen auf der Arbeitsfläche des Dokumentes, werden alle darin enthaltenen Ebenen ebenfalls mit verschoben. Dieses Verhalten kann aber über die Einstellungen des Zeichenflächen-Menüs ausgeschaltet werden. Ebenen einer Zeichenfläche, die nicht vollständig innerhalb der Zeichenfläche platziert sind, werden durch die Zeichenfläche beschnitten.

Wer bereits in früheren Photoshop-Versionen mehrere Layouts in einem Dokument untergebracht hat, kann daraus recht schnell Zeichenflächen erstellen. Die einzelnen Layouts müssen nur innerhalb einer Ebenen-Gruppe liegen. Per Rechtsklick auf eine Gruppe hat man die Möglichkeit, eine „Zeichenfläche aus Gruppe“ zu erstellen.

Zeichenflächen exportieren

Fertige Layouts oder Icons werden meist als PNG- oder JPEG-Dateien exportiert. Hier kommt ein weiterer Vorteil der Zeichenflächen zum Tragen. Denn jede dieser Flächen kann separat exportiert werden. Unter „Datei“ -> „Exportieren“ findet man die neue Funktion „Exportieren als“. Dort sind alle vorhandenen Zeichenflächen des Dokumentes gelistet und man kann diese einzeln in verschiedene Formate exportieren. Ebenen, die nicht der zu exportierenden Zeichenfläche angehören, werden beim Export allerdings ignoriert.

photoshop-zeichenflaechen_export
Neuer Export in Photoshop

Neben JPEG und PNG steht zusätzlich das SVG-Format zur Verfügung. Beim SVG-Export werden Texte und alle Vektorgrafiken als solche exportiert. Bitmaps werden per XLink in der SVG-Datei eingebettet.

Nützlich ist zudem die Möglichkeit, die Größe beziehungsweise Skalierung der Zeichenfläche für den Export anzugeben. Gerade in Zeiten hochauflösender Displays müssen Bilder oft in verschiedenen Auflösungen bereitgestellt werden. Auch Icons müssen meist in verschiedenen Größen zur Verfügung stehen. Statt im eigentlichen Dokument die Größe anzupassen, kann man es einfach über die Exportfunktion regeln.

Es gibt einen „Schnell-Export“, der die jeweils ausgewählte Zeichenfläche in ein vorher definiertes Format exportiert. Standardmäßig ist das das PNG-Format. Über die „Export-Voreinstellungen“ kann ein anderes Standard-Format für den „Schnell-Export“ angegeben werden. Im Übrigen erreicht man die Funktionen „Export“ und „Schnell-Export“ über das Kontextmenü in der Ebenen-Ansicht.

Fazit

Die neuen Zeichenflächen in Kombination mit den neuen Export-Funktionen ermöglichen Webdesignern ein schnelleres und Erstellen von Weblayouts. Im Übrigen sind die Zeichenflächen keine originäre Erfindung von Adobe. Die Mac-Anwendung Sketch besitzt dieses Feature bereits länger.

(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.