Wie kann man eine iPhone Music Player App Interface mit Photoshop CS6 gestalten

Photoshop CS6 ist eine viel leistungsfähigere Vektorschnittanwendung als seine Vorgänger.  In diesem Tutorial zeigen wir Ihnen, wie Sie diese neuen Funktionen verwenden können, um eine Benutzeroberfläche für die iPhone-Musik-Player-App sowohl in der ursprünglichen iPhone-Auflösung als auch in der Retina zu erstellen, ohne den gleichen Vorgang für beide Designs wiederholen zu müssen.  Lassen Sie uns anfangen!

Tutorial-Assets

Die folgenden Elemente wurden während der Erstellung dieses Tutorials verwendet.

• Pannenhilfe erforderlich
• Kalk-Licht
• Andere Assets in Download-Dateien

Schritt 1

Erstellen Sie eine neue Datei.  Stellen Sie die Breite auf 320 px und die Höhe auf 480 px ein.

Schritt 2

In diesem Schritt werden wir den Hintergrund erstellen.  Es gibt eine neue, einfachere Möglichkeit zum Erstellen von Vektorformen in Photoshop CS6, und wir verwenden diese Methode während des gesamten Tutorials.

Erstellen Sie eine neue Gruppe und nennen Sie es "Hintergrund".  Wählen Sie das Rechteck-Werkzeug (Rectangle Tool) (R) und stellen Sie in der Optionsleiste den Werkzeugmodus auf Form ein, und klicken Sie dann auf die Schaltfläche neben diesem, um den Formfülltyp auszuwählen.  Wählen Sie aus der Liste der Fülltypen die Schaltfläche Verlauf.  Legen Sie alle Werte auf die gleichen Werte fest, die im Bild unten hervorgehoben sind.  Verwenden Sie die Farben #3F4042 und #303133 für den Farbverlauf.

Klicken Sie auf eine beliebige Stelle auf der Leinwand.  Wenn das Create Rectangle-Fenster erscheint, klicken Sie einfach auf OK und stellen Sie sicher, dass die Dimensionen auf 700x700px festgelegt sind.  Benennen Sie die neu erstellte Ebene "Hintergrund".

Drücken Sie Cmd/Ctrl + A, um die gesamte Leinwand auszuwählen, wählen Sie das Verschieben-Werkzeug (Move Tool) (V) und klicken Sie dann in der Optionsleiste auf die Schaltflächen Horizontale Zentren ausrichten (Align Horizontal Centers) und Untere Kanten ausrichten (Align Bottom Edges).

Doppelklicken Sie auf das Ebenenminiatur auf der Ebene "Hintergrund" und stellen Sie sicher, dass das Kontrollkästchen Dither markiert ist.  Auf diese Weise erhalten Sie einen glatten Verlauf ohne Streifenbildung.

Schritt 3

Öffnen Sie in Photoshop die Datei statusbar.psd und importieren Sie die Statusleiste in dein funktionierendes PSD.  Verwenden Sie die oben genannte Methode, um die Gruppe "Statusleiste" auszurichten - Drücken Sie Cmd/Ctrl + A, um die gesamte Leinwand auszuwählen, und klicken Sie mit dem Verschiebewerkzeug (V) auf die Schaltflächen Horizontale Zentren ausrichten und Obere Kanten ausrichten (Align Top Edges).

Schritt 4

Erstellen Sie eine neue Gruppe unterhalb der Gruppe "Statusleiste" und nennen Sie sie "Navigationsleiste". Wählen Sie das Abgerundete Rechteck-Werkzeug (Rounded Rectangle Tool) (U) und setzen Sie die Eigenschaften wie im Bild unten gezeigt.  Verwenden Sie #5F8F1D und #99B83D für den Farbverlauf.  Klicken Sie auf eine beliebige Stelle auf der Zeichenfläche und klicken Sie auf OK, wenn das Fenster Abgerundetes Rechteck erstellen (Create Rounded Rectangle) angezeigt wird.  Benennen Sie die neu erstellte Ebene "Nav Bg."

Richten Sie die Ebene horizontal auf die Mitte und vertikal unterhalb der Statusleiste aus (sehen Sie unten).

Wählen Sie das Rechteck-Werkzeug (U) und zeichnen Sie eine Rechteckform, die der unten gezeigten ähnelt. Achten Sie jedoch darauf, dass diese Form nur den unteren Teil der Ebene "Nav Bg" bedeckt.  Ich habe die Option Keine Farbe für den Formfüllungstyp verwendet.

