Wie kann man einen detaillierten Audio-Player in Photoshop erstellen?

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Wenn Sie am GUI-Design arbeiten, sind Formen eine großartige Möglichkeit, um Ihrem Design ein realistisches Aussehen zu verleihen. Da die Formen vektorbasiert sind, können Sie ihre Größe mit minimalem Detailverlust ändern, was beim GUI-Design eine wichtige Rolle spielt.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie einen detaillierten Audio-Player von Grund auf neu erstellen. Dieses Tutorial ist eine großartige Gelegenheit für Sie, diese Fertigkeiten in Formwerkzeugen und Ebenenstilen zu üben, wobei Sie viele Formen hinzufügen und entfernen müssen. Genießen!

Anmerkung des Herausgebers: Dieses Tutorial ist von der Arbeit von Lance Thackeray inspiriert. Eine spezifische Referenz finden Sie im Arbeit Signal. In der GUI Station finden Sie außerdem Ressourcen zum Design der Benutzeroberfläche.

Endgültige Bildvorschau

Bevor wir anfangen, schauen wir uns das Bild an, das wir erstellen werden. Sie können die endgültige Bildvorschau unten oder eine größere Version hier anzeigen.

Videoanleitung

Unser Video-Editor Gavin Steele hat dieses Video-Tutorial erstellt, um dieses Text + Bild-Tutorial zu ergänzen.

Schritt 1

Erstellen Sie ein neues Dokument mit den unten gezeigten Einstellungen. Sie können tatsächlich jede Auflösung verwenden, die Sie wählen. In diesem Tutorial habe ich 1024x768 verwendet.

Schritt 2

