Schneller Tipp So veranschaulichen Sie ein modernes Volume Dial

In den folgenden Schritten erfahren Sie, wie Sie eine Lautstärketaste erstellen. Alles beginnt mit drei konzentrischen Kreisen. Mit einigen interessanten Stroke-Eigenschaften und grundlegenden Effekten erstellen Sie die Volumenlinie. Wenn Sie mehrere Füllungen und Striche zusammen mit den Pathfinder-Optionen und einigen neuen Effekten verwenden, erstellen Sie den Rest der Schaltfläche. Probieren Sie es aus und lernen Sie vielleicht Neues über die Arbeit mit Schlaganfällen.


Schritt 1

Erstellen Sie ein 700 x 700 Pixel großes RGB-Dokument. Aktivieren Sie zunächst das Raster (Ansicht> Raster anzeigen) und die Option An Raster ausrichten (Ansicht> Am Raster ausrichten). Als Nächstes benötigen Sie alle 10 Pixel ein Raster. Gehen Sie zu Bearbeiten> Voreinstellungen> Hilfslinien> Raster, geben Sie jeweils 10 in das Feld Rasterlinie und 1 in das Feld Unterteilungen ein. Sie können auch das Infofenster (Fenster> Info) für eine Live-Vorschau mit der Größe und Position Ihrer Formen öffnen. Vergessen Sie nicht, die Maßeinheit unter Bearbeiten> Voreinstellungen> Einheit> Allgemein in Pixel zu ersetzen. Alle diese Optionen erhöhen die Arbeitsgeschwindigkeit erheblich.


Schritt 2

Gehen Sie zuerst zum Erscheinungsbild-Bereich oder zur Symbolleiste und entfernen Sie die Farbe aus dem Strich. Wählen Sie nun das Ellipse-Werkzeug (L), erstellen Sie eine 460 x 460px-Form und füllen Sie diese mit R = 154 G = 154 B = 152. Wählen Sie diese erste Form aus und gehen Sie zu Objekt> Pfad> Versatzpfad. Geben Sie einen -30px-Offset ein, klicken Sie auf OK und füllen Sie die resultierende Form mit R = 213 G = 213 B = 213.

Wählen Sie erneut diese neue Form aus und gehen Sie zu Objekt> Pfad> Versatzpfad. Geben Sie einen Offset von -15px ein, klicken Sie auf OK und füllen Sie die resultierende Form mit R = 247 G = 248 B = 250. Am Ende sollten Sie drei konzentrische Kreise haben.


Schritt 3

Nun fügen wir den Hintergrund hinzu. Wähle das Rechteckwerkzeug (M) aus, erstelle eine Form in der Größe deiner Zeichenfläche und fülle sie mit R = 236 G = 238 B = 237. Schicken Sie es nach hinten (Umschalt + Strg + Linke eckige Klammer), und wechseln Sie in das Erscheinungsbildfenster. Öffnen Sie das Flyout-Menü und klicken Sie auf Neue Füllung hinzufügen. Offensichtlich wird dadurch eine zweite Füllung für Ihre Form hinzugefügt. Wählen Sie es aus dem Darstellungsfeld aus, machen Sie es schwarz, verringern Sie die Deckkraft auf 5% und ändern Sie den Mischmodus auf "Multiplizieren". Gehen Sie dann zu Effekt> Künstlerisch> Filmkorn. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und fügen Sie eine dritte Füllung für diese Form hinzu. Verringern Sie die Deckkraft auf 30% und ändern Sie den Mischmodus in "Multiplizieren". Füllen Sie ihn dann mit dem unten gezeigten radialen Farbverlauf. Die gelbe Null im Verlaufsbild steht für den Prozentsatz der Deckkraft. Gehen Sie schließlich zum Ebenenbedienfeld und sperren Sie diese Form, um sicherzustellen, dass Sie sie nicht aus Versehen auswählen oder verschieben.


Schritt 4

Deaktivieren Sie das Raster (Ansicht> Raster ausblenden) und die Option An Raster ausrichten (Ansicht> An Raster ausrichten). Wählen Sie den größten Kreis aus, setzen Sie die Füllfarbe auf "Keiner" und fügen Sie einen Strich von 20 Pixeln hinzu. Setzen Sie die Farbe auf R = 128 G = 130 B = 133 und gehen Sie zu Objekt> Pfad> Ankerpunkte hinzufügen. Wählen Sie das Direktauswahl-Werkzeug (A), wählen Sie den unteren Ankerpunkt (im zweiten Bild hervorgehoben) und drücken Sie die Entf-Taste auf Ihrer Tastatur. Wählen Sie den resultierenden Pfad aus, und wechseln Sie zum Konturbedienfeld („Fenster“> „Kontur“). Aktivieren Sie das Kontrollkästchen "Bindestrich" und geben Sie "10pt" in die Bindestriche und die Lücken ein. Gehen Sie nach rechts und markieren Sie die Schaltfläche, die die Striche an den Ecken und Pfaden ausrichtet, und passen Sie die Länge entsprechend an. Gehen Sie zum Profilbereich, öffnen Sie das Dropdown-Menü und wählen Sie "Width Profile 4" aus. Klicken Sie anschließend auf die Schaltfläche "Parallel spiegeln".


