Transform nettstedets Menylinjer Into en Winter Wonderland i Adobe Illustrator
Hva du skal lage

Følg denne opplæringen og lære hvordan du kan forvandle en nettside til en winter. Du kan opprette menylinjer og knapper fra scratch, eller du cantake disse teknikkene og dekorer dine egne elementer. I begynnelsen willcreate du en grunnleggende menylinjen, og da vil du lære hvordan du legger snøen og theicicles, snøflak, sparkles og mer vinter-tema dekorasjoner. På slutten, vil vi eksperimentere med flere farger og design, så la oss komme i gang!

1. Starter et nytt prosjekt

Start Adobe Illustrator og gå til Fil > Ny for å åpne en blank document.Type et navn på filen og sette opp dimensjonene, og velg deretter piksler som Unitsand RGB som fargemodus. Deretter går du til Edit > Preferanser > Generelle og setthe Tastatur Økning til 1 px og mens det, gå til Units & DisplayPerformance å sørge for at enhetene er som i følgende bilde. Jeg pleier å jobbe withthese innstillinger, og de vil hjelpe deg gjennom hele tegneprosessen.

2. Lag en enkel meny Bar

Trinn 1

Grab Avrundet rektangel Tool og tegne den første form med thedimensions vist. Velg lilla som fyllfargen.

Trinn 2

Med rektangelet fortsatt er valgt, gå til Utseende panel og med den lilla Fill attributtet valgt, trykker du på Duplicate Selected Itemicon nederst. Som et resultat vil du få en ny Fill attributt ovenfor. Bruke en hvit til svart lineær gradient på en -90 grader vinkel, og sette BlendingMode til Soft Light.

Trinn 3

Med rektangelet valgt, duplisere lilla Fill attributeagain. Velg den nye Fyll attributtet fra bunnen, beholde samme fyllfarge, og deretter gå til Effect > Stilisere > Drop Shadow og bruker denne effekten fourtimes. La oss kalle denne formen "bar-base".

Dette er innstillingene for Drop Shadow effekt:

Trinn 4

Neste, Kopier og lim i Front (Ctrl-F) "bar-base" og deretter fjerne allexisting opptredener ved å trykke på Clear Utseende ikonet nederst theAppearance panel. Velg svart som fyllfarge, og deretter gå til Objekt > CreateGradient Mesh, velg 3 rader og 6 kolonner og trykke OK. Som et resultat vil du geta mesh grid som i følgende bilde.

Trinn 5

Nå, ta tak i Direct Selection Tool (A) og bruke den til å velge bare thethree mesh punkter angitt nedenfor og endre fyllfarge fra svart til thecorresponding en. Når du er ferdig, setter du denne formen til Blending Mode Softlight. La oss kalle denne formen "bar-mesh".

Trinn 6

Ta rektangel Tool (M) og tegne et rektangel med samme heightas menylinjen, og plasser den i midten. Velg lys blå som fillcolor.

Trinn 7

Med den blå firkant fortsatt er valgt, gå til Objekt > Sti > AddAnchor Points for å legge til fire ekstra poeng på sidene (1). Bruk DirectSelection Tool (A) for å velge bare den venstre og høyre poeng fra midten andmove dem 10 px innover ved å trykke på venstre og høyre piltaster onyour tastaturet (2).

Neste, gå til Utseende panel og duplisere eksisterende blå Fillattribute. For den nye Fyll på toppen, velg et hvitt til svart lineær gradientat en -90 grader vinkel og sette Blending Mode til Soft Light (3).

Trinn 8

Ta en nærmere titt på høyre side av den blå formen. Ta PenTool (P), tegne en V-bane følgende ankerpunktene i den blå form, og gi den en 1 pt hvit strek. Kopier og lim inn Front (Ctrl-F) denne veien, og thenmove kopien 1 px til høyre ved å trykke på høyre piltast én gang. Velg a1 pt svart strek for den andre veien. Nå Group (Ctrl-G) de to banene andset gruppen Blending Mode Soft Light.

