Retro látványvilág modern módszerekkel
A most következő tutorial során bemutatom, miként készíthetünk egy, a régi számítógépes játékok látványvilágát idéző figurát és hogyan helyezhetjük egy új dimenzióba, megtartva annak hangulatát. Super Mario lesz ebben segítségünkre 🙂
1. lépés
Nyissunk eh új projektet az Illustratorban. Egy rajztáblánk legyen, melynek mérete 1024 x 768. A színmód legyen CMYK, a Raster Effects-et pedig állítsuk 300 dpi-re. Ezt követően válasszuk a Rectangular Grid Tool-t az eszköztárról (Line Segment Tool-lal egy csoportban), majd kattintsunk a rajztáblán:
A felugró beállítás ablakban a képen is látható módon adjuk meg az alábbi paramétereket, majd okézzuk le a párbeszédpanelt:
- Width: 500 px
- Height: 800 px
- Horizontal Dividers: 28
- Vertical Dividers: 16
A kapott négyzetrácsot méretezzük arányosan úgy, hogy elférjen a rajztáblán, majd a vonalak vastagságát állítsuk 0,5 pt-re, hogy ne jojózzon majd annyira a szemünk 🙂
Ha ez megvan, akkor az Object > Live Paint > Make menüpontot választva alakítsuk át a hálónkat egy ún. Live Paint Group-pá, melynek kösöznhetően az egyes részeket külön “festhetjük” majd:
2. lépés
Ezek után válasszuk az eszköztárról a Live Paint Bucket nevű eszközt (“k”), mely a Shape Bilder Tool-lal van egy csoportban:
A Live Paint Bucket használata szinte adja magát. A Live Paint Group-on belül lévő alakzatokat úgy tudjuk festeni, hogy rájuk kattintunk. A mi esetünkben egy csomó négyzetünk van, ezeket fogjuk beszínezni, hogy a végén kiadják Super Mario-t.
Először a fekete színt választva fessük be a képen látható négyzeteket, majd Color palettán keverjünk ki egy a képen láthatóhoz hasonló bordós árnyalatot, majd mentsük le a Swatches paletta színei közé:
Az alábbi négyzeteket töltsük ki ezzel a bordós árnyalattal:
Megjegyzés: A Live Paint Bucket használata közben lépkedhetünk a Swatches paletta színei között a jobbra, illetve balra kurzorbillentyűk segítségével. Ez akkor hasznos, ha néhány színnel dolgozunk és ezeket egymás mellé rendeztük palettán.
Válasszunk egy narancsos árnyalatot és Mario lábán a két üresen maradt négyzetet töltsük ki vele:
A továbbiakban nem fogom leírni négyzetről négyzetre, hogy milyen színnel mely részt töltsük ki egyenként. A képek magukért beszélnek, a négyzetrács pedig segít pontosítani a dolgokat, ezért a továbbiakban csak főbb lépéseket mutatok.
A cipők után a nadrág következik sötét, illetve világosabb kék színekkel:
Ezt követően használjunk sötétebb és világosabb barna árnyalatokat és ismét feketét a felemelt kar és a zsebre tett kéz kialakításához:
Fontos: Ügyeljünk rá, hogy azok a négyzetek, melyeket nem festünk színesre, ne maradjanak üresen. Töltsük ki őket fehér színnel, mert különben a későbbiek során azokon a helyeken a kitöltés hiánya miatt “lyukas” lesz majd Mario.
Használjunk az ing színeihez fakított piros (rózsaszín-szerű) árnyalatot:
Folytassuk a kitöltést a fej, és a felemelt kéz elkezdésével, illetve a bajusszal. Használjunk még egy fokkal jobban fakított pirosat (halvány rózsaszín):
Ha ez megvan, folytassuk a felemelt kezet feketével és barnával hozzuk létre a fej felső részét, a sapka körvonalát:
Legvégül a képen látható módon és színekkel fejezzük be Mario figuráját:
Váltsunk vissza Selection Tool-ra, majd a négyzetrács körvonal színét állítsuk “None”-ra, vagyis ne látszódjanak a vonalak:
Jelenleg így fest a kis pixeles vízvezeték szerelőnk (győződjünk meg róla, hogy a fehér valóban fehér legyen):
3. lépés
Legyen kijelölve a figuránk, majd az Appearance panelről válasszuk az fx > 3D > Extrude & Bevel effektet:
Az effekt beállításainál alkalmazzuk az alábbi értékeket:
- Forgatás X tengely mentén: -10 fok
- Forgatás Y tengely mentén: -50 fok
- Forgatás Z tengely mentén: 8 fok
- Perspective: 30 fok
- Extrude Depth: 50 pt
- Bevel: Tall-Round
A többit hagyjuk alapértelmezetten!
Ez lesz az effekt eredménye. Ha nem akarunk vele tovább bíbelődni, maradhat így is, de számomra kicsit olyan hatása van, mintha a fürdőben állnék szemben a fallal, ahová Mario-t rakta ki csempékből a burkoló:
Azért van ez a hatás, mert minden négyzetre külön kerül alkalmazásra a 3D effekt. Ha csoportosítjuk a négyzeteket, pofásabb lesz szerintem. Ehhez első körben kapcsoljuk ki a Appearance panelen az alkalmazott 3D Extrude & Bevel effektet, hogy az alap grafikát szerkeszthessük, majd válasszuk az Object > Live Paint > Expand parancsot:
Ha ezzel megvagyunk, akkor válasszuk a Magic Wand Tool-t (“y”), majd kattintsunk duplán az ikonjára, hogy előhozzuk a beállításait. A Fill Color checkbox legyen aktív, a Tolerance értéket pedig vegyük le 0-ra:
Most a varázspálca segítségével kattintsunk valamelyik négyzetre Mario-n (én a fehérrel kezdtem). Látható, hogy az azonos színű területek kijelölődnek.
A kijelölést követően válasszuk a Pathfinder palettáról a Unite lehetőséget, hogy a kijelölt négyzeteket egy objektummá konvertáljuk:
A továbbiakban ismételjük meg ezeket a mozdulatokat minden színnel, ahogyan a képeken is látható néhány lépés:
Ha minden jól ment, valami nagyon hasonló lesz az eredmény. Az azonos színnel kitöltött területeket egy alakzatként kezeljük tovább:
Ha ez megvan, akkor pipáljuk vissza a 3D Extrude & Bevel effektet, hogy újra aktiváljuk azt a figuránkra. Íme az eredmény. Szerintem így egy fokkal jobban fest:
4. lépés
Már csak annyi van hátra, hogy valamiféle környezetbe helyezzük Mario-t. A képen látható módon hozzunk létre két téglalapot. Az egyik a talaj lesz, a másik pedig a háttér:
Ezek után töltsük ki az alsó, illetve a felső téglalapot a képeken láthatóhoz hasonló színátmenetekkel:
Ha ez megvan, akkor igazítsuk Mario-t középre, majd készítsünk róla egy másolatot:
Legyen kijelölve a másolat, majd válasszuk az Object > Expand Appearance menüpontot:
Kitöltőszínnek válasszunk feketét:
Az immár teljesen fekete másolatot igazítsuk az eredeti figurához, majd kissé forgassuk el és válasszuk a Pathfinder palettáról a Unite gombot, hogy egyesítsük az alakzatunkat:
Ezt követően az Appearance panelről fx > Distort & Transform > Free Distort opciót választva kezdjük el az árnyék kialakítását:
A Free Distort beállításainál az alakzat körül lévő fogópontok segítségével torzítsuk azt valami hasonló módon, mint a képen látható:
Méretezés, igazítás és finomhangolás után valami hasonló lesz az eredmény:
Ha eddig megvagyunk, akkor fx > Blur > Gaussian Blur effektet válasszunk, hogy elmossuk kicsit a peremeket. A felugró ablakban adjunk meg 20 körüli Radius értéket:
Már csak egy dolog van hátra. Változtassuk meg az árnyég kitöltőszínét az alábbi képen látható áttetszőből sötétzöldbe tartó színátmenetre:
A végeredmény az alább látható pixel art stílusú, mégis modern Mario figura: