Tutoriál pro Illustrator – baterka ve stylu iOS

V tomhle návodu si pěkně procvičíte tvorbu gradientů a za pomoci několika jednoduchých tvarů si uděláte efektní ikonu baterky v podobném duchu, jako používá Apple např. v iPhonech.

poznamkaPozn.: Tutoriál je psán pro Illustrator CS3, ale tvořit můžete takřka v jakékoliv verzi programu. Návod vyžaduje základní znalosti aplikace, doba trvání tvorby grafiky je asi půl hodiny (podle zkušeností). Uvedené klávesové zkratky platí pro Mac OS X, uživatelé Windows si nahradí Cmnd za Ctrl a Opt za Alt. Všechny obrázky níže si můžete rozkliknout na větší náhled.

1) Ikonka, kterou budeme vytvářet, bude moci být umístěna na jakékoliv pozadí vyjma bílého. Abychom tedy viděli, co děláme, vytvoříme si prvně libovolné barevné pozadí. Může být jednolité, může to být přechod… cokoliv. Já zvolil takovouhle jednoduchou mřížku přechodů.

ILL-tut-battery-icon_1

2) Vrstvu s naším pozadím si zamkněte a vytvořte nad ní vrstvu novou, ve které budeme pracovat. V ní natáhněte obyčejný obdélník a chvilku si pohrajte s přechodem. Čím víc se mu budete věnovat, tím lepší bude výsledek. Nemusíte ho dělat samozřejmě úplně totožný jako na obrázku, ale zkuste se mu co nejvíce přiblížit. Střídejte jezdce v různých odstínech černé. Pokud budete chtít vyvořit ostřejší „hranu“, dejte dva sousední jezdce co nejblíž sobě, klidně třeba i na stejnou pozici. Na závěr změňte obdélníku režim prolnutí na Závoj.

ILL-tut-battery-icon_2

3) Natáhněte další obdélník, který bude o malinko přesahovat na bocích ten původní, výšku a umístění vidíte na obrázku. Decentně mu zaoblete rohy (Efekt > Stylizovat > Zaoblení rohů), dejte Objekt > Rozdělit vzhled a opět přichází hrátky s gradientem. Přiřaďte mu stejný přechod, jako prvnímu obdélníku (ať si ulehčíme práci) a potom ho malinko upravte. Přidejte dva světlejší jezdce na oba kraje a dva z vnitřních jezdců zesvětlete až skoro na bílou barvu. Režim krytí nechte na Normální! Vše je zřejmé z dalšího obrázku.

ILL-tut-battery-icon_3

ILL-tut-battery-icon_4

4) Tento zaoblený obdélníček zkopírujte dolů (Cmnd+C / Cmnd+B), posuňte ho kousek nahoru a malinko zmenšete ze stran.

ILL-tut-battery-icon_5

5) Označte ten větší spodní zaoblený obdélník a dvakrát (!) ho zkopírujte nahoru (Cmnd+C / Cmnd+F / Cmnd+F). Horní kopii posuňte kousíček dolů, označte obě kopie a pomocí Cestáře je odečtěte. Vzniklému proužku změňte režim prolnutí na Závoj.

ILL-tut-battery-icon_6

6) To stejné udělejte i na spodní hraně. Tzn. stejný postup jako v předchozím kroku, jen tu horní kopii posunete před odečtením samozřejmě nahoru.

ILL-tut-battery-icon_7

7) Všechny tyhle čtyři objekty zkopírujte, svisle převraťte a umístěte na horní část baterky.

ILL-tut-battery-icon_8

8) Natáhněte další obdélník, zaoblete mu rohy, pak Objekt > Rozdělit vzhled, zarovnejte ho na střed s celou dosavadní „baterkou“ a posuňte v hierarchii objektů zcela dozadu.

ILL-tut-battery-icon_9

9) Stejným postupem jako v bodě 5 vytvořte jeden úzký lesklý pásek nahoře.

ILL-tut-battery-icon_10

10) Zkopírujte dolů (Cmnd+C / Cmnd+B) ten prostřední největší obdélník z kroku 2, trošku ho ze stran zmenšete, změňte mu režim krytí na Normální a přiřaďte mu přechod podle obrázku (hodnoty barev v RGB).

ILL-tut-battery-icon_11

11) Zkopírujte znovu ten největší obdélník z bodu 2, ale tentokrát nahoru (Cmnd+C / Cmnd+F). Tužkou nebo Perem nakreslete podobnou vlnku jako na obrázku, označte ji i kopii obdélníka a na Cestáři klikněte na Rozdělit. Potom vzniklou skupinu rozdělte (Cmnd+Shift+G), spodní část smažte a horní snižte krytí na cca 75 %. Potom ještě označte tenhle objekt, do výběru přidejte ten největší „průhledný“ obdélník a k nim ten se zeleným přechodem a všechny tři pošlete zcela dozadu.

ILL-tut-battery-icon_12

ILL-tut-battery-icon_13

12) Někde bokem si natáhněte malý bílý kruh, zkopírujte ho dolů (Cmnd+C / Cmnd+B) a této spodní kopii snižte krytí výplně na nulu. Označte oba kruhy, zkratkou W si vezměte nástroj Prolnutí, stiskněte Enter, čímž vyvoláte volby nástroje a tam nastavte rozestupy na 50 určených kroků. Potvrďte a následně stiskněte Cmnd+Opt+B, abyste oba kruhy prolnuli.

ILL-tut-battery-icon_14

13) Vzniklý objekt natvrdo zdeformujete na spláclou elipsu, tu rozkopírujte a umístěte podle obrázku.

ILL-tut-battery-icon_15

14) Udělejte ještě jednu kopii této elipsy z prolnutých objektů, dejte jí černou barvu, zvětšete a umístěte zcela dozadu pod baterku jako stín.

ILL-tut-battery-icon_16

15) Jednoduchým zmenšením vnitřního barevného gradientu a změnou jeho barevnosti pak můžete vytvořit ikonku v různých fázích „vybití baterky“.

ILL-tut-battery-icon_17

blog comments powered by Disqus
© 2005–2018 Mach Napište mně