Ikke glem å gjøre det samme på venstre side av den blå formen orsimply reflektere eksisterende gruppe.

3. Opprett snø på toppen av menylinjen

Trinn 1

Nå som vår enkle menylinjen er klar, kan vi fortsette med snø og theother dekorasjoner. Å legge snøen, anbefaler jeg å bruke Pencil Tool (N) insteadof Pen Tool (P) fordi det er enklere, og vi vil også få den på frihånd /naturallook, som i form av snø er en god ting. Dobbeltklikk på Pencil Tool (N) for å åpne vinduet Innstillinger og endre innstillingene. Du kan se belowthe de som jeg har brukt, men gjerne justere Fidelity og Smoothnessto din smak.

Når det er satt, zoome inn på høyre side av menylinjen og trekke en pathsimilar til én under. Du trenger ikke å være for presis: jo mer tilfeldig thebetter.

Trinn 2

Likevel bruker Pencil Tool (N), trekke et tilfeldig bane under Firstone og sørg for at du dekker bare litt av menylinjen. Dersom endepunktene for de to banene ikke overlapper, kan du bruke Direct Selection Tool (A) for å flytte dem oppå hverandre som vist i nærbilde.

Deretter er det følg fusjonere de to banene til én. Dra et utvalg med DirectSelection Tool (A) i løpet av de to endepunktene fra høyre (bare sørg for at tolock menylinjen først), og trykk Ctrl-J til Bli med dem. Sjekk Corneroption og trykke OK. Etter det drar et utvalg over de to endepunktene Bergem igjen og bli med dem også. Fyll den resulterende form med hvitt.

Trinn 3

Likevel bruker Pencil Tool (N), tegne en ny bane under den hvite shapebut svært nær den. Lengden av denne banen bør være omtrent den samme som thewhite form (1). På dette punktet, bytte til Pen Tool (P) og lukke twoend poeng på toppen for å få en form (2). Kopier og lim inn Front (Ctrl-F) den hvite form, og deretter trykke Shift-kontroll-] for å bringe den foran ofeverything. Velg denne nye hvite kopien sammen med den blå formen og pressSubtract i Pathfinder-panelet. Du vil få en sammensatt bane (3), men gå til Objekt > Forbindelse Sti > Slipp og slett mindre figurer på toppen (4).

Trinn 4

Fyll formen som du har fått i forrige trinn med thecolor indikeres, og på dette punktet den første "del" av snø er klar.

Trinn 5

Ta Pencil Tool (N) igjen og ta ut en mindre form på høyre endof menylinjen fylt med hvit (1). Tegn en bane under den og gjøre surethat høyre og venstre endepunktene er overlappende (2), og deretter lukke banen IDen toppen som du gjorde før, ved hjelp av Delta-funksjonen eller Pen Tool (P) (3). Kopi og Lim i Front (Ctrl-F) den lille hvite formen og trykk Shift-kontroll-] for å bringe den foran alt. Velg denne hvite kopien sammen med blueshape og trykk Trekk i Pathfinder-panelet. Fyll den resulterende formen withthe samme farge (4). Dette er den andre "del" av snø.

Trinn 6

La oss legge mer snø på venstre side av baren med sametechnique. Først trekke den hvite formen med blyantverktøyet (N) (1), og deretter createthe forme under den ved å trekke (2), og fyll den med det samme lyset bluecolor (3).

Trinn 7

Fortsett å legge til flere "biter" av snø, noen større, noen mindre, untilyou helt dekker toppen av menylinjen. Du kan se i neste bilde thefinal resultat.

Trinn 8

Bruk Pencil Tool (N) eller Pen Tool (P) for å tegne en figur som den nedenfor, og fyll den med lineær gradient vist. Du kan også tegne noen smallershapes siden av det som er fylt med samme gradient, og deretter velge alle theshapes og Group (Ctrl-G) dem.

Trinn 9

