Förvandla din menyraden till ett vinterunderland i Illustrator

Vad du ska skapa

Följ denna handledning och lär dig hur man omvandlar en webbplats till ett vinterunderland. Du kan skapa menyraden och knapparna från början, eller du kan ta dessa tekniker och dekorera dina egna saker. I början kommer du att skapa en grundläggande menyraden, och sedan lär du dig hur man lägger till snö och istappar, snöflingor, gnistrar och fler vinterdynamiska dekorationer. I slutet ska vi experimentera med fler färger och mönster, så låt oss börja!  

1. Starta ett nytt projekt 

Lansera Adobe Illustrator och gå till Fil> Ny för att öppna ett tomt dokument. Skriv ett namn på din fil och ställ in dimensionerna och välj sedan pixlar som Enheter och RGB som Färg läge. Därefter, gå till Redigera> Inställningar> Allmänt och ställa in Tangentbordsökning till 1 px och samtidigt, gå till Enheter och visningsprestanda för att se till att Enheter är som i följande bild. Jag brukar arbeta med dessa inställningar, och de hjälper dig genom hela ritningsprocessen. 

2. Skapa en grundmenyrad

Steg 1

Ta tag i Rundad rektangelverktyg och rita den första formen med de visade dimensionerna. Välj lila som fyllfärgen. 

Steg 2

Med rektangeln fortfarande vald, gå till Utseende panel och med lila Fylla attributet valt, tryck på Kopiera valda objekt ikonen längst ner. Som ett resultat får du en sekund Fylla attribut ovan. Använd en vit till svart linjär gradient vid a -90 graders vinkel, och ställa in Blandningsläge till Mjukt ljus

Steg 3

Med rektangeln som fortfarande valts, duplicera den lila Fylla attribut igen. Välj det nya Fylla attribut från botten, behåll samma fyllfärg och gå sedan till Effekt> Stylize> Drop Shadow och tillämpa denna effekt fyra gånger. Låt oss namnge denna form "bar-base". 

Det här är inställningarna för Drop Shadow effekter: 

Steg 4

Nästa, Kopia och Klistra in på framsidan (Control-F) "barbasen" och ta bort alla befintliga skenor genom att trycka på Tydligt utseende ikonen längst ner på sidan Utseende panel. Välj svart som fyllfärgen och gå sedan till Objekt> Skapa Gradient Mesh, Välj 3 rader och 6 kolumner och slå ok. Som ett resultat kommer du att få ett nätnät som i följande bild. 

Steg 5

Grip nu Direktmarkeringsverktyg (A) och använd den för att välja endast de tre maskpunkterna som anges nedan och ändra fyllfärgen från svart till motsvarande. När du är klar, sätt denna form till Blendingläge Mjukt ljus. Låt oss namnge denna form "bar-mesh". 

Steg 6

Ta Rektangelverktyg (M) och rita en rektangel med samma höjd som menyraden och placera den i mitten. Välj ljusblå som fyllfärgen. 

Steg 7

Med den blå rektangeln som fortfarande valts, gå till Objekt> Sti> Lägg till Anchor Points för att lägga till fyra extra poäng på sidorna (1). Använd Direktmarkeringsverktyg (A) för att välja endast vänster och höger punkter från mitten och flytta dem 10 px inåt genom att trycka på Vänster och Höger piltangenter på ditt tangentbord (2). 

Gå sedan till Utseende panelen och duplicera den befintliga blåen Fylla attribut. För den nya Fylla högst upp, välj en vit till svart linjär gradient vid a -90 graders vinkel och ställa in Blandningsläge till Mjukt ljus (3). 

Steg 8

Ta en närmare titt på den högra sidan av den blå formen. Ta Penverktyg (P), rita en V-väg efter ankarpunkterna i den blå formen och ge den en 1 pt vit Stroke. Kopia och Klistra in på framsidan (Control-F) den här sökvägen, och flytta sedan kopian 1 px till höger genom att trycka på Högerpil nyckel en gång. Välj en 1 pt svart Stroke för den andra vägen. Nu, Grupp (Control-G) de två vägarna och sätta gruppen till Blendingläge Mjukt ljus.  

