Verwandeln Sie Ihre Menüleiste in ein Winterwunderland in Illustrator

Was Sie erstellen werden

Folgen Sie diesem Tutorial und lernen Sie, wie Sie eine Website in ein Winterwunderland verwandeln. Sie können die Menüleisten und Schaltflächen von Grund auf neu erstellen oder Sie können diese Techniken anwenden und Ihre eigenen Elemente dekorieren. Am Anfang erstellen Sie eine einfache Menüleiste. Anschließend lernen Sie, wie Sie den Schnee und die Eiszapfen, Schneeflocken, Funkeln und weitere Winterdekorationen hinzufügen. Am Ende experimentieren wir mit mehr Farben und Designs, also fangen wir an!  

1. Starten Sie ein neues Projekt 

Starten Adobe Illustrator und gehe zu Datei> Neu ein leeres Dokument öffnen. Geben Sie einen Namen für Ihre Datei ein, legen Sie die Abmessungen fest und wählen Sie Pixel wie Einheiten und RGB wie Farbmodus. Gehen Sie als Nächstes zu Bearbeiten> Voreinstellungen> Allgemein und setze das Keyboard-Inkrement zu 1 px und während dort zu gehen Einheiten und Anzeigeleistung um sicherzustellen, dass die Einheiten sind wie im folgenden Bild. Normalerweise arbeite ich mit diesen Einstellungen, und sie helfen Ihnen beim Zeichnen. 

2. Erstellen Sie eine Basismenüleiste

Schritt 1

Packe die Abgerundetes Rechteckwerkzeug und zeichnen Sie die erste Form mit den angezeigten Abmessungen. Wählen Sie als Füllfarbe Lila. 

Schritt 2

Gehen Sie mit dem noch ausgewählten Rechteck zum Aussehen Panel und mit dem Lila Füllen Attribut ausgewählt, drücken Sie die Ausgewähltes Element duplizieren Symbol am unteren Rand. Als Ergebnis erhalten Sie eine Sekunde Füllen Attribut oben. Verwenden Sie einen linearen Farbverlauf von Weiß zu Schwarz bei a -90 Grad Winkel, und setze das Mischmodus zu Sanftes Licht

Schritt 3

Während das Rechteck noch ausgewählt ist, duplizieren Sie das Lila Füllen wieder Attribut. Wählen Sie das Neue aus Füllen Attribut von unten, behalten Sie die gleiche Füllfarbe bei, und wechseln Sie dann zu Effekt> Stilisieren> Schlagschatten und wenden Sie diesen Effekt viermal an. Nennen wir diese Form "bar-base".. 

Dies sind die Einstellungen für die Schlagschatten Auswirkungen: 

Schritt 4

Nächster, Kopieren und Einfügen vor (Control-F) Klicken Sie auf die „Balkenbasis“ und entfernen Sie dann alle vorhandenen Erscheinungsbilder, indem Sie die drücken Klares Aussehen Symbol am unteren Rand des Aussehen Panel. Wählen Sie Schwarz als Füllfarbe und gehen Sie zu Objekt> Verlaufsgitter erstellen, wählen 3 Reihen und 6 Spalten und schlagen OK. Als Ergebnis erhalten Sie ein Maschengitter wie in der folgenden Abbildung. 

Schritt 5

Nun schnapp dir die Direktauswahl-Tool (A) und verwenden Sie diese Option, um nur die drei unten angegebenen Maschenpunkte auszuwählen und ihre Füllfarbe von Schwarz in die entsprechende zu ändern. Wenn Sie fertig sind, setzen Sie diese Form auf Mischmodus Weiches Licht. Nennen wir diese Form "Stabgitter".. 

Schritt 6

Nehmen Sie die Rechteckwerkzeug (M) Zeichnen Sie ein Rechteck mit derselben Höhe wie Ihre Menüleiste und positionieren Sie es in der Mitte. Wählen Sie als Füllfarbe hellblau. 

Schritt 7

Wenn das blaue Rechteck noch ausgewählt ist, gehen Sie zu Objekt> Pfad> Ankerpunkte hinzufügen um vier zusätzliche Punkte an den Seiten hinzuzufügen (1). Verwenden Sie die Direktauswahl-Tool (A) Um nur den linken und rechten Punkt aus der Mitte auszuwählen und zu verschieben 10 px nach innen durch Drücken von Links und Pfeiltasten nach rechts auf deiner Tastatur (2). 

