Schneller Tipp Erstellen Sie einen Satz geprägter Player-Schaltflächen

Folgen Sie diesem neuen Tipp und erfahren Sie, wie Sie dieses Mal eine Reihe von Spielerknöpfen in lila und rosa zeichnen, da Grau und Schwarz manchmal etwas langweilig sein können. Sie sind einfach zu erstellen und wir verwenden Effekte wie Outer Glow, Gaußscher Weichzeichner, Transformation und das Mischwerkzeug.


Schritt 1

Öffnen Sie ein neues Webdokument. Der äußere Kreis der Schaltflächen ist halbtransparent, so dass der Hintergrund diesmal wichtig ist. Nehmen Sie das Rechteckwerkzeug (M), zeichnen Sie ein 720 x 170 px großes Rechteck und wählen Sie dann als Füllfarbe Lila aus. Gehen Sie zum Darstellungsbereich und wählen Sie im Flyout-Menü "Neue Füllung hinzufügen". Ändern Sie diese zweite Füllfarbe in Dunkelgrau (85% Schwarz). Gehen Sie dann zu Effektmenü> Künstlerisch und wenden Sie den Filmkorneffekt an. Senken Sie die Deckkraft auf 70% und der Hintergrund ist fertig.


Schritt 2

Nimm das Ellipse-Werkzeug (L) und zeichne einen 83 x 83 px Kreis. Füllen Sie es mit dem angezeigten linearen Farbverlauf und ändern Sie den Winkelwert auf 90 Grad. Gehen Sie dann zu Effekt-Menü> Weichzeichnen> Gaußsche Weichzeichnung und wenden Sie einen 1,5-Pixel-Radius an. Reduzieren Sie die Deckkraft auf 50%, um den Kreis halbtransparent zu machen.


Schritt 3

Kopieren und Einfügen vor dem ersten Kreis und entfernen Sie die vorhandenen Erscheinungsbilder. Kopieren Sie den neuen Kreis (grün) und fügen Sie ihn ein, um einen weiteren Kreis (rot) zu erhalten. Bevor Sie fortfahren, gehen Sie zu Bearbeiten> Voreinstellungen> Allgemein und setzen Sie das Tastaturinkrement auf 0,5 px. Wählen Sie nun den roten Kreis aus und verschieben Sie ihn ein wenig, indem Sie zweimal die Nach-unten-Taste auf Ihrer Tastatur drücken. Wählen Sie beide Kreise aus und klicken Sie im Pathfinder-Bedienfeld auf Von Formbereich abziehen> Erweitern.

Senden Sie die resultierende Form zurück und füllen Sie sie mit einem radialen Verlauf von Weiß nach Schwarz. Gehen Sie dann zu Effekt-Menü> Weichzeichnen> Gaußsche Weichzeichnung und wenden Sie einen 1-Pixel-Radius an. Ändern Sie dann den Füllmodus in "Bildschirm" (Schwarz wird transparent). Reduziere die Deckkraft auf 60%.


Schritt 4

Wenn der erste Kreis ausgewählt ist, gehen Sie zu Objekt> Pfad> Versatzpfad und wenden Sie einen -8 px-Versatzwert an, um den kleineren Kreis zu erhalten. Entfernen Sie die vorhandenen Erscheinungsbilder und füllen Sie sie mit der angegebenen violetten Nuance. Gehen Sie zu Effekt-Menü> Stilisieren und wenden Sie den Effekt "Äußeres Glühen" mit den angezeigten Einstellungen an. Auf diese Weise erhalten Sie einen diskreten Schatten um diesen zweiten Kreis.


Schritt 5

Kopieren und Einfügen vor dem zweiten Kreis, behalten Sie die Füllfarbe bei, entfernen Sie jedoch den Effekt "Äußeres Glühen" aus dem Darstellungsbereich. Wenn Sie diesen neuen Kreis ausgewählt haben, gehen Sie zu Objekt> Pfad> Versatzpfad und wenden Sie einen -7 px-Versatzwert an, um wieder einen kleineren Kreis zu erhalten. Ändern Sie die Füllfarbe in Lila. Wählen Sie nun beide Kreise aus, die Sie in diesem Schritt erhalten haben. Gehen Sie zu Objekt> Überblenden> Überblendoptionen und wählen Sie 20 Spezifizierte Schritte. Gehen Sie zurück zu Objekt> Überblenden und wählen Sie Erstellen.


Schritt 6

Gehen Sie als Nächstes zum Ebenenbedienfeld und wählen Sie den kleineren violetten Kreis aus der Gruppe „Überblenden“. Kopieren Sie ihn und fügen Sie ihn in den Vordergrund ein. Ziehen Sie ihn jedoch außerhalb der Gruppe „Überblenden“, da wir ihn dort nicht möchten. Füllen Sie den neuen Kreis (rot) mit einem linearen Farbverlauf von Weiß nach Schwarz und ändern Sie den Winkelwert auf 90 Grad. Ändern Sie den Mischmodus in "Bildschirm" (Schwarz wird transparent) und verringern Sie die Deckkraft auf 40%..


Schritt 7