Wählen Sie mit dem Pfadauswahl-Werkzeug (Path Selection Tool) (A) die neu erstellte Form.  Drücken Sie Cmd/Ctrl + C, um die Form in die Zwischenablage zu kopieren.  Wählen Sie nun im Ebenenbedienfeld die Ebene "Nav Bg" und drücken Sie Cmd/Ctrl + V. Nun wird die Form in die Ebene "Nav Bg" eingefügt.

Klicken Sie bei aktivem Pfadauswahl-Werkzeug (A) in der Optionsleiste auf die Schaltfläche Pfadoperationen, und wählen Sie dann Subtrahieren der vorderen Form aus.

Klicken Sie erneut auf die Schaltfläche Pfadoperationen und wählen Sie dann Formkomponenten zusammenführen (Merge Shape Components).

Wählen Sie mit dem Direktauswahl-Werkzeug (A) die beiden unteren Punkte und verschieben Sie sie, bis die Höhe der Form 43 px beträgt.

Wenden Sie den folgenden Ebenenstil auf die Ebene "Nav Bg" an:

Schritt 5

Zeichnen Sie mit dem Abgerundeten Rechteckwerkzeug (U) eine Form mit den unten gezeigten Eigenschaften.  Verwenden Sie Volltonfarbe für den Formfüllungstyp.  Benennen Sie die neu erstellte Ebene "Settings Bg."

Wenden Sie den folgenden Ebenenstil an:

Verschieben Sie "Settings Bg" so, dass es vertikal zur Mitte von "Nav Bg" und horizontal 6px vom rechten Rand der Leinwand ausgerichtet ist.

Öffnen Sie icons.psd und verschieben Sie die Ebene "Einstellungen" auf Ihre PSD.  Richten Sie das Symbol horizontal und vertikal auf die Mitte von "Settings Bg."

Wenden Sie den folgenden Ebenenstil an:

Schritt 6

Zeichnen Sie mit dem Abgerundeten Rechteckwerkzeug (U) eine Form mit den unten gezeigten Eigenschaften.  Verwenden Sie Volltonfarbe für den Formfüllungstyp.  Benennen Sie die neu erstellte Ebene "Back Bg."

Fügen Sie mit dem Ankerpunkt hinzufügen-Werkzeug (Add Anchor Point Tool) einen Ankerpunkt auf der linken Seite des Rechtecks und 14 px unterhalb der oberen Kante hinzu.

Klicken Sie mit dem Konvertierungspunkt-Werkzeug (Convert Point Tool) auf denselben Ankerpunkt.

Wählen Sie nun das Direktauswahl-Werkzeug (A) und bewegen Sie den Punkt 10px nach links.

Wählen Sie mit dem Direktauswahl-Werkzeug (A) noch die zwei Ankerpunkte aus, die im Bild unten hervorgehoben sind, und bewegen Sie sie 1px nach links.  Wählen Sie dann das Punktumwandlungsprogramm und klicken Sie auf jeden der beiden Ankerpunkte.

Richten Sie die Form vertikal an der Mitte von "Nav Bg" und horizontal 6px vom linken Rand der Leinwand aus aus.

Schritt 7

Jetzt, wo wir mit der Zeichnung der Form fertig sind, können wir ihr einen Stil hinzufügen.  Klicken Sie mit der rechten Maustaste auf den Layer "Settings Bg" und wählen Sie Kopieren den Ebenenstil, klicken Sie dann mit der rechten Maustaste auf die Ebene "Back Bg" und wählen Sie "Ebenenstil einfügen".

Fügen Sie Text zu der Schaltfläche hinzu, indem Sie die Parameter aus dem Bild unten verwenden.  Ich habe die Schriftart Helvetica Neue benutzt.  Richten Sie den Text an der Mitte der Form aus und kopieren Sie den Ebenenstil aus der Ebene "Einstellungen".

Fügen Sie Titeltext mit den Parametern aus dem Bild unten hinzu und richten Sie ihn an der Mitte der Navigationsleiste aus.

Schritt 8