Gehen Sie als nächstes zum Aussehen Panel und duplizieren Sie das vorhandene Blau Füllen Attribut. Für das Neue Füllen Wählen Sie oben einen linearen Farbverlauf von Weiß zu Schwarz -90 Grad Winkel und setze das Mischmodus zu Sanftes Licht (3). 

Schritt 8

Schauen Sie sich die rechte Seite der blauen Form genauer an. Nehmen Sie die Stiftwerkzeug (P), Zeichnen Sie einen V-Pfad, der den Ankerpunkten der blauen Form folgt, und geben Sie ihm ein 1 Punkt Weiß Schlaganfall. Kopieren und Einfügen vor (Control-F) diesen Pfad und verschieben Sie die Kopie 1 px nach rechts durch Drücken der Rechte Pfeiltaste Einmal. Wählen Sie eine 1 Punkt schwarz Schlaganfall für den zweiten Weg. Jetzt, Gruppe (Control-G) die zwei Pfade und stellen Sie die Gruppe auf Mischmodus Weiches Licht.  

Vergessen Sie nicht, dasselbe auf der linken Seite der blauen Form zu tun oder einfach die vorhandene Gruppe zu reflektieren.

3. Erstellen Sie den Schnee oben in der Menüleiste

Schritt 1

Nun, da unsere einfache Menüleiste fertig ist, können wir mit dem Schnee und den anderen Dekorationen fortfahren. Um den Schnee hinzuzufügen, empfehle ich die Bleistiftwerkzeug (N) anstatt der Stiftwerkzeug (P) weil es einfacher ist und wir auch diesen freehand / natürlichen Look bekommen, was in Bezug auf Schnee eine gute Sache ist. Doppelklicken Sie auf das Bleistiftwerkzeug (N) die öffnen Einstellungen Fenster und ändern Sie die Einstellungen. Sie können unten die von mir verwendeten sehen, aber Sie können die Einstellung ändern Treue und das Glätte nach Ihren Wünschen.

Vergrößern Sie nach dem Einstellen die rechte Seite Ihrer Menüleiste und zeichnen Sie einen Pfad, der dem unten gezeigten ähnelt. Sie müssen nicht zu präzise sein: Je zufällig, desto besser. 

Schritt 2

Immer noch mit Bleistiftwerkzeug (N), zeichnen Sie einen anderen zufälligen Pfad unter dem ersten und stellen Sie sicher, dass Sie nur einen kleinen Teil der Menüleiste abdecken. Wenn sich die Endpunkte der beiden Pfade nicht überlappen, können Sie das verwenden Direktauswahl-Tool (A) um sie übereinander zu bewegen, wie in der Nahaufnahme gezeigt. 

Als nächstes ist es Zeit, die beiden Pfade zu einem zusammenzuführen. Ziehen Sie eine Auswahl mit Direktauswahl-Tool (A) über den beiden Endpunkten von rechts (vergewissern Sie sich, dass die Menüleiste zuerst gesperrt ist) und drücken Sie Steuerung-J zu Beitreten Sie. Überprüf den Ecke Option und drücken Sie OK. Ziehen Sie danach eine Auswahl über die beiden Endpunkte von links und Beitreten sie auch. Füllen Sie die resultierende Form mit Weiß. 

Schritt 3

Immer noch mit Bleistiftwerkzeug (N), zeichnen Sie einen neuen Pfad unter der weißen Form, aber sehr nahe daran. Die Länge dieses Pfades sollte ungefähr der weißen Form (1) entsprechen. Wechseln Sie an dieser Stelle zur Stiftwerkzeug (P) und schließe die beiden Endpunkte oben, um eine Form zu erhalten (2). Kopieren und Einfügen vor (Control-F) die weiße Form und drücken Sie dann Shift-Control-] um es vor alles zu bringen. Wählen Sie diese neue weiße Kopie zusammen mit der blauen Form aus und drücken Sie Subtrahieren in dem Pfadfinder Panel. Sie erhalten einen zusammengesetzten Pfad (3), aber gehen Sie zu Objekt> Zusammengesetzter Pfad> Freigeben und lösche die kleineren Formen oben (4). 

Schritt 4

