Share
I denne opplæringen vil du opprette et grønt nettsted med økologisk stil med Adobe Illustrator. Denne opplæringen viser hvordan du lager illustrative vektorgrafik og bruker dette til webdesignoppsett. La oss komme i gang!
For en stund siden skrev jeg en opplæring med tittelen Bruk Adobe Illustrator til å lage en ren nettside layout som ble møtt med mye fanfare med like bemerkelsesverdig motstand. Den opplæringen var rettet mot folk som bare begynte i Illustrator. Det til slutt gjorde det til forsiden av Digg også.
For å sette ting på høyre fot, la meg ta et øyeblikk for å påpeke det åpenbare ... dette webdesignet kan også opprettes i Photoshop! Men hensikten med denne avanserte opplæringen er å forklare hvordan du bruker Adobe Illustrator til å designe et nettsted. La meg også skille mellom design fra frontend koding. Mens jeg skal vise deg hvordan du designer nettstedet i Illustrator, kan dette bli tatt videre (med bruk av standardbasert XTHML / CSS) for å gjøre designfunksjonen.
Uten videre ado, her er hvordan du lager et grønt landskapswebside i Adobe Illustrator.
Du kan finne kildefilene i katalogen merket kilde som kom inn i filene du lastet ned. Du kan ønske å se gjennom dem kort før vi begynner.
Lag et nytt dokument med en bredde på 1160px og en høyde du velger. Still fargemodus til RGB. Du kan forlate Raster Effects på High 300ppi siden vårt design ikke bruker mye av rastereffekter.
Jeg foretrekker å jobbe med en nettleser i bakgrunnen, så jeg kan få en bedre ide om hvordan den endelige utformingen vil se ut når den er fullført.
Forholdet til nettleserskjermene er ikke det samme som 1160px-dokumentet, slik at du ganske enkelt bruker Direct Selection Tool (A) og klikker og drar over området uthevet i rødt. Deretter klikker du på et av punktene du valgte, ved å bruke Direkte utvalg-verktøyet igjen (uten å velge bort noe), og dra alt over til den svarte linjen til høyre, hvilket er dokumentstørrelsen din.
Et nettsted med en bredde på 960px eller mindre vil fungere godt for de fleste besøkende. Dokumentet vårt er satt opp til 1160px bredde for å kompensere for personer med større skjermer som kan strekke vinduet åpent bredere. Plassen mellom de blå vertikale støttelinjene måler 960px og representerer området, alt ditt hovedinnhold bør forbli mellom. Alt utenfor disse veiledningene har potensial til å være ute av vis for noen besøkende.
Dette trinnet er viktig for å skape et lesbart nettsted. Pass på at nettstedet ditt ser ut når du ser på 100% zoom. Du trenger ikke å jobbe med 100% zoom, men du må være oppmerksom på hvordan nettstedet ser ut når det blir sett på faktisk størrelse (100%). For å endre zoom kan du klikke nederst til venstre i dokumentvinduet.
Det første trinnet er å skape de bølgende åsene. Tegn en ellipse ved hjelp av Ellipse Tool (L).
Dupliserer Ellipse og overlapper dem.
Slå sammen de to figurene i Pathfinder ved hjelp av alternativet Subtract from Shape Area. Dupliser formen, gjør den litt mindre og flytt den til høyre og ned som vist nedenfor.
Velg begge figurene og gå til Objekt> Blend> Blandingsalternativer. Velg Spesifikke trinn fra rullegardinmenyen, skriv inn en verdi og klikk OK.
Gå til Objekt> Blend> Lag. Du kan justere blandingen hvis du ikke er fornøyd med resultatene ved å gå til Objekt> Blend> Blandingsalternativer ...
Gå til Objekt> Konvolutt forvreng> Lag med warp ... Velg Arc fra rullegardinmenyen og endre glidebryterne for å skape en behagelig arc. Klikk på OK når du er ferdig.
For å kunne manipulere figurene ytterligere må vi utvide dem ved å gå til Objekt> Utvid. Klikk på OK.
Nå som formen din er utvidet, kan du få den til å se ut som en bakke. Bruk pennverktøyet (P) til å tegne en annen form som følger konturene til stripene.
Først bruk Pathfinder til å trimme av områdene av åsene som er ekstra. Lag begge formene på hverandre og gi dem en frodig gradient.
Legg bakken til litt overlapping av den blå guiden. Dette vil tyde på at åsene fortsetter lenger til venstre når nettsiden blir sett på en gjennomsnittlig nettleserstørrelse.
Lag andre bakker med samme teknikk. Forsøk å justere avstanden og størrelsen på figurene og buen for å lage et lite utvalg.
Tegn en enkel bueform som vil bli en vei på åsene. Gi den også en subtil grå gradient.
Nedenfor har jeg variert den horisontale flippen av åsene for å gi en liten variasjon til stykket. Legg merke til at både bakken til venstre og bakken til høyre strekker seg forbi den blå guiden.
Deretter skal vi lage himmelen. Til slutt er dette satt opp slik at når det kodes ved hjelp av XHTML / CSS, vil himmelen gjenta på ubestemt tid både på venstre og høyre side, uansett hvor stor nettleserskjermen er strukket.
Lag en lysfarget gradient og legg den bak bakkene.
Jeg finner det noen ganger mer effektivt å finjustere en gradient ved å gå til Rediger> Farger> Recolor Artwork ... Nå kan du velge hver farge (toppsirkel) og flytte skyvekontrollen rundt for å få bare fargen du leter etter (nederste sirkel). Endringene du gjør, kan vises i sanntid, før du trykker på OK, så pass på at dialogboksen Live Color ikke dekker objektet du recoloring.
Deretter legger vi til små detaljer i åsene og veiene. Jeg har bestemt meg for å gjøre noen blokkerte biler. Når de brytes ned til deres enkleste former, er biler veldig enkle å lage. Start med å tegne den grunnleggende formen din vil ta på. Bruk denne formen som en guide.
Avhengig av hva du ser etter, må du kanskje ikke gjøre alt perfekt symmetrisk. Bilene jeg lager, er litt lunefull, slik at figurene har en vilkårlig kvalitet om dem. Deretter tegner du på taket.
Trekk hettene, frontruten og støtfangeren.
Tegn siden av bilen.
Tegn vinduene og et par ellipser for hjulene. Det er det!
Dupliser bilen og endre fargen for å blande den opp. Det faktum at bilen er buet bidrar også til at den passer godt med den buede veien.
Bruk pennverktøyet til å tegne en grunnleggende fugleform. Dupliser og flip i samme form for raskt å lage et volum av fugler.
Vi lager skyer på himmelen ved først å tegne et rektangel ved hjelp av rektangelverktøyet (M).
Ved hjelp av Krypverktøyet (Shift + R), kryp rektangelet til du ser det mer ut som en sky. Det kan være lettere å kutte rektanglet mer fullstendig hvis du justerer størrelsen på kjedeområdet. Oppnå dette ved å enten dobbeltklikke på verktøyet eller holde nede Alternativ + Skift, klikk deretter og dra for å endre størrelsen.
Etter at du er ferdig med å lage den generelle skyformen, kan du legge merke til at det er en overflod av flere punkter å dreie et objekt. Disse ekstrapunktene gjør formen mer kompleks enn vi trenger den til å være. Forenkle antall poeng formen har ved å gå til Objekt> Sti> Forenkle. Juster Curve Precision til formen blir jevnere.
Ved hjelp av Direct Selection Tool kan du justere punktene og noderne for å reflektere hvilken som helst form du prøver å skape.
Bruk blyantverktøyet (N) til å tegne en tilfeldig fjellform. På grunn av den kontinuerlige karakteren av tegning med blyantverktøyet, er det noen ganger vanskeligere å lukke banen når du er ferdig med å tegne formen. For å lett lukke en bane, hold nede Alternativ-tasten før du er ferdig.
Objekter som er lengre unna seeren trenger ikke så mye detalj. Lag bygninger ved å slå sammen enkle rektangler ved hjelp av Pathfinder.
Arc bygningen ved å gå til Objekt> Envelope Distort> Lag med Warp ... Velg Arc fra rullegardinmenyen og skriv inn verdier som ser bra ut til deg.
Dette er hva bildene dine skal se ut akkurat nå. Som du kan se, blir det lettere når objektet blir lengre unna. Bruk denne kunnskapen når du lager oppsettet ditt. Dette hjelper virkelig å gi designet en naturlig kvalitet.
Bruk en stjerneverktøy til å trekke en trekant. For å justere antall poeng som en stjerne har, bruker du opp- og nedpilen mens du tegner formen. Mens du tegner formen, når den har 3 poeng, holder du nede Skift-tasten for å gjøre trekantens base perfekt horisontal.
Tegn en ellipse og slå sammen den med den nederste kanten av trekanten.
Gi formen en grønn gradient.
Bruk små trekanter i hovedtreområdet for å gi det litt mer detalj. Bruk et rektangel for bunnen av treet.
Dupliser og variere størrelsen på trærne for å skape en skog.
Juster opaciteten til en ellipse for å lage en stilisert skygge for hvert tre.
Igjen, bruk blyantverktøyet å tegne en organisk form for å lage en stein.
Fravelg hovedrockformen og tegne andre unormale former som blir mos og skygger. Bruk Pathfinder til å dele formene og bli kvitt unødvendige rester.
Dette er hva du bør være igjen med.
Plasser steinene tilfeldig gjennom hele designet og gi dem en skygge som du gjorde for trærne.
Lag en bladform med pennverktøyet.
Å gi bladvariasjoner i farge vil legge til sin realisme. Bruk blyantverktøyet (N) til å tegne en form som ser ut som min nedenfor. Bruk Pathfinder Palette og bryte opp bladet i seksjoner. Slett de resterende figurene som ikke er en del av bladet.
Velg hver del av bladet og gi det en subtil fargeendring for å simulere lys som rammer hver del av bladet.
Tegn en veldig smal ellipse som blir bladets stamme.
Bruk Warp Tool til å skape ellipse i noe mer naturlig utseende.
Gi bladene og stilkene en fargeendring for å bryte opp bladets monotoni. Gå til Rediger> Farger> Juster fargebalanse ... og flytt deretter glidebryterne til din smak.
Plasser bladene i en klynge i hjørnet av designet.
Legg til nettstedets tittel i toppseksjonen. Hvis tittelen din skal skrives med en vanlig skrifttype som Helvetica, er du ganske mye ferdig med dette trinnet. Hvis tittelen din ikke vil bruke en systemfont, kan du gjerne forbedre den med effekter som en dropshadow eller en skråkant for eksempel.
Dette ser ut som den ferdige overskriften på nettstedet ser ut. Vær oppmerksom på hvordan hovedinnholdet holdes mellom de blå guidene som måler 960px bred.
Opprett hovedinnholdsdelen av nettstedet. Jeg bestemte meg for å lage et jordevennlig tema så blått var et passende valg for dette designet.
Bruk blyantverktøyet til å lage en høy iskremform.
Gi icicle-formen en indre glød for å legge til dybden ved å gå til Effekt> Stylize> Inner Glow ... Tegn lignende mindre iskikulasjonsformer og plasser dem under den større formen. Du trenger ikke å gi disse andre former indre gløder.
Bruk blyantverktøyet til å lage noen små bergarter for å legge til interesse for fossen.
Vi bruker en scatterbørste for å bygge opp en masse bobler. Tegn en ellipse og dra den til penselpaletten. Velg New Scatter Brush og trykk OK. Hvis børstepaletten din ikke er synlig, gå til Vindu> Pensler.
Still størrelsen, spredning og spredning til tilfeldig og juster skyvekontrollene. Det er viktig å justere både de svarte og grå trekanter, slik at figurene dine er tilfeldig nok.
Med pennverktøyet valgt, klikk på scatterbørsten du nettopp har laget og tegne en linje. Endre linjevikten for å variere størrelsen på kretsene, eller dobbeltklikk på scatterpenselen for flere alternativer.
For ytterligere redigering av kretsene, utvider du linjen ved å gå til Objekt> Utvid utseende.
Bruk pennverktøyet til å tegne noen fiskformer.
Plasser den steinen du trakk tidligere nederst på siden for å lage en bunntekst.
Bruk scatterbørsten du brukte til boblene, for å lage en tekstur for bunnteksten. For å gjøre teksturet begrenset i rektangelområdet på bunnteksten, skriv bare et rektangel over bobleformen, velg bobler og rektangel og trykk på Command + 7 for å lage en maske. Eller bruk Intersect-formområdene i Pathfinder for å eliminere boblene utenfor rektangelområdet.
Min navigering kan enkelt gjengis ved hjelp av CSS. Vær oppmerksom på dette når du lager din også. Enhver tekst som bruker en skrift som ikke er en systemfont, må være et bilde. Det er nå vanlig og foretrukket å bruke CSS når det er mulig og ikke bilder.
Lag noen elementer som kan forbedre oppsettet ved hjelp av enkle former.
Jeg har bestemt at jeg vil at bildet skal være innspill i teksten. For å gjøre dette, velg elementet som skal legges inn og gå til Objekt> Tekstpakke> Lag. Gå tilbake til Objekt> Tekstbryter> Tekstbryteralternativer for å justere mellomrommet mellom elementene og teksten.
Lag skjemainntastingsfeltene ved å bruke et rektangel, avrunde hjørnene, gi det et utvendig slag og til slutt en subtil gradientfylling. Alle disse effektene er lett modifiserbare ved å dobbeltklikke på hver effekt i Utseendepalet.
Lag en knapp ved å tegne et rektangel igjen, og gi det avrundede hjørner en svak gradient og en dråpeskygge.
Legg til andre elementer for å fullføre ditt design.
Dette er hva det endelige designet ser ut som. Legg merke til hvordan all den kritiske informasjonen holdes innenfor de blå guidene. Bunnteksten vil også gjenta ved hjelp av CSS.
Du har nettopp lært hvordan du oppretter et grønt landskapswebområde i Adobe Illustrator. Vector stil nettsted design kan sette et nettsted fra hverandre ved å gi det et unikt utseende. Kom i gang med ditt eget design og se hva du kan komme med! Det endelige bildet er under, eller du kan se en større versjon her.
Accentsconagua