Erstellen Sie eine neue Gruppe unterhalb der Gruppe "Navigationsleiste" und nennen Sie sie "Position".  Wählen Sie das Rechteckwerkzeug (U) und stellen Sie die Eigenschaften wie im Bild unten gezeigt ein und klicken Sie dann irgendwo auf der Leinwand.  Verwenden Sie #2E2F30 und #494A4C für den Farbverlauf.  Benennen Sie die Ebene "Position Bg."

Platzieren Sie die Form unter der Navigationsleiste, stellen Sie jedoch sicher, dass zwischen ihnen eine Lücke von einem Pixel besteht.  Richten Sie die Form horizontal an die Mitte der Leinwand aus.

Wenden Sie den folgenden Ebenenstil auf die Form an:

Schritt 9

Wählen Sie das abgerundete Rechteck-Werkzeug (U) und stellen Sie die Eigenschaften wie im Bild unten gezeigt ein und klicken Sie dann irgendwo auf die Leinwand.  Stellen Sie den Radius auf einen höheren Wert ein.  Ich habe 50px benutzt.

Benennen Sie die Ebene "Position leer" und richten Sie sie horizontal und vertikal an der Mitte der Ebene "Position Bg" aus.

Wenden Sie den folgenden Ebenenstil an:

Wählen Sie das abgerundete Rechteck-Werkzeug (U) und stellen Sie die Eigenschaften wie im Bild unten gezeigt ein und klicken Sie dann irgendwo auf die Leinwand.  Verwenden Sie #85AD2A, #A0D028 und #B6D028 für den Farbverlauf.  Stellen Sie den Radius erneut auf einen höheren Wert ein.  Nennen Sie diese Ebene "Position voll".

Richten Sie die Form so aus, wie in der Abbildung unten gezeigt, stellen Sie jedoch sicher, dass zwischen der Form und der Ebene "Position leer" auf allen Seiten ein Abstand von zwei Pixeln vorhanden ist.

Wenden Sie den folgenden Ebenenstil auf die Form an:

Schritt 10

Wählen Sie das Ellipsen-Werkzeug (Ellipse Tool) (U) und stellen Sie die Eigenschaften wie im Bild unten gezeigt ein und klicken Sie dann irgendwo auf die Leinwand.  Verwenden Sie #444547 und #5C5E61 für den Farbverlauf.  Nennen Sie diese Ebene "Handle".

Richten Sie diese Form so aus, dass sie den rechten Rand der Ebene "Position voll" abdeckt.

Wenden Sie den folgenden Ebenenstil an:

Wählen Sie erneut das Ellipsen-Werkzeug (U) und stellen Sie die Eigenschaften wie im Bild unten gezeigt ein. Klicken Sie dann irgendwo auf der Leinwand.  Verwenden Sie #636669 und #38393B für den Farbverlauf.  Nennen Sie diese Ebene "Handle Circle".

Richten Sie die Form an der Mitte der Ebene "Handle" aus.

Fügen Sie Text für die Zeit hinzu.  Benutzen Sie Helvetica Neue, Fett.  Die Größe ist 10pt und die Farbe #B2B2B2.  Richten Sie den Text wie in der Abbildung unten gezeigt aus.

Schritt 11

Erstellen Sie eine neue Gruppe und nenne sie "Playback Controls".  Zeichnen Sie mit dem Ellipsenwerkzeug (U) einen Kreis mit den Maßen 50x50px.  Achten Sie nicht auf die anderen Parameter.  Benennen Sie die neue Ebene "Play Bg."

Erweitern Sie die Gruppe "Position", klicken Sie mit der rechten Maustaste auf die Ebene "Handle" und wählen Sie aus dem Menü "Shape Attribute".

Gehen Sie zurück zu der Gruppe "Playback Controls", klicken Sie mit der rechten Maustaste auf den Layer "Play Bg" und wählen Sie "Form Attribute einfügen" aus dem Menü.  Das ist eine neue Funktion in Photoshop CS6.  Auf diese Art und Weise werden alle Attribute für den Formfüllungstyp, wie Farbverlauf, Winkel usw., in die Ebene "Handle" kopiert, da wir die gleichen Werte für die neu erstellte Ebene verwenden.

Richten Sie die Ebene horizontal auf die Mitte der Leinwand aus und vertikal 20 px unter "Position Bg."

Wenden Sie den folgenden Ebenenstil an:

Schritt 12

Klicken Sie mit der rechten Maustaste auf die Ebene "Play Bg" und wählen Sie "Ebene duplizieren".  Benennen Sie die neue Ebene "Fast Backward Bg."

Mit dem Pfadauswahl-Werkzeug (A) klicken Sie auf die Ebene "Fast Backward Bg" und ändern Sie die Abmessungen in der Optionsleiste auf 34x34px.

Richten Sie die Ebene vertikal auf die Mitte von "Play Bg" und horizontal 8px nach links aus.

Duplizieren Sie "Fast Backward Bg" und benennen Sie die neue Ebene "Fast Forward Bg." Richten Sie die Ebene wie zuvor aus, diesmal jedoch auf der rechten Seite.

Schritt 13

Erstellen Sie eine neue Kreisform mit den Parametern aus dem Bild unten.  Verwenden Sie #46484A und #2C2D2E für den Farbverlauf.  Stellen Sie sicher, dass die neu erstellte Ebene unter allen anderen Ebenen in der Gruppe "Playback Controls" liegt.

Nennen Sie die Ebene "Playback Bg" und richten Sie sie sowohl horizontal als auch vertikal auf die Mitte von "Play Bg" aus

Duplizieren Sie "Playback Bg" und reduzieren Sie die Größe auf 48x48px mit der Methode, die wir in Schritt 12 verwendet haben. Richten Sie die Ebene auf die Mitte von "Fast Backward Bg" aus.

Duplizieren Sie die Ebene nun erneut und richten Sie sie auf die Mitte von "Fast Forward Bg."

Importieren Sie die Ebene "Fast Backward", "Play" und "Fast Forward" von icons.psd.  Richten Sie die Symbole wie in der Abbildung unten gezeigt aus.

Wählen Sie die drei Symbolebenen, indem Sie Cmd/Ctrl auf der Tastatur halten und entsprechend auf jede Ebene klicken.  Stellen Sie die Opazität auf 85% ein.

Importieren Sie die Ebene "Speaker" und "Repeat" von icons.psd.  Richten Sie die Symbole wie unten gezeigt aus.

Die importierten Symbole sind vollfarbig, aber wir werden ihnen einen Farbverlauf zuweisen.  Wählen Sie mit dem Pfadauswahl-Werkzeug (A) die Ebene "Speaker" und stellen Sie die Parameter aus dem Bild unten ein.  Verwenden Sie die Farben #6B6C70 und #797B80 für den Farbverlauf.

Kopieren Sie die Attribute aus dem Lautsprechersymbol mit der Option "Formattribute kopieren" und fügen Sie sie in das Wiederholungssymbol ein.

Wenden Sie den folgenden Ebenenstil an den Lautsprecher an und wiederholen Sie die Symbole:

Schritt 14

In diesem Schritt werden wir die Albumabdeckung in unserem Design platzieren.  Nach dem Import werden wir sie in intelligente Objekte umwandeln und die Größe der intelligenten Objekte um 50% reduzieren. Wir tun das, weil die Datei im letzten Tutorial-Schritt auf die Retina-Auflösung angepasst wird.  Auf diese Weise werden wir die Qualität der Rasterbilder nach der Größenanpassung an die Retina nicht verlieren.

Öffnen Sie albumcover-02.jpg und importieren Sie das Bild auf Ihre PSD.

Konvertieren Sie die Ebene in ein intelligentes Objekt, indem Sie auf Ebene > Intelligente Objekte > In Smart-Objekt konvertieren (Layer > Smart Objects > Convert to Smart Object) wechseln.  Drücken Sie Cmd/Ctrl + T auf der Tastatur, um die Ebene zu transformieren.  Reduzieren Sie die Größe auf 50%.  Nennen Sie diese Ebene "Album Cover Center".

Richten Sie die Ebene horizontal auf die Mitte der Leinwand aus und vertikal 20px unter der Ebene "Play Bg."

Zeichnen Sie mit dem Abgerundeten Rechteckwerkzeug (U) eine Form mit den unten gezeigten Parametern.  Legen Sie die Größe auf 180 x 180 px fest.  Verwenden Sie für den Formfülltyp keine Farbe und stellen Sie den Radius auf 3 px ein.

Richten Sie die Form genau auf das Abdeckungsbild des Albums aus.

Wenden Sie nun die Form auf das Abdeckungsbild des Albums an, indem Sie den Mauszeiger vom Miniaturbild der abgerundeten Rechteckebene zum Miniaturbild der Ebene "Album Cover Center" ziehen, während Sie die Cmd/Ctrl + Alt-Tasten auf Ihrer Tastatur halten.  Wenn Sie mit dem Kopieren fertig sind, löschen Sie die Ebene mit dem abgerundeten Rechteck, da wir sie nicht mehr benötigen.