Füllen Sie die Form, die Sie im vorherigen Schritt erhalten haben, mit der angegebenen Farbe, und an diesem Punkt ist das erste "Schneestück" fertig.  

Schritt 5

Nehmen Sie die Bleistiftwerkzeug (N) wieder und zeichnen Sie eine kleinere Form am rechten Ende der mit Weiß gefüllten Menüleiste (1). Zeichnen Sie einen weiteren Pfad darunter und vergewissern Sie sich, dass sich der rechte und der linke Endpunkt überlappen (2), und schließen Sie dann den Pfad oben wie oben Beitreten Funktion oder die Stiftwerkzeug (P) (3). Kopieren und Einfügen vor (Control-F) die kleine weiße Form und drücken Shift-Control-] um es vor alles zu bringen. Wählen Sie diese weiße Kopie zusammen mit der blauen Form aus und drücken Sie Subtrahieren in dem Pfadfinder Panel. Füllen Sie die resultierende Form mit der gleichen Farbe (4). Dies ist das zweite "Schneestück".

Schritt 6

Fügen Sie auf der linken Seite des Balkens mit derselben Technik mehr Schnee hinzu. Zeichne zuerst die weiße Form mit Bleistiftwerkzeug (N) (1) und erstellen Sie dann die Form darunter, indem Sie (2) subtrahieren und sie mit derselben hellblauen Farbe füllen (3).. 

Schritt 7

Fügen Sie weitere "Schneestücke" hinzu, einige größer und andere, bis Sie den oberen Rand der Menüleiste vollständig bedeckt haben. Sie können im nächsten Bild das Endergebnis sehen. 

Schritt 8

Verwenden Sie die Bleistiftwerkzeug (N) oder der Stiftwerkzeug (P) Um eine Form wie die unten zu zeichnen, füllen Sie sie mit dem dargestellten linearen Farbverlauf. Daneben können Sie einige kleinere Formen zeichnen, die mit demselben Farbverlauf gefüllt sind, und dann alle Formen und auswählen Gruppe (Control-G) Sie.

Schritt 9

Verwenden Sie die soeben erstellte Gruppe von Formen, um weitere Details zum Schnee hinzuzufügen. Machen Sie weitere Kopien der Gruppe und Skalierung, drehen Sie sie und ordnen Sie sie auf dem Schnee an.

4. Erstellen Sie die Eiszapfen unter der Menüleiste 

Schritt 1

Verwenden Sie die Bleistiftwerkzeug (N) um eine zufällige Form in der rechten unteren Ecke der Menüleiste zu zeichnen, und wählen Sie Weiß als Füllfarbe. Nun schnapp dir die Ankerpunktwerkzeug hinzufügen (+) und fügen Sie einige zusätzliche Punkte am unteren Rand dieser Form hinzu (1). Dann wechseln Sie zu Direktauswahl-Tool (A) und ziehen Sie nur drei dieser Punkte nach unten, um die ersten Eiszapfen zu erstellen (2). Fügen Sie weitere Punkte hinzu Ankerpunktwerkzeug hinzufügen (+) entlang der Länge der Eiszapfen und spiele mit ihren Griffen, um den welligen Look zu erzeugen (3).

Schritt 2

Zeichnen Sie eine neue zufällige Form neben der ersten, und fügen Sie unten mit der Taste weitere Punkte hinzu Ankerpunktwerkzeug hinzufügen (+) (1). Verwenden Sie die Direktauswahl-Tool (A) Zwei dieser Punkte nach unten ziehen, um zwei neue Eiszapfen zu erzeugen (2). Fügen Sie weitere Ankerpunkte entlang der Länge der Eiszapfen hinzu und bewegen Sie ihre Griffe, um den Welleneffekt zu erzeugen (3).. 

Schritt 3

Ich habe eine weitere weiße Form neben der zweiten hinzugefügt, aber Sie können so viele hinzufügen, wie Sie möchten. In diesem Tutorial liegt das Design bei Ihnen.  

Schritt 4

Wählen Sie nun die drei weißen Formen von rechts unten in der Menüleiste aus und Kopieren und Einfügen im Hintergrund (Control-B). Bewegen Sie diese drei Kopien ein wenig nach unten, indem Sie die Taste drücken Pfeiltaste nach unten auf Ihrer Tastatur einmal oder zweimal und wählen Sie als Füllfarbe hellblau. 

Schritt 5

