So erstellen Sie ein App-Symbol in Illustrator

Seite 1 von 2: So erstellen Sie ein App-Symbol in Illustrator: Schritte 01-11

In diesem Illustrator-Tutorial Ich zeige Ihnen, wie Sie in Adobe ein Taschenrechner-App-Symbol erstellen Illustrator CC . Wir verwenden verschiedene Formwerkzeuge und Stiftwerkzeuge sowie die 3D-Funktionen von Illustrator. Hoffentlich lernen Sie dabei einige nützliche Tipps.

Sie müssen auch einige herunterladen kostenlose Schriftarten für dieses Tutorial: DS-Digital und Bebas Neue . Wenn Sie es noch nicht haben, können Sie bekommen Adobe Creative Cloud hier .

Aber zuerst schauen wir uns das Endergebnis an:



App-Symbol in Illustrator

01. Öffnen Sie ein Dokument

Illustrator Schriftart Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Erstellen Sie in Illustrator ein neues Dokument mit einer Breite von 600 Pixel und einer Höhe von 450 Pixel.

02. Erstellen Sie den Hintergrund

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Wähle das Rechteck-Werkzeug (M) aus und wähle # 44484D Füllfarbe, um ein Rechteck zu zeichnen, das die Leinwand als Hintergrund bedeckt.

03. Machen Sie die Basis

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Zunächst erstellen wir die Basis des Symbols. Wählen Sie also das Rechteck-Werkzeug (M) und klicken Sie auf die Leinwand, um das Optionsfenster anzuzeigen. Geben Sie 280px width, 265px height ein und klicken Sie auf OK, um ein Rechteck wie unten gezeigt zu zeichnen. Wählen Sie # E7DED0 als Füllfarbe.

Als Nächstes konvertieren wir es in ein abgerundetes Rechteck. Wählen Sie dieses Rechteck mit Hilfe des Auswahlwerkzeugs (V) aus oder klicken Sie auf das ringförmige Ziel auf der rechten Seite der jeweiligen Ebene. Gehen Sie zu Effekt> Stilisieren> Runde Ecken. Geben Sie 50px als Radius ein und klicken Sie auf OK.

Klicken Sie auf das Bild, um es zu vergrößern

Klicken Sie auf das Bild, um es zu vergrößern

04. Effekt einstellen

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Wählen Sie dieses Rechteck aus und gehen Sie zu Effekt> 3D> Extrudieren & Abschrägen. Übernehmen Sie hier die angegebenen Einstellungen.

05. Wenden Sie einen Farbverlauf an

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Um einen subtilen Farbverlauf über die Basis anzuwenden, zeichnen Sie ein Rechteck, das die gesamte 3D-Form mit einer beliebigen Füllfarbe abdeckt. Konvertieren Sie es nun in ein abgerundetes Rechteck mit einem Eckenradius von 50 Pixel.

Ersetzen Sie nun die Füllung mit dem Verlaufswerkzeug (G) durch einen Schwarz-Weiß-Schwarz-Verlauf. Ändern Sie den Mischmodus im Transparenzfenster in Farbbrand mit 20% Deckkraft (Umschalt + Strg + F10).

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

06. Erstellen Sie ein weiteres Rechteck

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Zeichnen Sie als Nächstes ein weiteres Rechteck mit einer Breite von 280 Pixel und einer Höhe von 178 Pixel mit der Füllfarbe # E9E3D9 und dem weißen Strich. Wählen Sie 1 Punkt Hubgewicht aus der oberen Steuerleiste.

Konvertieren Sie es nun in ein abgerundetes Rechteck mit einem Radius von 40 Pixel.

Klicken Sie auf das Bild, um es zu vergrößern

Klicken Sie auf das Bild, um es zu vergrößern

Wenden Sie danach den folgenden Farbverlauf an und ändern Sie den Mischmodus im Transparenzbedienfeld auf „Mit 50% Deckkraft multiplizieren“ (Umschalt + Strg + F10).

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

