Mit Zeichenflächen für Web und Mobile designen.
Designs für Web und Mobile Apps lassen sich mithilfe von Zeichenflächen in Adobe Photoshop für unterschiedliche Bildschirmgrößen und Geräte anpassen.
Veröffentlicht am
Photoshop-Zeichenflächen sind äußerst nützlich, besonders bei Designs für Mobile Apps und bei responsiven Designs.
Du kannst Designs für mehrere Bildschirme erstellen und das gesamte Anwendererlebnis mit deinem Design in einem einzigen Dokument erfassen.
Zeichenflächen sind Container, die wie spezielle Ebenengruppen fungieren.
Ebenen, die du innerhalb einer Zeichenfläche platzierst, werden im Bedienfeld „Ebenen“ unterhalb der Zeichenfläche gruppiert und auf der Arbeitsfläche auf die Zeichenfläche begrenzt.
Mithilfe von Zeichenflächen kannst du mehrere Layouts in einem Dokument zusammenfassen.
Das macht es einfach, Inhalte zwischen Zeichenflächen zu kopieren, alles zusammen anzuzeigen und Designs übersichtlich zu verwalten.
Wenn du in Photoshop ein neues Dokument erstellst, wähle den Dokumenttyp „Zeichenfläche“ (Artboard) und anschließend die Zeichenflächengröße.
In diesem Beispiel wähle ich „iPhone 5“.
Wenn du ein Photoshop-Dokument hast, das keine Zeichenflächen enthält, kannst du sie auch später hinzufügen.
Ich wechsle zu einem Dokument, das bereits Inhalte umfasst.
Um die Zeichenflächen-Eigenschaften zu ändern, kannst du die Zeichenfläche im Bedienfeld „Ebenen“ auswählen und dann Größe, Ausrichtung und andere Merkmale bearbeiten.
Verwende dazu die Optionen auf der Werkzeugleiste oder das Bedienfeld „Eigenschaften“ (Properties).
Die Größe der Zeichenfläche kannst du auch mithilfe der Griffe ändern.
Ich blende die Lineale ein.
Hilfslinien bewegen sich zusammen mit einer Zeichenfläche, wenn sie verschoben wird.
Anhand der Hilfslinien kannst du Elemente in deinem Design ausrichten.
Hierfür weist du Hilfslinien den gewünschten Zeichenflächen oder dem Dokument zu.
Du kannst auch Zeichenflächenraster nutzen, um Objekte auszurichten.
Ich aktiviere sie mit „Ansicht > Anzeigen > Raster“ (View > Show > Grid).
Wie die Hilfslinien bewegen sich die Raster mit der Zeichenfläche mit.
Ich blende die Raster wieder aus.
Es gibt zahlreiche Möglichkeiten zum Hinzufügen und Bearbeiten von Zeichenflächen.
Wähle eine Zeichenfläche aus, und verwende die Steuerungen auf der Arbeitsfläche, um Zeichenflächen hinzuzufügen.
Oder klicke bei gedrückter Alt- bzw.
Wahltaste auf das Plussymbol, um die Zeichenfläche zu duplizieren.
Mit dem Zeichenflächen-Werkzeug kannst du eine Zeichenfläche in einer anderen Größe erstellen.
Jede Zeichenfläche hat einen spezifischen Namen, der als Beschriftung auf der Arbeitsfläche angezeigt wird.
Du kannst die Namen bei Bedarf ändern.
Doppelklicke einfach im Bedienfeld „Ebenen“ auf den Namen.
Du kannst die Zeichenflächennamen ein- und ausblenden, indem du „Ansicht > Anzeigen > Zeichenflächennamen“ (View > Show > Artboard Names) auswählst.
Ich zeige die Zeichenflächennamen wieder an.
Im Bedienfeld „Ebenen“ kannst du die Ebenen einer Zeichenfläche beliebig anordnen.
Bei umfangreichen Inhalten kannst du die Ebenen im Bedienfeld „Ebenen“ nach Zeichenflächen filtern.
Wenn du eine Zeichenfläche auswählst oder Inhalte auf einer Zeichenfläche mit aktivierter Option „Automatisch auswählen“ (Auto-Select) auswählst, werden nur die Inhalte der gewählten Zeichenfläche im Bedienfeld „Ebenen“ angezeigt.
Ebenfalls ganz einfach: der Austausch von Inhalten zwischen Zeichenflächen oder das Verschieben von Inhalten in eine bzw. aus einer Zeichenfläche.
Wenn du Inhalte aus einer Zeichenfläche heraus bewegst, sind diese nicht mehr darin verschachtelt.
Ebenen außerhalb von Zeichenflächen sind auf keine Zeichenfläche beschränkt.
Wird eine Grafik in eine Zeichenfläche gezogen, werden die Inhalte automatisch in der Zeichenfläche verschachtelt.
Bei Auswahl der Option im Bedienfeld „Ebenen“, die die automatische Verschachtelung verhindert, werden die Inhalte von Ebenen nicht automatisch in einer Zeichenfläche verschachtelt bzw. deren Verschachtelung aufgehoben.
Du kannst die Position einer Zeichenfläche und deren Inhalte auch auf der Arbeitsfläche fixieren.
Optimierte Inhalte einer Zeichenfläche kannst du ganz leicht exportieren, indem du mit der rechten Maustaste darauf klickst und dann „Exportieren als...“
(Export As...) wählst, um nur diese Ebenen zu exportieren.
Oder wähle „Datei > Exportieren als...“
(File > Export As...), um jede Zeichenfläche als reduzierte und optimierte PNG- oder JPEG-Datei zu exportieren.
Du kannst auch jede Zeichenfläche als einzelne PSD-Datei exportieren.
Zudem kannst du dein Design als PDF oder jede Zeichenfläche als einzelne Seite speichern, um das Design zur Überprüfung oder für andere Zwecke zu versenden.
Photoshop bietet jetzt noch mehr Freiheit und Flexibilität bei der Erstellung responsiver Webdesigns, Designs für Mobile Apps und mehr.
Probiere Zeichenflächen doch gleich einmal aus!
In diesem Video erfährst du, wie du Designs für Web und Mobile Apps mithilfe von Zeichenflächen in Photoshop für unterschiedliche Bildschirmgrößen und Geräte anpasst.
Erstelle in Photoshop eine neue Datei.
Wähle als Dokumenttyp die Option „Zeichenfläche“.
Gib die gewünschte Größe für die Zeichenfläche an.
Beachte, dass im Bedienfeld „Ebenen“ für jede Zeichenfläche eine separate Ebene angezeigt wird.
Beim Bearbeiten kannst du Elemente von einer auf eine andere Zeichenfläche kopieren.
Beitrag von:
