German (Deutsch) translation by Federicco Ancie (you can also view the original English article)
Photoshop verfügt über einige leistungsstarke Tools, mit denen Sie wunderschöne Benutzeroberflächen erstellen können. In diesem Tutorial zeigen wir Ihnen, wie Sie mit der leistungsstarken Toolbox von Photoshop eine saubere iPad-Oberfläche erstellen. Lass uns anfangen!
Tutorial Assets
Schritt 1
Erstellen Sie eine neue Datei. Stellen Sie die Breite auf 768 und die Höhe auf 1024 und die Auflösung auf 132 PPI ein.
Schritt 2
Erstellen Sie eine neue Gruppe und nennen Sie sie Hintergrund. Erstellen Sie innerhalb dieser Gruppe eine neue Ebene, füllen Sie sie mit #c2c2c2 und wenden Sie die Ebenenstile an. Erstellen Sie eine weitere Ebene, füllen Sie sie mit einer beliebigen Farbe, gehen Sie zu Filter > Rauschen > Rauschen hinzufügen und stellen Sie den Betrag auf 400%, Verteilung auf Einheit und aktivieren Sie das Kontrollkästchen Monochrom. Stellen Sie den Mischmodus für die Ebene auf Weiches Licht und die Deckkraft auf 14% ein.
Schritt 3
Erstellen Sie eine neue Gruppe und nennen Sie sie Side Button. Erstellen Sie mit dem rechteckigen Werkzeug (U) eine Rechteckform wie im Beispiel. Stellen Sie die Füllfarbe auf #636363 ein und wenden Sie den Ebenenstil an. Nehmen Sie nun das rechteckige Werkzeug (U) und erstellen Sie eine weitere Rechteckform, diesmal etwas kleiner als die vorherige. Setzen Sie die Füllfarbe auf #cfcfcf, und wenden Sie anschließend die Ebenenstile an.
Schritt 4
Stellen Sie mit dem Horizontal Type Tool (T) die Schriftart auf Myriad Pro (Standardschriftart) / Fett und die Größe auf 14 ein und geben Sie die Nummer 1 in die Mitte der Form ein. Wenden Sie den Ebenenstil an, duplizieren Sie die Seitenschaltflächengruppe wie im Beispiel und ändern Sie die Textnummer jeder Form.
Schritt 5
Erstellen Sie nun eine neue Gruppe und nennen Sie sie Aktionsschaltfläche. Stellen Sie mit dem abgerundeten Rechteck-Werkzeug (U) den Radius auf 5 Pixel ein und erstellen Sie eine Form wie im Beispiel. Stellen Sie die Füllfarbe auf #3d3d3d ein und wenden Sie den Ebenenstil an. Erstellen Sie mit dem abgerundeten Rechteck-Werkzeug (U) eine kleinere Form, setzen Sie die Füllfarbe auf #d7d7d7 und wenden Sie die Ebenenstile an.
Schritt 6
Mit dem Stiftwerkzeug (P) erstellen wir das Symbol. Zeichnen Sie ein Dreieck und setzen Sie die Füllfarbe auf #696969, wenden Sie die Ebenenstile an und duplizieren Sie die Form wie im Beispiel gezeigt.
Schritt 7
Machen Sie nach Schritt 5 zehn weitere Schaltflächen und lassen Sie einen freien Platz für die gedrückte Version der Schaltflächen. Mit dem abgerundeten Rechteck-Werkzeug (U) erstellen Sie eine weitere Form im Abstand zwischen den Schaltflächen. Stellen Sie die Farbe auf #2c2c2c ein und wenden Sie den Ebenenstil an. Erstellen Sie nun mit dem abgerundeten Rechteck-Werkzeug (U) eine andere Form, diesmal etwas kleiner, wie im Beispiel, und wenden Sie die Ebenenstile an.
Schritt 8
Zeichnen Sie mit dem Rechteckwerkzeug (U), dem Ellipsenwerkzeug (U) und dem benutzerdefinierten Formwerkzeug (U) die folgenden Formen. Stellen Sie die Füllfarbe für alle Formen auf #696969 ein, mit Ausnahme des Wiedergabesymbols, das wir in #0b709a einfärben werden. Wenden Sie auf alle mit #696969 gefärbten Formen den ersten Satz von Ebenenstilen und auf das Wiedergabesymbol den letzten Satz von Ebenenstilen an.
Schritt 9
Erstellen Sie eine neue Gruppe und nennen Sie sie Schiebeschalter. Erstellen Sie mit dem rechteckigen Werkzeug (U) eine Form wie im Beispiel. Stellen Sie die Füllfarbe auf #d4d4d4 ein. Treffen Sie jetzt mit dem Rechteckigen Auswahlwerkzeug (M) zwei Auswahlen wie im Beispiel. Wählen Sie die Auswahl umkehren und Ebenenmaske hinzufügen. Wenden Sie den Ebenenstil an.
Schritt 10
Erstelle eine neue Ebene und verwandle sie in eine Schnittmaske. Erstellen Sie mit dem Rechteck-Werkzeug (U) eine Form wie im Beispiel, setzen Sie die Farbe auf #2c2c2c und wenden Sie den Ebenenstil an. Nun arbeiten wir an den Details. Erstellen Sie eine neue Gruppe und nennen Sie sie Details. Erstellen Sie mit dem rechteckigen Werkzeug (U) ein kleines Quadrat wie im Beispiel. Setzen Sie die Füllung auf 0% und wenden Sie den Ebenenstil an. Duplizieren Sie die Ebene so oft wie nötig, um ein ähnliches Ergebnis wie im Beispiel zu erzielen. Stellen Sie die Deckkraft der Detailgruppe auf 50% ein und wir sind hier fertig.
Schritt 11
Nachdem Sie eine neue Ebene erstellt und in eine Clippin-Maske umgewandelt haben, verwenden Sie das rechteckige Werkzeug (U) und erstellen Sie eine Form wie im Beispiel. Stellen Sie die Füllfarbe auf #484848 ein und wenden Sie die Ebenenstile an. Erstellen Sie eine neue Ebene und stellen Sie mit dem Horizontal Type Tool (T) die Schriftart auf Myriad Pro (Standardschriftart) / Fett und die Schriftgröße auf 14 pt ein. Schreiben Sie die Zahlen 02, 04 und 06 genau wie im Beispiel und wenden Sie die Ebenenstile an. Machen Sie eine weitere Ebene und verwandeln Sie sie in eine Clippin-Maske. Erstellen Sie eine andere Form wie die erste, Filter > Rauschen > Rauschen hinzufügen und setzen Sie den Betrag auf 400, Verteilung auf Einheit und aktivieren Sie das Kontrollkästchen Monochrom. Stellen Sie die Deckkraft auf 5% ein und fahren Sie mit dem nächsten Schritt fort.
Schritt 12
Erstellen Sie eine neue Gruppe und nennen Sie sie Anzeige. Zeichnen Sie mit dem Stiftwerkzeug (P) eine Form wie im Beispiel, reduzieren Sie die Füllung auf 0% und wenden Sie Ebenenstile an.
Schritt 13
Erstellen Sie mit dem Stiftwerkzeug (P) eine andere Form, setzen Sie die Farbfüllung auf #49c1ff und wenden Sie die Ebenenstile an. Erstellen Sie eine neue Ebene, füllen Sie die Ebene mit einer beliebigen Farbe, gehen Sie zu Filter / Rauschen / Rauschen hinzufügen und stellen Sie den Betrag auf 400%, Verteilung auf Einheit und aktivieren Sie das Kontrollkästchen Monochrom. Transformieren Sie die Ebene in eine Schnittmaske und stellen Sie den Mischmodus für die Ebene auf Weiches Licht und die Deckkraft auf 14% ein.
Schritt 14
Verwenden Sie nach dem Herunterladen der LCD-Schrift das Horizontal Type Tool (T) und schreiben Sie mit unterschiedlichen Schriftgrößen einen Text wie im Beispiel auf. Setzen Sie die Farbe auf Weiß #ffffff und wenden Sie den Ebenenstil auf alle 3 Textebenen an. Laden Sie jetzt mit dem benutzerdefinierten Formwerkzeug (U) Webformen aus dem Librabry und verwenden Sie die im Beispiel gezeigten angegebenen Formen. Wenden Sie den Ebenenstil an und wir sind fertig.
Schritt 15
Zeichnen Sie nun mit dem Rechteckform-Werkzeug (U) 60 weiße #ffffff-Rechtecke wie im Beispiel. Ändern Sie die Farbe einiger von ihnen in #7f7f7f und wenden Sie den Ebenenstil an. Ordnen Sie alle diese Ebenen einer Gruppe zu und nennen Sie sie Indikatoren. Wenn Sie nun das auf Pfade eingestellte Stiftwerkzeug (P) verwenden, treffen Sie eine Auswahl wie im Beispiel, wählen Sie die Umkehrung aus und fügen Sie der Gruppe eine Maske hinzu.
Schritt 16
Sie müssen die genauen Schritte von Schritt 12 bis Schritt 15 ausführen, um die Anzeige auf der rechten Seite der Benutzeroberfläche zu spiegeln. Sie können herumspielen, kreativ werden, da dies eines der wichtigsten Dinge beim Entwerfen ist.
Schritt 17
Erstellen Sie eine neue Gruppe und nennen Sie sie Knob. Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen schwarzen Kreis #000000 wie im Beispiel. Lass die Füllung auf 8% fallen. Treffen Sie nun mit dem auf Pfade eingestellten Stiftwerkzeug (P) eine Auswahl wie im Beispiel und fügen Sie sie als Ebenenmaske hinzu. Wenden Sie die Ebenenstile an und fahren Sie mit dem nächsten Schritt fort.
Schritt 18
Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen weiteren Kreis innerhalb der vorherigen Form, setzen Sie die Farbfüllung auf #141414 und wenden Sie die Ebenenstile an.
Schritt 19
Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen weiteren Kreis, setzen Sie die Farbfüllung auf #efefef und wenden Sie die Ebenenstile an.
Schritt 20
Zeichnen Sie mit dem Ellipsen-Werkzeug (U) einen weiteren Kreis wie im Beispiel, setzen Sie die Füllfarbe auf #414141 und wenden Sie die Ebenenstile an. Fügen Sie eine neue Ebene hinzu und transformieren Sie sie in eine Schnittmaske. Mit dem Stiftwerkzeug (P), das auf Formebenen eingestellt ist, erstellen Sie eine Form wie im Beispiel und setzen die Farbe auf #6dcff6.
Schritt 21
Fügen Sie eine neue Ebene hinzu und erstellen Sie mit dem Ellipsen-Werkzeug (U) einen weiteren Kreis wie im Beispiel. Setzen Sie die Füllfarbe auf weiß #ffffff und wenden Sie die Ebenenstile an.
Schritt 22
Erstellen Sie eine neue Ebene und wählen Sie mit dem Pinselwerkzeug einen mittelgroßen Pinsel aus, setzen Sie die Härte auf 0 und die Farbe auf #000000 und machen Sie einen Strich wie im Beispiel. Transformiere die Ebene in eine Schnittmaske. Erstelle eine neue Ebene und fülle sie mit einer beliebigen Farbe. Gehen Sie zu Filter > Rauschen > Rauschen hinzufügen und setzen Sie den Betrag auf 400, Verteilung auf Einheit und aktivieren Sie das Kontrollkästchen Monochromatisch. Gehen Sie danach zu Filter / Unschärfe / Radiale Unschärfe und stellen Sie den Betrag auf 50, die Unschärfemethode auf Spin und die Qualität auf Best ein. Transformieren Sie die Ebene in eine Schnittmaske und stellen Sie den Mischmodus für die Ebene auf Hartes Licht und die Deckkraft auf 41% ein. Zentrieren Sie das Auge des Wirbels mit der Mitte unseres Knopfes und Sie können mit dem nächsten Schritt fortfahren.
Schritt 23
Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen weiteren Kreis wie im Beispiel. Setzen Sie die Füllung auf 0 und wenden Sie den Ebenenstil an. Duplizieren Sie diese Ebene und ändern Sie die Größe, bis Sie ein Ergebnis wie im Beispiel erhalten. Fügen Sie alle diese Ebenen in einem Stammordner / einer Stammgruppe hinzu und reduzieren Sie die Deckkraft der Gruppe auf 15%.
Schritt 24
In diesem Schritt erstellen wir die Richtungsindikatoren. Mit dem Stiftwerkzeug (P) müssen Sie eine Form wie im Beispiel zeichnen. Stellen Sie die Füllfarbe auf #3a3a3b ein. Wählen Sie nun die Ebene aus und fügen Sie eine Ebenenmaske hinzu. Verwenden Sie das Verlaufswerkzeug (G), das auf Vordergrund auf Transparent eingestellt ist, und wählen Sie Schwarz #000000 als Vordergrundfarbe. Erstellen Sie einen Verlaufsstrich wie im Beispiel. Duplizieren Sie die Ebene und ändern Sie die Größe, damit Sie ein Ergebnis wie im Beispiel erhalten. Wenden Sie auf beide Ebenen die Ebenenstile und unsere Richtungsindikatoren an.
Schritt 25
Erstellen Sie eine neue Gruppe und nennen Sie sie Schrauben. Erstellen Sie mit dem Ellipsen-Werkzeug (U) zwei schwarze #000000-Kreise wie in meinem Beispiel und wenden Sie die Ebenenstile an. Erstellen Sie nun mit dem Ellipsen-Werkzeug (U) erneut zwei Kreise, diesmal etwas kleiner als die vorherigen, und setzen Sie die Füllfarbe auf #494949. Wenden Sie die Ebenenstile an und wir können mit dem nächsten Schritt fortfahren.
Schritt 26
Stellen Sie mit dem Horizontal Type Tool (T) die Schriftart auf Britannic Font und die Größe auf 11 pt ein und geben Sie wie im Beispiel zwei "+" ein. Wenden Sie die Ebenenstile auf sie an und unsere Schrauben sind fertig.
Schritt 27
Erstelle eine neue Gruppe und nenne sie Switchesc. Zeichnen Sie mit dem Stiftwerkzeug (P) zwei schwarze #000000-Formen wie im Beispiel und wenden Sie die Ebenenstile an.
Schritt 28
Zeichnen Sie mit dem Stiftwerkzeug (P) zwei weitere Formen wie im Beispiel und setzen Sie die Füllfarbe auf #cecece. Wenden Sie anschließend die Ebenenstile an.
Schritt 29
Jetzt werden wir an unserem linken Schalter arbeiten. Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen weißen #ffffff-Kreis wie im Beispiel und wenden Sie die Ebenenstile an.
Schritt 30
Laden Sie mit dem benutzerdefinierten Formwerkzeug (U) das Symbolpaket aus der Bibliothek und fügen Sie das Autosymbol mit der Füllfarbe Weiß #ffffff hinzu. Wenden Sie die Ebenenstile an. Wählen Sie in der Bibliothek des benutzerdefinierten Formwerkzeugs das Fahrrad aus und fügen Sie es ein. Anschließend wenden Sie den Ebenenstil an.
Schritt 31
Nun zum richtigen Schalter arbeiten. Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen kleinen Kreis wie im Beispiel, setzen Sie die Füllfarbe auf #75d0f5 und wenden Sie die Ebenenstile an.
Schritt 32
Stellen Sie mit dem Horizontal Type Tool (T) die Schriftart auf Arial und die Schriftgröße auf 9 ein und schreiben Sie "EDIT" wie im Beispiel und wenden Sie die Ebenenstile an. Verwenden Sie nun eine kleinere Schriftart und schreiben Sie die Wörter EIN und AUS in einem Winkel von 45 Grad und wenden Sie den Ebenenstil an.
Schritt 33
Erstellen Sie eine neue Gruppe und nennen Sie sie Schalter 2. Erstellen Sie mit dem Ellipsen-Werkzeug (U) Formen wie im Beispiel. Setzen Sie die Füllung auf 0% und wenden Sie die Ebenenstile an. Verwenden Sie das Ellipsen-Werkzeug (U) erneut und erstellen Sie zwei Formen wie im Beispiel. Stellen Sie die Farbfüllung auf #2e2e2e und wenden Sie den Ebenenstil an.
Schritt 34
Erstellen Sie mit dem Ellipsen-Werkzeug (U) zwei Formen wie im Beispiel. Setzen Sie die Füllfarbe auf #b6b6b6 und wenden Sie die Ebenenstile an.
Schritt 35
Stellen Sie mit dem abgerundeten Rechteck-Werkzeug (U) den Radius auf 5 px ein und zeichnen Sie sechs Formen, genau wie in meinen Beispielen. Setzen Sie die Füllung für alle Ebenen auf 0% und wenden Sie die Ebenenstile an. Setzen Sie nun mit dem Ellipse-Werkzeug die Farbe auf #4c4c4c und machen Sie 6 Kreise wie im Beispiel. Mit dem rechteckigen Werkzeug (U) und derselben Farbe werden 4 Formen wie im Beispiel erstellt. Jetzt müssen Sie das Horizontal Type Tool (T) verwenden und die Schriftart auf Myriad Pro / Bold und die Schriftgröße auf 6 pt einstellen und am Ende jeder Gruppe a
schreiben"-" und ein "+" wie im Beispiel.
Schritt 36
Erstellen Sie eine neue Gruppe und nennen Sie sie Video Connector. Zeichnen Sie mit dem Stiftwerkzeug (P) eine Form wie im Beispiel. Stellen Sie die Füllfarbe auf #252525 ein und wenden Sie die Ebenenstile an.
Schritt 37
Erstellen Sie mit dem Stiftwerkzeug (P) eine andere Form, genau wie im Beispiel, setzen Sie die Füllfarbe auf #292929 und wenden Sie die Ebenenstile an.
Schritt 38
Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen Kreis wie im Beispiel und setzen Sie die Füllfarbe auf #9da2a6. Wählen Sie das Rechteckige Auswahlwerkzeug (M) und treffen Sie 3 Auswahlen wie im Beispiel. Wählen Sie Invers und fügen Sie eine Ebenenmaske hinzu. Wählen Sie nun Stiftwerkzeug (P), stellen Sie es auf Pfade ein und erstellen Sie einen Auswahlpfad wie im Beispiel. Wählen Sie die Miniaturansicht der Ebenenmaske aus unserer Kreisebene aus, füllen Sie die Auswahl mit der schwarzen #000000 und wenden Sie die Ebenenstile an. Lassen Sie eine neue Ebene mit einer beliebigen Farbe füllen, gehen Sie zu Filter > Rauschen > Rauschen hinzufügen und stellen Sie den Betrag auf 400%, Verteilung auf Einheitlich ein und aktivieren Sie das Kontrollkästchen Monochrom. Transformiere diese Ebene in eine Schnittmaske, setze den Mischmodus für die Ebene auf Weiches Licht und die Deckkraft auf 24% und wir können mit dem nächsten Schritt fortfahren.
Schritt 39
Erstellen Sie mit dem Ellipsen-Werkzeug (U) sieben schwarze #000000-Kreise wie im Beispiel und wenden Sie den Ebenenstil an. Verwenden Sie das Rechteck-Werkzeug (U) und erstellen Sie eine Form wie im Beispiel, setzen Sie die Füllfarbe auf #323232 und wenden Sie den Ebenenstil an.
Schritt 40
Bilden Sie eine neue Gruppe und nennen Sie diesen einen Jack. Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen Kreis wie im Beispiel. Setzen Sie die Füllfarbe auf #4b4b4b und wenden Sie die Ebenenstile an.
Schritt 41
Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen weiteren Kreis, setzen Sie die Füllung auf 0% und wenden Sie die Ebenenstile an. Erstellen Sie mit dem Ellipsen-Werkzeug (U) einen weiteren Kreis, lassen Sie die Füllung auf 0% fallen und wenden Sie den Ebenenstil an.
Schritt 42
Erstellen Sie mit dem Rechteck-Werkzeug (U) 4 Formen wie die im Beispiel angegebenen und setzen Sie die Füllfarbe auf #474747. Erstellen Sie mit dem Rechteck-Werkzeug (U) eine kleine Rechteckform zwischen den beiden zuvor ausgeführten oberen Strichen. Stellen Sie die Füllfarbe auf #92a1ab ein. Erstellen Sie nun mit dem Ellipsen-Werkzeug (U) einen weiteren Kreis wie im Beispiel, setzen Sie die Füllfarbe auf #83898f und treffen Sie mit dem Ellipsen-Auswahlwerkzeug (M) eine kreisförmige Auswahl innerhalb der Form, die wir zuvor genau wie die in ausgeführt haben das Beispiel. Wählen Sie nun invers und Ebenenmaske hinzufügen. Wenden Sie die Ebenenstile an und fahren Sie mit dem nächsten Schritt fort.
Schritt 43
Erstellen Sie eine neue Gruppe und nennen Sie sie USB-Anschluss. Erstellen Sie mit dem Rechteck-Werkzeug (U) eine Form wie im Beispiel und setzen Sie die Füllfarbe auf #1f1f1f. Wenden Sie die Ebenenstile an und wir sind fertig.
Schritt 44
Erstellen Sie eine neue Ebene und verwandeln Sie sie in eine Schnittmaske. Stellen Sie mit dem abgerundeten Rechteck-Werkzeug (U) den Radius auf 5 Pixel ein und erstellen Sie eine Form wie im Beispiel. Stellen Sie die Füllung auf 0% und wenden Sie den Ebenenstil an. Erstellen Sie eine neue Ebene und machen Sie mit einem mittelgroßen und einem kleinen schwarzen Pinsel #000000 zwei Striche wie im Beispiel. Verwandle diese Ebene in eine Schnittmaske und reduziere die Deckkraft auf 70%.
Schritt 45
Erstellen Sie mit dem abgerundeten Rechteck-Werkzeug mit einem Radius von 5 px fünf Formen wie im Beispiel und setzen Sie die Füllfarbe auf #8d8d8d. Wenden Sie anschließend den Ebenenstil an. Zeichnen Sie nun mit dem Stiftwerkzeug (P), das auf Shape-Ebenen eingestellt ist, eine Form wie im Beispiel, setzen Sie die Füllfarbe auf #454544 und wenden Sie den Ebenenstil an. Erstellen Sie mit dem Rechteck-Werkzeug (U) fünf Quadrate wie im Beispiel, setzen Sie die Füllfarbe auf #1a1a1a und wenden Sie den Ebenenstil an. Erstellen Sie erneut mit dem Rechteck-Werkzeug (U) 5 Formen wie im Beispiel und setzen Sie die Füllfarbe auf #eceee9.
Schritt 46
Zeichnen Sie mit dem Stiftwerkzeug (P) eine Form wie im Beispiel, reduzieren Sie die Füllung auf 0% und wenden Sie den Ebenenstil an.
Endgültiges Bild
By
