Hvordan lage spillelementer med grafiske stiler

I dagens veiledning skal jeg vise deg hvordan du skal forberede og lage en rekke grafiske stiler i Adobe Illustrator CS6 for å bruke det i et spill. Fordelene ved å bruke grafiske stiler er at du deretter kan fortsette å bruke dem i mange forskjellige former uten å måtte gjenskape hvert utseende. Så la oss hoppe inn i denne morsomme opplæringen!


Trinn 1

Jeg bruker Adobe Illustrator CS5 til mine første deler av denne opplæringen, dette er bare personlig preferanse, ettersom jeg finner det litt mer stabil på PCen min. Det er imidlertid helt fint å bruke AI CS6 fra start til slutt. Start med å opprette et nytt dokument i fargemodus RGB.



Steg 2

Jeg skal prøve noe nytt for meg, og det er en annen måte å forberede en fargepalett på. Jeg fikk dette tipset fra opplæringsprogrammer av Beto Garza, som han har flere her på Vectortuts +. Begynn med å tegne to former på avstand fra hverandre og opprett en spesifisert trinn av 3 blend fra dem (Ctrl + Alt + B). Endre start- og sluttfarge for å få en fin gradvis endring i farge. Dette er grunnleggende om å få en fargepalett.


Bland det opp og prøv å velge en farge fra standardfargepanelet, men deretter gå inn i fargeguide-panelet og velge en farge derfra. Dette kan gi deg et annet utvalg av farger å leke med.



Trinn 3

Før jeg går videre med å forberede mine paletter, trenger jeg å vite hvilke sett med farger jeg trenger for de forskjellige elementene jeg skal skape. Så start med en grunnleggende skisse av en spillscene. Her har jeg lagt til seks potensielle områder som skal opprettes.


Så med de seks områdene lager jeg en blanding av farger for hvert element. Jeg har nettopp duplisert den opprinnelige Blend og deretter endret start- og sluttfargene.



Trinn 4

Når du er fornøyd med palettene dine, Object> Utvid dem slik at blandingen er fjernet, og du er igjen med fem farger for hvert element. Velg hver gruppe farger enkeltvis, og klikk på Ny fargegruppe nederst på panelet ditt. Dette vil legge til fargene fra den gruppen i sin egen palettmappe. Du kan deretter dobbeltklikke på palettmappen og gi den navnet til Soil / Rocks, Grass etc ... for å gjøre det lettere å referere senere.



Trinn 5

Element by element, jeg skal vise deg hvordan du lager hver grafisk stil. Vi skal begynne på "Grass". Begynn med å tegne en buet linje med pennverktøyet (P) eller Arc Tool. Gi den en svart slagfarge, og bruk deretter en 4pt slagvekt. I profilpanelet legger du til profilen: Breddeprofil 1.


Når du er valgt, velger du Legg til ny pensel> Spred pensel i børstepanelet, og bruk alternativene under. Endre fargelasjonsmetoden til toner og klikk på OK.



Trinn 6

Tegn en linje med linjesegmentverktøyet (\) på tavlen, og i Utseendepanelet vil du legge til ni slag med den letteste grønn øverst og mørkeste nederst. Påfør Gressbørsten til hvert av strekkene og deretter fra topp til bunn følgende Stroke Vekter: 0,5, 0,75, 0,75, 1,0, 1,25, 1,25, 1,5, 1,5, 1,75pt.

Når du er ferdig, klikker du på Ny grafisk stil i panelet Grafiske stiler for å legge det til panelet. Dobbeltklikk på ikonet det skaper og endre navn på det til noe mer minneverdig.



Trinn 7

Nå har vi vårt første element, jeg skal sette opp Lag-panelet mitt, så det er et lag for hvert element.


Jeg har da lagt til grunnformer for hvert element ved å bruke fargene fra mine tilpassede paletter. Jeg kan se herfra om fargene fungerer godt sammen. Akkurat nå er jeg ikke så sikker på rosa, men jeg vil endre det senere når jeg har en bedre ide om hvordan elementene fungerer sammen.



Trinn 8

Fortsett å begynne å lage vår jord / bergarter. Denne stilen er hvor Adobe Illustrator CS6 begynner å tjene sin prislapp på grunn av det fantastiske mønsterverktøyet. Vi starter med å tegne flere figurer med det avrundede rektangelverktøyet. Jeg har lagt til en 4pt slagvekt og brukt middels farger fra denne fargegruppen for fyll og slag.

Når du er opprettet, velger du alle figurene og går til Effekter> Transform og forvreng> Roughen og bruk alternativene nedenfor. Dette vil skape en mer uregelmessig stil til figurene.