Schritt 15

Öffnen Sie albumcover-01.jpg und importieren Sie das Bild in Ihre PSD, konvertieren Sie es in ein Smart-Objekt und ändern Sie die Größe auf 50%.  Richten Sie die Abdeckung vertikal auf die Mitte der Ebene "Album Cover Center" aus und horizontal 40px nach links.  Benennen Sie die Ebene "Album Cover Left".

Zeichnen Sie mit dem Abgerundeten Rechteckwerkzeug (U) eine Form mit den unten gezeigten Parametern.  Stellen Sie die Größe diesmal auf 160x160px ein.  Verwenden Sie für den Formfülltyp keine Farbe und stellen Sie den Radius auf 3 Pixel ein.

Kopieren Sie die abgerundete Rechteckform auf die Ebene "Album Cover Left", indem Sie dieselbe Methode für die mittlere Abdeckung verwenden.  Wenn Sie fertig sind, löschen Sie die Ebene mit dem abgerundeten Rechteck.

Öffnen Sie albumcover-03.jpg und importieren Sie es auf deine PSD.  Wiederholen Sie den Vorgang wie für die linke Abdeckung, richten Sie das Bild jedoch auf der rechten Seite wie unten gezeigt aus.

Schritt 16

Wenden Sie den folgenden Ebenenstil auf die mittlere Abdeckung an:

Kopieren Sie den Ebenenstil von der mittleren Abdeckung und fügen Sie ihn in die anderen beiden Abdeckungen ein.  Wählen Sie nun die linke und rechte Deckschicht aus und stellen Sie die Füllung auf 50% ein.

Fügen Sie einen Text für den Titellied ein.  Platzieren Sie es einige Pixel unter der mittleren Abdeckung.

Fügen Sie eine weitere Textzeile für den Autor des Lieds ein.  Richten Sie beide Linien an der Mitte aus.

Schritt 18

Zeichnen Sie mit dem Rechteck-Werkzeug (U) eine Form mit den unten gezeigten Parametern.  Verwenden Sie #292A2B und #38393B für den Farbverlauf.

Richten Sie die Form an der linken unteren Ecke der Leinwand aus.

Fügen Sie mit dem Ankerpunkt hinzufügen-Werkzeug zwei Ankerpunkte hinzu und legen Sie die Abstände wie im Bild gezeigt fest.

Wählen Sie die zwei Ankerpunkte aus, die auf dem Bild markiert sind, und bewegen Sie sie um 6 px nach oben.

Ziehen Sie die Richtungslinien mit dem Direktauswahl-Werkzeug (A) so, dass sie ähnlich denen aussehen, die unten angezeigt werden.

Schritt 19

In diesem Schritt schließen wir den Hintergrund der Registerkartenleiste ab, indem wir den Pfad, den wir im vorherigen Schritt erstellt haben, duplizieren und spiegeln.

Duplizieren Sie die Ebene und spiegeln Sie sie horizontal, indem Sie zu Bearbeiten > Transformationsweg > Horizontal spiegeln (Edit > Transform Path > Flip Horizontal) gehen.

Verschieben Sie die duplizierte Ebene genau in die untere rechte Ecke der Zeichenfläche.  Ein wichtiger Hinweis: Stellen Sie sicher, dass zwischen den beiden Formen keine Lücke ist.

Wählen Sie nun beide Ebenen wie im Bild gezeigt aus, klicken Sie mit der rechten Maustaste und wählen Sie Formen verschmelzen.

Das sollte die resultierende Form sein.  Wie Sie sehen können, gibt es eine vertikale Linie in der Mitte der Form.  Das bedeutet, dass wir zwei Formen in einer Ebene haben, die nicht vollständig zusammengeführt sind.

Klicken Sie mit dem Pfadauswahlwerkzeug (A) auf die Formebene, klicken Sie in der Optionsleiste auf die Schaltfläche Pfadoperationen und wählen Sie Formkomponenten zusammenführen.  Jetzt haben Sie die beiden Formen vollständig zusammengeführt.  Benennen Sie diese Ebene "Tab Bar Bg."

