Share
In diesem Kurztipp-Tutorial wird erklärt, wie Sie einen Kunststoffschalter in Photoshop erstellen, den Sie in Ihren Schnittstellendesigns verwenden können. Lass uns anfangen!
Erstellen Sie eine neue Datei. Stellen Sie Width auf 400 und Height auf 300 und die Auflösung auf 72 PPI ein.
Erstellen Sie nun eine neue Gruppe und nennen Sie sie Hintergrund. Verwenden Sie das Rechteckwerkzeug (U), um eine Form zu zeichnen, die größer als die Leinwand ist, genau wie im Beispiel. Setzen Sie die Farbe auf Weiß #ffffff und wenden Sie die Ebenenstile an.
Erstellen Sie eine neue Gruppe und nennen Sie sie Basis. Zeichnen Sie mit dem Stiftwerkzeug (P) eine Form wie im Beispiel. Legen Sie die Farbe auf # 242424 fest und wenden Sie die Ebenenstile an. Nun ist unsere Grundform fertig.
Erstellen Sie eine neue Gruppe und nennen Sie sie Button. Zeichnen Sie mit dem Stiftwerkzeug (P) eine Form wie im Beispiel. Setzen Sie die Farbe auf # ada397 und wenden Sie den Ebenenstil an.
Nun fügen Sie der Schaltfläche etwas Volumen und Details hinzu. Erstellen Sie in der Schaltflächengruppe eine neue Ebene über der Schaltflächenform. Legen Sie mit dem Pinsel-Werkzeug (B) die Vordergrundfarbe auf schwarz # 000000, die Pinselgröße auf 11px und die Härte auf 0 fest und zeichnen Sie unten eine kurze Linie Teil der Schaltfläche, wie im Beispiel zu sehen. Wandeln Sie diese Ebene in eine Schnittmaske um, indem Sie die ALT-Taste gedrückt halten und zwischen den beiden Ebenen drücken, oder klicken Sie einfach mit der rechten Maustaste auf die letzte Ebene und wählen Sie Schnittmaske erstellen.
Erstellen Sie eine neue Ebene, und zeichnen Sie mit dem Stiftwerkzeug (P) eine schwarze # 000000-Form wie im Beispiel. Gehen Sie zu Filter> Weichzeichnen> Gaußscher Weichzeichner, setzen Sie den Radius auf 1,5 px und wenden Sie den Filter an. Stellen Sie mit dem Radiergummi-Werkzeug (E) die Größe auf 58 und die Härte auf 0 ein und streichen Sie die linke Seite der verschwommenen Form weg (die rote Form im Beispiel markiert die Stelle). Setzen Sie die Deckkraft der Ebene auf 18% und machen Sie aus dieser Ebene eine Schnittmaske. Erstellen Sie nun eine neue Ebene, wählen Sie Pinselwerkzeug (B) aus, stellen Sie die Größe auf 15px und die Härte auf 0 ein, setzen Sie die Farbe auf # 92897f und zeichnen Sie eine gerade Linie wie im Beispiel. Wenn Sie fertig sind, wandeln Sie diese Ebene ebenfalls in eine Schnittmaske um.
Erstellen Sie eine neue Ebene, wählen Sie mit dem Stiftwerkzeug (P) die Farbe auf # c8b7a5 und zeichnen Sie eine Form wie im Beispiel. Gehen Sie zu Filter> Weichzeichnen> Gaußscher Weichzeichner, setzen Sie den Radius auf 1,5 px und wenden Sie den Filter an. Stellen Sie mit dem Radiergummi-Werkzeug (E) die Größe auf 58 und die Härte auf 0 und streichen Sie die linke Seite der verschwommenen Form weg (die rote Form im Beispiel markiert die Stelle). Wählen Sie nun das Pinselwerkzeug (B), stellen Sie die Größe auf 13px und die Härte auf 0, setzen Sie die Farbe auf # c8b7a5 und zeichnen Sie eine gerade Linie wie im Beispiel. Machen Sie aus dieser Ebene eine Schnittmaske.
Erstellen Sie eine neue Ebene und setzen Sie mit dem Zeichenstift-Werkzeug (P) die Farbe auf schwarz # 000000, und zeichnen Sie eine Form wie im Beispiel. Gehen Sie zu Filter> Weichzeichnen> Gaußscher Weichzeichner, setzen Sie den Radius auf 1,5 px und wenden Sie den Filter an. Stellen Sie mit dem Radiergummi-Werkzeug (E) die Größe auf 58 und die Härte auf 0 ein und streichen Sie die linke Seite der verschwommenen Form weg (die rote Form im Beispiel markiert die Stelle). Setzen Sie nun den Mischmodus für die Ebene auf Überlagerung und die Deckkraft auf 80% und transformieren Sie die Ebene in eine Schnittmaske.
Erstellen Sie eine neue Ebene und stellen Sie mit dem Pinselwerkzeug (B) die Größe auf 10px, die Härte auf 0% und die Farbe auf schwarz # 000000 ein und zeichnen Sie ein paar Linien um den unteren und rechten Teil der Schaltfläche, wie im Beispiel gezeigt . Wandle diese Ebene in eine Schnittmaske um und erstelle eine neue. Verwenden Sie das Pinsel-Werkzeug (B) mit den gleichen Einstellungen wie zuvor und zeichnen Sie auf der rechten Seite der Schaltfläche weitere Linien. Jetzt müssen wir die Vektormaske-Miniaturansicht der Schaltfläche in unsere Ebene kopieren. Halten Sie die ALT-Taste gedrückt, und klicken Sie auf die Vektormasken-Miniaturansicht, um sie genau wie im Beispiel auf diese Ebene zu ziehen. Wir werden diese Ebene oder zukünftige Layer-Schnittmasken nicht erstellen.
Wir werden eine neue Ebene erstellen. Zeichnen Sie mit dem Stiftwerkzeug (P) eine weitere schwarze # 000000-Form genau wie die im Beispiel. Gehen Sie zu Filter> Weichzeichnen> Gaußscher Weichzeichner, setzen Sie den Radius auf 1,5 px und wenden Sie den Filter an. Legen Sie die Deckkraft der Ebene auf 20% fest. Erstellen Sie eine neue Ebene und fügen Sie mit dem Pinselwerkzeug (B) einige Highlights hinzu. Stellen Sie die Größe auf 2px und die Härte auf 0% ein, setzen Sie die Farbe auf # d5c8b5 und machen Sie einen kleinen Punkt in der Nähe der linken oberen Ecke der Schaltfläche. Erstellen Sie eine weitere Ebene und fügen Sie mit dem Stiftwerkzeug (P) weitere Details hinzu. Setzen Sie die Farbe auf #dbcebe und zeichnen Sie drei weitere Formen wie im Beispiel. Diese Highlights werden dazu beitragen, unserem Button mehr Volumen und Realismus zu verleihen.
Erstellen Sie eine neue Gruppe und platzieren Sie sie unter Basisgruppe. Nennen Sie es Schatten. Stellen Sie mit dem Stiftwerkzeug (P) die Farbe auf # 000000 und zeichnen Sie eine Form wie im Beispiel. Gehen Sie zu Filter> Weichzeichnen> Gaußscher Weichzeichner, setzen Sie den Radius auf 1,5 px und wenden Sie den Filter an. Stellen Sie die Deckkraft der Ebene auf 20% ein und setzen Sie mit dem Radiergummi-Werkzeug (E) die Größe auf 58px und die Härte auf 0%, und streichen Sie den unteren rechten Teil unserer Form aus (roter Kreis kennzeichnet die Fläche im Beispiel)..
Accentsconagua