Pravidla Ucet
Nepřihlášen

Článek

Menu

Photoshop - vektor
Napsal: bedikk
Přidáno: 05.08. 2010

Líbí se vám grafika z projektu Kingdom Defender? Můžete si udělat takovou bez nějakých velikých zkušeností s grafickými editory. Pojďme si ukázat, jak se dá vytvořit takový robot, třeba do nějaké hry. Upozorňuji, že článek je převeden z prvního VCH.

Nejdříve si to chce rozmyslet, co vůbec chceme kreslit. Já zvolil nějakého pojízdného robota, protože se mi to jako ukázka zdá docela dobré a na tvorbu vcelku jednoduché. Dobré je si předem říci odkud půjde světlo, řekněme, že je poledne, tak tedy dáme osvětlení shora. Také to chce přesně vědět, na jakém podkladu se bude objekt pohybovat, to kvůli outlinu. Pokud bychom volili třeba jako pozadí vesmír, tak nemůžeme dát outline černý, jelikož by se úplně ztratil, ve vesmíru bychom volili nejspíš bílý outline. Já ale chci robota někde na nějaké louce, svítí slunce, je krásné letní počasí .. tedy hezky azurová obloha. Proto zvolím outline černý. Ještě podotknu, že pokud budete chtít robota zanimovat, nejlepší bude použít Photoshop CS3, popřípadě image ready. Můžeme se tedy pustit do samotné práce.

Vytvoříme si nový dokument, rozměry nechám na vás. Jelikož někteří třeba chtějí použít robota do hry, tak doporučuji vytvořit dokument o velikosti herní obrazovky, kam budete kreslit všechny objekty ve hře, tím si v podstatě můžete kontrolovat, že vše kreslíte v jednom stylu, popřípadě vše k sobě pasuje a ladí. Já si tedy vytvářím dokument o rozměrech 1024x768.

Čím začneme? Já si nejprve vytvořím nějaké pozadí do hry. Na pozadí dám modrý přechod (na spodu světlá a na vrchu tmavší). A před něj si vytvořím nějakou trávu, jdeme tedy na to. Vezměte nástroj Přechod a nastavte přechod ze světle modré do tmavě modré (viz minulý článek o barvách). Tímto přechodem vyplňte celou plochu. Nyní vytvoříme novou vrstvu a vezmeme si nástroj Pero (viz tutoriál Základy práce s Perem). Pomocí pera začneme tvořit nějakou stylizovanou trávu.

Cestu vedeme od kraje ke kraji, následně mimo obrázek až úplně dospod a kousek pod obrázkem na druhou stranu a následně cestu uzavřeme. Měli by vám zmizet body a vidět by měla být pouze vytvořená cesta. Zkontrolujte, zda je cesta v režimu Přidat k oblasti cesty (+) a klepněte někam do cesty a zvolte Vytvořit vektorovou masku. Nyní budeme potřebovat opět nástroj Přechod, zvolte ho tedy. Chceme trávu, tedy zelenou, vyměňte zelenou za modrou a vytvořte přechod ve vektorové masce. Jelikož chceme obrázku dát určitý styl, tak klepněte pravým tlačítkem na vrstvu s trávou a zvolte Volby prolnutí. Úplně poslední nabídka se nazývá Vytažení a přesně to chceme. Vše nechte defaultní, akorát barvu outlinu nastavte černou. Dá se říci, že máme nějaké pozadí.

Nyní přistoupíme k tvorbě samotného robota. Začneme hezky od pásů. Nezapomeňte vytvořit novou vrstvu. K tvorbě pásů použijeme nástroj Zaoblený obdélník. Poloměr zaoblení zvolte 6 ob. Nyní je jedno, jak veliký ten obdélník bude, protože ho budeme ještě upravovat. Vytvořte tedy někde obdélník, ale nezapomeňte mít nástroj v režimu Cesty (na liště nahoře hned 2. Ikona). Nyní opět zvolíme nástroj Pero, a jelikož chceme body vpravo nahoře posunout níž, tak podržíme ctrl a pomocí tohoto nástroje vybereme všechny body v místě kde chceme (klasicky, jako když chcete v průzkumníku vybrat více dokumentů). Pomocí směrových kláves tyto body posuneme dolů.

Tvar pásů upravíme na druhé straně. Následně vytvoříme vektorovou masku a vrstvu vylejeme šedivou barvou. Nakonec přidáme vytažení.

Ty pásy by také měli na něčem držet, takže uděláme jakousi nohu. Stačí obyčejný nástroj obdélník. Následně opět vytvoříme vektorovou masku, vylejeme šedivou a vytvoříme vytažení.

Takto by teoreticky mohla vypadat noha od robota, teď jí jdeme přidělat nějaké detaily. K tomu použijeme nástroj Elipsa. Podržíme Shift a vytvoříme elipsu někde na pásech.