Bruk gruppe figurer som du nettopp har opprettet for å legge til mer detailson snøen. Lage flere kopier av gruppen og skalere, rotere og ordne dem ontop av snøen.

4. Lag Icicles under menylinjen

Trinn 1

Bruk Pencil Tool (N) for å trekke en tilfeldig form i bunnen rightcorner i menylinjen, og velg hvit som fyllfarge. Nå, ta tak i AddAnchor Point Tool (+) og bruke den til å legge til noen ekstra poeng i bunnen ofthis form (1). Deretter bytte til Direct Selection Tool (A) og dra bare threeof disse peker nedover for å lage de første istapper (2). Legg til mer pointsusing Add Anchor Point Tool (+) langs lengden av istapper, og playwith sine håndtakene for å skape den bølgete utseendet (3).

Trinn 2

Tegn en ny tilfeldig form ved siden av den første, og deretter legge til flere punkter IDen bunn med Legg Anchor Point Tool (+) (1). Bruk Direct SelectionTool (A) for å trekke to av disse peker nedover for å skape to newicicles (2). Legge til flere ankerpunkter langs lengden av istapper og flytter theirhandles å skape den bølgete utseende (3).

Trinn 3

jeg lagt en mer hvit form ved siden av den andre, men du kan legge asmany som du vil. I denne opplæringen designen er opp til deg.

Trinn 4

Nå velger de tre hvite figurer fra høyre side av themenu bar, og Kopier og lim inn Back (Ctrl-B). Flytte disse tre eksemplarer ned litt ved å trykke pil ned på tastaturet en gang eller to, og velg lyseblå som fyllfargen.

Trinn 5

Hvis du vil legge mer dybde, tegne med blyantverktøyet (N) eller Pen Tool (P) en thinnershape på toppen av hver istapp, og fylle dem med gradient vist.

Trinn 6

Hvis du vil legge til flere detaljer, tegne noen mindre figurer hvor du har ledig plass, og fylle dem med fargen indikert.

Trinn 7

Den nederste høyre side av baren er klar, men du kan legge til mer icicleson venstre side. Disse er mindre slik at de ikke vil ta lang tid å lage. Usethe samme teknikk som beskrevet ovenfor. Først trekker den hvite formen (1), og deretter Kopi og lim inn Back (Ctrl-B) denne formen, flytte den litt ned og endre thefill farge (2). På slutten, bruker mindre former fylt med det samme gradient toadd så mange detaljer som du vil (3).

Trinn 8

Ved hjelp av den samme teknikken, legge til flere istapper på nedre venstre hjørne ofthe menylinjen og på dette punktet du er ferdig med snø og istapper.

5. Lag og Påfør en Snowflake Scatter Brush

Trinn 1

Gå til Snowflake og downloadthe vektor snøflak satt skapt av All-Silhouettes. Deretter åpner theIllustrator fil fra arkivet og kopiere snøfnugg uthevet med blueinto dokumentet. Velg hvit som fyllfarge, og dra snøfnugg intothe Børster panelet for å lagre det som en ny Scatter Brush. I Scatter BrushOptions vinduet, setter rotasjon i forhold til bane og la resten av Innstillinger-som de er. Skriv inn et navn for børsten og trykke OK.

Trinn 2

Nå, ta Pencil Tool (N) igjen og trekke noen stier ovenfor snowas i neste bilde. Stroke disse baner med Snowflake Scatter Brush savedearlier og åpne Stroke Options vinduet fra Utseende panel. Changethe innstillinger som vist og trykk OK. Sett Stroke vekt for disse stiene på 0.25pt, 0,3 pt, 0,35 pt og 0,5 pt for å få snøflak i ulike størrelser.

6. Legg Ulike Vinter Dekorasjoner

Trinn 1

Kopier snøflak uthevet med blå og grønne fra snowflakesset inn i dokumentet. Deretter fylle dem med hvit, skalere dem, og arrangere dem på theleft side av menylinjen.

Trinn 2