Deretter går du til Objekt> Utvid utseende for å fjerne effekten og gi deg de frittstående formene.



Trinn 9

Velg figurene dine og gå til Objekt> Mønster> Lag for å bruke Mønsteralternativer.


Ved hjelp av markeringsverktøyet (V), flytt figurene dine på plass, roter om nødvendig, og modifiser deretter Mønsteralternativer for å gi mønsteret ditt klokt. Målet å plassere steinene i en formasjon med vil tillate så lite hull som mulig, men også slik at fasene ikke berører hverandre. Vi er ikke stille ferdig med å lage dette mønsteret ...



Trinn 10

Ved hjelp av pennverktøyet (P) legger du til skyggelegging på klippene. Nå vil ørnen øye være den første som sier "hvordan kan det skygge på steiner fordi de er alle under jorden", mitt svar er ... "kunstnerisk lisens, min fester poopervenn!". Legg til skygge vil skape en mer stein som tekstur. Så legg først en av dine lettere farger til bergarter, og husk å tegne uregelmessige former.


Deretter bruker du en lysere farge igjen, legg til flere høydepunkter til bergarter. Når du er fornøyd med mønsteret ditt, klikker du på Ferdig, og det vil legge til det nye mønsteret til fargepatronen, klar til bruk.



Trinn 11

Da jeg brukte mønsteret til jordens område i spillet, var mønsteret for stort. Så mens formen er valgt, gå til Objekt> Transform> Skala og reduser skalaen til mønsteret bare med 50%.


Da jeg bare brukte fargene fra blendpaletten vi opprettet, har jeg laget en grafisk stil med en gjennomsiktig lineær gradient som kommer fra toppen og deretter et middels lysebrunt fast bak mønsteret. Når jeg har gjort det, har jeg lagret denne grafiske stilen som "Soil Rocks".



Trinn 12

Flytter seg til fjellene våre / bakker i bakgrunnen. Begynn med å tegne et langt rektangel med rektangelverktøyet (M). Bruk deretter Effect> Transform & Distort> Zig Zag-effekten med glatte punkter for å lage en bølge.


Deretter Objekt> Utvid til stand-alone form.



Trinn 13

Nå for å fjerne de spiky endene. Tegn to rektangler (M) over hver ende av formen og velg dem begge og lag en sammensatt sti (Ctrl + 8).


Deretter bruker du Pathfinder> Minus Front for å fjerne de gale spiky endene.



Trinn 14

La oss nå bruke mønsterverktøyet til å lage et fint bølgete mønster. Først endre alternativene for å sikre at du har glatte kurver på hver topp uten unødvendige hjørner.


Dupliser bølgen og Lim inn foran (Ctrl + F), og endre deretter farger på veien med fargene fra fjellpaletten. Klikk Ferdig når du er fornøyd med utfallet.



Trinn 15

Jeg har tegnet noen tegneserie stil fjell / åser i bakgrunnen med Pen Tool (P). Tegn deretter individuelt i stedet for som en del av en stor form.


Jeg har da gått på å skape følgende grafiske stil med alternativene nedenfor Utseendepanel. Den mørkere gradienten har en offsetvei på -4pt mens lyseren som kommer fra toppen av åsene er satt til -10pt.



Trinn 16

La oss resirkulere fjellets grafiske stil og bruke den til himmelen.


Mens du er valgt, gå inn i Recolor Artwork og klikk på Sky Color Group på siden, og klikk deretter OK.



Trinn 17

Jeg har fjernet noen av effektene og slagene i formen, så det er bare et mønster og to lineære gradienter.



Trinn 18

Jeg skal gå inn i selve mønsterelementet og endre det som den nåværende fargekombinasjonen er litt for fet for himmelen.


Jeg har brukt de to letteste bluene i paletten for å lage et mønster av to bølger.



Trinn 19

For å gjøre det til en stor mer fluffier, skal jeg bruke en glatt punkt Zig Zag Effect til figurene med de under innstillingene.


Bruk deretter Objekt> Utvid på figurene.



Trinn 20

Hvis du zoomer rett inn, kan du se at vi har et problem med de spiky kantene igjen!


Denne gangen går du inn med pennverktøyet (P) og bare fjerner unødvendige poeng. Du trenger ikke å fjerne dem alle, bare de som forårsaker forvrengning på mønsteret. Klikk Ferdig når du er fornøyd med utfallet.



Trinn 21

I motsetning til bergarter / jord, er dette mønsteret for lite for himmelen. Så jeg skal endre størrelsen på mønsteret og øke det med 200%.


