Photoshop tutoriál: Vizuální styl TV NOVA během deseti minut - Grafika.cz - vše o počítačové grafice

Navigace:  » Úvodní stránka  » Rubriky  » Photoshop  

17. září 2007, 00.00 | Před několika lety přišel neznámý grafik na to, že stačí u kruhu udělat jeden
odlesk a vznikne působivý 3D efekt. Tak vznikla grafika systému MAC OS X. Tento
jednoduchý efekt ale nekonečným opakováním rychle zevšedněl, a když už by se
mohlo zdát, že se vytratil úplně, přijde televize NOVA s novým vizuálním
stylem... Pro nás je na této grafice důležitá jedna věc - je tak jednoduchá, že ji i začátečník
zvládne během několik málo minut. A tak je to skvělý námět na tutoriál.

Jak tato grafika vypadá, můžete vidět rovnou v televizi nebo např. na tomto obrázku:

Více lze zhlédnout zde (video a článek).

Pod uvedeným odkazem se mimo jiné dozvíte i to, že na rozdíl od veškeré předchozí grafiky je tato připravována pro formát 16:9 (tj. širokoúhlý formát, a ne standardní 4:3). Proto i my budeme připravovat obrázek v tomto poměru stran.

Já jsem pro tento článek zvolil rozměr 384 * 216 px. To proto, že jsem limitován maximální šířkou obrázku ve článku, vy ale můžete zvolit velikost jakoukoliv.

Začneme pozadím. Na tom je evidentně kruhový přechod z tmavě červené do černé. Proto i my přidáme přechod - v paletě Vrstvy (Layers) přidáme Přechod (Gradient).

Mohlo by se zdát, že nastavení Úhlu (Angle) nemá na výsledek u kruhového přechodu vliv. Opak je pravdou! Jak vidíte na následujících dvou obrázcích, úhel nastavený na 90° znamená, že se ošidíme o velkou část plochy.

Proto nastavíme Úhel (Angle) na 180° - i podle obrázku vidíte, že zasahuje až do krajů dokumentu. (Z toho lze jednoduchou úvahou vyvodit, že úhel určuje, o který kraj se přechod "zasekne". Pokud bychom jej nastavili směrem do rohu dokumentu, byl by přechod maximálně velký. Nám ale stačí do levého a pravého kraje - tj. oněch 180°.)

