Lernen Sie, wie Sie ein Applayout mit Comp CC entwerfen, mehrere Varianten Ihres Designs mithilfe von Zeichenflächen in Photoshop CC erstellen und das Layout anschließend auf einem iOS-Gerät überprüfen können, bevor Sie die Dateien an den Entwickler weiterleiten.
Für dieses Tutorial ist Adobe Photoshop CC (2015) erforderlich.

Optional: Beispieldateien in Creative Cloud-Bibliotheken kopieren

Wenn Sie den App-Entwurf aus diesem Tutorial nachbilden möchten, verwenden Sie die Assets in der Bibliothek Adventure Guide Mobile App. Klicken Sie auf „In der Creative Cloud speichern“, um eine Kopie der Bibliothek in Ihrem Konto zu speichern und direkt aus Comp CC oder Photoshop CC auf die Assets zugreifen zu können.

Hinweis: Sie müssen bei Creative Cloud angemeldet sein, um die Bibliothek in Ihrem Konto speichern zu können. Legen Sie eine Adobe ID an, falls Sie noch keine haben.

Creative Cloud Assets

Layout in Comp CC entwerfen

Starten Sie Comp CC, und tippen Sie auf das Pluszeichen (+), um ein neues Projekt anzulegen. Wählen Sie das Format, das sich am besten für Ihr Projekt eignet. Wählen Sie für dieses Beispielprojekt das iPhone 6-Format. 

Zeichnen Sie zwei Rechtecke, um eine Navigationsleiste und einen Footer zu erstellen. Zeichnen Sie ein „X“ an der Stelle, an der ein Bild eingefügt werden soll. Um eine Überschrift hinzuzufügen, zeichnen Sie ein Rechteck, und schließen Sie die Zeile mit einem Punkt ab. Wenn Sie mehrzeiligen Text hinzufügen möchten, zeichnen Sie mehrere Linien untereinander, und schließen Sie die letzte Zeile mit einem Punkt ab. Comp CC wandelt Ihre Gesten umgehend in Objekte um.

Tipp: Tippen Sie auf das Zahnrad am oberen Rand des Bildschirms, um die Auswahl an Zeichengesten einzublenden.

Layout entwerfen

Entwurf mit Assets auffüllen

Tippen Sie auf die Navigationsleiste und dann auf das Symbol für Farbe am unteren Rand des Bildschirms. Wählen Sie eine Farbe aus dem Farbwähler oder aus der Bibliothek „Adventure Guide“, und tippen Sie dann auf eine beliebige Stelle außerhalb des ausgewählten Bereichs. Weisen Sie auch dem Footer eine Farbe zu.

Tippen Sie auf den Platzhalter für ein Bild und dann auf das Symbol für Grafiken am unteren Rand des Bildschirms. Tippen Sie auf „Meine Bibliotheken“, und wählen Sie die Bibliothek „Adventure Guide Mobile App“ aus. Tippen Sie auf das Foto „_riders“, um den Platzhalter zu ersetzen. Wenn Sie die Größe des Fotos anpassen möchten, tippen Sie zweimal darauf, und skalieren Sie es mit Fingergesten.

 

Entwurf ausgestalten

Text und Symbole hinzufügen

Tippen Sie am oberen Rand des Bildschirms auf das Symbol für Grafiken, und wählen Sie die Bibliothek „Adventure Guide“ aus. Tippen Sie auf das Symbol mit dem weißen Zelt, um es zu Ihrem Layout hinzuzufügen. Passen Sie die Größe des Symbols mit den eingeblendeten Griffen an, und verschieben Sie es anschließend an die gewünschte Position. Fügen Sie weitere Symbole hinzu.

Tippen Sie oben auf das Symbol für Text und dann auf „Überschrift“, um Platzhaltertext hinzuzufügen. Tippen Sie auf eine Stelle außerhalb des Menüs, positionieren Sie die Überschrift in der Navigationsleiste oben, und ändern Sie die Farbe. Tippen Sie am unteren Bildschirmrand auf das Symbol für Text, und legen Sie Attribute wie Schrift, Größe, Ausrichtung und Abstand fest.