Glöm inte att göra samma sak på vänster sida av den blå formen eller helt enkelt reflektera den befintliga gruppen.

3. Skapa snön ovanpå menyraden

Steg 1

Nu när vår enkla menyfält är klar kan vi fortsätta med snön och de andra dekorationerna. För att lägga till snön rekommenderar jag att du använder Penna verktyg (N) istället för Penverktyg (P) eftersom det är lättare och vi kommer också att få det fria hand / naturliga utseende, vilket i form av snö är en bra sak. Dubbelklicka på Penna verktyg (N) att öppna Inställningar fönster och ändra inställningarna. Du kan se nedan de som jag har använt, men gärna justera Trohet och den jämnhet till din smak.

När du har ställt in, zooma in på höger sida av menyraden och dra en väg som liknar den nedan. Du behöver inte vara för precis: ju mer slumpmässigare desto bättre. 

Steg 2

Fortfarande använder Penna verktyg (N), rita en annan slumpmässig sökväg under den första och se till att du bara täcker lite av menyraden. Om slutpunkterna för de två vägarna inte överlappar varandra kan du använda Direktmarkeringsverktyg (A) för att flytta dem ovanpå varandra, som visas i närbilden. 

Därefter är det dags att slå samman de två vägarna i en. Dra ett urval med Direktmarkeringsverktyg (A) över de två ändpunkterna från höger (bara se till att låsa menyraden först) och tryck på Kontroll-J till Ansluta sig dem. Kolla Hörn alternativ och träff ok. Därefter dra ett val över de två ändpunkterna från vänster och Ansluta sig dem också. Fyll den resulterande formen med vit. 

Steg 3

Fortfarande använder Penna verktyg (N), rita en ny väg under den vita formen men mycket nära den. Längden på denna väg ska vara ungefär densamma som den vita formen (1). Vid denna punkt byta till Penverktyg (P) och stäng de två ändpunkterna på toppen för att få en form (2). Kopia och Klistra in på framsidan (Control-F) den vita formen och tryck sedan på Skift-Control-] att föra det framför allt. Välj den här nya vita kopian tillsammans med den blå formen och tryck på Subtrahera i Stigfinnare panel. Du kommer att få en sammansatt väg (3) men gå till Objekt> Sammansatt sökväg> Släpp och radera de mindre formerna längst upp (4). 

Steg 4

Fyll i den form som du har erhållit i föregående steg med den angivna färgen, och vid den här tiden är den första "snittdelen" klar.  

Steg 5

Ta Penna verktyg (N) igen och dra en mindre form i den högra änden av menyraden fylld med vit (1). Rita en annan väg under den och se till att de högra och vänstra ändpunkterna överlappar varandra (2), och stäng sedan vägen längst upp som du gjorde tidigare med hjälp av Ansluta sig funktion eller Penverktyg (P) (3). Kopia och Klistra in på framsidan (Control-F) den lilla vita formen och tryck Skift-Control-] att föra det framför allt. Välj den här vita kopian tillsammans med den blå formen och tryck på Subtrahera i Stigfinnare panel. Fyll den resulterande formen med samma färg (4). Det här är det andra "stycket" av snö.

Steg 6

Låt oss lägga till mer snö på vänster sida av fältet med samma teknik. Dra först den vita formen med Penna verktyg (N) (1) och sedan skapa formen under den genom att subtrahera (2) och fyll i den med samma ljusblå färg (3). 

Steg 7

Fortsätt att lägga till fler "bitar" av snö, lite större, lite mindre, tills du helt täcker överst på menyraden. Du kan se det slutliga resultatet i nästa bild. 

Steg 8

Använd Penna verktyg (N) eller den Penverktyg (P) att rita en form som den nedan och fylla den med den linjära gradienten som visas. Du kan också rita några mindre former bredvid det som fylls med samma gradient, och välj sedan alla former och Grupp (Control-G) dem.