Schritt 5

Wählen Sie den im vorherigen Schritt erstellten Pfad erneut aus, und wechseln Sie zu Objekt> Darstellung erweitern. Löschen Sie die Start- und Endform (durch die Pfeile angezeigt), wählen Sie dann die verbleibende Gruppe von Formen aus und gehen Sie zu Objekt> Verbundpfad> Erstellen.


Schritt 6

Wählen Sie den zusammengesetzten Pfad aus, der im vorherigen Schritt erstellt wurde, und fügen Sie einen Strich hinzu. Machen Sie es 1pt breit, richten Sie es nach innen aus und setzen Sie die Farbe auf R = 88 G = 89 B = 91. Wählen Sie diesen Strich im Darstellungsfenster aus und klicken Sie auf die Schaltfläche „Ausgewähltes Objekt duplizieren“ unten im Darstellungsfenster. Offensichtlich wird dadurch eine Kopie des ausgewählten Strichs erstellt. Wählen Sie diesen neuen Strich, machen Sie ihn um 0,5pt breit, setzen Sie seine Farbe auf R = 247 G = 248 B = 250 und verringern Sie die Deckkraft auf 80%. Wählen Sie den gesamten zusammengesetzten Pfad erneut aus und gehen Sie zu Effekt> Stilisieren> Schlagschatten. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.


Schritt 7

Gehen wir zum nächsten Kreis. Füllen Sie es zuerst mit R = 35 G = 31 B = 32. Wählen Sie diese Füllung aus dem Erscheinungsbildfenster aus und gehen Sie zu Effekt> Stilisieren> Inner Glow. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und fügen Sie eine zweite Füllung hinzu. Machen Sie ihn schwarz, verringern Sie die Deckkraft auf 8% und ändern Sie den Mischmodus auf "Multiplizieren". Gehen Sie dann zu Effekt> Künstlerisch> Filmkorn. Geben Sie erneut die unten angezeigten Daten ein und klicken Sie auf OK.


Schritt 8

Konzentrieren Sie sich auf die Form aus dem vorherigen Schritt. Wählen Sie es erneut aus und fügen Sie einen Strich hinzu. Machen Sie es 5pt breit, richten Sie es nach außen aus und setzen Sie die Farbe auf R = 147 G = 149 B = 152. Fügen Sie einen zweiten Strich für diese Form hinzu, machen Sie sie um 3pt breit und setzen Sie die Farbe auf R = 247 G = 248 B = 250. Wählen Sie den gesamten Pfad erneut aus und gehen Sie zu Effekt> Stilisieren> Schlagschatten. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.


Schritt 9

Wählen Sie den kleinsten Kreis und machen Sie zwei Kopien vor (Control + C> Control + F> Control + F). Wählen Sie die oberste Kopie aus und klicken Sie einmal auf den Abwärtspfeil. Wählen Sie dann beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Sie erhalten eine ziemlich dünne Form. Bringen Sie es nach vorne und füllen Sie es mit R = 154 G = 154 B = 152.


Schritt 10

Wählen Sie den kleinsten Kreis erneut aus und füllen Sie ihn mit R = 85 G = 86 B = 88. Wählen Sie diese Füllung aus und gehen Sie zu Effekt> Stilisieren> Äußeres Glühen. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und fügen Sie eine zweite Füllung hinzu. Machen Sie ihn schwarz, verringern Sie die Deckkraft auf 8% und ändern Sie den Mischmodus auf "Multiplizieren". Gehen Sie dann zu Effekt> Künstlerisch> Filmkorn. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und fügen Sie einen einfachen Strich hinzu. Machen Sie es 1pt breit, richten Sie es nach innen aus, setzen Sie seine Farbe auf R = 109 G = 110 B = 113 und verringern Sie die Deckkraft auf 70%..


Schritt 11

Wählen Sie die beiden Kreisformen aus und duplizieren Sie sie. Wählen Sie diese Kopien aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Wählen Sie die resultierende Form aus und drücken Sie D auf Ihrer Tastatur. Dadurch werden die Standardeigenschaften (weiße Füllung und schwarzer Strich) für diese Form hinzugefügt.


