Haupt / Wie Man

Verspotten Sie ein Musik-Player-Widget in Photoshop

Während die Spracherkennungs- und Gesten-Technologien exponentiell voranschreiten, wird der Bedarf an visuellen Benutzeroberflächen auch in Zukunft bestehen bleiben. Vor Jahrzehnten waren Schnittstellen oft grell und übertrieben. Die Verbraucher erwarten jedoch von der heute gut gestalteten und erschwinglichen modernen Software ein qualitativ hochwertiges Erscheinungsbild. Designer müssen jetzt auch ihre Oberflächen schön machen.

Die beste Vorgehensweise für Schnittstellen besteht darin, die Dinge einfach zu halten. Der Inhalt sollte ungehemmt sein und es sollte offensichtlich sein, wie die Benutzeroberfläche verwendet wird. Ein zu drastischer Paradigmenwechsel kann sich nachteilig auf das unmittelbare Verständnis einer Person für die Funktionsweise Ihrer Anwendung auswirken. Es ist besser, sich an das zu halten, was die Leute wissen, zum Beispiel ein Dreieck für ein 'Spiel' -Symbol.

In diesem Tutorial erstellen Sie jedes Teil eines fiktiven Musik-Player-Widgets bis zu den Symbolen auf den Schaltflächen und dem Knopf in der Fortschrittsanzeige. Sie werden lernen: wie Sie die Ebenenstile von Adobe Photoshop verwenden, um scharfen Oberflächen glatte und subtile Bemaßungen hinzuzufügen; wie man kaum wahrnehmbare Farbverläufe anwendet, die helfen, ein Merkmal der Greifbarkeit auszudrücken; wie man hilfreiche und schöne Interaktionszustände für die Schaltflächen des Widgets erstellt; und wie man den richtigen Schwebezustand und die eingepressten Zustände gestaltet, während alles klar bleibt.

Das Widget ist in Graustufen, aber Sie können diese Techniken in all Ihren Designs verwenden. Sie können die Support-Dateien für dieses Tutorial herunterladen Hier .

01. Erstellen Sie eine Containerebene

Zeichnen Sie ein abgerundetes Rechteck mit einem Randradius von 6 Pixel. Doppelklicken Sie auf die Ebene, um das Dialogfeld 'Stile' zu öffnen, und geben Sie ihr eine lineare Verlaufsfüllung von 90 Grad mit # F9F9FA oben und #EFEFEF unten. Fügen Sie einen weißen inneren Schatten mit 2px Abstand hinzu.

02. Fügen Sie einen Schlagschatten hinzu

Geben Sie der Containerebene einen schwarzen 4-Pixel-Schlagschatten mit 1-Pixel-Abstand und 10% Deckkraft. Fügen Sie nun einen 1-Pixel-Strich hinzu und geben Sie ihm einen Hell-Dunkel-Verlauf mit einer Füllung von # C8C8C8

03. Isolieren Sie die Schaltflächenleiste

Dupliziere die Ebene und wähle das Pfadauswahl-Werkzeug ( ZU ) und wählen Sie den Pfad des Rechtecks. Verwenden des Rechteck-Werkzeugs ( U. ), halten Sie die Umschalttaste gedrückt, während Sie ein Rechteck über den vorhandenen Pfad zeichnen. Wählen Sie im Optionsfeld die Option Formbereiche überschneiden, um eine kleinere Form zu isolieren.

04. Schaltflächenformen erstellen

Entfernen Sie den Strich und den Schlagschatten und erleichtern Sie den Farbverlauf auf # F0EFEF oben und # F9FAFA unten. Verwenden Sie das Linienwerkzeug ( U. ), um eine einzelne # DFDFDF-Linie über den oberen Rand der Leiste zu ziehen. Fügen Sie zwei schwarze vertikale Linien hinzu und verringern Sie die Deckkraft auf 6%.

05. Machen Sie ein Spielsymbol

Mit dem benutzerdefinierten Formwerkzeug ( U. ), zeichne ein scharfes Dreieck und fülle es mit #BABABA. Drehen Sie es mit Free Transform (90 Grad im Uhrzeigersinn). Cmd + T. ). Wenden Sie einen schwarzen Innenschatten mit einem Abstand von 1 Pixel und einer Größe von 1 Pixel bei einer Deckkraft von 40% an. Wenden Sie einen weißen Schlagschatten in einem Abstand von 1 Pixel an.

06. Erstellen Sie ein Schnellvorlaufsymbol

Dupliziere das Wiedergabesymbol. Verwenden Sie die freie Transformation, um sie auf ungefähr 75% zu verkleinern. Verwenden Sie dann das Pfadauswahl-Werkzeug ( ZU ), um seinen Pfad auszuwählen. Kopieren Sie es und fügen Sie es ein. Halten Sie nun die Umschalttaste gedrückt und verschieben Sie den neuen Pfad mit der rechten Pfeiltaste nach rechts.

07. Erstellen Sie ein Rückspul-Symbol

Verwenden des Linienwerkzeugs ( U. ) Halten Sie die Umschalttaste gedrückt und fügen Sie dem Symbol eine vertikale Linie von 1 Pixel hinzu. Verstecke deinen Weg mit Cmd + H. . Wählen Sie das Verschieben-Werkzeug ( V. ), halten Sie opt + cmd gedrückt und drücken Sie die linke Pfeiltaste, um die Ebene zu duplizieren. Dann, Cmd + T. Klicken Sie mit der rechten Maustaste und wählen Sie Horizontal spiegeln.

08. Text hinzufügen