Nehmen Sie das Verlauf-Werkzeug, wählen Sie Linearer Stil und füllen Sie die Ebene von oben (#000000) nach unten (#45494d).

Schritt 3

Wählen Sie das Ellipse-Werkzeug (Umschalt + U) und zeichnen Sie einen Kreis. Benennen Sie die gerade erstellte Ebene in "Player_L1" um und wenden Sie eine Verlauf-Ineinanderkopieren und eine äußere Kontur mit den unten gezeigten Einstellungen an.

Schritt 4

Als nächstes werden wir dieser Ebene ein schönes Muster hinzufügen. Da Sie keine Muster- und Verlaufsstile auf dieselbe Ebene anwenden können, duplizieren Sie die Ebene und benennen Sie sie in "Player_L1_Pattern" um. Ändern Sie die Füllmethode der Ebene in Multiplizieren mit 40% Deckkraft und wenden Sie die unten gezeigten Ebenenstile an. Ich habe ein sehr cooles "Spiderman"-Muster von *s0nkite verwendet, das Sie hier herunterladen können.

Schritt 5

Für den nächsten Schritt müssen Sie eine Schallplatte erstellen. Ein nettes Tutorial von Arik zum Erstellen einer Schallplatte in Photoshop, das Ihnen zeigt, wie es geht.

Sie können dem Tutorial von Arik folgen und den Datensatz in diesem Design erstellen, einfach ohne Hintergrund. Wenn Sie den Datensatz fertiggestellt haben, führen Sie alle Ebenen zusammen und benennen Sie die zusammengeführte Ebene in "Player_L2" um. Wenden Sie die folgenden Ebenenstile an und stellen Sie sicher, dass Sie die Aufzeichnung so drehen, dass ihre Blendung wie gezeigt positioniert wird.

Schritt 6

Erstellen Sie eine neue Ebene und benennen Sie sie in "Player_L12_Shade" um. Klicken Sie mit der Befehlstaste auf die Ebene "Player_L1", um die Form auszuwählen. Stellen Sie sicher, dass Sie Schwarz als Vordergrundfarbe ausgewählt haben, greifen Sie zum Pinsel-Werkzeug (B) und fügen Sie mit einem 200px weichen, abgerundeten Pinsel vorsichtig eine schwarze Schattierung hinzu, die sich von außerhalb des ausgewählten Bereichs abhebt. Stellen Sie sicher, dass Sie nur den Boden einfärben, da dies der einzige Bereich ist, für den derzeit eine Schattierung erforderlich ist. Ändern Sie die Füllmethode der Ebene in Multiplizieren mit 80% Deckkraft.

Schritt 7

Dupliziere die Ebene "Player_L1" und platziere sie über allen anderen Ebenen. Nennen Sie diese Ebene "Player_L3". Drücken Sie Befehlstaste + T, um die Form zu transformieren. Wir werden seine Größe um 105% erhöhen, wie unten gezeigt.

Schritt 8

Als nächstes müssen wir in den neu geschaffenen Kreis schnitzen. Klicken Sie dazu auf die Ebene "Player_L3", greifen Sie zum Zeichenstift-Werkzeug (P) und wählen Sie "Vom Formbereich subtrahieren" (-). Verwenden Sie das Stiftwerkzeug, um die Form wie unten gezeigt zu zeichnen.

Sobald die Form fertig ist, greifen Sie zum Pfadauswahl-Werkzeug (A) und wählen Sie die Form aus, die Sie gerade erstellt haben. Ziehen Sie die Form bei gedrückter Alt-Taste, um sie zu duplizieren. Wählen Sie Bearbeiten > Transformieren > Drehen und drehen Sie die duplizierte Form, bis sie sich im richtigen Winkel gegenüber der ursprünglichen befindet.

Schritt 9

Wir werden nun ein Muster erstellen, mit dem wir unser Design ein wenig öffnen. Erstellen Sie eine neue Datei (Datei > Neu) mit den folgenden Einstellungen: Größe 4 x 4 Pixel, Auflösung 72 dpi und transparenter Hintergrund. Nehmen Sie das Buntstift-Werkzeug (B) und stellen Sie die Größe auf 1 Pixel ein. Erstellen Sie dann das folgende Muster mit einer weißen Farbe (möglicherweise möchten Sie die Ansicht vergrößern, damit die Zeichnung einfacher wird). Wenn Sie mit dem Zeichnen des Musters fertig sind, wählen Sie Bearbeiten > Muster definieren und nennen Sie es "Gepunktetes Muster".

Schritt 10

Doppelklicken Sie auf die Ebene "Player_L3" und wenden Sie die folgenden Ebenenstile an.

Schritt 11

Duplizieren Sie die Ebene "Player_L3" und benennen Sie die neue Ebene "Player_L3_2". Ändern Sie auch die Füllmethode der Ebene in Weiches Licht mit 50% Deckkraft. Doppelklicken Sie auf diese Ebene, um die folgenden Ebenenstile anzuwenden.

Schritt 12

Erstellen Sie eine neue Ebene und nennen Sie sie "Player_L3_Shade". Klicken Sie mit der Befehlstaste auf "Player_L3" und fügen Sie auf der rechten und unteren Seite des ausgewählten Bereichs eine Schattierung hinzu (wie in Schritt 6).

Schritt 13

Jetzt werden wir dem Körper des Spielers einen kleinen Blick hinzufügen. Erstelle eine neue Ebene und nenne sie "Player_Glare". Klicken Sie auf dieser Ebene mit der Befehlstaste auf die Ebene "Player_L1", um ihre Form auszuwählen. Füllen Sie den ausgewählten Bereich mit Weiß und deaktivieren Sie die Ebene (Befehl + D).

Wählen Sie den Inhalt von "Player_Glare" aus, wählen Sie Auswählen > Auswahl transformieren und drücken Sie dann sieben Mal den Abwärtspfeil. Drücken Sie anschließend fünfmal den Rechtspfeil, um den Auswahlbereich zu verschieben. Wenn Sie fertig sind, klicken Sie auf die Eingabetaste, um die Änderung zu übernehmen. Klicken Sie auf Löschen, um den Inhalt des Auswahlbereichs zu löschen. Sie haben jetzt die Form der Blendung.

Transformieren Sie die Form (Befehlstaste + T), um sie zu verschieben und wie gezeigt zu drehen. Ändern Sie die Füllmethode der Ebene in Weiches Licht und doppelklicken Sie auf die Ebene, um den folgenden Verlaufsstil anzuwenden.

Schritt 14

Der nächste Schritt ist etwas mühsam, gebe ich zu. In Photoshop fehlt es jedoch an der Möglichkeit, Formen auf Pfaden auszurichten. Daher müssen wir dies Schritt für Schritt wiederholt tun. Nehmen Sie das Rechteck-Werkzeug (U) und zeichnen Sie horizontal ein Rechteck mit einer Breite von 5 Pixel und einer Länge von 470 Pixel (Sie können eines in jeder Größe zeichnen und dann seine Größe mithilfe des Transformationsmenüs ändern, wie Sie unten sehen können).

Nehmen Sie das Pfadauswahl-Werkzeug (A) und wählen Sie es aus. Stellen Sie sicher, dass Sie sich im Modus Zum Formbereich hinzufügen befinden, und ziehen Sie das Rechteck bei gedrückter Alt- und Umschalttaste nach oben, um es zu duplizieren. Wiederholen Sie diesen Vorgang, bis Sie 25 Rechtecke erhalten. Jetzt kommt der mühsame Teil - Sie müssen vierundzwanzig dieser Rechtecke drehen, um sie in einem Kreis zu organisieren.

Sie können sie in -7,5-Grad-Multiplikationen drehen. Wenn Sie fertig sind, wählen Sie alle Formen mit dem Pfadauswahl-Werkzeug (A) aus und richten Sie ihre horizontalen und vertikalen Zentren aus. Um diesen Schritt abzuschließen, wählen Sie das Ellipse-Werkzeug (Umschalt + U), stellen Sie sicher, dass Sie sich im Modus "Vom Formbereich subtrahieren" (-) befinden, und zeichnen Sie einen großen Kreis, der nur etwa 10 Pixel von den ursprünglichen Rechtecklinien entfernt ist (siehe unten). Wiederholen Sie die letzte Aktion, diesmal mit einem Rechteck-Werkzeug (U), um alle unnötigen Formen zu entfernen. Sie haben es durch diesen Schritt geschafft! Woohoo!.

Schritt 15

Nennen Sie die Ebene "Dekorationen" und wenden Sie mit den folgenden Einstellungen einen inneren Schatten an.

Schritt 16

Erstellen Sie mit den Rechteck-, Ellipse- und Zeichenstift-Werkzeugen und den oben beschriebenen Methoden das Hauptfenster des Players. Um den 3D-Effekt zu erstellen, erstellen Sie die gewünschte Form, benennen Sie die Ebene "Main_Panel_1" und wenden Sie die folgenden Ebenenstile an.

Schritt 17

Als nächstes duplizieren Sie das "Main_Panel_1" und benennen Sie die neue Ebene "Main_Panel_2". Skalieren Sie die Form auf 95% Breite und 92% Höhe der Originalgröße, indem Sie auf Befehl + T klicken und die Transformationssymbolleiste verwenden. Wenden Sie zum Abschluss des Looks wie gezeigt ein Verlauf-Ineinanderkopieren an.

Schritt 18

Wir werden nun mit der Erstellung der Audio-Steuerungsschaltflächen und Schieberegler beginnen. Wählen Sie Weiß als Vordergrundfarbe, greifen Sie zum Ellipse-Werkzeug (Umschalt + U) und zeichnen Sie bei gedrückter Alt + Umschalttaste einen perfekten Kreis. Nennen Sie die Ebene "Control_button_1". Doppelklicken Sie auf die Ebene und wenden Sie die folgenden Einstellungen für das Äußere Glühen an.

Schritt 19

Duplizieren Sie die Ebene "Control_button_1" und benennen Sie die neue Ebene in "Control_button_2" um. Skalieren Sie die Größe der Form mit den oben beschriebenen Methoden auf 97% und wenden Sie das folgende Verlauf-Ineinanerkopieren an.

Schritt 20

Wiederholen Sie Schritt 19, diesmal auf der Ebene "Control_button_2", und benennen Sie die neue Ebene "Control_button_3". Die auf diese Ebene angewendete Verlaufsüberlagerung ist dieselbe wie im vorherigen Schritt, nur nicht umgekehrt.

Schritt 21

Erstellen Sie eine neue Ebene und positionieren Sie sie über der Ebene "Control_button_3". Nennen Sie es "Control_Glare". Nehmen Sie das Elliptische Auswahl-Werkzeug (M) und zeichnen Sie eine ovale Form, die sich mit den Schaltflächengrafiken schneidet.

Klicken Sie in der Miniaturansicht der Ebene "Control_button_1" auf Befehl + Umschalt + Alt. Dadurch wird nur der Bereich ausgewählt, der sich zwischen den beiden Auswahlen schneidet. Füllen Sie diesen Bereich mit einer weißen Farbe und stellen Sie die Füllmethode der Ebene auf Weiches Licht mit einer Deckkraft von 70% ein.

Schritt 22

Gruppieren Sie alle in den Schritten 18 bis 21 erstellten Ebenen und nennen Sie die Gruppe "Weiterleitungsschaltfläche". Duplizieren Sie die Gruppe, um die Schaltflächen zum Zurückspulen, Stoppen und Anhalten von Aktionen zu erstellen, und benennen Sie sie entsprechend um. Ändern Sie die Größe und positionieren Sie die Tasten wie unten gezeigt.

Schritt 23

Erstellen Sie die Steuerungsschaltflächensymbole mit dem Rechteck-Werkzeug (U), indem Sie die in den vorherigen Schritten beschriebenen Methoden zum Hinzufügen zum Formbereich und Subtrahieren vom Formbereich wiederholen. Platzieren Sie jedes Symbol in der entsprechenden Schaltflächengruppe unter der Schaltfläche "Control_Glare". Erstellen Sie beim Erstellen der Dreiecke für die Vorwärts- und Rücklaufsymbole auch eines für das Wiedergabesymbol.

Schritt 24

Wir werden jetzt die Wiedergabetaste erstellen. Nehmen Sie das Ellipse-Werkzeug (Umschalt + U), zeichnen Sie einen perfekten Kreis und positionieren Sie ihn zwischen den Tasten Pause und Stopp. Nennen Sie diese Ebene "Play_Button_1" und wenden Sie die folgenden Ebenenstile an.

Schritt 25

Duplizieren Sie die Ebene "Play_Button_1" und benennen Sie die neue Ebene "Play_Button_2" um. Skalieren Sie die Größe der Form mit den oben beschriebenen Methoden auf 85% und wenden Sie die folgenden Ebenenstile an.

Schritt 26

Wiederholen Sie die Aktionen von Schritt 21, um eine Blendung auf der Wiedergabetaste zu erzeugen. Nennen Sie die neue Ebene "Play_Button_Glare" und ändern Sie die Füllmethode in "Weiches Licht" mit 70% Deckkraft. Erstellen Sie außerdem eine neue Ebene, die Sie unter der Ebene "Play_Button_Glare" positionieren müssen, auf der Sie das in Schritt 23 erstellte Wiedergabesymbol platzieren. Sie können auch alle Ebenen der Wiedergabetaste gruppieren und die Gruppe "Wiedergabetaste" benennen.

Schritt 27

Verwenden Sie das Ellipse-Werkzeug (Umschalt + U), das Zeichenstift-Werkzeug (P) und den Bereich Zur Form hinzufügen. Verwenden Sie auch die vorherige Methode, um den Hintergrundbereich der Schaltfläche zu erstellen. Stellen Sie sicher, dass Sie zuerst die Kreise um die Schaltflächen erstellen, sie horizontal und vertikal mit den Schaltflächen in der Mitte ausrichten und sie dann mit dem Zeichenstift-Werkzeug verbinden. Wenn Sie fertig sind, benennen Sie die Ebene "Buttons_Bk", platzieren Sie sie hinter der Gruppe "Wiedergabetaste" und wenden Sie die folgenden Ebenenstile an.

Schritt 28

Erstellen Sie mit dem abgerundeten Rechteck-Werkzeug die folgende Form. Wenn Sie die Formen fertig haben, wechseln Sie zum Rechteck-Werkzeug (U) und klicken Sie in der Optionsleiste auf Vom Formbereich subtrahieren (-). Zeichnen Sie ein großes Rechteck, um den größten Teil der linken Seite der zuvor erstellten Linien abzudecken. Wenn Sie fertig sind, benennen Sie die Ebene in "Volume_Levels" um und wenden Sie die folgenden Ebenenstile an.

Schritt 29

Wir werden nun mit der Arbeit an den Lautstärkereglern und Balance-Reglern beginnen. Stellen Sie Ihre Vordergrundfarbe auf #8e8e8e ein, greifen Sie zum abgerundeten Rechteck-Werkzeug (Umschalt + U), stellen Sie den Radius in der Optionsleiste auf 10 Pixel ein und zeichnen Sie eine vertikale Rechteckform. Nennen Sie die Formebene "Volume_Rail" und passen Sie ihre Position und Skalierung gemäß dem folgenden Bild an. Wenn Sie fertig sind, wenden Sie auch die folgenden Ebenenstile an.

Schritt 30

Nehmen Sie das Linien-Werkzeug (Umschalt + U), stellen Sie das Gewicht in der Optionsleiste auf 2 Pixel und die Vordergrundfarbe auf #3b3b3b ein. Zeichnen Sie als Nächstes eine vertikale Linie in der Mitte der Form "Volume_Rail". Sie können sich mit zwei Anleitungen wie mir helfen, die die Dinge etwas genauer machen.

Wenn Sie fertig sind, benennen Sie die Ebene "Volume_Rail_1", wählen Sie das Verschieben-Werkzeug (V) und richten Sie die vertikalen und horizontalen Zentren der beiden Ebenen mithilfe der Optionsleiste aus. Klicken Sie mit der rechten Maustaste auf die Ebene "Volume_Rail" und kopieren Sie den Ebenenstil von dieser Ebene auf die Ebene, die Sie gerade erstellt haben.

Schritt 31

Das Erstellen des eigentlichen Schiebereglers ist recht einfach. Nehmen Sie das Rechteck-Werkzeug (U) und zeichnen Sie ein Rechteck an einer beliebigen Stelle auf der Schiebereglerschiene. Machen Sie sich keine Sorgen um die tatsächliche Platzierung, da Sie die Form immer horizontal an der Ebene "Volume_Rail_1" ausrichten können. Wenn Sie mit der Größe der Form zufrieden sind, benennen Sie die Ebene in "Slider_1" um und wenden Sie die folgenden Ebenenstile an (Sie haben es erraten!).

Schritt 32

Um den Schieberegler zu vervollständigen, duplizieren Sie einfach die Ebene "Slider_1" und skalieren Sie sie wie zuvor auf 95% Breite und 90% Höhe. Bewegen Sie die Form im Transformationsmodus nach oben, bis sie fast das Ende der Form "Slider_1" erreicht hat, und drücken Sie die Eingabetaste. Benennen Sie diese Ebene in "Slider_2" um und fügen Sie das folgende Verlauf-Ineinanderkopieren hinzu.

Sie können auch #a1a1a1 als Vordergrundfarbe auswählen, das Linien-Werkzeug greifen und eine kleine Linie in der Mitte der Form "Slider_2" zeichnen, um dem Slider eine zusätzliche realistische Note zu verleihen.

Nehmen Sie das Text-Werkzeug (T), wählen Sie die gewünschte Schriftart und Größe aus (ich habe die Schriftart Estrangelo Edessa bei 10pt verwendet) und geben Sie das Wort Lautstärke ein. Positionieren Sie den Text über dem Schieberegler. Nehmen Sie als Nächstes das Polygon-Werkzeug (Umschalt + U), wählen Sie 3 als Anzahl der Seiten in der Optionsleiste und zeichnen Sie zwei kleine Dreiecke, die die Aufwärts-/Abwärtsrichtung angeben. Sowohl der Text als auch die Dreiecke sind in der Farbe #414040.

Schritt 33

Gruppieren Sie alle Ebenen des Lautstärkereglers (einschließlich der Schiene) und nennen Sie die Gruppe "Lautstärkeregler". Duplizieren Sie diese Gruppe, benennen Sie sie in "Balance Slider" um (denken Sie daran, auch die Ebenen entsprechend umzubenennen) und drehen und skalieren Sie die Formen dann in ihre Position, wie unten gezeigt. Beachten Sie, dass aufgrund der Drehung einige der Ebenenstilwerte angepasst werden müssen:

Ändern Sie in der Ebene "Balance_Rail" den Winkel des Verlauf-Ineinanderkopierens auf -90 Grad.
In allen Schiebereglern sollte der Verlauf-Ineinanderkopieren-Winkel 180 Grad betragen.

Wählen Sie #414040 als Vordergrundfarbe aus und erstellen Sie mit den Ellipse- und Abgerundetes Rechteck-Werkzeugen (Umschalt + U) das Balance-Symbol wie unten gezeigt. Nehmen Sie zum Abschluss das Text-Werkzeug, geben Sie L und dann R ein und positionieren Sie sie wie im Beispiel (ich habe die Schrift Estrangelo Edessa in einer Größe von 10pt verwendet).

Schritt 34

Wir werden uns jetzt auf das Hauptfenster des Players konzentrieren. Für diesen Abschnitt habe ich eine kostenlose Schriftart namens Arcade verwendet. Ich habe diese Schriftart als Teil meines Gesamtkonzepts ausgewählt. Wenn Sie jedoch einem anderen Konzept gefolgt sind, können Sie auch ein anderes verwenden. Das Hauptfenster des Players besteht aus den folgenden Teilen.

Schritt 35

Wir beginnen mit dem Fortschrittsbalkenelement. Wählen Sie Weiß als Vordergrundfarbe, greifen Sie zum Linien-Werkzeug (Umschalt + U), wählen Sie 1 Pixel als Gewicht in der Optionsleiste und zeichnen Sie eine Linie von einer Seite des Hauptfensters zur gegenüberliegenden Seite, vorzugsweise in der Mitte. Nennen Sie diese Ebene "Dekoration" und erstellen Sie eine neue Ebenenmaske. Wählen Sie als Nächstes, während die Maske ausgewählt ist, das Verlauf-Werkzeug (G) und bereiten Sie einen Verlauf wie unten gezeigt vor. Zeichnen Sie den Farbverlauf wie unten markiert, um den gewünschten Fading-Effekt zu erzielen.

Nehmen Sie als nächstes das Rechteck-Werkzeug (U), drücken Sie (D), um Ihre Farbpalette zurückzusetzen, und zeichnen Sie ein Rechteck wie unten gezeigt. Nennen Sie diese Ebene "Progress_1" und richten Sie die Mitte dieser Ebene vertikal an der Ebene "Dekoration" aus. Wenden Sie den unten angegebenen Strich an.

Nehmen Sie das Rechteck-Werkzeug (U) erneut, wählen Sie #c97507 als Vordergrundfarbe und zeichnen Sie ein Rechteck innerhalb der Form "Progress_1", wie unten gezeigt. Nennen Sie diese Ebene "Progress_2".

Schritt 36

Verwenden Sie dieselbe in Schritt 35 beschriebene Methode und fügen Sie die Song-Informationen (Interpreten-, Album- und Songnamen) hinzu. Sie können auch zusätzliche Titelinformationen wie die Länge des Songs, die Titelqualität und den Dateityp hinzufügen. In meinem Design habe ich Äußeres Glühen verwendet, um das Fortschrittselement des Songs ein wenig hervorzuheben.

Schritt 37

Verwenden Sie das Text-Werkzeug (T) und das Benutzerdefinierte Form-Werkzeug (Umschalt + U), um die Funktionsschaltflächen zu erstellen. Letzteres bietet eine Vielzahl von benutzerdefinierten Formen, mit denen Sie Ihre Symbole entwerfen können. Um das Design des Hauptpanels fertigzustellen, wählen Sie Weiß als Vordergrundfarbe. Nehmen Sie als Nächstes das Stiftwerkzeug (P) und zeichnen Sie eine Blendform ähnlich dem folgenden Beispiel. Wenn Sie fertig sind, benennen Sie die Ebene "Panel_Glare" und wenden Sie die unten beschriebene Verlaufsüberlagerung an. Ändern Sie dann die Füllmethode der Ebene in Weiches Licht mit einer Deckkraft von 40%.

Schritt 38

Wie Sie im endgültigen Bild sehen können, habe ich hinter dem Hauptfenster und dem Hintergrund der Steuertasten eine Dekoration hinzugefügt. Um diese Dekoration zu erstellen, greifen Sie zum Ellipse-Werkzeug (Umschalt + U) und zeichnen Sie einen großen perfekten Kreis. Wählen Sie das Rechteck-Werkzeug (U) und wählen Sie in der Optionsleiste die Option Vom Formbereich subtrahieren.

Zeichnen Sie nun zwei Rechtecke. Einer schneidet die Oberseite und der andere die Unterseite des Kreises. Passen Sie die Form an den entsprechenden Bereich an. Sobald Sie die Form fertig haben, platzieren Sie die Ebene unter der Ebene "Buttons_Bk". Wenden Sie die Ebenenstile wie gezeigt an.

Schritt 39

Die letzten Elemente, die erstellt werden müssen, sind die Schaltflächen Schließen, Minimieren und Kompakt. Die Schaltfläche zum Schließen ist recht einfach zu erstellen, da dieselbe Methode verwendet wird, die wir für die Steuertasten verwendet haben (Schritte 18 bis 21). Der Unterschied liegt in den Ebenenstilen. In den folgenden Screenshots sehen Sie die Einstellungen und wie Sie dieses Schließen-Symbol erstellen. Ich werde nicht erklären, wie die Minimize- und Compact-Symbole erstellt werden, da sie sehr einfach zu erstellen sind.

Schritt 40

Jetzt ist es Zeit, die Dinge zu erledigen. Gruppieren Sie alle Ebenen (natürlich ohne Hintergrund) und nennen Sie die Gruppe "Spieler 1". Duplizieren Sie die Gruppe zweimal, benennen Sie die beiden neuen Gruppen "Spieler 2" und "Spieler 3" und ordnen Sie die drei Gruppen in absteigender Reihenfolge neu.

Fügen Sie alle Ebenen in der Gruppe "Spieler 1" zusammen und nennen Sie die neue Ebene "Final1". Duplizieren Sie die Ebene und gehen Sie zu Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner, wählen Sie dann Radius von 1,0 und wenden Sie ihn an. Erstellen Sie eine Ebenenmaske, drücken Sie (D), um Ihre Farbpalette zurückzusetzen, und (X), um Schwarz als Vordergrundfarbe festzulegen.

Wählen Sie das Verlauf-Werkzeug aus und stellen Sie sicher, dass Sie sich im radialen Verlaufsmodus befinden. Verwenden Sie als Nächstes die Standardeinstellung für Vordergrund zu Hintergrund, um den Farbverlauf von der Mitte des Players nach außen anzuwenden, sodass der mittlere Bereich des Players scharf und die Kanten etwas verschwommen sind. Dies wird verwendet, um einen Tiefenschärfe-Effekt zu erzeugen. Nennen Sie diese Ebene "Final1_Blur".

Schritt 41

Erstellen Sie eine neue Ebene, greifen Sie erneut auf das Verlauf-Werkzeug (G) und wählen Sie die Voreinstellung "Vordergrund zu transparentem Verlauf". Zeichnen Sie erneut von der Mitte des Spielers nach außen. Klicken Sie auf Befehlstaste + T, um den Verlauf zu transformieren und von oben nach unten zu skalieren, sodass ein schöner Schatten in der Breite des Players entsteht. Platzieren Sie die Form etwas weiter vom unteren Rand des Players entfernt, um einen schwebenden Effekt zu erzielen. Nennen Sie diese Ebene "Fianl1_Shadow" und platzieren Sie sie unter der Ebene "Final1".

Schritt 42

Duplizieren Sie die Ebene "Final1" und platzieren Sie sie unter "Final1_Shadow". Klicken Sie auf Befehl + T, um die Form zu transformieren. Klicken Sie in diesem Modus bei gedrückter Ctrl-Taste auf die transformierte Form und wählen Sie "Vertikal spiegeln". Ziehen Sie die transformierte Form nach unten, platzieren Sie sie in der Mitte des Schattenbereichs und drücken Sie die Eingabetaste. Nennen Sie diese Ebene "Final1_ref", ändern Sie ihre Deckkraft auf 50% und platzieren Sie sie unter der Ebene "Final1_Shadow".

Erstellen Sie eine Ebenenmaske und drücken Sie (D), um Ihre Farbpalette zurückzusetzen. Wählen Sie das Verlauf-Werkzeug aus, um sicherzustellen, dass Sie sich im Modus "Radialer Verlauf" befinden, und verwenden Sie die Standardvoreinstellung "Vordergrund zu Hintergrund", um den kleinen Verlauf von der Oberseite des gespiegelten Players auf seine Mitte anzuwenden. Dies wird eine schöne Reflexion eines abgerundeten Objekts machen.

Endgültiges Bild

Das ist es! Wir sind fertig! In meinem endgültigen Bild habe ich die Farbthemen der duplizierten Spieler geändert und sie hinten positioniert, wobei mehr Gaußscher Weichzeichner angewendet wurde. Ich hoffe wirklich, dass Sie aus diesem Tutorial viel gelernt haben, und ich kann es kaum erwarten, dass Sie diese Praktiken sinnvoll einsetzen. Sie können das endgültige Bild unten oder eine größere Version hier anzeigen.