Schritt 12

Wählen Sie die im vorherigen Schritt erstellte Form aus, entfernen Sie den Strich und füllen Sie ihn mit dem radialen Farbverlauf unter Bild 1. Fügen Sie eine zweite Füllung für diese Form hinzu und verwenden Sie den radialen Farbverlauf unter Bild 2. Fügen Sie eine dritte Füllung für diese Form hinzu und verwenden Sie den radialen Farbverlauf unter Bild # 3, fügen Sie dann eine vierte Füllung hinzu und verwenden Sie den unten gezeigten radialen Farbverlauf und anschließend das endgültige Bild.


Schritt 13

Wähle das Ellipse-Werkzeug (L) und klicke einfach auf deine Zeichenfläche. Geben Sie 20 in die Felder Breite und Höhe ein und klicken Sie auf OK. Dadurch wird eine 20 x 20 Pixel große Form erstellt. Füllen Sie es mit R = 88 G = 89 B = 91 und gehen Sie dann zu Objekt> Pfad> Versatzpfad. Geben Sie einen Offset von -2px ein und klicken Sie auf OK. Füllen Sie die resultierende Form mit R = 45. G = 41 B = 42, und erstellen Sie zwei Kopien vor. Wählen Sie die oberste Kopie aus und klicken Sie einmal auf den Abwärtspfeil, wählen Sie dann beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Die resultierende Form sollte wie im vierten Bild aussehen.


Schritt 14

Wählen Sie die im vorherigen Schritt erstellte 20 x 20 Pixel-Form erneut aus. Wählen Sie im Erscheinungsbildfenster die vorhandene Füllung aus und gehen Sie zu Effekt> Stilisieren> Inneres Glühen. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und fügen Sie einen Strich hinzu. Machen Sie es 2pt breit, richten Sie es nach innen aus und setzen Sie die Farbe auf R = 128 G = 130 B = 133. Fügen Sie einen zweiten Strich für diese Form hinzu, machen Sie sie um 3pt breit und setzen Sie die Farbe auf R = 247 G = 248 B = 250. Wählen Sie den gesamten Pfad erneut aus und gehen Sie zu Effekt> Stilisieren> Schlagschatten. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.


Schritt 15

Aktivieren Sie das Raster (Ansicht> Raster anzeigen) und die Option Am Raster ausrichten (Ansicht> Am Raster ausrichten). Wählen Sie die in den vorherigen beiden Schritten erstellten Formen erneut aus und gruppieren Sie sie. Wählen Sie diese Gruppe aus und platzieren Sie sie wie in der folgenden Abbildung dargestellt.


Schritt 16

Deaktivieren Sie das Raster (Ansicht> Raster ausblenden) und die Option An Raster ausrichten (Ansicht> An Raster ausrichten). Wählen Sie den zusammengesetzten Pfad erneut aus und machen Sie eine Kopie vor. Wählen Sie diese Kopie aus, wechseln Sie in das Erscheinungsbildfenster und ersetzen Sie die beiden unten gezeigten Farben.


Schritt 17

Wähle das Rechteckwerkzeug (M) aus, erstelle eine weiße Form und platziere sie wie im ersten Bild gezeigt. Es sollte die linke Hälfte des zusammengesetzten Pfads abdecken. Wählen Sie es zusammen mit dem zusammengesetzten Pfad aus, der im vorherigen Schritt erstellt wurde, und wechseln Sie in das Fenster "Transparenz". Öffnen Sie das Flyout-Menü und klicken Sie auf "Deckkraftmaske erstellen". Am Ende sollte Ihre Schaltfläche wie im dritten Bild aussehen.


Schritt 18

Zum Schluss noch Text hinzufügen. Verwenden Sie die Britannic Bold-Schriftart oder eine andere Schriftart, die Sie mögen. Fügen Sie den Text wie unten gezeigt hinzu, setzen Sie die Farbe auf R = 65 G = 64 B = 66, und gehen Sie zu Effekt> Stilisieren> Schlagschatten. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK, wählen Sie "Volume" und gehen Sie zu Effect> Warp> Arc. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK. Fügen Sie außerdem zwei kleine Kreise über dem Text "Min" und "Max" hinzu. Füllen Sie sie mit R = 65 G = 64 B = 66 und fügen Sie denselben diskreten Schlagschatteneffekt hinzu.


Fazit

Hier ist das Endergebnis. Um dieses Tut weiterzuführen, können Sie verschiedene Farben oder andere Schaltflächenstile ausprobieren, um ein Set zu erstellen. Ich hoffe, dass dir dieses Tut gefallen hat.