Steg 9

Använd den grupp av former som du just har skapat för att lägga till mer information på snön. Gör fler kopior av gruppen och skala, rotera och ordna dem på toppen av snön.

4. Skapa Icicles under menyraden 

Steg 1

Använd Penna verktyg (N) att dra en slumpmässig form i det nedre högra hörnet av menyraden och välj vit som fyllfärgen. Grip nu Lägg till Anchor Point Tool (+) och använd den för att lägga till några extra poäng längst ner i denna form (1). Växla sedan till Direktmarkeringsverktyg (A) och dra bara tre av dessa punkter nedåt för att skapa de första isbitarna (2). Lägg till fler poäng med hjälp av Lägg till Anchor Point Tool (+) längs islängderna och leka med sina handtag för att skapa det vågiga utseendet (3).

Steg 2

Rita en ny slumpmässig form bredvid den första och lägg sedan till fler poäng längst ner med Lägg till Anchor Point Tool (+) (1). Använd Direktmarkeringsverktyg (A) att dra två av dessa punkter nedåt för att skapa två nya ispinnar (2). Lägg till fler ankarpunkter längs isärlängderna och rör deras handtag för att skapa det vågiga utseendet (3). 

Steg 3

Jag lade till en annan vit form bredvid den andra, men du kan lägga till så många som du vill. I denna handledning är designen upp till dig.  

Steg 4

Välj nu de tre vita formerna längst ner till höger i menyraden och Kopia och Klistra in bakåt (Control-B). Flytta dessa tre kopiorna lite genom att trycka på Pil nedåt på tangentbordet en eller två gånger och välj ljusblå som fyllfärgen. 

Steg 5

För att lägga till mer djup, rita med Penna verktyg (N) eller den Penverktyg (P) en tunnare form ovanpå varje is och fyll dem med den visade gradienten. 

Steg 6

För att lägga till fler detaljer, rita några mindre former där du har ledig plats och fyll i dem med den angivna färgen. 

Steg 7

Den nedre högra sidan av baren är klar, men du kan lägga till flera ispärlor på vänster sida. Dessa är mindre så de tar inte lång tid att göra. Använd samma teknik som beskrivits ovan. Först rita den vita formen (1) och sedan Kopia och Klistra in bakåt (Control-B) Denna form, flytta den lite ner och ändra fyllfärgen (2). I slutet använder du mindre former fyllda med samma gradient för att lägga till så många detaljer som du vill (3). 

Steg 8

Med samma teknik lägger du till fler ispärlor i nedre vänstra hörnet av menyraden och vid den här tiden är du klar med snön och isen.  

5. Skapa och applicera en Snowflake Scatter Brush

Steg 1 

Gå till Snowflake och ladda ner vektorns snöflingor som skapats av All-Silhouettes. Öppna sedan Illustrator-filen från arkivet och kopiera snöflingan markerad med blå in i ditt dokument. Välj vit som fyllfärgen och dra snöflingan in i borstar panelen för att spara den som en Ny scatterborste. I Spridborstalternativ fönster, ställ in Rotation i förhållande till sökväg och lämna resten av inställningarna som de är. Skriv ett namn på penseln och träffa ok.

Steg 2

Ta nu Penna verktyg (N) igen och dra några vägar ovanför snön som i nästa bild. Stroke dessa vägar med Snowflake Scatter Brush sparade tidigare och öppna Stroke Options fönster från Utseende panel. Ändra inställningarna som visas och tryck på ok. Ställ in Slagvikt för dessa vägar på 0,25 pt, 0,3 pt, 0,35 pt och 0,5 pt för att få snöflingor av olika storlekar.  

6. Lägg till olika vinterdekorationer

Steg 1

Kopiera snöflingorna markerade med blått och grönt från snöflingorna i ditt dokument. Fyll sedan dem med vit, skala dem och ordna dem på vänster sida av menyraden.

Steg 2

