Share
Salz und Pfeffer, Stift und Papier, Kekse und Milch, obwohl sie alle gut für sich sind, arbeiten diese Dinge zusammen, um das Beste aus sich herauszuholen. Adobe Illustrator und Adobe Photoshop bilden keine Ausnahme. Heute werde ich Ihnen zeigen, wie Sie mit Illustrator eine Wiedergabeschaltfläche entwerfen und Ihre Vektoren mit Photoshop verbessern können. Diese Technik ist besonders nützlich für Benutzer, die Icons und Benutzeroberflächenentwürfe erstellen möchten. Lass uns anfangen!
Beginnen Sie mit der Erstellung eines neuen Dokuments in Illustrator (ich habe es 800 x 800 Pixel erstellt). Wählen Sie das "abgerundete Rechteckwerkzeug" (mit dem Eckenradius von 100px) und erstellen Sie eine Form, die wie eine abgerundete Schaltfläche aussieht. Wählen Sie dann das "Rechteckwerkzeug" aus, erstellen Sie ein Rechteck und zentrieren Sie es auf das abgerundete Rechteck. Dies ist für die Wiedergabetaste.
Bearbeiten Sie das zweite Rechteck (das Rechteck "play"). Gehen Sie zu Effekt> Verzerrung und Transformation> Pucker & Bloat, um das Rechteck gekrümmt zu machen. Füllen Sie das Kästchen im Fenster aus (ich habe 6% verwendet) und drücken Sie OK. Danach gehen Sie zu Objekt> Aussehen erweitern.
Um das "Play" -Symbol zu erstellen, wählen Sie das "Star Tool" aus, öffnen Sie den Dialog "Star Tool" und nehmen Sie die folgenden Einstellungen vor.
Erstellen Sie nun die Symbole "next" und "previous". Duplizieren Sie das Wiedergabesymbol zuerst mit Wahltaste + Klicken + Ziehen (an beliebiger Stelle), und ziehen Sie es dann nach rechts (Sie können die Umschalttaste gedrückt halten, um das Objekt in einer geraden Linie zu bewegen). Wählen Sie die beiden Dreiecke aus, klicken Sie auf die Schaltfläche "Zu Formbereich hinzufügen", klicken Sie dann auf "Erweitern", ändern Sie die Größe und positionieren Sie sich neu.
Erstellen Sie das Symbol "Zurück", indem Sie auf Objekt> Transformieren> Spiegeln> Vertikal klicken und auf "Kopieren" klicken. Bewegen Sie es in Position und Sie haben sich gerade einige Spielerknöpfe gemacht.
Fügen Sie den Schaltflächen die Farben hinzu. Die "Play" -Taste hat eine Füllung von # 506670 und einen Strich von # 2C515E. Die Schaltflächen "Next" und "Previous" haben eine Füllung von # 85D4D6 und einen Strich von # 27A0A0.
Um den unteren Schatten zu erstellen, müssen Sie die Schaltfläche duplizieren und dann mit dem Werkzeug "Abgerundetes Rechteck" (unter Verwendung der gleichen Einstellungen) dieselbe Form erstellen, jedoch etwas größer. Wählen Sie dieses Rechteck und das von Ihnen duplizierte Rechteck aus und klicken Sie auf "Von Formbereich subtrahieren" und "Erweitern". Machen Sie es schwarz und geben Sie ihm eine Deckkraft von 20%. Setzen Sie den Mischmodus auf Überlagern.
Verwenden Sie den unteren Schatten, um den oberen Glanz zu erzeugen. Wählen Sie den unteren Schatten aus und gehen Sie zu Transformieren> Reflektieren. Nachdem Sie die Einstellungen vorgenommen haben, klicken Sie auf "Kopieren". Bewegen Sie es an Ort und Stelle, ordnen Sie die Ankerpunkte so an, dass sie dünner werden, und machen Sie sie weiß (lassen Sie die Deckkraft und den Füllmodus unverändert)..
Verwenden Sie die gleiche Technik für die Wiedergabetaste.
Nachdem Sie die Form des Players beendet haben, exportieren Sie ihn als .PSD, um Details in Photoshop hinzuzufügen.
Erstellen Sie eine neue Datei in Photoshop (ich habe 800 x 800 px verwendet) und bringen Sie die Datei ein, die Sie aus Illustrator (Mini-Player) exportiert haben. Wählen Sie die Ebene "große Schaltfläche" aus, öffnen Sie das Fenster "Ebenenstile", doppelklicken Sie auf die rechte Seite der Ebene und beginnen Sie wie folgt, die folgenden Stile hinzuzufügen. (Sie können den Bildern folgen).
Blenden Sie alle Ebenen außer der Ebene "große Schaltfläche", der Ebene "unterer Schatten" und der Ebene "Top Shine" aus. Wählen Sie die Ebene "unterer Schatten" aus, gehen Sie zu "Filter"> "Weichzeichnen"> "Gaußsche Weichzeichnung", geben Sie einen Radius von 4 px an und klicken Sie auf "OK". Machen Sie dasselbe mit der "Top Shine" -Schicht.
Als nächstes erstellen Sie eine neue Ebene, Befehlstaste + Klicken Sie auf den Ebenendaumen "große Schaltfläche", um eine Auswahl dieser Form zu treffen, und schneiden Sie dann mit dem "Polygonal Lasso Tool" die obere Hälfte der Auswahl aus. Füllen Sie die Farbe mit einer Farbe (egal welche Farbe, da wir sie zu 0% füllen) und fügen Sie einen Ebenenstil für die Verlaufsüberlagerung hinzu.
Machen Sie den "Play Button" sichtbar (einschließlich des unteren Schattens und des oberen Glanzes). Wählen Sie die Ebene "Play Button" aus und fügen Sie die beiden Ebenenstile hinzu (Verlaufsüberlagerung und Inner Glow). Wählen Sie die Ebene "unterer Schatten" aus und gehen Sie zu "Filter"> "Weichzeichnen"> "Gaußsche Weichzeichnung", geben Sie einen Radius von 5 Pixeln an und klicken Sie auf "OK". Wiederholen Sie diesen Vorgang für die Ebene "Top Shine".
Erstellen Sie eine neue Ebene, wählen Sie eine rechteckige Auswahl und erstellen Sie mit dem "Verlaufswerkzeug" (G) einen Verlauf. Strg + D, um die Auswahl aufzuheben. Setzen Sie den Mischmodus auf "Überlagerung" und 20% für die Deckkraft.
Erstellen Sie eine neue Ebene unter der Wiedergabeschaltflächenebene, und wählen Sie den Schatten der Schaltfläche aus. Füllen Sie es mit Schwarz auf und gehen Sie zu Filter> Weichzeichnen> Gaußscher Weichzeichner, und geben Sie ihm einen Radius von 1,5 px. Stellen Sie den Mischmodus auf "Color Burn" und 40% für die Deckkraft ein.
Wähle das "Radiergummi-Werkzeug" (E) aus, stelle den Durchmesser auf 125 px und die Härte auf 25% ein und streichen Sie horizontal über die Mitte der Schattenebene.
Wählen Sie die Ebene "Nächste und Vorherige" aus und füllen Sie sie mit dieser Farbe. # 0096A4. Danach öffne das "Layer Styles" -Fenster und füge die gleichen Styles hinzu wie ich.
Machen Sie dasselbe mit der Ebene "Wiedergabesymbol". Verwenden Sie dieses Mal jedoch diese Farbe als Hintergrundfarbe: # FFDB94
Verwenden Sie das "Linienwerkzeug", um einen großartigen Glanzeffekt zu erzeugen. Positionieren Sie die Linie unter der Ebene "Play Button" und erstellen Sie eine horizontale Linie (1 px) am unteren Rand der Ebene "Big Button". Machen Sie die Form zu 0% und fügen Sie eine "Verlaufsüberlagerung" hinzu..
Erstellen Sie eine neue Ebene hinter der Ebene "Play Button". Strg + Klicken Sie auf den Ebenendaumen der "großen Schaltfläche", um eine Auswahl dieser Form zu treffen, und führen Sie dann einen einfachen schwarzen Verlauf auf der linken Seite aus. Legen Sie "Überlagerung" als Mischmodus und 60% Deckkraft fest. duplizieren Sie die Ebene, drehen Sie sie horizontal und verschieben Sie sie nach rechts.
Verwenden Sie das "Ellipse-Werkzeug", um ein Oval auf der linken Seite des "großen Knopfes" zu erstellen. Ordnen Sie es neu an, so dass es wie das Bild unten aussieht (sollte sich oben links auf der "großen Schaltfläche" befinden). Machen Sie die Füllung zu 0% und fügen Sie einen Stil "Verlaufsüberlagerung" hinzu.
Duplizieren Sie die Ebene und platzieren Sie sie auf der rechten unteren Seite des "großen Knopfes", indem Sie den zweiten Stil "Verlaufsüberlagerung" hinzufügen.
Erstellen Sie eine neue Ebene über der Ebene "Wiedergabe". Strg + Klicken Sie auf den Ebenendaumen der Schaltfläche "Wiedergabetaste", um eine Auswahl dieser Form zu treffen. Wählen Sie dann "Auswählen"> "Ändern"> "Kontrakt" und verkleinern Sie die Auswahl um 3 px. Nach all dem nehmen Sie das "Verlaufswerkzeug" und machen einen kleinen diagonalen Verlauf in der oberen linken Ecke. Setzen Sie den Ebenenüberblendungsmodus auf "Überlagerung" und die Deckkraft auf 40%..
Erstellen Sie eine neue Ebene über der Ebene, die Sie gerade erstellt haben. Treffen Sie auf der linken Seite der "Play" -Taste eine Auswahl (wie im Bild). Füllen Sie es mit der gewünschten Farbe, da wir die Füllung auf 0% setzen. Fügen Sie den Stil "Verlaufsüberlagerung" hinzu und der Glanzeffekt ist abgeschlossen. Duplizieren Sie diese Ebene, drehen Sie sie horizontal und verschieben Sie sie nach rechts.
Wählen Sie die Hälfte der Schaltfläche "Wiedergabe" und erstellen Sie auf einer neuen Ebene mit dem "Verlaufswerkzeug" (G) einen Verlauf (mit Schwarz als Farbe). Danach setzen Sie den Mischmodus auf "Color Burn" und die Deckkraft auf 10%. Verwenden Sie dieselbe Methode für das "Wiedergabe-Symbol" (das einzige, was sich ändert, ist die Platzierung der Ebenen - über der Ebene "Wiedergabe-Symbol" - und die Deckkraft der Ebene - 20%)..
Das Erstellen der "Play Button" -Textur ist sehr einfach. Nachdem Sie eine neue Ebene über der Ebene "Play Button" erstellt haben, klicken Sie auf "Control Button" (Befehl auf dem Mac). Klicken Sie auf den Ebenen-Daumen der Schaltfläche "Play Button", füllen Sie ihn mit Schwarz, gehen Sie zu Filter> Noise> Add Noise, nehmen Sie die angegebenen Einstellungen vor und drücken Sie "OK".
Bei noch aktivierter Auswahl gehen Sie zu Filter> Weichzeichnen> Bewegungsunschärfe und verwenden Sie die angegebenen Einstellungen. Heben Sie die Auswahl auf und setzen Sie den Mischmodus auf "Überlagerung" und die Deckkraft auf 45%..
Fügen Sie dem "Symbol" ein kleines Detail hinzu. Auf einer neuen Ebene erstellen Sie mit dem "Elliptical Marquee Tool" (M) zufällig große Kreise innerhalb des "Play-Symbols". Machen Sie sie schwarz, heben Sie die Auswahl auf und gehen Sie zu Filter> Weichzeichnen> Gaußscher Weichzeichner. Nachdem Sie Ihre Einstellungen hinzugefügt haben, setzen Sie einfach den Mischmodus auf "Color Burn" und die Deckkraft auf 15%. Damit sind Sie fertig.
Erstellen Sie eine weitere Ebene und machen Sie dasselbe. Das einzige, was zu ändern ist, ist die Farbe der Zufallskreise (ich habe die Kreise weiß gemacht).
Beginnen Sie mit dem Erstellen des Hintergrunds. Wählen Sie die Hintergrundebene aus und füllen Sie sie mit # 363D41, und fügen Sie eine "Verlaufsüberlagerung" hinzu. Erstellen Sie mit dem "Elliptical Marquee Tool" (M) ein Oval auf einer neuen Ebene und füllen Sie es mit Weiß. Danach gehen Sie zu Filter> Unschärfe> Gaußsche Unschärfe, geben Sie Ihre Einstellungen ein und drücken Sie OK. Ändern Sie den Mischmodus in "Überlagerung" und weisen Sie eine Deckkraft von 65% auf.
Erstellen Sie den Schatten für den Mini-Player. Erstellen Sie eine neue Ebene, indem Sie mit dem "Elliptical Marquee Tool" (M) ein Oval unter dem Player erstellen und es mit Schwarz füllen. Gehen Sie zu Filter> Unschärfe> Gaußsche Unschärfe und nehmen Sie die erforderlichen Einstellungen vor. Wähle das "Radiergummi-Werkzeug" (E) und nimm die folgenden Einstellungen vor: Durchmesser - 150px; Härte - 0%; Deckkraft - 10%, dann einen kleinen Teil der Schattenseiten löschen. Stellen Sie den Mischmodus auf "Color Burn" und die Deckkraft auf 60%..
Treffen Sie eine vollständige Auswahl der Schaltflächen. Tun Sie das mit Befehl + Klicken Sie auf die "große Schaltfläche" -Schicht und drücken Sie dann die Befehlstaste + Umschalttaste. Erstellen Sie mit der aktiven Auswahl eine neue Ebene und füllen Sie sie mit Schwarz. Bewegen Sie es nach oben und gehen Sie zu Filter> Unschärfe> Gaußsche Unschärfe, und nehmen Sie die Einstellungen wie im Bild vor. Verwenden Sie die "Freie Transformation" (Strg + T), um den Hintergrundschatten zu verzerren. Verwenden Sie das "Radiergummi-Werkzeug" (E) mit den folgenden Einstellungen: Durchmesser - 150px; Härte - 0%; Deckkraft - 10%, um den Schatten an den Seiten zu löschen. Passen Sie die Deckkraft auf 50% an..
Das Mini-Player-Symbol ist jetzt bereit. Viele dieser Techniken können als Vektor mit 100% Vektor erstellt werden. Dies ist nur eine weitere Möglichkeit, die Photoshop-Funktionen zu nutzen. Dies ist auch ein besonders nützliches Tutorial für Benutzer, die Elemente für die Verwendung in Web- und Benutzeroberflächenentwürfen erstellen möchten, da sie häufig Photoshop verwenden.
Ich hoffe, Ihnen hat dieses Tutorial gefallen und es war hilfreich.
Accentsconagua