Lernen Sie, wie Sie ein Applayout mit Comp entwerfen, mehrere Varianten Ihres Designs mithilfe von Zeichenflächen in Photoshop 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 Dateien 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 oder Photoshop auf die Dateien zugreifen zu können.
Hinweis: Sie müssen bei der Creative Cloud angemeldet sein, um die Bibliothek in Ihrem Konto speichern zu können.
Layout in Comp entwerfen.
Starten Sie Comp, 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 wandelt Ihre Gesten umgehend in Objekte um.
Tipp: Tippen Sie auf das Zahnrad am oberen Rand des Bildschirms, um die Auswahl an Zeichengesten einzublenden.
Entwurf mit Inhalten 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.
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 auf Ihrem Desktop weiterbearbeiten. Tippen Sie am oberen Rand des Bildschirms auf das Symbol zum Senden, und wählen Sie „An Photoshop CC“ senden.
Bildschirme für Ihre App oder Website erstellen.
Ihr Comp-Layout können Sie als Vorlage für App- oder Website-Designs verwenden. Falls Sie Photoshop 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“.
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 als Vorschau auf einem Mobilgerät überprüfen.
Mit Adobe Preview, einer Begleit-App für Photoshop, können Sie eine Echtzeit-Vorschau Ihres App- oder Webdesigns auf einem iPhone oder iPad anzeigen. Starten Sie Preview 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 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 werden in Echtzeit auf Ihr Gerät übertragen. Durch einfaches Wischen können Sie in Preview zwischen den Zeichenflächen wechseln.
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.