Deretter fra Symboler panel åpne Symbol Biblioteker Meny og i theNature kategorien finner "trær 1". Dra symbolet til din artboard og pressthe Break Link til Symbol ikonet nederst på Symboler panel for toexpand det. Skala og ordne trærne på toppen av snøen og multiplisere dem ifyou ønsker å legge til flere.

Trinn 3

Nå, ta en nærmere titt på trærne. Grab Pencil Tool (N) og drawsome korte baner følgende grener av større treet. Stroke disse pathswith den Charcoal-Thin Art Brush som du kan finne i Brush biblioteker meny > Artistic > Artistic_ChalkCharcoalPencil. Sett Stroke vekten til 0,5 pt andthe farge til hvit for dem alle.

Trinn 4

Gjenta den samme prosessen for de andre trærne, men redusere Stroke weighteven mer siden trærne er mindre.

Trinn 5

Multipliser snødekte trær som du har opprettet og arrangere flere av themon den andre siden av menylinjen.

Trinn 6

For å skape det lille huset, starte med å tegne et enkelt hus form filledwith hvitt. For taket, tegne en bane med en pt rød strek og legge en smallred form som skorsteinen. For døren og vinduene bruke rektangel Tool (M) andthe gradient vist. Å skape snøen på taket, bare trekke to baner ontop av taket og Stroke dem med Charcoal-Thin Art Brush som du didearlier for bare trær.

Trinn 7

Neste, ta Ellipse Tool (L) og tegne tre ellipser å skape thesnowman. Fyll dem med radial gradient vist, og deretter legge små svarte circlesas øynene og knappene. Bruk Pen Tool (P) til å tegne en nese og skjerf, og du er ferdig.

Trinn 8

På dette punktet kan du ordne det lille huset og snømannen hvor duvilha.

Step 9

Det virker obligatorisk å legge mye av gnistrer, ikke sant? Jeg har alreadyexplained hvordan du oppretter en i Glitter Text Art Effect opplæringen. Multipliser sparkleand arrangere så mange som du ønsker å forbedre din design.

7. Lag og Pynt Web Knapper

Trinn 1

Hvis du har klart å komme til dette punktet, vil du være i stand til å skape anddecorate en enkel knapp i stedet for en bar. Start med å tegne en mindre roundedrectangle (1), og deretter lage rutenettet mesh som forklart i begynnelsen av thetutorial (2). Legg "biter" av snø på toppen og istapper nederst (3) og bruke Snowflake Scatter Brush å legge mer snø (4). Ordne thedecorations som du har laget (5) og til slutt legge til noen glitrer (6). Allthe teknikker forblir den samme.

Trinn 2

Dupliser eller multiplisere den første knappen og bare omorganisere existingdecorations å skaffe flere knapper.

8. Opprett Flere Menylinjer

Trinn 1

Duplicate den lilla menylinjen med snø på toppen, den snowflakesand istappene, men uten at de andre dekorasjoner. Velg "bar-base" andreplace lilla med den grønnfargen er angitt. Hold resten av settingsas de er.

Trinn 2

Deretter velger form fra midten og erstatte den lyseblå withlight grønt. Ordne alle dekorasjoner på en annen måte, og du vil få nytt menylinjen.

Trinn 3

For å skape den grå menylinjen, duplisere den lilla bar igjen. Velg "bar-base" og erstatte lilla med gråtone indikert. Etter det, velge formen fra midten og erstatte den lyseblå med rosa thistime. Resten av innstillingene forblir den samme. Til slutt, ordne alle thedecorations som du vil.

Din Winter Wonderland er klar!

Disse menylinjer og knapper arepretty enkel og de hjelper med demonstrasjonen, men gjerne bruke anyother nettstedet elementer for å skape denne vinterland utseende. Du kan startfrom scratch eller du kan bruke bare noen få elementer til å dekorere dine egne menyer andbuttons. Det er helt obligatorisk å ha mye moro mens du gjør det, og ifyou ønsker å dele dine vinter-wonderland-kreasjon, jeg ville elske å se det. Anmeldelser