Share
I dagens handledning kommer jag att visa dig hur man förbereder och skapar en mängd olika grafiska stilar i Adobe Illustrator CS6 för att sedan använda inom ett spel. Fördelarna med att använda grafiska stilar är att du sedan kan fortsätta att applicera dem i många olika former utan att behöva återskapa varje utseende. Så låt oss hoppa in i denna roliga handledning!
Jag använder Adobe Illustrator CS5 för mina första delar av den här handledningen, det här är rent personligt eftersom jag tycker det är lite stabilare på min dator. Men med AI CS6 från början till slut är det helt bra. Börja med att skapa ett nytt dokument i färgläge RGB.
Jag ska prova något nytt för mig och det är ett annat sätt att förbereda en färgpalett. Jag fick detta tips från tutorials av Beto Garza, som han har flera här på Vectortuts +. Börja med att dra två former i avstånd och skapa en specificerad steg av 3 blandning från dem (Ctrl + Alt + B). Ändra din start- och slutfärg för att få en fin gradvis färgförändring. Detta är grunderna för att få en färgpalett.
Blanda upp det och försök att välja en färg från standardfönstret, men sedan gå in i Color Guide-panelen och välja en färg därifrån. Detta kan ge dig en annan mängd färger att leka med.
Innan jag går vidare med att förbereda mina paletter behöver jag veta vilka uppsättningar färger jag behöver för de olika elementen jag ska skapa. Så börja med en grundläggande skiss av en spelscene. Här har jag lagt till sex potentiella områden som ska skapas.
Så med de sex områdena skapar jag en blandning av färger för varje element. Jag har bara duplicerat den ursprungliga blandningen och sedan ändrat start- och slutfärgerna.
När du är nöjd med dina paletter, Objekt> Utöka dem så att blandningen tas bort och du är kvar med fem färger för varje element. Markera varje grupp av färger individuellt och klicka på Ny färggrupp längst ner i fönstret Färger. Detta lägger till färgerna från den gruppen i sin egen palettmapp. Du kan då dubbelklicka på palettmappen och namnge den till Soil / Rocks, Grass etc ... för att göra det enklare att referera senare.
Element by element, jag visar dig hur man skapar varje grafisk stil. Vi ska börja på "Grass". Börja med att dra en böjd linje med Pen Tool (P) eller Arc Tool. Ge den en svart slagfärg och använd sedan en 4pt slagvikt. Lägg till profilen: Breddsprofil 1 i Stroke-panelen.
Medan du markerar väljer du Lägg till ny borste> Spridborste i rutan Penslar och använd nedanstående alternativ. Ändra färgmetoden till Tints och klicka på OK.
Rita en linje med linjesegmentverktyget (\) på tavlan och i Utseendepanelen vill du lägga till nio slag med det ljusaste gröna längst upp och mörkaste längst ner. Applicera din gräsborste på varje slag och sedan från topp till botten följande slagviktar: 0,5, 0,75, 0,75, 1,0, 1,25, 1,25, 1,5, 1,5, 1,75pt.
När du är klar, klicka på Ny grafisk stil i panelen Grafiska format om du vill lägga till den i panelen. Dubbelklicka på ikonen den skapar och byt namn på det till något mer minnesvärt.
Nu har vi vårt första element, jag ska ställa in min lagerpanel så det finns ett lager för varje element.
Jag har sedan lagt till grundläggande former för varje element med färgerna från mina anpassade paletter. Jag kan se härifrån om färgerna fungerar bra tillsammans. Just nu är jag inte säker på den rosa men jag ändrar det senare när jag har en bättre uppfattning om hur elementen fungerar tillsammans.
Att fortsätta börjar vi skapa vår jord / klippor. Den här stilen är där Adobe Illustrator CS6 börjar tjäna som prispärm på grund av det underbara Pattern Tool. Vi börjar med att skriva flera former med det rundade rektangelverktyget. Jag har lagt till en 4pt slagvikt och använt medelfärger från denna färggrupp för fyllning och stroke.
När du väl har skapat, välj alla former och gå till Effekter> Transformera & Förvränga> Roughen och använd alternativen nedan. Detta kommer att skapa en mer oregelbunden stil i formerna.
Gå sedan till Objekt> Expand Utseende för att ta bort effekten och ge dig fristående former.
Välj dina former och gå till Objekt> Mönster> Gör för att använda mönsteralternativen.
Använd markeringsverktyget (V) genom att flytta dina former på plats, rotera om det behövs och ändra sedan dina mönsteralternativ för att ge mönstret du klokt. Syfte att placera stenarna i en formation med skulle tillåta så små luckor som möjligt, men också så formerna rör inte varandra. Vi är inte tysta färdiga med att skapa detta mönster ...
Använd pennverktyget (P), lägg till skuggning till klipporna. Nu kommer örnögonen att vara den första som säger "hur kan det skuggas på stenar, eftersom de är alla under marken", mitt svar är ... "konstnärlig licens min partipoopervän!". Lägg till skuggning kommer att skapa en mer sten som textur. Så lägg först en av dina ljusare färger till klipporna, kom ihåg att dra oregelbundna former.
Använd sedan en ljusare färg igen, lägg till ytterligare höjdpunkter till klipporna. När du är nöjd med ditt mönster klickar du på Klar och det lägger till ditt nya mönster i fönstret Färger, redo att använda.
När jag tillämpade mönstret på spelets markområde var mönstret för stort. Så medan formen väljs, gå till Objekt> Transformera> Skala och minska mönsterskalan endast med 50%.
Sedan använder vi bara färgerna från den blandade paletten som vi skapade, jag har skapat en grafisk stil med en genomskinlig linjär gradient som kommer från toppen och sedan en medelljus brun solid bakom mönstret. En gång gjort, har jag sparat denna grafiska stil som "jordrockar".
Rör på våra berg / kullar i bakgrunden. Börja med att dra en lång rektangel med rektangelverktyget (M). Använd sedan effekten> Transform & Distort> Zig Zag-effekten med smidiga punkter för att skapa en våg.
Därefter Objekt> Expandera till din fristående form.
Nu för att ta bort de spikiga ändarna. Rita två rektanglar (M) över vardera änden av formen och välj dem båda och gör en förbandsledning (Ctrl + 8).
Använd sedan Pathfinder> Minus Front för att ta bort de fula spikiga ändarna.
Låt oss nu använda Pattern Tool för att skapa ett fint vågigt mönster. Först ändra alternativen så att du har smidiga kurvor på varje topp utan onödiga hörn.
Duplicera vågen och klistra in på framsidan (Ctrl + F) och ändra sedan färgerna med färgen från din bergspalett. Klicka på Klar när du är nöjd med resultatet.
Jag har ritat några tecknat stil berg / kullar i bakgrunden med Pen Tool (P). Rita sedan individuellt snarare än som en del av en stor form.
Jag har sedan gått på att skapa följande grafiska stil med alternativen nedan Utseendepanel. Den mörkare gradienten har en offsetväg på -4pt medan ljuset som kommer från toppen av kullarna är inställt på -10pt.
Låt oss återvinna bergen Grafisk stil och tillämpa den på himlen.
Medan du valt, gå in i Recolor Artwork och klicka på Sky Color Group på sidan och klicka sedan på OK.
Jag har tagit bort några effekter och slag i formen så det är bara ett mönster och två linjära gradienter.
Jag ska gå in i själva mönstret och ändra det eftersom den nuvarande färgkombinationen är lite för djärv för himlen.
Jag har använt de två ljusaste bluesna i paletten för att skapa ett mönster av två vågor.
För att göra det till en stor mer fluffigare kommer jag att applicera en smidig punkts Zig Zag-effekt till formerna med nedanstående inställningar.
Använd sedan Objekt> Expand på formerna.
Om du zoomar in, kan du se att vi har ett problem med de spikiga kanterna igen!
Den här gången går dock in med Pen Tool (P) och tar bara bort de onödiga punkterna. Du behöver inte ta bort dem alla, bara de som orsakar en snedvridning på mönstret. Klicka på Klar när du är nöjd med resultatet.
Till skillnad från stenar / jord är detta mönster för litet för himlen. Så jag ska ändra mönsterskalan och öka den med 200%.
Jag har sedan modifierat gradienterna för att skapa ett mycket subtilare mönster. Med himlen vill du inte att mönstret sticker ut så mycket som det kan avleda dig från själva spelet / åtgärden. När du är nöjd med resultatet, skapa din nya grafiska stil och namnge den på lämpligt sätt.
Jag vill att kullarna i bakgrunden verkar mer fristående från förgrunden, så jag ska lägga till en annan gradient till den grafiska stilen vi redan har. Med hjälp av den gradient som används till botten av Sky Graphic Style lägger jag till detta över streck och fyllningar i Hill Graphic Style. Med detta applicerat och sparat, separerar det definitivt bakgrunden och förgrunden nu.
Låt oss nu göra den grafiska stilen för Mystery Boxes. Rita två rektanglar (M) på två av varandra och applicera två olika nyanser från Mystery Box-paletten.
Använd transformationspanelen, rotera med 45 grader.
Låt oss skapa ett mönster med dessa former med Pattern Tool. Jag har en av formerna och lagt en mörkare färg bakom de två ursprungliga rektanglarna för att ge en trippel randseffekt. Nu när jag är nöjd med mönstret klickar du på Klar.
Genom att avsluta vår Mystery Box Graphic Style har jag lagt till slag i en liknande stil i bergen samt en lätt gradient som är offsetväg genom -4pt.
Solen skapas genom att använda Zig Zag Effects med olika inställningar och färger. Börja med en jämn cirkel skapad med Ellipse Tool (L). Nedan finns inställningarna för den första effekten.
Med en mörkare färg lägg till ny fyllning bakom den första.
Lägg sedan till ny fyllning på toppen av båda fyllningarna med en ljusare färg.
Använd samma gula, lägg till en transparent radial gradient under den ljusaste gula med en offsetväg på 40pt. Spara sedan din grafiska stil och namn på lämpligt sätt.
Nu har vi våra kompletta grafiska stilar, jag ska berätta för dem. Jag har lagt till en extra plattform för att testa vår jord och lägger till ett grässlag på toppen. Jordens kanter verkar emellertid ofullständiga.
Jag har gått vidare och ändrat marken Graphic Style genom att lägga till två slag. Detta gör det möjligt att följa en liknande stil som resten av vår scen.
Som misstänkt matchar våra Mystery Boxes inte vårt övergripande färgschema, så jag har valt rutorna och sedan använt Recolor Artwork och använt Soil Rocks Color Group.
Jag har ändrat ordningen för färgerna i gruppen genom att klicka på borrmenyn och välja Ljusstyrka - ljus till mörk. Detta kommer att skapa den mörka konturen och sedan en ljusare skiss runt formen.
Använd Typverktyget (T) för att lägga till ett frågetecken i en av Mystery Boxes och tillämpa "Soil 2" Graphic Style.
Jag kommer att ändra färgerna på den övergripande scenen för att ge ett annat utseende till vårt spel, kanske för en annan nivå. Duplicera alla element och ge dem ett eget lager.
Jag ska gå igenom och Recolor Artwork på var och en av elementen. För himlen har jag gått till fliken Redigera i dialogrutan Alternativ. Klicka på Link Harmony-färger för att hålla samma förhållande mellan färgerna.
När du flyttar en av färgerna kommer den att förändra alla tre. Jag ska ge en solnedgång / soluppgång titta på scenen genom att lägga till en dämpad rosa himmel.
Jag vill inte att färgerna på bergen blir alltför olika, så jag ska gå för en liknande nyans och byta berg till den ursprungliga Mystery Box Color Group.
Jag har sedan gått in för att ändra gräset genom att gå till fliken Redigera. Detsamma är med Mystery Boxes och Soil / Rocks. Jag har också ändrat solens färger och ändrat positionen för att passa med solnedgången / soluppgångens färgschema.
När du är klar, kom ihåg att lägga till dina nya grafiska stilar i panelen och byt namn på dem på lämpligt sätt. Detta kommer att göra det mycket lättare att använda i framtiden.
Jag hoppas att du har haft dagens handledning om hur du skapar några spelelement genom att skapa en mängd olika grafiska stilar. Att lära sig att dra fördel av grafiska stilar kan spara mycket tid på ditt arbetsflöde och göra det mycket lättare för speldesigners att skapa de element som de önskar genom att helt enkelt tillämpa en stil till en grundläggande form.
Accentsconagua