Kopieren und Einfügen vor dem letzten Kreis und geben Sie ihm einen blauen Strich. Kopieren Sie nun den blauen Kreis vor dem blauen Kreis und fügen Sie ihn ein, um den roten Kreis zu erhalten. Bewegen Sie ihn dann durch fünfmaliges Drücken der Nach-unten-Taste auf der Tastatur (das Tastaturinkrement ist immer noch auf 0,5 px eingestellt). Wenn beide Kreise ausgewählt sind, drücken Sie Vom Formbereich subtrahieren> Aus dem Pathfinder-Bedienfeld erweitern, und füllen Sie die resultierende Form mit einem radialen Farbverlauf von Schwarz nach Grau. Gehen Sie dann zu Effekt-Menü> Weichzeichnen> Gaußsche Weichzeichnung und wenden Sie einen 1,7-Pixel-Radius an. Ändern Sie dann den Mischmodus in "Multiplizieren". Drücken Sie zwei oder dreimal die Nach-unten-Taste auf Ihrer Tastatur, um diese Mondform etwas nach unten zu verschieben.


Schritt 8

Fahren wir mit den Symbolen des Spielers fort. Um das Wiedergabesymbol zu erhalten, klicken Sie auf die Zeichenfläche und geben Sie die angezeigten Werte ein, um ein Dreieck zu erhalten. Drehen Sie ihn um 90 Grad, und gehen Sie zu Effektmenü> Stilisieren> Runde Ecken und wenden Sie einen 5-Pixel-Radius an. Zeichnen Sie für das Stopp-Symbol ein 20x20 px-Quadrat mit dem Rechteckwerkzeug (M) und wenden Sie dann erneut den Effekt "Runde Ecken" an. Das Pausensymbol besteht aus zwei dünnen Rechtecken (4x22 px). Wählen Sie diesmal einen Radius von 2 px aus, wenn Sie den Effekt "Runde Ecken" anwenden.

Wählen Sie als Nächstes die Symbole Wiedergabe, Stopp und Pause aus und wählen Sie im Menü Objekt die Option Darstellung erweitern und dann Gruppierung aufheben. Skalieren und multiplizieren Sie das Play-Symbol und verwenden Sie es zusammen mit dem Pause-Symbol, um die Symbole Play Play Schneller und Play Next zu erstellen (siehe unten). Wenn Sie fertig sind, gruppieren Sie die Formen, aus denen sie zusammengesetzt sind. Gehen Sie dann zu Objekt> Transformieren> Spiegeln, wählen Sie Vertikal und drücken Sie Kopieren. Auf diese Weise erhalten Sie die Symbole "Langsamer spielen" und "Vorherige Wiedergabe".


Schritt 9

Füllen Sie das Play-Symbol mit der violetten Schattierung, und wechseln Sie zum Erscheinungsbild-Bereich. Wählen Sie im Flyout-Menü die Option "Neue Füllung hinzufügen". Ändern Sie die zweite Füllfarbe mit der angezeigten. Wählen Sie dann im Menü Effekt> Verzerrung und Transformation> Effekt aus und wählen Sie im Bereich Verschieben die Option Vertikal, wählen Sie 1,5 px. Machen Sie dasselbe für die restlichen Symbole.


Schritt 10

Kehren Sie zur Schaltfläche aus Schritt 7 zurück. Gruppieren Sie alle Formen, aus denen sie besteht, und wählen Sie dann Objekt> Transformieren> Verschieben. Wählen Sie, um die Schaltfläche horizontal um 100 px zu verschieben, und drücken Sie dann Kopieren. Drücken Sie nun Befehlstaste + D (erneut transformieren), um diese Aktion fünfmal zu wiederholen. Jetzt müssen Sie nur noch die Symbole anordnen, und Sie sind fertig.


Schritt 11

Der Hintergrund hinter den rosa Knöpfen ist der gleiche wie der violette Hintergrund. Sie können einfach eine Kopie erstellen und dann die beiden Füllfarben durch die angegebenen ersetzen.

Um die rosa Knöpfe zu erstellen, müssen Sie lediglich die violetten Schattierungen durch rosa Schattierungen ersetzen. Im Bild unten sehen Sie die Hauptschritte und die Farben, die Sie ändern müssen. Wenn hier andere Farben oder Farbverläufe nicht erwähnt werden, bleiben sie gleich.

Ändern Sie auch die beiden Füllfarben für die Symbole wie angegeben. Wiederholen Sie nun Schritt 10 und die rosa Symbole sind fertig.


Schritt 12

Wenn Sie nicht mädchenhafte Farben mögen, können Sie die schwarze Version erstellen. Beginnen Sie mit dem Hintergrund und ersetzen Sie die Füllfarben…

…. Ersetzen Sie dann die violetten Schattierungen der Tasten durch Grautöne, wie unten angegeben.

Ersetzen Sie auch die beiden Füllfarben für die Symbole und platzieren Sie sie auf den Schaltflächen, und Sie sind fertig.


Endgültiges Bild

Hier ist das endgültige Bild. Ich wage Sie, diese Schaltflächen in anderen Farben zu erstellen, die Sie mögen, und lassen Sie mich wissen, wie sie entstanden sind. Stellen Sie nur sicher, dass Sie die Schaltflächen mit der Hintergrundfarbe abgleichen, da der größere Kreis halbtransparent ist. Wenn Sie diese Schaltflächen skalieren möchten, müssen Sie alle zuvor verwendeten Effekte erweitern.