Nastavíme proto správný přechod. Na jedné straně tmavě červená barva (#8B3020), na straně druhé černá.

Na původním obrázku to sice není, ale my přidáme přechod ještě jeden, v podobě pruhu přes celý obrázek. Stejně jako minule, i nyní přidejte novou vrstvu přechodu s tím, že přechod bude z tmavě červené do průhledné a typ přechodu Zrcadlový (Reflected).

Poté stáhněte vrstvě Krytí (Opacity) na 30 % a vznikne zajímavý efekt:

To by pro pozadí prozatím stačilo. Přidáme kruh s logem.

Nástrojem Elipsa (Ellipse Tool) nakreslíme hodně tmavě červený (#210608) kruh doprostřed obrázku.

Aby svítil jako na první ukázce, přidáme vrstvě efekty vrstev. Dvakrát poklepejte na název vrstvy a začneme efektem Vnější záře (Outer Glow). Velikost (Size) je potřeba nastavit na opravdu velikou hodnotu, např. 51 px. Ostatních parametrů si nemusíme všímat (snad jen barva je standardně světle žlutá, tak ji změňte na bílou).

Efekt záře totiž znásobíme dalším efektem - Vržený stín (Drop Shadow). Tentokrát to nebude stín, ale záře, protože krytí efektu přepneme na Normální (Normal) a barvu na bílou. Krytí (Opacity) vytáhneme na 100 % a naopak Vzdálenost (Distance) stáhneme na 0 px - aby nebyla záře nikam posunutá (tím pádem není důležité nastavení úhlu). Parametry Rozsah (Spread) a Velikost (Size) poté zvyšujeme až do doby, než jsme s efektem spokojeni.

Záře je pěkná, kraj objektu je ale moc ostrý. Kdyby opravdu svítil tak jako na obrázku, zasahovala by záře i malinko dovnitř. Asi tak, jak tomu bude při použití dalšího efektu - Vnitřní stín (Inner Shadow). Opět nebude stínit, ale zářit a opět k tomu použijeme krytí Normalní (Normal) a bílou barvu. Vzdálenost (Distance) 0 px a Velikost (Size) jen malou - např. 4 px.

Na původním obrázku "svítí" uprostřed ještě další červené světlo. Mohli bychom nechat objekt červený a následně jej u krajů ztmavit do černé, ale tentokrát vyzkoušíme další z možností Photoshopu.

Tou je efekt Vnitřní záře (Inner Glow) s nastavením Zdroj: Střed (Source: Center). Jak jistě uhodnete, nebude se efekt vykreslovat od kraje, ale od prostředku. Barvu nastavte opět tmavě červenou (#8A3525), Vyseknutí (Choke) 9 % a Velikost (Size) 35 px.

Opravdický 3D efekt vykouzlí bílý odlesk. První si ale musíme připravit prostor, ve kterém bude odlesk vidět.

Nástrojem Elipsa nakreslíme opět kruh, tentokrát ale bílý a o něco menší než originální (jak správně hádáte, v něm bude zobrazený odlesk).

Tento objekt ale musíme ještě upravit. Pro následující kroky jsem skryl všechny ostatní vrstvy, vy to nicméně dělat nemusíte.

Nástrojem pro výběr bodu (bílá šipka) vybereme cestu.

Poté nástrojem Pero (Pen Tool) přidáme dva body tam, kde ukazuje obrázek.

A opět nástrojem pro výběr bodu (bílá šipka) posuneme zbylé tři body směrem nahoru, aby vytvořily ovál podobný tomuto:

Takto vypadají všechny vrstvy při 100% pohledu:

My jsme s tvarem spokojeni, takže načteme výběr této vrstvy (Ctrl + klik na vrstvu), vytvoříme vrstvu novou (Ctrl + Shift + Alt + N) zvolíme nástroj Přechod (Gradient Tool) nastavený z bílé do průhledné a původní vrstvu skryjeme:

Tímto přechodem nakreslíme něco podobné tomuto:

A vrstvě stáhneme krytí na přijatelných 50 %.

Nám to ale nestačí, takže krok zopakujeme a nakreslíme další přechod. Tentokrát pouze nahoře.

Takže se zobrazeným druhým přechodem bude obrázek vypadat takto. To už je lepší.

Pustíme se nyní do loga. Jakékoliv čtyřpísmené slovo obsahující "o" postačí. Třeba "azor" (nebo noha). Nástrojem pro text napíšeme toto slovo do nové vrstvy, přičemž barva textu není úplně bílá, ale světle červená (#FECFC8). Rovněž písmeno "o" nepíšeme, ale místo něj napíšeme dvě (nebo více) mezer. Toto "o" totiž nakreslíme, podobně jako je tomu v originálním logu.

Použijeme náš starý známý nástroj Elipsa. Barva zůstává stejná - #FECFC8.

Od tohoto kruhu odečteme pár proužků. Než je začneme kreslit, přepneme kreslení na odečítání - viz následující obrázek.

Poté nástrojem Obdélník (Rectangle Tool) nakreslíme obdélník ...

...a zkratkou Ctrl + T jej pootočíme. Pokud se vám otáčí celý tvar, tak nejprve vyberte obdélník černou šipkou.

Poté jej stejným nástrojem (černou šipkou) přetáhněte bokem spolu se stisknutou klávesou Alt (tvar se bude kopírovat). A to dvakrát, jak ukazuje obrázek.

Zde je již stoprocentní pohled:

Nakonec dotvoříme pozadí, na kterém budou různě velké a různě průhledné "fleky". K tomu si nejprve musíme vytvořit vhodný štětec. Proto vybereme nástroj (Brush Tool) a najdeme paletu Stopy (Brushes).

Na první záložce nastavíme Průměr (Diameter) na cca 18 px, Tvrdost (Hardness) na 0 % a Mezery (Spacing) na 350 %. Vespod vidíte aktuální náhled stopy.

Přepneme na záložku Dynamika tvaru (Shape Dynamics), kde nastavíme Kolísání velikosti (Size Jitter) na 100 %. Tím se bude velikost štětce náhodně měnit.

Teď ještě ta průhlednost. Tu obstará záložka Další dynamika (Other Dynamics) a volba Kolísání krytí (Opacity Jitter), opět nastavená na 100 %.

Teď už jen vytvořit novou vrstvu, nastavit barvu na #FECFC8 a čmárat štětcem sem a tam.

Poté vrstvě nastavíme průhlednost na 30 % ...

... vytvoříme nový štětec, který bude menší a s většími rozestupy ...

...a opět do nové vrstvy čmáráme sem a tam. Tentokrát jsem nastavil vrstvě krytí 70 %.

A to by mohlo být vše. To, zda je nadpis propagující deset minut práce pravdivý, je individuální záležitost (doufám, že jste si svou práci stopli), já jsem v tomto čase stihnul i posvačit.

Poznámka na konec: Oproti původnímu obrázku je tento trochu vybledlý - hodilo by se jej malinko "zčervenit". Abych nemusel upravovat původní vrstvy, přidal jsem vrstvu úprav Vyvážení barev (Color Balance) a ve středních tónech posunul první jezdec směrem do červené. Stejně tak jsem vytvořil ještě jednu vrstvu, do které jsem opět čmárnul štětcem - tentokrát ale tím nejtvrdším. To vytvořilo další odlesky (podobné těm z fotek). Dále jsem nasimulovat srdce z původního obrázku - nástrojem vlastní tvar jsem nakreslil srdce, umazal jednu jeho část, uložil jako cestu a tu vytáhl jedním ze standardních štětců. A to je už opravdu vše. Hodně štěstí při tvorbě!

Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.