Wenn wir die Direkte Auswahl (A) auswählen, werden wir feststellen, dass beim Zusammenführen der Formen einige unnötige Ankerpunkte entstanden sind.  Versuchen Sie immer, Ihre Wege von unnötigen Punkten sauber zu halten.

Um diese Ankerpunkte zu löschen, wählen Sie das Ankerpunkte löschen Werkzeug und klicken Sie auf die beiden Ankerpunkte.

Wenden Sie den folgenden Ebenenstil auf "Tab Bar Bg" an:

Schritt 20

In diesem Schritt erstellen wir Leitfäden, mit denen wir die Registerkartensymbole leichter ausrichten können.

Verwenden Sie das rechteckige Auswahlrechteck (M), um ausgehend von der linken Seite der Leinwand eine 60 px breite Auswahl zu erstellen.

Ziehen Sie nun eine Hilfslinie vom linken Lineal und platzieren Sie sie am rechten Rand der Auswahl.  Stellen Sie sicher, dass die Option zum Fangen von Hilfslinien aktiviert ist.  Sie finden dies unter Ansicht > Anordnen > Hilfslinien (View > Snap To > Guides).

Wiederholen Sie den vorherigen Vorgang, um die anderen Führungen zu platzieren.  Stellen Sie die Abstände wie im Bild unten gezeigt ein.

Ziehen Sie zwei horizontale Hilfslinien vom oberen Lineal und legen Sie die Abstände wie im Bild gezeigt fest.

Schritt 21

Ziehen Sie den Layer "Home" aus der Datei icons.psd.

Verwenden Sie das rechteckige Auswahlrechteck (M), um eine Auswahl zu treffen, die an den Hilfslinien wie unten angebracht wird.

Klicken Sie mit dem Verschieben-Werkzeug (V) in der Optionsleiste auf die Schaltflächen Vertikale Zentren ausrichten und Horizontale Zentren ausrichten.

Geben Sie den Text "Home" mit den folgenden Parametern ein:

Richten Sie den Text vertikal an der unteren Führung und horizontal an der Mitte des Symbols aus.

Schritt 22

Wiederholen Sie Schritt 21 für die anderen Symbole und den Text (Favoriten, Playlisten und Suche).  Verwenden Sie das Bild unten als Referenz.

Schritt 23

Zeichnen Sie mit dem Rechteck-Werkzeug (U) eine Form mit den Parametern aus dem unteren Bild.  Verwenden Sie #5F8F1D und #99B83D für den Farbverlauf.

Richten Sie die Form so aus, dass ihre obere Kante die obere horizontale Führung und horizontal die Mitte der Registerkartenleiste berührt.  Benennen Sie die Ebene "Now Playing Bg."

Wenden Sie den folgenden Ebenenstil an:

Ziehen Sie den Layer "Now Playing" aus der Datei icons.psd und ändern Sie die Füllfarbe der Ebene auf #000000.

Wenden Sie den folgenden Ebenenstil an:

Richten Sie das Symbol horizontal auf die Mitte von "Now Playing Bg" und vertikal einige Pixel unter der oberen Kante aus.

Geben Sie den Text "Now Playing" mit den folgenden Parametern ein:

Richten Sie den Text erneut horizontal auf die Mitte der Schaltfläche und vertikal einige Pixel unter dem Symbol aus.  Kopieren Sie den Ebenenstil aus dem Symbol Aktuelle Wiedergabe.

Schritt 24

Wir sind mit der Schaffung aller Elemente des Designs fertig.  Aber wir haben noch einen letzten Schritt und skalieren die Datei auf die Retina.

Skalierung auf die Retina-Auflösung ist sehr einfach und es dauert nur einen Schritt.  Gehen Sie zu Bild > Bildgröße (Image > Image Size) und stellen Sie die Werte wie unten gezeigt ein.  Stellen Sie sicher, dass alle hervorgehobenen Parameter genauso eingestellt sind wie im Bild.

Das sollte das Ergebnis sein, nachdem das Bild auf die Retina-Auflösung angepasst wurde.

Schlussfolgerung

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie mit den neuen Vektorbearbeitungsfunktionen in Photoshop eine iPhone-Anwendungsschnittstelle erstellen können.  Darüber hinaus haben wir gezeigt, wie Sie diese Techniken verwenden können, um eine iPhone-Anwendung zu erstellen, die mit dem Original-Auflösungsgerät sowie dem Gegenstück zur Retina-Auflösung kompatibel ist.