Jeg har da endret gradienter for å skape et mye subtilere mønster. Med himmelen vil du ikke at mønsteret skal skille seg ut så mye som det kan distrahere deg fra selve spillet / handlingen. Når du er fornøyd med utfallet, lager du den nye grafiske stilen og navnet den på riktig måte.



Trinn 22

Jeg vil at bakkene i bakgrunnen skal virke mer frittliggende fra forgrunnen, så jeg skal legge til en annen gradient i den grafiske stilen vi allerede har. Ved å bruke graden som brukes til bunnen av Sky Graphic Style, skal jeg legge til dette over strekkene og fyllingene i Hill Graphic Style. Med dette påført og lagret, skiller det definitivt bakgrunnen og forgrunnen nå.



Trinn 23

La oss nå lage den grafiske stilen for Mystery Boxes. Tegn to rektangler (M) på to av hverandre, og bruk to forskjellige nyanser fra Mystery Box-paletten.


Bruk transformasjonspanelet til å rotere med 45 grader.



Trinn 24

La oss lage et mønster med disse figurene med mønsterverktøyet. Jeg har en av figurene og lagt en mørkere farge bak de to originale rektanglene for å gi en trippel stripe effekt. Nå som jeg er fornøyd med mønsteret, klikker du på Ferdig.



Trinn 25

Etter å ha avsluttet vår Mystery Box Graphic Style, har jeg lagt til slag i en lignende stil i fjellene, samt en lys gradient som er Offset-banen ved -4pt.



Trinn 26

Solen er opprettet ved å bruke Zig Zag Effects med forskjellige innstillinger og farger. Start med en jevn sirkel opprettet med Ellipse Tool (L). Nedenfor er innstillingene for den første effekten.


Med en mørkere farge Legg til ny fylling bak den første.


Legg deretter til ny fyll på toppen av begge fyllene med en lysere farge.



Trinn 27

Bruk den samme gule, legg til en gjennomsiktig radialgradient under den lyseste gule med en offsetvei på 40pt. Deretter lagrer du grafisk stil og navn på riktig måte.



Trinn 28

Nå har vi våre komplette grafiske stiler, jeg skal fortelle dem. Jeg har lagt til en ekstra plattform for å teste ut jorda våre og lagt til et grøsslag på toppen. Men jordens kanter virker ufullstendige.


Jeg har gått videre og endret jordgrafikkstilen ved å legge til to slag. Dette vil tillate det å følge en lignende stil som resten av scenen vår.



Trinn 29

Som mistenkt matcher våre Mystery Boxes ikke vår generelle fargevalg, så jeg har valgt boksene og brukt Recolor Artwork og brukt Soil Rocks Color Group.


Jeg har endret rekkefølgen på fargene i gruppen ved å klikke på rullegardinmenyen og velge Lysstyrke - lys til mørkt. Dette vil skape den mørke konturen og deretter en lysere disposisjon rundt formen.



Trinn 30

Bruk Type Tool (T) til å legge til et spørsmålstegn til en av Mystery Boxes og bruk "Soil 2" Graphic Style.



Trinn 31

Jeg skal forandre fargene til den samlede scenen for å gi et annet utseende til spillet vårt, kanskje for et annet nivå til det. Dupliser alle elementene og gi dem eget lag.



Trinn 32

Jeg skal gå gjennom og Recolor Artwork på hver av elementene. For himmelen har jeg gått inn i kategorien Rediger i dialogboksen Alternativer. Klikk på Link harmoni farger for å holde det samme forholdet mellom fargene.


Når du flytter en av fargene, vil den endre alle tre. Jeg skal gi en solnedgang / soloppgang til scenen ved å legge til en dempet rosa himmel.



Trinn 33

Jeg vil ikke at fjellets farger skal være for forskjellige, så jeg skal gå på en lignende nyanse og bytte fjellene til den originale Mystery Box Color Group.


Jeg har da gått inn for å endre Gresset ved å gå inn i kategorien Rediger. Det samme er med Mystery Boxes og Soil / Rocks. Jeg har også endret solens farger og forandret posisjonen til å passe sammen med solnedgang / soloppgang fargevalg.



Trinn 34

Når du er ferdig, husk å legge til de nye grafiske stilene i panelet og gi nytt navn til dem. Dette vil gjøre det mye enklere å bruke i fremtiden.



Konklusjon

Jeg håper du har hatt dagens veiledning om hvordan du lager noen spillelementer ved å lage en rekke grafiske stiler. Lær hvordan du kan dra nytte av grafiske stiler, kan spare mye tid på arbeidsflyten din og gjøre det mye lettere for spilldesignere å lage elementene de ønsker ved å bare bruke en stil til en grunnleggende form.