Přepněte na nástroj Pero, klepněte do cesty pravým tlačítkem a vytvořte Vektorovou masku (ujistěte se, že jste v nové vrstvě). Nyní zvolte nástroj Pro výběr cesty. A klepněte na obvod kruhu.

Nyní si pomocí kláves CTRL+C vybraný kruh zkopírujeme a pomocí CTRL+V ho opět do masky vložíme. Směrovými klávesami (rozumíme šipky) posuňte nově vzniklý kruh o něco níže, než je kruh 1.

Ještě nemáme hotovo, nyní musíme nastavit druhý kruh, aby se odečetl od toho prvního .. toho docílíme tak, že nahoře přepneme na Odečíst od oblasti cesty. Přepněte tedy na nástroj Pero (pokud ho již nemáte) a přepněte, jak jsem řekl.

Pokud toto máte, můžete vzít nástroj Plechovka barvy a celou vrstvu vylijte černou barvou. Nyní snižte krytí na 35%.

Jelikož jde světlo shora, a my jsme chtěli dosáhnout efektu prohlubně, tak stín musí být nahoře.

Toto ovšem nestačí, potřebujeme též světlo, na spodní straně prohlubně. Když už máme stín, tak stačí tuto vrstvu duplikovat (klepněte pravým tlačítkem na vrstvu a vyberte Duplikovat. Vytvořila se vám nová vrstva se stínem, ale my z toho chceme udělat světlo, proto klepněte na miniaturu cesty ve Vrstvách.

Cesta se vám zvýrazní, tak vemte nástroj Pero a klepněte do cesty pravým tlačítkem a zvolte Libovolná transformace. Znovu klepněte do tvaru pravým tlačítkem a nyní zvolte Převrátit svisle a stiskněte Enter.

Jelikož je to světlo, tak musí být bíle, proto vezměte nástroj Plechovka barvy a vylijte tuto vrstvu bílou barvou. Nyní jsem zjistil, že mám obě vrstvy moc nízko, proto podržte CTRL a klepněte na obě vrstvy se stínem a světlem. V Nástrojích úplně nahoře máte nástroj Posun, tím posuneme obě vybrané vyštvi o něco výš.

Nebylo by na škodu přidat ještě jednu menší prohlubeň, na druhou stranu pásů. Proto vyberte obě vrstvy, jak stín, tak světlo, klepněte na ně pravým tlačítkem myši a zvolte Duplikovat. Nechte si obě vrstvy vybrané a vezměte si nástroj Obdélníkový výběr. Klepněte pravým tlačítkem do obrázku a zvolte Libovolná transformace. Stiskněte klávesu Shift a chytněte myší jedno ROHOVÉ vodítko a zmenšete obě vrstvy. Při této příležitosti můžete i novou prohlubeň zároveň umístit pomocí směrových kláves.

Nakonec potvrďte entrem. Nyní se dá říci, že máme jednu nohu, zbývá nám na ní přidat světlo. Klepněte na miniaturu vektorové masky základního trojúhelníkového tvaru s pásy a cesta se vám vybere. Přepněte na nástroj Pero a zkopírujte cestu tvaru pomocí CTRL+C. Nyní si vytvořme novou vrstvu a pomocí CTRL+V do ní zkopírujte cestu pásů. Nyní znovu přepněte Pero do režimu Odečítání (viz popis výše). Zkontrolujte, jestli je cesta pásů vidět a Pero máte v režimu odečítání. Nyní můžeme vybrat cestu, na které (POZOR) nebude světlo. A poté z těchto cest vytvořte Vektorovou masku.

Nyní můžeme vektorovou masku vylít bílou barvou. Všimněte si, že nám světlo zasahuje i do prohlubně, to nechceme. Proto si klepněte na miniaturu vektorové masky, aby se vám cesta vyznačila a vezměte nástroj Elipsa, zkontrolujte, zda-li jí máte v režimu Cesty (Levá strana lišty) a Odečítání (Pravá strana lišty). Jestliže máte vyznačeny cesty, tak můžete pomocí elipsy odečíst přesně ten kus, co chceme, tedy prohlubeň.

Nezapomeňte snížit krytí na nějakých 35%. Nyní se dá říci, že máme spodní pás úplně hotov, vy si samozřejmě ještě můžete pohrát s nějakými detaily, to ale není nyní důležité. Nyní doporučuji všechny dosavadní vrstvy hodit do jedné skupiny a tu si pojmenovat třeba Noha. Vedle ikony pro tvorbu nové vrstvy máte Vytvořit skupinu. Nyní si vyberte všechny vrstvy, které chce do této skupiny zařadit a přetáhněte je do skupiny. Tu můžete pojmenovat (pro přehlednost) poklepáním na skupinu, také jí můžete zavřít a ušetřit tak prostor pro další vrstvy (šipečka vedle skupiny).

Nyní klepněte na skupinu pravým tlačítkem myši a zvolte duplikovat, pro vytvoření druhé identické nohy. Jelikož tuto nohu potřebujeme trochu posunout dozadu, tak zvolte nástroj Posun a celou skupinu posuňte o kus dozadu.

Nyní přejdeme k tvorbě samotného těla. Pro to si rovnou můžeme vytvořit skupinu Tělo, aby byl pořádek. Do této nové skupiny vytvořme novou vrstvu a pojďme vytvořit tělo. Zde vám ruku vést nemohu, takže říkám, vytvořte nějaké tělo, buď Perem, nebo můžete i využít nástrojů Obdélník, elipsa, jak již jsme si vyzkoušeli na začátku. Nezapomeňte si zkontrolovat, že máte Pero (obdélník, elipsa ..) v režimu Cesty a Přičítání(první ikona z těch na konci). Já využiji Zaobleného obdélníku.

Nyní můžeme vytvořit vektorovou masku a celý tvar vyliju šedivou barvou a nastavím Vytažení. Zde vidíte, že vše co dělám, dělám neustále dokola.

Teď se můžeme vrhnout na světlo, to uděláme stejně, jako v případě pásů. Klepněte na miniaturu vektorové masky, vemte Pero a zkopírujte tuto cestu. Nyní opět vytvoříme novou vrstvu a do ní vložíme zkopírovanou cestu. Nyní zkontrolujte, že jste v režimu odečítání a můžete odstřihnout tu část cesty, kterou nechcete, aby tvořilo světlo.

No a teď můžeme vytvořit vektorovou masku, celou vrstvu vylít bílou barvou a snížit krytí na 35%.

Základ těla máme, s detaily si můžete hrát později (i tak se nám ten tutoriál nějak natahuje). Přejděme nyní k hlavě. Vytvořme si skupinu hlava a tu posuňme ve Vrstvách NÍŽ, než tělo (kvůli krku, aby byl „za“ tělem). Do této nové skupiny si již standardně vytvoříme novou vrstvu. Teď nám bude stačit nástroj Obdélník (bez zaoblení), klasicky zkontrolujte režimy (cesty, přičítání) a pojďme udělat cestu krku.

Mohla by nám stačit takto jednoduchá, takže můžeme vytvořit vektorovou masku, vylít cestu barvou (klidně tmavší), nastavit vytažení a přidat odraz (světlo, viz výše – nebudu opakovat).

Nyní nebude na škodu udělat samotnou hlavu. K tomu už nám nestaří základní tvary Photoshopu (někomu možná ano), proto budeme muset použít Pero a vytvořit si cestu Hlavy. Směle do toho.

Cesta hlavy je tedy hotová, nyní stejně jako vše předešlé dokončíme vytvořením vektorové masky, vyplněním barvou, vytažením a přidáním světla.

Nyní nám nezbývá nic jiného, než vytvořit oči. Můžete si buď práci ulehčit a oči udělat jen elipsou, nebo můžete jako já vzít Pero a udělat hledí, jaké se dnes nosí, tedy po Cylonsku (kdo zná BattleStar Gallacticu).

Nyní je to jen a jen na vás. Dodělejte stíny a světla, vyhrajte si s detaily a uvidíte, že budete mít skvělý vektorový obrázek, třeba právě do vaší hry. Sami vidíte, že to nezabere moc času a kompletní grafika do menší hry (Kingdom Defender) i s animacemi se dá vytvořit během dvou dnů intenzivní práce. Pokud vám to s Perem nejde, tak nezoufejte a zkoušejte stále dokola, dokud vám Pero nesedne do ruky, zkuste třeba i něco obkreslovat atd. Hlavně nezapomeňte na 2 důležité klávesy ve spojení s Perem, a to CTRL, čímž můžete body vybírat a posouvat a ALT, kterým vytváříte ostré hrany. Kdybych zde v tutoriálu měl popisovat každou prkotinu a krok stále dokola, tak bychom zde byli do zítra, proto doufám, že jste vše pochopili a nyní pro vás není problém experimentovat a dodělat efekty. Dám pár tipů: Na Nohy by se hodilo nějaké žebrování, někam na (nebo nad) tělo bych viděl raketovou střílnu a dozadu výfuk. Pohrajte si a máte skvělého komiksového vektorového robota.

Váš robot může vypadat třeba takto:


Ostatní díly seriálu:
[05.08. 2010] - Photoshop - barvy
[05.08. 2010] - Photoshop - křivky
[05.08. 2010] - Photoshop - PixelArt
[05.08. 2010] - Photoshop - animace
Klíčová slova: photoshop ps cs3 vektor robot kingdom defender 2d grafika
 

Komentáře:

Napsal: godan
Přidáno: 13.08. 2010

Super tutoš ;) , nejenom že se mi tento styl grafiky líbí , ale díky tomuhle tutorialu si ho mužu vyskoušet :D.

Trvalý odkaz

Velkej Chytrák
Copyright (c) 2001-2010