German (Deutsch) translation by Federicco Ancie (you can also view the original English article)
Im folgenden Tutorial erfahren Sie, wie Sie ein einfaches Mail-Symbol erstellen. Wir arbeiten mit einfachen Formen und verwenden das Pathfinder-Bedienfeld und Farbverläufe, um ein stilvolles Symbol in Adobe Illustrator zu erstellen.
Schritt 1
Öffnen Sie Illustrator und drücken Sie die Befehlstaste + N, um ein neues Dokument zu erstellen. Geben Sie 600 in die Felder für Breite und Höhe ein und klicken Sie auf die Schaltfläche Erweitert. Wählen Sie RGB, Bildschirm (72ppi) und vergewissern Sie sich, dass das Kontrollkästchen "Neue Objekte am Pixelraster ausrichten" deaktiviert ist, bevor Sie auf OK klicken. Aktivieren Sie das Raster (Ansicht > Raster anzeigen) und die Option An Raster ausrichten (Ansicht > An Raster ausrichten).
Als Nächstes benötigen Sie alle 5 Pixel ein Raster. Gehen Sie einfach zu Bearbeiten > Voreinstellungen > Hilfslinien & Raster, geben Sie jeweils 5 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 in Pixeln unter Bearbeiten > Voreinstellungen > Einheit > Allgemein festzulegen. Alle diese Optionen erhöhen die Arbeitsgeschwindigkeit erheblich.
Schritt 2
Erstellen Sie mit dem Rechteckwerkzeug (M) eine Form von 200 mal 125 Pixeln, füllen Sie sie mit dem linearen Farbverlauf, wie in der folgenden Abbildung gezeigt, und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 10 Pixeln ein, klicken Sie auf OK und gehen Sie zu Objekt > Aussehen erweitern.
Schritt 3
Wählen Sie die im vorherigen Schritt erstellte Form erneut aus und erstellen Sie eine Kopie (Control + C > Control + F). Erstellen Sie mit dem Rechteckwerkzeug (M) eine 220 x 95px-Form, füllen Sie sie mit R = 119 G = 154 B = 99 und platzieren Sie sie wie in der zweiten Abbildung gezeigt. Fokussieren Sie auf die Oberseite dieses grünen Rechtecks und wechseln Sie zum Direktauswahl-Werkzeug (A). Wählen Sie die zwei Ankerpunkte (im zweiten Bild hervorgehoben) und gehen Sie zu Objekt > Pfad > Mittelwert (Alt + Strg + J). Aktivieren Sie die Schaltfläche Beide, und klicken Sie auf OK. Das grüne Rechteck sollte sich in ein Dreieck verwandeln. Wählen Sie es zusammen mit der am Anfang des Schritts erstellten Kopie aus, öffnen Sie das Pathfinder-Bedienfeld und klicken Sie auf die Schaltfläche "Überschneiden". Am Ende sollte Ihre grüne Form wie im vierten Bild aussehen.
Schritt 4
Deaktivieren Sie "An Raster ausrichten" ("Ansicht" > "An Raster ausrichten"), gehen Sie zu Bearbeiten > Voreinstellungen > Allgemein und stellen Sie sicher, dass das Keyboard-Increment auf 1px eingestellt ist. Wählen Sie die grüne Form aus, die Sie im vorherigen Schritt erstellt haben, und erstellen Sie zwei Kopien (Control + C > Control + F > Control + F). Gehen Sie zum Ebenenfenster, wählen Sie die unterste Kopie aus und verschieben Sie sie mit dem Aufwärtspfeil auf der Tastatur um 2 Pixel nach oben. Wählen Sie beide in diesem Schritt erstellten Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Konzentrieren Sie sich auf die resultierende Form, nehmen Sie das Werkzeug Ankerpunkt löschen (-) und entfernen Sie die beiden Ankerpunkte, auf die die Pfeile im dritten Bild zeigen. Füllen Sie diese dünne Form mit dem linearen Farbverlauf, der im endgültigen Bild angezeigt wird. Verringern Sie dann die Deckkraft auf 15% und ändern Sie den Füllmodus auf Multiplizieren. Die gelbe Zahl ("55") aus dem Verlaufsbild steht für den Prozentsatz der Deckkraft.
Schritt 5
Wählen Sie die grüne Form und gehen Sie zu Objekt > Pfad > Versatzpfad. Geben Sie einen -1px-Offset ein und klicken Sie auf OK. Wählen Sie die resultierende Form aus und erstellen Sie eine Kopie (Control + C > Control + F). Wählen Sie diese Kopie aus und verschieben Sie sie mit dem Aufwärtspfeil auf Ihrer Tastatur um 1 Pixel nach oben. Wählen Sie beide in diesem Schritt erstellte Form erneut aus und klicken Sie auf die Schaltfläche Minus Front auf Ihrer Tastatur. Füllen Sie die resultierende Form mit dem in der folgenden Abbildung gezeigten linearen Farbverlauf. Denken Sie daran, dass die gelben Nullen aus dem Verlaufsbild für den Prozentsatz für die Deckkraft stehen.
Schritt 6
Wählen Sie erneut das abgerundete Rechteck aus, das im zweiten Schritt erstellt wurde, und erstellen Sie zwei Kopien vor (Control + C > Control + F > Control + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie 1px nach oben. Wählen Sie beide Exemplare erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Wählen Sie die resultierende Form aus, bringen Sie sie in den Vordergrund (Umschalt + Strg +]), füllen Sie sie mit dem linearen Farbverlauf, der im folgenden Bild dargestellt ist, und ändern Sie den Füllmodus in weiches Licht.
Schritt 7
Wählen Sie die grüne Form erneut aus und ersetzen Sie die für die Füllung verwendete flache Farbe durch den im folgenden Bild dargestellten linearen Verlauf. Die weiße Zahl ("50") aus dem Verlaufsbild steht für den Standortprozentsatz.
Schritt 8
Aktivieren Sie die Option An Raster ausrichten (Ansicht > An Raster ausrichten). Wählen Sie das abgerundete Rechteck, das Sie im zweiten Schritt erstellt haben, erneut aus und machen Sie eine Kopie vor (Control + C > Control + F). Erstellen Sie mit dem Rechteckwerkzeug (M) eine 220 x 80 Pixel große Form, füllen Sie sie mit R = 119 G = 154 B = 99 und platzieren Sie sie wie im zweiten Bild gezeigt. Fokussieren Sie auf der Unterseite dieses grünen Rechtecks und wechseln Sie zum Direktauswahl-Werkzeug (A). Wählen Sie die zwei Ankerpunkte (im zweiten Bild hervorgehoben) und gehen Sie zu Objekt > Pfad > Mittelwert (Alt + Strg + J). Aktivieren Sie die Schaltfläche Beide, und klicken Sie auf OK. Wählen Sie das resultierende Dreieck zusammen mit der am Anfang des Schritts erstellten Kopie aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche "Überschneiden". Am Ende sollte Ihre grüne Form wie im vierten Bild aussehen.
Schritt 9
Deaktivieren Sie die Option An Raster ausrichten (Ansicht > An Raster ausrichten). Wählen Sie die grüne Form aus, die Sie im vorherigen Schritt erstellt haben, und erstellen Sie zwei Kopien (Control + C > Control + F > Control + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie mit dem Aufwärtspfeil auf der Tastatur um 2 Pixel nach oben. Wählen Sie beide Exemplare erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front.
Konzentrieren Sie sich auf die resultierende Form, nehmen Sie das Werkzeug Ankerpunkt löschen (-) und entfernen Sie die beiden Ankerpunkte, auf die die Pfeile im dritten Bild zeigen. Füllen Sie schließlich diese scharfe Form mit dem linearen Verlauf, der in der folgenden Abbildung dargestellt ist.
Schritt 10
Wählen Sie die grüne Form erneut aus und erstellen Sie zwei Kopien vorne (Strg + C > Strg + F > Strg + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie 1px nach unten. Wählen Sie beide Exemplare erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem im dritten Bild dargestellten linearen Farbverlauf, verringern Sie die Deckkraft auf 50% und ändern Sie den Füllmodus in weiches Licht.
Schritt 11
Wählen Sie die grüne Form erneut aus und erstellen Sie eine Kopie vor (Control + C > Control + F). Wählen Sie es aus, verschieben Sie es 1px nach unten und duplizieren Sie es (Strg + C > Strg + F). Wählen Sie diese zweite Kopie aus und verschieben Sie sie 1px nach unten. Wählen Sie beide Exemplare erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem in der folgenden Abbildung gezeigten linearen Farbverlauf.
Schritt 12
Wählen Sie die grüne Form und erstellen Sie zwei Kopien vor (Control + C > Control + F > Control + F). Gehen Sie zum Ebenenbedienfeld, wählen Sie die unterste Kopie aus, und verschieben Sie sie mit dem Abwärtspfeil auf der Tastatur um 1 Pixel nach unten. Wählen Sie beide in diesem Schritt erstellten Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Konzentrieren Sie sich auf die resultierende Form, nehmen Sie das Werkzeug Ankerpunkt löschen (-) und entfernen Sie die beiden Ankerpunkte, auf die die Pfeile im dritten Bild zeigen. Füllen Sie schließlich diese scharfe Form mit dem im folgenden Bild dargestellten linearen Farbverlauf, verringern Sie die Deckkraft auf 10% und ändern Sie den Füllmodus auf Multiplizieren.
Schritt 13
Aktivieren Sie die Option An Raster ausrichten (Ansicht > An Raster ausrichten). Erstellen Sie mit dem Rechteckwerkzeug (M) eine 180 x 75 Pixel große Form, füllen Sie sie mit R = 173 G = 149 B = 116 und platzieren Sie sie wie im ersten Bild gezeigt. Fokussieren Sie auf der Unterseite dieses braunen Rechtecks und wechseln Sie zum Direktauswahl-Werkzeug (A). Wählen Sie die zwei Ankerpunkte (im ersten Bild hervorgehoben) und gehen Sie zu Objekt > Pfad > Mittelwert (Alt + Strg + J). Aktivieren Sie die Schaltfläche Beide, und klicken Sie auf OK. Gehen Sie zum Ebenenbedienfeld, wählen Sie dieses braune Dreieck aus, verringern Sie die Deckkraft auf 15%, ziehen Sie es unter die grüne Form und gehen Sie zu Effekt > Weichzeichnen > Gaußsche Weichzeichnung. Geben Sie einen Radius von 4 Pixeln ein und klicken Sie auf OK.
Schritt 14
Wählen Sie die grüne Form erneut aus und ersetzen Sie die für die Füllung verwendete flache Farbe durch den im folgenden Bild dargestellten linearen Verlauf.
Schritt 15
Deaktivieren Sie die Option An Raster ausrichten (Ansicht > An Raster ausrichten). Wählen Sie das im zweiten Schritt erstellte abgerundete Rechteck erneut aus und gehen Sie zu Objekt > Pfad > Versatzpfad. Geben Sie einen -1px-Offset ein und klicken Sie auf OK. Wählen Sie die resultierende Form aus und erstellen Sie eine Kopie (Control + C > Control + F). Wählen Sie diese Kopie aus und verschieben Sie sie 1px nach links. Wählen Sie beide in diesem Schritt erstellten Formen erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem in der folgenden Abbildung gezeigten linearen Farbverlauf.
Schritt 16
Wählen Sie das im zweiten Schritt erstellte abgerundete Rechteck erneut aus und gehen Sie zu Objekt > Pfad > Versatzpfad. Geben Sie einen -1px-Offset ein und klicken Sie auf OK. Wählen Sie die resultierende Form aus und erstellen Sie eine Kopie (Control + C > Control + F). Wählen Sie diese Kopie aus und verschieben Sie sie um 1 Pixel nach rechts. Wählen Sie beide in diesem Schritt erstellten Formen erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit dem in der folgenden Abbildung gezeigten linearen Farbverlauf.
Schritt 17
Wählen Sie das abgerundete Rechteck aus, das im zweiten Schritt erstellt wurde, öffnen Sie das Fenster "Darstellung", fügen Sie mithilfe der Schaltfläche "Neue Füllung hinzufügen" (durch den kleinen blauen Pfeil angezeigt) eine zweite Füllung hinzu, und ziehen Sie sie unten in das Bedienfeld. Konzentrieren Sie sich weiterhin auf das Erscheinungsbildfenster, wählen Sie diese neue Füllung aus, fügen Sie den im folgenden Bild gezeigten komplexen linearen Farbverlauf hinzu und gehen Sie zu Effekt > Verzerrung und Transformation > Transformation. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.
Schritt 18
Wählen Sie das abgerundete Rechteck, das Sie im zweiten Schritt erstellt haben, erneut aus, fügen Sie eine dritte Füllung hinzu und ziehen Sie es unter das Erscheinungsbildfenster. Wählen Sie es aus, setzen Sie die Farbe auf R = 235 G = 231 B = 216 und gehen Sie zu Effekt > Verzerrung und Transformation > Transformation. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.
Schritt 19
Wählen Sie das abgerundete Rechteck, das Sie im zweiten Schritt erstellt haben, erneut aus, fügen Sie zwei schwarze Füllungen hinzu und ziehen Sie sie unter das Erscheinungsbildbedienfeld. Wählen Sie die obere, schwarze Füllung aus, verringern Sie die Deckkraft auf 5% und gehen Sie zu Effekt > Pfad > Versatzpfad. Geben Sie einen 1px-Offset ein, klicken Sie auf OK und gehen Sie zu Effekt > Verzerrung und Transformation > Transformation. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK. Wählen Sie die untere schwarze Füllung aus, verringern Sie die Deckkraft auf 5% und wählen Sie Effekt > Pfad > Versatzpfad. Geben Sie einen 1px-Offset ein und klicken Sie auf OK.
Schritt 20
Aktivieren Sie die Option "Am Raster ausrichten" ("Ansicht" > "Am Raster ausrichten") und konzentrieren Sie sich auf die rechte obere Ecke des Umschlags. Wähle das Ellipse-Werkzeug (L) aus, erstelle einen 45px-Kreis, fülle ihn mit dem unten gezeigten linearen Farbverlauf, platziere ihn wie im ersten Bild gezeigt und gehe zu Objekt > Pfad > Versatzpfad. Geben Sie einen -1px-Offset ein und klicken Sie auf OK. Wählen Sie die resultierende Form aus, erstellen Sie eine Kopie vor (Strg + C > Strg + F) und deaktivieren Sie die Option An Raster ausrichten (Ansicht > An Raster ausrichten). Wählen Sie diese Kopie aus und verschieben Sie sie 1px nach unten. Wählen Sie beide kleineren Kreise erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit R = 255 G = 104 B = 109.
Schritt 21
Wählen Sie den im vorherigen Schritt erstellten Kreis erneut aus und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die im linken Fenster angezeigten Daten ein, klicken Sie auf OK und gehen Sie erneut zu Effekt > Stilisieren > Schlagschatten. Geben Sie die im rechten Fenster angezeigten Daten ein und klicken Sie auf OK. Stellen Sie sicher, dass dieser Kreis noch ausgewählt ist, konzentrieren Sie sich auf das Bedienfeld „Erscheinungsbild“ und fügen Sie einen Strich mit 1 Punkt hinzu. Richten Sie es nach innen aus und setzen Sie die Farbe auf R = 135 G = 30 B = 45.
Schritt 22
Wähle das Typ-Tool (T) und füge eine einfache Zahl hinzu, wie in der folgenden Abbildung gezeigt. Verwenden Sie die Schriftart "American Purpose" mit der auf 22pt eingestellten Größe. Wählen Sie dieses kleine Stück Text aus, konzentrieren Sie sich auf das Erscheinungsbildbedienfeld und fügen Sie zwei neue Füllungen hinzu, indem Sie auf die Schaltfläche „Neue Füllmenge hinzufügen“ klicken. Wählen Sie die obere Füllung aus und machen Sie sie weiß. Wählen Sie dann die untere Füllung aus, fügen Sie den im folgenden Bild gezeigten linearen Farbverlauf hinzu, ändern Sie den Füllmodus in Überlagerung und wählen Sie Effekt > Pfad > Versatzpfad. Geben Sie einen 1px-Offset ein, klicken Sie auf OK und wählen Sie Effekt > Stilisieren > Schlagschatten. Geben Sie die Daten in der folgenden Abbildung ein und klicken Sie auf OK.
Schritt 23
Für diese letzten Schritte benötigen Sie alle 1px ein Raster. Gehen Sie zu Bearbeiten > Voreinstellungen > Hilfslinien & Raster und geben Sie jeweils 1 in das Feld Rasterlinie ein. Wenn Sie diesen einfachen Kreis nicht mögen, können Sie ihn leicht durch ein Band ersetzen. Fokussieren Sie auf die untere rechte Ecke Ihres Umschlags und erstellen Sie mit dem Rechteckwerkzeug (M) eine 50 x 10 Pixel große Form. Füllen Sie sie mit dem unten gezeigten linearen Farbverlauf. Platzieren Sie es wie in der folgenden Abbildung gezeigt, und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 5 Pixeln ein und klicken Sie auf OK. Wählen Sie dieses abgerundete Rechteck aus und senden Sie es nach hinten (Umschalt + Strg + [).
Schritt 24
Erstellen Sie mit dem Rechteckwerkzeug (M) eine 40 x 65px-Form, füllen Sie sie mit dem unten gezeigten linearen Verlauf und platzieren Sie sie wie in der folgenden Abbildung dargestellt.
Schritt 25
Wählen Sie das im vorherigen Schritt erstellte Rechteck erneut aus und gehen Sie zu Objekt > Pfad > Ankerpunkte hinzufügen. Wechseln Sie zum Direktauswahl-Werkzeug (A), wählen Sie den oberen, mittleren Ankerpunkt aus und ziehen Sie ihn 15px nach unten. Am Ende sollte Ihre Form wie im zweiten Bild aussehen.
Schritt 26
Wählen Sie die im vorherigen Schritt erstellte Form erneut aus, konzentrieren Sie sich auf das Erscheinungsbildbedienfeld, wählen Sie die Füllung aus und gehen Sie zu Effekt > Warp > Shell Upper. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und kehren Sie zum Fenster "Darstellung" zurück. Fügen Sie zwei schwarze Füllungen hinzu und ziehen Sie sie unten im Erscheinungsbildfenster. Wählen Sie die obere, schwarze Füllung aus, verringern Sie die Deckkraft auf 15% und gehen Sie zu Effekt > Verzerrung und Transformation > Transformation. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK. Wählen Sie die untere schwarze Füllung aus, verringern Sie die Deckkraft auf 25% und wählen Sie Effekt > Pfad > Versatzpfad. Geben Sie einen -1px-Offset ein, klicken Sie auf OK und gehen Sie zu Effekt > Verzerrung und Transformation > Transformation. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und gehen Sie zu Effekt > Unschärfe > Gaußsche Unschärfe. Geben Sie einen Radius von 2 Pixel ein und klicken Sie auf OK.
Schritt 27
Wählen Sie die im vorherigen Schritt bearbeitete Form erneut aus, konzentrieren Sie sich auf das Erscheinungsbildbedienfeld, und fügen Sie mit der Schaltfläche „Neuen Strich hinzufügen“ (durch den kleinen blauen Pfeil gekennzeichnet) zwei Striche hinzu. Wählen Sie den oberen Strich aus, stellen Sie ihn auf 1pt breit, richten Sie ihn nach innen aus, setzen Sie die Farbe auf R = 135 G = 30 B = 45, verringern Sie die Deckkraft auf 80%, ändern Sie den Mischmodus in „Farbe brennen“ und gehen Sie zu Effekt > Warp > Oberteil Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK. Wählen Sie den anderen Strich, machen Sie ihn um 2pt breit, richten Sie ihn nach innen aus, setzen Sie die Farbe auf Weiß, verringern Sie die Deckkraft auf 75%, ändern Sie den Füllmodus auf Überlagern und gehen Sie zu Effekt > Warp > Shell Upper. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.
Schritt 28
Zum Schluss duplizieren Sie den im zweiundzwanzigsten Schritt hinzugefügten Textstück und platzieren Sie diese Kopie wie in der folgenden Abbildung gezeigt.
Abschluss
Jetzt ist deine Arbeit erledigt. So sollte es mit beiden Stilen aussehen ... bereit für die Verwendung in Ihren Benutzeroberflächen-Designs.
By