Wenn Sie mit dem Ergebnis zufrieden sind, können Sie den Entwurf mit Photoshop CC auf Ihrem Desktop weiterbearbeiten. Tippen Sie am oberen Rand des Bildschirms auf das Symbol zum Senden, und wählen Sie „An Photoshop CC“ senden.

Text und Symbole hinzufügen

Bildschirme für Ihre App oder Website erstellen

Ihr Comp CC-Layout können Sie als Vorlage für App- oder Website-Designs verwenden. Falls Sie Photoshop CC auf Ihrem Desktop geöffnet haben, wird der Entwurf als editierbares Photoshop-Dokument geöffnet.

Mit den Zeichenflächen des Release 2015 von Photoshop CC können Sie innerhalb eines Photoshop-Dokuments an mehreren Designs in unterschiedlichen Größen arbeiten.

Nehmen Sie bei Bedarf weitere Änderungen an Ihrem Entwurf vor, und wählen Sie dann alle Ebenen im Ebenen-Bedienfeld aus. Wählen Sie im Optionsmenü des Ebenen-Bedienfelds den Befehl „Zeichenfläche aus Ebenen“, und nennen Sie die Zeichenfläche „Biking“. 

Zeichenfläche in Photoshop

App-Bildschirme mithilfe von Zeichenflächen gestalten

Duplizieren Sie die Zeichenfläche, indem Sie im Menü des Ebenen-Bedienfelds die Option „Zeichenfläche duplizieren“ wählen, und nennen Sie diese Zeichenfläche „Camping“. Ziehen Sie sie an die gewünschte Position auf der Arbeitsfläche. Erstellen Sie auf Basis des Duplikats eine neue Zeichenfläche für den Camping-Bildschirm Ihrer App. Wiederholen Sie diese Schritte, um für jeden Bildschirm und jeden Bildschirmstatus entsprechende Zeichenflächen zu erstellen.

Tipp: Mit den Funktionen für Zeichenflächen können Sie Inhalte ganz einfach duplizieren und für die verschiedenen Bildschirme wiederverwenden, die ein Anwender bei der Nutzung Ihrer App durchläuft. Laden Sie die Beispiel-PSD-Datei herunter, wenn Sie die fertigen Zeichenflächen für dieses Tutorial interessieren.

App-Bildschirme mithilfe von Zeichenflächen gestalten

App als Vorschau auf einem Mobilgerät überprüfen

Mit Adobe Preview CC, einer Begleit-App für Photoshop CC, können Sie eine Echtzeit-Vorschau Ihres App- oder Webdesigns auf einem iPhone oder iPad anzeigen. Starten Sie Preview CC auf Ihrem Mobilgerät, und verbinden Sie das Gerät per USB oder WLAN. Klicken Sie auf das Symbol für die Gerätevorschau , um das Bedienfeld „Gerätevorschau“ zu öffnen. Warten Sie, bis die Verbindung hergestellt ist.

Preview CC erkennt, welche Zeichenflächen zur Größe des jeweiligen Geräts passen, und zeigt sie an. Die Vorschau ist live, d. h., alle Änderungen am Appdesign in Photoshop CC werden in Echtzeit auf Ihr Gerät übertragen. Durch einfaches Wischen können Sie in Preview CC zwischen den Zeichenflächen wechseln.

Design exportieren

Design für die Produktion exportieren

Wenn Sie mit dem Appdesign zufrieden sind, wählen Sie „Datei“ > „Exportieren“ > „Exportieren als“ und dann als Format „PNG“, um alle Zeichenflächen an Ihren Entwickler zu senden.

Tipp: Sie können Zeichenflächen auch einzeln in den Formaten PNG, JPEG, SVG oder GIF exportieren. Wählen Sie eine Zeichenfläche im Bedienfeld „Ebenen“ aus. Klicken Sie mit der rechten Maustaste darauf, und wählen Sie im Kontextmenü „Schnell-Export als PNG“. Oder wählen Sie „Exportieren als“, falls Sie andere Exporteinstellungen verwenden möchten.

App-Design testen
01/15/2018

Beitrag von: Salima Jiwani

War diese Seite hilfreich?