Bewegen Sie die neue Form in Position und stellen Sie sicher, dass beide Schaltflächen symmetrisch sind. Fügen Sie als Nächstes mit dem Textwerkzeug Begleittext für den Titel und den Interpreten des Titels hinzu ( T. ). Setzen Sie sie kontrastreich auseinander, indem Sie eine leichter als die andere machen.

09. Passen Sie den Schriftstil an

Fügen Sie als Nächstes dem Text etwas Tiefe hinzu. Fügen Sie auf einer Textebene einen weißen Schlagschatten in einem Abstand von 1 Pixel hinzu. Klicken Sie dann mit der rechten Maustaste auf die Ebene und klicken Sie auf Ebenenstil kopieren. Wählen Sie die anderen Typebenen aus, klicken Sie mit der rechten Maustaste auf eine in der Ebenenpalette und klicken Sie auf Ebenenstil einfügen.

10. Erstellen Sie eine Spurschicht

Wählen Sie das abgerundete Rechteck-Werkzeug, geben Sie ihm einen Radius von 100 Pixel und zeichnen Sie eine Spur zwischen den Zeitstempeln. Es muss als dunklerer Graben erscheinen, damit sich der Fortschrittsbalken füllt. Die Ebenenstile werden umgekehrt, wenn die Lichtquelle von oben kommt.

11. Fertigstellen der Spurleiste

Geben Sie der Spurleiste einen weißen Schlagschatten in einem Abstand von 1 Pixel und einen schwarzen inneren Schatten in einem Abstand von 1 Pixel in einer Deckkraft von 10%. Fügen Sie einen Verlaufsstrich mit # 8C8C8C oben und #DFDEDE unten hinzu. Beenden Sie es mit einer Verlaufsfüllung, die oben #CCCCCC und unten # E8E8E8 ist.

12. Machen Sie den Fortschrittsbalken

Duplizieren Sie die Spur-Ebene und verwenden Sie das Direktauswahl-Werkzeug ( ZU ), wählen Sie die drei Ankerpunkte ganz rechts aus (Vergrößern oder Markieren). Halten Sie die Umschalttaste gedrückt und drücken Sie die linke Pfeiltaste, um den rechten Rand des Fortschrittsbalkens in die Mitte des Tracks zu verschieben.

13. Zurück zur ersten Ebene

Nachdem die Form des Fortschrittsbalkens festgelegt wurde, klicken Sie mit der rechten Maustaste auf die erste Ebene, die Sie erstellt haben (für den Container), und klicken Sie auf Ebenenstil kopieren. Wählen Sie dann Ihre neue Fortschrittsbalkenebene aus, klicken Sie mit der rechten Maustaste, klicken Sie auf Ebenenstil einfügen und entfernen Sie den Schlagschatten.

14. Erstellen Sie den Fortschrittsbalkenknopf

Wählen Sie das Ellipsen-Werkzeug ( U. ), halt Verschiebung und zeichnen Sie einen Kreis für einen Knopf. Die Ebenenstile befinden sich in Ihrer Zwischenablage aus dem vorherigen Schritt. Klicken Sie also mit der rechten Maustaste auf Ihre Ellipsenebene und klicken Sie erneut auf Ebenenstil einfügen. Lassen Sie diesmal den Schlagschatten für die Tiefe.

15. Fügen Sie einige Schaltflächenzustände hinzu

Diese sind nützlich, um Benutzern die Bestätigung zu geben, dass die Taste gedrückt wurde. Wählen Sie die Schaltflächenleiste unten aus und duplizieren Sie die Ebene. Wählen Sie dann die Ankerpunkte ganz links aus und ziehen Sie sie bei gedrückter Umschalttaste, bis sie den linken Rand des rechten Teilers erreichen.

16. Schalten Sie die Ebene in einen Schwebezustand

Es ist am besten, wenn die Tasten beim Schweben subtil aufleuchten. Ändern Sie die Oberseite des Verlaufs in Weiß und die Unterseite des Verlaufs in #EFEFEF. Entfernen Sie den inneren Schatten, da dieser mit dem Teiler in Konflikt steht. Dupliziere nun die Ebene und verstecke das Original.

17. Für einen eingepressten Zustand

Wir möchten, dass die einzelnen Schaltflächen dunkler werden und so aussehen, als ob sie tatsächlich gedrückt wurden, wenn ein Benutzer auf den Cursor klickt. Ändern Sie die Füllung in Schwarz und reduzieren Sie die Verlaufsopazität auf 95%. Fügen Sie als Nächstes einen inneren Schatten mit einem Abstand von 1 Pixel und einer Größe von 3 Pixel bei einer Deckkraft von 20% hinzu.

18. Styling hinzufügen

Fügen Sie zum Schärfen der Schaltfläche einen Schlagschatten mit 100% # D7D7D7 und einem Abstand von 1 Pixel hinzu. Stellen Sie sicher, dass 'Globale Beleuchtung verwenden' deaktiviert ist, und ändern Sie den Winkel auf -90 Grad. Verschieben Sie in der Ebenenpalette die Ebene unter die vertikalen Schaltflächenteiler, jedoch über den Schaltflächenleisten-Teiler.

19. Feinabstimmung

Für das i-Tüpfelchen gehen Sie zurück zur Knopfschicht und duplizieren Sie sie. Verwenden Sie die freie Transformation ( Cmd + T. ), um die Größe um 20% zu verringern, und fügen Sie die Ebenenstile aus der Spur-Ebene in die Ebene ein. Verdunkeln Sie dann den Strich, indem Sie die Farbe des oberen Verlaufs in Vollschwarz ändern.

Wörter: Morgan Allan Knutson

Dieser Artikel erschien ursprünglich in .net Magazin Ausgabe 239.