Därefter från symboler panelen öppnar Menyn Symbolbibliotek och i Natur kategori hitta "Träd 1”. Dra symbolen i din tavla och tryck på Bryt länk till symbol ikonen längst ner på sidan symboler panel för att expandera den. Skala och ordna träden ovanpå snön och multiplicera dem om du vill lägga till mer. 

Steg 3

Kolla nu på träden. Ta tag i Penna verktyg (N) och rita några korta vägar efter grenarna på det större trädet. Stroke dessa vägar med Charcoal-Thin Art Brush som du kan hitta i Penselbibliotek Meny> Konstnärligt> Artistic_ChalkCharcoalPencil. Ställ in Slagvikt till 0,5 pt och färgen till vit för dem alla. 

Steg 4

Upprepa samma process för de andra träden men minska Slagvikt ännu mer eftersom träden är mindre. 

Steg 5

Multiplicera de snötäckta träd som du har skapat och ordna fler av dem på andra sidan menyn.

Steg 6

För att skapa det lilla huset, börja med att skriva en enkel husform fylld med vit. För taket, rit en väg med a 1 pt röd Stroke och lägg till en liten röd form som skorstenen. För dörren och windows använder du Rektangelverktyg (M) och den visade gradienten. För att skapa snön på taket, rita bara två vägar ovanpå taket och Stroke dem med Charcoal-Thin Art Brush som du gjorde tidigare för träden. 

Steg 7

Ta sedan nästa Ellipsverktyg (L) och rita tre ellipser för att skapa snögubben. Fyll dem med den radiella gradienten som visas, och lägg sedan till små svarta cirklar som ögon och knapparna. Använd Penverktyg (P) att dra en näsa och halsduken, och du är klar. 

Steg 8

Vid denna tidpunkt kan du ordna det lilla huset och snögubben där du vill. 

Steg 9

Det verkar vara obligatoriskt att lägga till många gnistrar, eller hur? Jag har redan förklarat hur man skapar en i Glitter Text Art Effect-handledningen. Multiplicera gnistan och ordna så många som du vill förbättra din design. 

7. Skapa och dekorera webbknappar

Steg 1

Om du lyckats komma till den här punkten kommer du att kunna skapa och dekorera en enkel knapp istället för en stapel. Börja med att rita en mindre rundad rektangel (1) och skapa sedan nätnätet enligt förklaringen i början av handledningen (2). Lägg till "bitar" av snö på toppen och istappar längst ner (3) och använd Snowflake Scatter Brush att lägga till mer snö (4). Ordna dekorationerna som du har skapat (5) och till sist lägga till några gnistrar (6). Alla tekniker förblir desamma.

Steg 2

Duplicera eller multiplicera den första knappen och helt enkelt omorganisera befintliga dekorationer för att få fler knappar. 

8. Skapa fler menyrader

Steg 1

Duplicera den lilla menybaren med snön på toppen, snöflingorna och isen, men utan de andra dekorationerna. Välj "bar-base" och ersätt lila med skuggan av grön som anges. Håll resten av inställningarna som de är. 

Steg 2

Välj sedan formen från mitten och byt ljusblå med ljusgrön. Ordna alla dekorationer på ett annat sätt och du får en ny menyrad. 

Steg 3

För att skapa den gråaktiga menyraden duplicerar du den lilla streck igen. Välj "bar-base" och ersätt lila med den grå färg som anges. Därefter väljer du formen från mitten och ersätter den ljusblå med rosa den här gången. Resten av inställningarna förblir desamma. Slutligen ordna alla dekorationer som du vill. 

Ditt vinterunderland är klart!

Dessa menyrader och knappar är ganska grundläggande och de hjälper till med demonstrationen, men gärna använda alla andra webbsidor för att skapa detta vinterlandskap. Du kan börja från början eller du kan bara använda några saker för att dekorera dina egna menyer och knappar. Det är absolut obligatoriskt att ha mycket roligt när du gör det, och om du vill dela din vinter-wonderland-skapelse, skulle jag gärna se det.