Erstellen Sie eine Musik-Player-Oberfläche für Mobiltelefone

German (Deutsch) translation by Valentina (you can also view the original English article)

Im folgenden Tutorial erfahren Sie, wie Sie eine Musik-Player-Oberfläche für Mobiltelefone erstellen. Wir werden die Benutzeroberfläche mit pixelgenauer Ausrichtung, hochwertigen Techniken zur Erstellung von Vektorformen sowie Verlaufs- und Lichtsteuerung erstellen.

Schritt 1

Drücken Sie Befehlstaste + N, um ein neues Dokument zu erstellen. Geben Sie 640 in das Feld Breite und 960 in das Feld Höhe ein und klicken Sie auf die Schaltfläche Erweitert. Wählen Sie RGB, Bildschirm (72ppi) und stellen Sie sicher, dass das Kontrollkästchen Neue Objekte an Pixelraster ausrichten deaktiviert ist, bevor Sie auf OK klicken. Aktivieren Sie nun das Raster (Ansicht > Raster) und die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten).

Als nächstes benötigen Sie alle 5 Pixel ein Raster. Gehen Sie zu Bearbeiten > Einstellungen > Hilfslinien und Raster und geben Sie 5 in das Feld Rasterlinie und 1 in das Feld Unterteilungen ein. Sie können auch das Infofenster (Fenster > Info) für eine Live-Vorschau mit der Größe und Position Ihrer Formen öffnen. Vergessen Sie nicht, die Maßeinheit unter Bearbeiten> Einstellungen > Einheit > Allgemein auf Pixel einzustellen. All diese Optionen erhöhen Ihre Arbeitsgeschwindigkeit erheblich.

Schritt 2

Wähle das Rechteck-Werkzeug (M) und erstelle eine 640 x 30 Pixel große Form. Füllen Sie es mit Schwarz, entfernen Sie die Farbe aus dem Strich und platzieren Sie es wie in der folgenden Abbildung gezeigt.

Schritt 3

Wähle das Rechteck-Werkzeug (M) und erstelle eine 640 x 200 Pixel große Form. Füllen Sie es mit R=50, G=50, B=50, stellen Sie sicher, dass für den Strich keine Farben festgelegt sind, und platzieren Sie es wie in der folgenden Abbildung gezeigt. Deaktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten), gehen Sie zu Bearbeiten > Einstellungen> Allgemein und stellen Sie sicher, dass das Tastaturinkrement auf 1 Pixel eingestellt ist.

Wählen Sie diese neue Form aus und erstellen Sie zwei Kopien vor (Befehl + C > Befehl + F > Befehl + F). Wählen Sie die oberste Kopie aus und drücken Sie einmal auf den Abwärtspfeil (um sie 1 Pixel nach unten zu verschieben). Wählen Sie beide Kopien erneut aus, öffnen Sie das Pathfinder-Bedienfeld und klicken Sie auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit Schwarz.

Schritt 4