07. Machen Sie ein abgerundetes Rechteck

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Zeichnen Sie ein weiteres Rechteck mit 230 Pixel und einer Höhe von 35 Pixel mit der Füllfarbe # BCBA95 und wenden Sie für Striche einen hellen bis dunkelgrauen Farbverlauf an, wie unten gezeigt. Wählen Sie 3pt Hubgewicht aus der oberen Steuerleiste.

Konvertieren Sie dieses Rechteck in ein abgerundetes Rechteck mit einem Eckenradius von 10 Pixel.

Klicken Sie auf das Bild, um es zu vergrößern

Klicken Sie auf das Bild, um es zu vergrößern

08. Machen Sie einen Glow-Effekt

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Wählen Sie als Nächstes dieses neue Rechteck aus und gehen Sie zu Fenster> Darstellung, um das Bedienfeld „Darstellung“ anzuzeigen, oder drücken Sie Umschalt + F6. Wählen Sie nun das Füllattribut aus und klicken Sie auf das Symbol 'Ausgewähltes Element duplizieren' unten im Erscheinungsbildbedienfeld, um die Füllung zu duplizieren. Ersetzen Sie diese neue Füllung wie oben gezeigt durch einen Schwarz-Weiß-Farbverlauf bei 90 Grad.

Lassen Sie dieses Rechteck ausgewählt und gehen Sie zu Effekt> Stilisieren> Inneres Leuchten. Übernehmen Sie hier die angegebenen Einstellungen. Wenn Sie fertig sind, ändern Sie den Mischmodus für die Verlaufsfüllung in Mit 30% Deckkraft multiplizieren.

Klicken Sie auf das Bild, um es zu vergrößern

Klicken Sie auf das Bild, um es zu vergrößern

09. Rechteck kopieren

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Wählen Sie dieses neue Rechteck aus und drücken Sie Strg + C, um es zu kopieren, und drücken Sie Strg + B, um es wieder einzufügen. Ziehen Sie diese Kopie 1-2 Schritte nach unten. Entfernen Sie nun die Füllattribute, indem Sie sie auf das Symbol Löschen am unteren Rand des Darstellungsfensters ziehen und ihm einen 3-Punkt-Strich von geben # D1D2D4 Farbe.

10. Fügen Sie Text hinzu

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Als Nächstes fügen wir Text über den Bildschirm ein. Wählen Sie das Textwerkzeug (T), mit dem Sie den Text eingeben möchten # 404041 Füllfarbe. Ich habe hier DS-Digital-Schrift verwendet.

Drücken Sie nun Strg + C zum Kopieren und Strg + B zum Einfügen. Ziehen Sie den kopierten Text 1-2 Schritte nach unten und ändern Sie seine Füllfarbe in # 808284 .

Klicken Sie auf das Bild, um es zu vergrößern

Klicken Sie auf das Bild, um es zu vergrößern

11. Machen Sie die Basis

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Als Nächstes erstellen wir die Basis der Schaltfläche. Wählen Sie das Rechteck-Werkzeug aus, um mit ein Rechteck mit folgenden Abmessungen zu zeichnen # 847D72 Füllen Sie die Farbe und den gleichen hell- bis dunkelgrauen Farbverlauf auf dem Strich wie in Schritt 7. Wählen Sie hier jedoch das Strichgewicht von 1 Punkt.

Und konvertieren Sie es in ein abgerundetes Rechteck mit einem Radius von 25 Pixel.

Illustrator App Symbol

Klicken Sie auf das Bild, um es zu vergrößern

Duplizieren Sie anschließend das Füllattribut im Bedienfeld „Darstellung“ und wenden Sie den Schwarzweißverlauf bei 90 Grad an. Ändern Sie den Mischmodus auf Mit 50% Deckkraft multiplizieren.

Klicken Sie auf das Bild, um es zu vergrößern

Klicken Sie auf das Bild, um es zu vergrößern

Nächste Seite: Die letzten Schritte zum Erstellen einer Symbol-App in Illustrator ...

Aktuelle Seite: So erstellen Sie ein App-Symbol in Illustrator: Schritte 01-11

Nächste Seite So erstellen Sie ein App-Symbol in Illustrator: Schritte 12-23