Um mehr Tiefe hinzuzufügen, zeichnen Sie mit Bleistiftwerkzeug (N) oder der Stiftwerkzeug (P) eine dünnere Form über jedem Eiszapfen und füllen Sie sie alle mit dem angezeigten Verlauf. 

Schritt 6

Wenn Sie weitere Details hinzufügen möchten, zeichnen Sie einige kleinere Formen, wenn Sie freien Platz haben, und füllen Sie sie mit der angegebenen Farbe. 

Schritt 7

Die rechte untere Seite der Leiste ist fertig. Sie können jedoch weitere Eiszapfen auf der linken Seite hinzufügen. Diese sind kleiner, so dass sie nicht lange brauchen werden. Verwenden Sie die gleiche Technik wie oben beschrieben. Zeichnen Sie zuerst die weiße Form (1) und dann Kopieren und Einfügen im Hintergrund (Control-B) Bewegen Sie diese Form ein wenig nach unten und ändern Sie die Füllfarbe (2). Verwenden Sie am Ende kleinere Formen, die mit demselben Farbverlauf gefüllt sind, um beliebig viele Details hinzuzufügen. (3). 

Schritt 8

Fügen Sie mit derselben Technik in der linken unteren Ecke der Menüleiste weitere Eiszapfen hinzu. An diesem Punkt sind Sie mit Schnee und Eiszapfen fertig.  

5. Erstellen Sie einen Schneeflocke-Pinsel und wenden Sie ihn an

Schritt 1 

Gehe zu Schneeflocke und lade die von All-Silhouettes erstellten Vektor-Schneeflocken herunter. Öffnen Sie dann die Illustrator-Datei aus dem Archiv und kopieren Sie die blau hervorgehobene Schneeflocke in Ihr Dokument. Wählen Sie Weiß als Füllfarbe und ziehen Sie die Schneeflocke in die Bürsten Panel, um es als ein Neue Streubürste. In dem Streubürsten-Optionen Fenster, stellen Sie die Rotation relativ zum Pfad und lassen Sie den Rest der Einstellungen so wie sie sind. Geben Sie einen Namen für den Pinsel ein und klicken Sie auf OK.

Schritt 2

Nun nimm die Bleistiftwerkzeug (N) wieder und zeichnen Sie einige Pfade über dem Schnee wie im nächsten Bild. Schlaganfall diese wege mit der Schneeflocke-Pinsel zuvor gespeichert und öffnen Sie die Schlaganfalloptionen Fenster aus dem Aussehen Panel. Ändern Sie die Einstellungen wie angezeigt und klicken Sie auf OK. Stellen Sie das ein Schlaganfallgewicht für diese Wege an 0,25 pt, 0,3 pt, 0,35 pt und 0,5 pt um Schneeflocken in verschiedenen Größen zu erhalten.  

6. Verschiedene Winterdekorationen hinzufügen

Schritt 1

Kopieren Sie die blau und grün markierten Schneeflocken aus den Schneeflocken in Ihr Dokument. Dann füllen Sie sie mit Weiß, skalieren Sie sie und ordnen Sie sie auf der linken Seite der Menüleiste an.

Schritt 2

Als nächstes aus dem Symbole Panel öffnen die Symbolbibliotheken-Menü und in der Natur Kategorie finden “Bäume 1”. Ziehen Sie das Symbol in Ihre Zeichenfläche und drücken Sie die Verknüpfung zum Symbol aufheben Symbol am unteren Rand des Symbole Panel, um es zu erweitern. Skalieren und ordnen Sie die Bäume auf dem Schnee und multiplizieren Sie sie, wenn Sie mehr hinzufügen möchten. 

Schritt 3

Schauen Sie sich jetzt die Bäume genauer an. Packe die Bleistiftwerkzeug (N) und zeichnen Sie einige kurze Pfade entlang den Ästen des größeren Baums. Schlaganfall diese wege mit der Holzkohle-dünne Kunstbürste das findest du in Pinselbibliotheken Menü> Künstlerisch> KünstlerischCharcoalPencil. Stellen Sie das ein Schlaganfallgewicht zu 0,5 pt und die Farbe für alle weiß. 

Schritt 4

Wiederholen Sie den Vorgang für die anderen Bäume, reduzieren Sie jedoch die Schlaganfallgewicht umso mehr, da die Bäume kleiner sind. 

Schritt 5