Wählen Sie das im vorherigen Schritt erstellte große Rechteck erneut aus und erstellen Sie zwei neue Kopien (Befehl + C > Befehl + F > Befehl + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie um 1 Pixel nach oben. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form erneut mit Schwarz.

Schritt 5

Wählen Sie das im dritten Schritt erstellte große Rechteck erneut aus und erstellen Sie zwei neue Kopien (Befehl + C > Befehl + F > Befehl + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie um 2 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im endgültigen Bild gezeigten linearen Farbverlauf.

Schritt 6

Wählen Sie das im dritten Schritt erstellte große Rechteck erneut aus und erstellen Sie zwei neue Kopien (Befehl + C > Befehl + F > Befehl + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie um 2 Pixel nach oben. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im endgültigen Bild gezeigten linearen Farbverlauf.

Schritt 7

Wählen Sie das im dritten Schritt erstellte große Rechteck erneut aus, konzentrieren Sie sich auf das Bedienfeld „Darstellung“ und fügen Sie über die Schaltfläche „Neue Füllung hinzufügen“ eine zweite Füllung hinzu. Es ist das weiße quadratische Symbol am unteren Rand des Bedienfelds „Darstellung“. Wählen Sie diese neue Füllung aus, machen Sie sie schwarz, verringern Sie die Deckkraft auf 7%, ändern Sie den Mischmodus auf Multiplizieren und gehen Sie zu Effekt > Skizze > Notizpapier. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 8

Wählen Sie die im vorherigen Schritt bearbeitete Form erneut aus, fügen Sie zwei neue Füllungen hinzu und verwenden Sie die unten gezeigten radialen Verläufe. Die gelben Nullen in den Verlaufsbildern stehen für den Deckkraftprozentsatz.

Schritt 9

Aktivieren Sie das Raster am Raster erneut (Ansicht > Am Raster ausrichten). Wähle das Rechteck-Werkzeug (M) und erstelle eine 640 x 70 Pixel große Form. Füllen Sie es mit dem unten gezeigten linearen Farbverlauf und platzieren Sie es wie in der folgenden Abbildung gezeigt. Die weiße Zahl aus dem Verlaufsbild steht für den prozentualen Standort.

Schritt 10

Wähle das Rechteck-Werkzeug (L) und erstelle eine 590 x 10 Pixel große Form. Füllen Sie es mit Weiß, platzieren Sie es wie im ersten Bild gezeigt und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 5 Pixel ein, klicken Sie auf OK und gehen Sie zu Objekt > Darstellung erweitern. Wählen Sie die resultierende Form aus und konzentrieren Sie sich auf das Bedienfeld „Darstellung“. Ersetzen Sie zuerst das Weiß aus der Füllung durch eine dunkle Farbe (R=25, G=25, B=25).

Fügen Sie als Nächstes einen 3-Punkt-Strich für diese Form hinzu. Stellen Sie die Farbe auf R=15, G=15, B=15 ein und richten Sie sie nach innen aus. Wählen Sie abschließend dieses abgerundete Rechteck erneut aus, stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist (im Bedienfeld „Darstellung“), und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 11

Wählen Sie die im vorherigen Schritt erstellte Form erneut aus und erstellen Sie eine Kopie vor (Befehl + C > Befehl + F). Wählen Sie diese Kopie aus und bearbeiten Sie den für die Füllung verwendeten Farbverlauf (wie im ersten Bild gezeigt).

Als nächstes müssen Sie diese neue Form maskieren. Wählen Sie das Rechteck-Werkzeug (M), erstellen Sie eine 190 x 30 Pixel große Form, füllen Sie sie mit Schwarz und platzieren Sie sie wie im zweiten Bild gezeigt.

Öffnen Sie das Transparenzfenster. Wählen Sie diese schwarze Form zusammen mit der zu Beginn des Schritts erstellten Kopie aus, öffnen Sie das Flyout-Menü des Transparenzbedienfelds, klicken Sie auf Deckkraftmaske erstellen und deaktivieren Sie das Kontrollkästchen Clip. Am Ende sollte Ihr maskiertes, abgerundetes Rechteck wie das vierte gezeigte Bild aussehen.

Schritt 12

Wähle das Rechteck-Werkzeug (M) und erstelle eine 640 x 90 Pixel große Form. Füllen Sie es mit dem unten gezeigten linearen Farbverlauf und platzieren Sie es wie in der folgenden Abbildung gezeigt.

Schritt 13

Deaktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten). Wählen Sie die im vorherigen Schritt erstellte Form aus und erstellen Sie zwei Kopien vor (Befehl + C > Befehl + F > Befehl + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie um 1 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit Schwarz.

Wählen Sie die im vorherigen Schritt erstellte Form erneut aus und erstellen Sie zwei neue Kopien (Befehl + C > Befehl + F> Befehl + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie um 2 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit R=90, G=90, B=90.

Schritt 14

Wählen Sie das in Schritt 12 erstellte Rechteck erneut aus, fügen Sie eine zweite Füllung hinzu und wählen Sie es aus. Machen Sie es schwarz, verringern Sie die Deckkraft auf 7%, ändern Sie den Mischmodus auf Multiplizieren und gehen Sie zu Effekt > Skizze > Notizpapier. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK. Wählen Sie die drei in den letzten beiden Schritten erstellten Formen erneut aus und gruppieren Sie sie (Befehl + G).

Schritt 15

Aktivieren Sie das Raster am Raster erneut (Ansicht > Am Raster ausrichten). Wählen Sie die im vorherigen Schritt erstellte Gruppe aus, erstellen Sie fünf Kopien und platzieren Sie sie wie im folgenden Bild gezeigt.

Schritt 16

Wähle das Rechteck-Werkzeug (M) und erstelle eine 640 x 120 Pixel große Form. Füllen Sie es mit R=50, G=50, B=50 und platzieren Sie es wie in der folgenden Abbildung gezeigt.

Schritt 17

Schritt 18

Wählen Sie die in Schritt 16 erstellte Form erneut aus und erstellen Sie zwei Kopien vor (Befehl + C > Befehl + F > Befehl + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie um 2 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im endgültigen Bild gezeigten linearen Farbverlauf.

Schritt 19

Wählen Sie die in Schritt 16 erstellte Form erneut aus, fügen Sie eine zweite Füllung hinzu und verwenden Sie den unten gezeigten radialen Farbverlauf. Denken Sie daran, dass die gelbe Null aus dem Verlaufsbild für den Deckkraftprozentsatz steht.

Schritt 20

Aktivieren Sie das Raster am Raster erneut (Ansicht > Am Raster ausrichten). Wählen Sie das Ellipsen-Werkzeug (L), erstellen Sie einen 110-Pixel-Kreis und füllen Sie ihn mit dem ersten linearen Farbverlauf (siehe unten). Wählen Sie diese neue Form aus und gehen Sie zu Objekt > Pfad > Versatzpfad. Geben Sie einen -2px-Versatz ein und klicken Sie auf OK.

Duplizieren Sie die resultierende Form (Befehl + C > Befehl + F). Wählen Sie diese Kopie aus und verschieben Sie sie um 2 Pixel nach unten. Wählen Sie diese beiden kleineren Kreise aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im endgültigen Bild gezeigten linearen Farbverlauf.

Schritt 21

Wählen Sie den im vorherigen Schritt erstellten Kreis erneut aus, fügen Sie eine zweite Füllung hinzu und ziehen Sie ihn in den unteren Bereich des Bedienfelds „Darstellung“. Wählen Sie es aus, füllen Sie es mit dem unten gezeigten radialen Farbverlauf und gehen Sie zu Effekt > Pfad > Versatzpfad. Geben Sie einen 3px-Versatz ein und klicken Sie auf OK.

Stellen Sie sicher, dass der Kreis noch ausgewählt ist, und fügen Sie einen 2-Strich hinzu. Stellen Sie die Farbe auf R=60, G=60, B=60 ein und richten Sie sie nach innen aus. Fügen Sie mit der Schaltfläche Neuen Strich hinzufügen einen zweiten Strich für diese Form hinzu. Es ist das schwarze Quadrat in der unteren linken Ecke des Bedienfelds „Darstellung“.

Wählen Sie diesen neuen Strich aus, machen Sie ihn 1pt breit, stellen Sie seine Farbe auf R=25, G=25, B=25 ein und richten Sie ihn nach innen aus. Wählen Sie Ihren 110px-Kreis erneut aus, stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist (im Bedienfeld „Darstellung“), und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 22

Wählen Sie das Rechteck-Werkzeug (M), erstellen Sie ein 30-Pixel-Quadrat, füllen Sie es mit R=240, G=241, B=241 und platzieren Sie es wie im ersten Bild gezeigt. Wechseln Sie zum Direktauswahl-Werkzeug (A) und konzentrieren Sie sich auf diese frische Form. Wählen Sie die richtigen Ankerpunkte aus und gehen Sie zu Objekt > Pfad > Durchschnitt.

Aktivieren Sie die Schaltfläche Beide und klicken Sie auf OK. Ihr Quadrat sollte sich jetzt in ein Dreieck verwandeln. Wählen Sie es aus und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 2 Pixel ein und klicken Sie auf OK.

Schritt 23

Wählen Sie alle in den letzten drei Schritten erstellten Formen aus, gruppieren Sie sie (Befehl + G) und platzieren Sie die Gruppe wie in der folgenden Abbildung gezeigt.

Schritt 24

Wählen Sie das Ellipsen-Werkzeug (L), erstellen Sie einen 90-Pixel-Kreis und füllen Sie ihn mit dem unten gezeigten linearen Farbverlauf. Wählen Sie diese neue Form aus und gehen Sie zu Objekt > Pfad > Versatzpfad. Geben Sie einen -2px-Versatz ein und klicken Sie auf OK.

Duplizieren Sie nun die resultierende Form (Befehl + C > Befehl + F). Wählen Sie diese Kopie aus und verschieben Sie sie um 2 Pixel nach unten. Wählen Sie diese beiden kleineren Kreise aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im endgültigen Bild gezeigten linearen Farbverlauf.

Schritt 25

Wählen Sie den im vorherigen Schritt erstellten Kreis erneut aus, fügen Sie eine zweite Füllung hinzu und ziehen Sie ihn an den unteren Rand des Bedienfelds „Darstellung“. Wählen Sie es aus, füllen Sie es mit dem unten gezeigten radialen Farbverlauf und gehen Sie zu Effekt > Pfad > Versatzpfad. Geben Sie einen 3px-Versatz ein und klicken Sie auf OK. Stellen Sie sicher, dass der Kreis noch ausgewählt ist, und fügen Sie einen 2-Pixel-Strich hinzu.

Stellen Sie die Farbe auf R=60, G=60, B=60 ein und richten Sie sie nach innen aus. Fügen Sie einen zweiten Strich für diesen Kreis hinzu, machen Sie ihn 1pt breit, stellen Sie seine Farbe auf R=25, G=25, B=25 ein und richten Sie ihn nach innen aus.

Wählen Sie Ihren 90-Pixel-Kreis erneut aus, stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist (im Bedienfeld „Darstellung“), und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 26

Wählen Sie das Rechteck-Werkzeug (M), erstellen Sie ein 15-Pixel-Quadrat, füllen Sie es mit Weiß und platzieren Sie es wie im ersten Bild gezeigt. Wechseln Sie zum Direktauswahl-Werkzeug (A) und konzentrieren Sie sich auf diese frische Form.

Wählen Sie die linken Ankerpunkte aus und gehen Sie zu Objekt > Pfad > Durchschnitt. Aktivieren Sie die Schaltfläche Beide und klicken Sie auf OK. Duplizieren Sie die resultierende Dreiecksform und ziehen Sie diese Kopie nach links. Wechseln Sie zum Rechteck-Werkzeug (M), erstellen Sie eine 5 x 15 Pixel große Form, füllen Sie sie mit Weiß und platzieren Sie sie wie im dritten Bild gezeigt.

Wählen Sie die drei in diesem Schritt erstellten Formen aus und gruppieren Sie sie (Befehl + G). Wählen Sie diese neue Gruppe aus und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 1 Pixel ein und klicken Sie auf OK.

Schritt 27

Wählen Sie alle Formen aus, die in den letzten drei Schritten erstellt wurden, gruppieren Sie sie (Befehl + G) und platzieren Sie die Gruppe wie in der folgenden Abbildung gezeigt.

Schritt 28

Wählen Sie die im vorherigen Schritt erstellte Gruppe erneut aus und erstellen Sie eine Kopie vor (Befehl + C > Befehl + F). Wählen Sie diese Gruppenkopie aus, ziehen Sie sie wie im ersten Bild gezeigt nach rechts und gehen Sie zu Objekt > Transformieren > Reflektieren. Aktivieren Sie die Schaltfläche Vertikal und klicken Sie auf OK.

Schritt 29

Wählen Sie das Rechteck-Werkzeug (M), erstellen Sie eine 70 x 30 Pixel große Form, füllen Sie sie mit Weiß und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 10xp ein, klicken Sie auf OK und gehen Sie zu Objekt > Darstellung erweitern. Füllen Sie die resultierende Form mit dem ersten unten gezeigten linearen Farbverlauf und erstellen Sie zwei Kopien vor (Befehl + C > Befehl + F > Befehl + F).

Deaktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten), wählen Sie die oberste Kopie aus und verschieben Sie sie um 1 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem zweiten linearen Farbverlauf, der im folgenden Bild gezeigt wird.

Schritt 30

Fügen Sie einen zweiten Strich für diese Form hinzu, machen Sie sie 1pt breit, stellen Sie ihre Farbe auf R=60, G=60, B=60 ein und richten Sie sie nach außen aus. Stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist, und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 31

Wählen Sie das Textwerkzeug (T), klicken Sie auf Ihre Zeichenfläche und fügen Sie den Text "Mischen" hinzu. Verwenden Sie die Schriftart Myriad mit einer Größe von 14pt und stellen Sie die Farbe auf R=240, G=241, B=241 ein.

Wählen Sie diesen Text zusammen mit den in den letzten beiden Schritten erstellten Formen aus und gruppieren Sie sie (Befehl + G). Aktivieren Sie die Option Am Raster ausrichten erneut (Ansicht > Am Raster ausrichten), wählen Sie die Gruppe aus und platzieren Sie sie wie in der folgenden Abbildung gezeigt.

Schritt 32

Füllen Sie die resultierende Form mit dem unten gezeigten linearen Farbverlauf und wechseln Sie zum Bedienfeld „Darstellung“. Wählen Sie die Füllung aus und gehen Sie zu Effekt > Stilisieren > Inneres Leuchten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 33

Wählen Sie das im vorherigen Schritt erstellte abgerundete Rechteck erneut aus und fügen Sie einen 2-Punkt-Strich hinzu. Stellen Sie die Farbe auf R=25, G=25, B=25 ein und richten Sie sie nach außen aus. Fügen Sie einen zweiten Strich für diese Form hinzu, machen Sie sie 1pt breit, stellen Sie ihre Farbe auf R=60, G=60, B=60 ein und richten Sie sie nach außen aus. Stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist, und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 34

Wählen Sie das Textwerkzeug (T) und fügen Sie den Text "Wiederholen" hinzu. Verwenden Sie die Schriftart Myriad mit einer Größe von 14pt und stellen Sie die Farbe auf R=73, G=230, B=198 ein. Wählen Sie diesen Text zusammen mit den in den letzten beiden Schritten erstellten Formen aus und gruppieren Sie sie (Befehl + G). Platzieren Sie nun diese neue Gruppe wie unten gezeigt.

Schritt 35

Für den folgenden Schritt benötigen Sie alle 1 Pixel ein Raster. Gehen Sie zu Bearbeiten > Einstellungen > Hilfslinien und Raster und geben Sie in jedes Feld 1 in die Rasterlinie ein. Wählen Sie das Rechteck-Werkzeug (M), erstellen Sie eine 50 x 14 Pixel große Form, füllen Sie sie mit Weiß und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen 3xp-Radius ein, klicken Sie auf OK und gehen Sie zu Objekt > Darstellung erweitern.

Füllen Sie die resultierende Form mit dem unten gezeigten linearen Farbverlauf und wechseln Sie zum Bedienfeld „Darstellung“. Fügen Sie zunächst einen 2-Punkt-Strich hinzu. Stellen Sie die Farbe auf R=15, G=15, B=15 ein und richten Sie sie nach außen aus. Fügen Sie einen zweiten Strich für diese Form hinzu, machen Sie sie 1pt breit, stellen Sie ihre Farbe auf R=70, G=70, B=70 ein und richten Sie sie nach außen aus. Stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist, und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 36

Wählen Sie das Rechteck-Werkzeug (M), erstellen Sie ein 5-Pixel-Quadrat, füllen Sie es mit R=25, G=25, B=25 und platzieren Sie es wie im ersten Bild gezeigt. Wechseln Sie zum Direktauswahl-Werkzeug (A) und konzentrieren Sie sich auf diese frische Form. Wählen Sie die linken Ankerpunkte aus und gehen Sie zu Objekt > Pfad > Durchschnitt. Aktivieren Sie die Schaltfläche Beide und klicken Sie auf OK.

Duplizieren Sie die resultierende Dreiecksform und ziehen Sie die Kopie nach rechts, wie im dritten Bild gezeigt. Duplizieren Sie diese beiden Dreiecke, drehen Sie sie und platzieren Sie sie wie im vierten Bild gezeigt.

Schritt 37

Kehren Sie zu "Gitterlinie jede 5 Pixel" zurück. Gehen Sie also zu Bearbeiten > Einstellungen > Hilfslinien und Raster und geben Sie in jedes Feld 5 in die Rasterlinie ein. Wählen Sie das Ellipsen-Werkzeug (L), erstellen Sie einen 30-Pixel-Kreis, füllen Sie ihn mit dem unten gezeigten linearen Farbverlauf und platzieren Sie ihn wie im ersten Bild gezeigt. Wählen Sie diese neue Form aus und erstellen Sie zwei Kopien vor (Befehl + C > Befehl + F > Befehl + F).

Deaktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten), wählen Sie die oberste Kopie aus und verschieben Sie sie um 1 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im endgültigen Bild gezeigten linearen Farbverlauf.

Schritt 38

Wählen Sie den im vorherigen Schritt erstellten Kreis erneut aus und fügen Sie einen 2-Punkt-Strich hinzu. Stellen Sie die Farbe auf R=25, G=25, B=25 ein und richten Sie sie nach außen aus. Fügen Sie einen zweiten Strich für diese Form hinzu, machen Sie sie 1pt breit, stellen Sie ihre Farbe auf R=60, G=60, B=60 ein und richten Sie sie dann nach außen aus. Stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist, und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 39

Aktivieren Sie das Raster am Raster erneut (Ansicht > Am Raster ausrichten). Wählen Sie die in den letzten beiden Schritten erstellten Formen aus und gruppieren Sie sie (Befehl + G). Erstellen Sie fünf Kopien dieser Gruppe und platzieren Sie sie wie unten gezeigt.

Schritt 40

Wählen Sie das Rechteck-Werkzeug (M), erstellen Sie eine 45 x 30 Pixel große Form, füllen Sie sie mit dem unten gezeigten linearen Farbverlauf und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 2xp ein, klicken Sie auf OK und gehen Sie zu Objekt > Darstellung erweitern. Stellen Sie sicher, dass die resultierende Form wie gezeigt platziert ist.

Schritt 41

Deaktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten), wählen Sie die im vorherigen Schritt erstellte Form aus und erstellen Sie zwei Kopien vor (Befehl + C > Befehl + F > Befehl + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie um 1 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im endgültigen Bild gezeigten linearen Farbverlauf.

Schritt 42

Wählen Sie das in Schritt 40 erstellte abgerundete Rechteck erneut aus und fügen Sie einen 2-Punkt-Strich hinzu. Stellen Sie die Farbe auf R=25, G=25, B=25 ein und richten Sie sie nach außen aus. Fügen Sie einen zweiten Strich für diese Form hinzu, machen Sie sie 1pt breit, stellen Sie ihre Farbe auf R=60, G=60, B=60 ein und richten Sie sie nach außen aus.

Fügen Sie eine zweite Füllung für diese Form hinzu und ziehen Sie sie an den unteren Rand des Bedienfelds „Darstellung“. Wählen Sie es aus, stellen Sie seine Farbe auf R=70, G=70, B=70 ein und gehen Sie zu Effekt > Pfad > Versatzpfad. Geben Sie einen 2-Pixel-Versatz ein, klicken Sie auf OK und gehen Sie zu Effekt > Warp > Arc Lower. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 43

Aktivieren Sie das Raster am Raster erneut (Ansicht > Am Raster ausrichten). Wählen Sie die in den letzten drei Schritten erstellten Formen aus und gruppieren Sie sie (Befehl + G). Erstellen Sie fünf Kopien dieser Gruppe und platzieren Sie sie wie im folgenden Bild gezeigt.

Schritt 44

Wählen Sie das Rechteck-Werkzeug (M), erstellen Sie eine 110 x 35 Pixel große Form, füllen Sie sie mit Weiß und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 5xp ein, klicken Sie auf OK und gehen Sie zu Objekt > Darstellung erweitern. Stellen Sie sicher, dass die resultierende Form wie im ersten Bild gezeigt platziert ist. Wählen Sie es aus, erstellen Sie zwei Kopien vor (Befehl + C > Befehl + F > Befehl + F) und deaktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten).

Wählen Sie die oberste Kopie aus und verschieben Sie sie um 1 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im letzten Bild unten gezeigten linearen Farbverlauf.

Schritt 45

Wählen Sie das im vorherigen Schritt erstellte abgerundete Rechteck erneut aus, ersetzen Sie das Weiß durch den unten gezeigten linearen Farbverlauf und fügen Sie einen 2-Punkt-Strich hinzu. Stellen Sie die Farbe auf R=15, G=15, B=15 ein und richten Sie sie nach außen aus. Fügen Sie einen zweiten Strich für diese Form hinzu, machen Sie sie 1pt breit, stellen Sie ihre Farbe auf R=70, G=70, B=70 ein und richten Sie sie nach außen aus. Stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist, und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Schritt 46

Wählen Sie die in den letzten beiden Schritten erstellten Formen aus und gruppieren Sie sie (Befehl + G). Erstellen Sie eine Kopie dieser neuen Gruppe und ziehen Sie sie wie im folgenden Bild gezeigt nach unten. Wählen Sie das abgerundete Rechteck in dieser Gruppenkopie aus, wechseln Sie zum Bedienfeld „Darstellung“ und öffnen Sie den vorhandenen Schlagschatteneffekt.

Ersetzen Sie die vorhandenen Eigenschaften durch die in der folgenden Abbildung gezeigten. Die obere Gruppe repräsentiert die aktive Schaltfläche, während die untere Gruppe die inaktive Schaltfläche darstellt.

Schritt 47

Wählen Sie die inaktive Schaltflächengruppe aus, erstellen Sie acht Kopien und platzieren Sie sie wie im folgenden Bild gezeigt.

Schritt 48

Konzentrieren Sie sich auf die unteren Schaltflächen, wählen Sie das Textwerkzeug (T) und fügen Sie Text hinzu. Verwenden Sie die Schriftart Myriad. Machen Sie für die aktive Schaltfläche Ihren Text fett, stellen Sie die Größe auf 17pt ein und färben Sie ihn mit R=150, G=150, B=150. Stellen Sie für die inaktiven Schaltflächen den Textstil auf Kursiv und die Farben auf R=15, G=15, B=15 ein und fügen Sie dann den unten gezeigten diskreten Schlagschatteneffekt hinzu.

Schritt 49

Fahren Sie mit dem Textwerkzeug (T) fort und fügen Sie neuen Text hinzu. Verwenden Sie diesmal die Schriftart Calibri, stellen Sie die Größe auf 20pt und die Farbe auf R=208, G=210, B=211 ein und fügen Sie dann den unten gezeigten Schlagschatteneffekt hinzu.

Schritt 50

Fahren Sie mit dem Textwerkzeug (T) fort und fügen Sie die Zahlen 1 bis 6 hinzu, wie in der folgenden Abbildung gezeigt. Verwenden Sie die Schriftart Myriad mit einer Größe von 15pt und stellen Sie die Farbe auf R=150, G=150, B=150 ein.

Schritt 51

Als nächstes müssen Sie das abgerundete Rechteck bearbeiten, das für das wiedergegebene Lied steht. Wählen Sie es aus und konzentrieren Sie sich auf das Bedienfeld „Darstellung“. Entfernen Sie zuerst die untere Füllung. Wählen Sie die verbleibende Füllung aus, ersetzen Sie den vorhandenen Farbverlauf durch den unten gezeigten und gehen Sie zu Effekt > Stilisieren > Inneres Leuchten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.

Kehren Sie zum Bedienfeld „Darstellung“ zurück, wählen Sie den oberen Strich aus und ersetzen Sie die vorhandene Farbe durch R=41, G=225, B=188. Wählen Sie dieses abgerundete Rechteck erneut aus, stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist, und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die unten gezeigten Daten ein und klicken Sie auf OK.