Multiplizieren Sie die verschneiten Bäume, die Sie erstellt haben, und ordnen Sie weitere auf der anderen Seite der Menüleiste an.

Schritt 6

Um das kleine Haus zu erstellen, zeichnen Sie zunächst eine einfache weiße Hausform. Zeichnen Sie für das Dach einen Pfad mit einem 1 Punkt rot Schlaganfall und fügen Sie eine kleine rote Form als Kamin hinzu. Für die Tür und Fenster verwenden Sie die Rechteckwerkzeug (M) und der gezeigte Verlauf. Um den Schnee auf dem Dach zu erzeugen, zeichnen Sie einfach zwei Pfade auf dem Dach und Schlaganfall sie mit der Holzkohle-dünne Kunstbürste wie du früher für die Bäume getan hast. 

Schritt 7

Dann nimm die Ellipsenwerkzeug (L) und zeichnen Sie drei Ellipsen, um den Schneemann zu erstellen. Füllen Sie sie mit dem dargestellten radialen Verlauf und fügen Sie dann kleine schwarze Kreise als Augen und Knöpfe hinzu. Verwenden Sie die Stiftwerkzeug (P) eine Nase und den Schal zu zeichnen, und Sie sind fertig. 

Schritt 8

An dieser Stelle können Sie das kleine Haus und den Schneemann dort anordnen, wo Sie möchten. 

Schritt 9

Es scheint zwingend, viele Funken hinzuzufügen, oder? Wie Sie im Glitter Text Art Effect-Tutorial einen erstellen, wurde bereits erläutert. Multiplizieren Sie den Schein und ordnen Sie so viele an, wie Sie möchten, um Ihr Design zu verbessern. 

7. Erstellen und dekorieren Sie Web-Schaltflächen

Schritt 1

Wenn Sie diesen Punkt erreicht haben, können Sie anstelle einer Leiste eine einfache Schaltfläche erstellen und dekorieren. Zeichnen Sie zunächst ein kleineres abgerundetes Rechteck (1) und erstellen Sie dann das Gitternetz wie am Anfang des Lernprogramms beschrieben (2). Fügen Sie oben "Schneestücke" und unten Eiszapfen (3) hinzu und verwenden Sie die Schneeflocke-Pinsel um mehr Schnee hinzuzufügen (4). Ordnen Sie die von Ihnen erstellten Dekorationen (5) an und fügen Sie zum Schluss ein paar Funken hinzu (6). Alle Techniken bleiben gleich.

Schritt 2

Duplizieren oder multiplizieren Sie die erste Schaltfläche und ordnen Sie die vorhandenen Dekorationen einfach neu an, um weitere Tasten zu erhalten. 

8. Erstellen Sie weitere Menüleisten

Schritt 1

Duplizieren Sie die violette Menüleiste mit dem Schnee oben, den Schneeflocken und den Eiszapfen, jedoch ohne die anderen Dekorationen. Wählen Sie „Bar-Basis“ und ersetzen Sie Lila durch den angezeigten Grünton. Behalten Sie die restlichen Einstellungen bei. 

Schritt 2

Wählen Sie dann die Form aus der Mitte aus und ersetzen Sie das hellblaue durch hellgrün. Ordnen Sie alle Dekorationen anders an und Sie erhalten eine neue Menüleiste. 

Schritt 3

Um die graue Menüleiste zu erstellen, duplizieren Sie die violette Leiste erneut. Wählen Sie „Bar-Basis“ und ersetzen Sie Lila mit dem angezeigten Grauton. Danach wählen Sie die Form aus der Mitte aus und ersetzen diesmal das hellblaue durch pink. Der Rest der Einstellungen bleibt gleich. Ordnen Sie schließlich alle Dekorationen nach Ihren Wünschen. 

Dein Winterwunderland ist fertig!

Diese Menüleisten und Schaltflächen sind ziemlich einfach und helfen bei der Demonstration. Sie können jedoch auch andere Website-Elemente verwenden, um diesen Winterwunderland-Look zu kreieren. Sie können bei Null anfangen oder nur ein paar Elemente verwenden, um Ihre eigenen Menüs und Schaltflächen zu dekorieren. Es ist absolut zwingend, viel Spaß dabei zu haben, und wenn Sie Ihre Winterwunderland-Kreation teilen möchten, würde ich es gerne sehen.