Photoshop – Jak se dělá reklama na MS v hokeji

Hokejové mistrovství 2016 již klepe na dveře a já jsem se rozhodl udělat jednoduchý tutoriál, na jehož konci vznikne čtvercový banner 300×300 px. Nejde o žádnou profi reklamu, která poběží na internetu, ale opět v našem tutoriálu jde hlavně o postup a vysvětlení, jak si poradit s pár texturami a dojít k určitému výsledku.

Cíl dnešního tutoriálu byl jasný. Vytvořit prostředí ledové plochy s červenou čárou a pukem, který má na sobě logo MS 2016 (určité odlišnosti puku s originálem, mi hokejový fandové snad prominou :-).

Začneme tak, že si ve Photoshopu vytvoříme plochu o rozměru například 800×800 px a pro webový banner nám stačí rozlišení 72 dpi. Vždy je lepší dělat návrhy větší, nikdy nevíte, kdo si vzpomene, že chce větší rozměr banneru a proto vždy dělám montáže s určitou rezervou. Plochu vyplníme lehce modrou barvou, jako je to na obr. 01 a nastavíme hodnoty barvy +- RGB 119.215.225.

obr. 01 plná plocha barvy

– Stáhněte si kompletní tutoriály kanálu dtpko.cz bez reklam –

Po vyplnění této plochy začneme tvořit červenou čáru. Zde se dostávám poprvé v tomto tutoriálu do situace, kdy si koleduju o komentáře, že puk a čára nejsou k sobě v ideálním poměru. Tak pro hokejisty se dobrovolně přiznávám, že o tom vím, a je to záměr, jinak by byl puk moc malý, tak mě prosím v komentářích nekamenujte 🙂 K vytvoření červené lajny použijeme nástroj Laso (L) a vyznačíme plochu o přibližné velikosti, jako je to na obr. 02.

obr. 02 – Výběr pomocí nástroje laso na červenou lajnu

Vyplníme výběr červenou barvou (já jsem vyplnil hodnotou RGB 255.0.0) a nastavíme vrstvě prolnutí na 80%. Obr. 3

Obr. 03 – Vyplnění červenou barvou

Nyní si tuto čáru rozostříme přes filtr Gaussovské rozostření (filtry/rozostření). Nastavíme hodnotu 8 a kliknete na OK.

Obr. 04 – Rozostření Gaussian blure

Nyní si otevřeme soubor skrabance.jpg obr. 05 a umístíme za pomoci zvětšení (transformace) přes naši modrou plochu s červenou čárou. Této vrstvě dáme režim “Závoj” a výsledek by měl vypadat jako na obr. 06

Obr. 05 – škrábance, soubor ke stažení na konci článku…

Obr. 06 – Překrytí vrstvy v režimu “závoj”

Teď na plochu přidáme ještě trochu sněhu a proto si otevřeme soubor sníh textura.jpg obr. 07 a opět s touto vrstvou překryjeme celou naši plochu a dáme vrstvě režim překrýt. Obr. 08

Obr. 7 – Textura sněhu ke stažení na konci článku…

Obr. 08 – Aplikovaná textura sněhu

Teď se pustíme do vytvoření puku. Zvolíme si výběr, ale tentokrát (eliptický výběr) kruh a vyplníme černou barvou, jako je to na obrázku 9 a 10

Obr. 09 – Kruhový výběr pro vyplnění černou barvou

Obr. 10 – Vyplnění černou barvou

Opět na tuto vrstvu aplikujeme rozostření (Gaussovské) o hodnotě kolem 5. Po tomto rozostření na vrstvu dvakrát poklepeme a nastavíme styl vrstvy “Profil” a hodnoty dle obr. 11.

Obr. 11 – Nastavení stylu vrstvy na profil

Nyní si umístíme logo MS 2016 (logo ms2016.ai) a to tak, že ho přetáhneme myší do našeho obrazu a vložíme jako inteligentní objekt. Zmenšíme ho do středu našeho puku, za použití transformace a můžeme ho třeba lehce pootočit. obr. 12.

Obr. 12 – Umístěné logo MS 2016

Můžeme přidat puku lehký stín, a to buďto přes styl vrstvy, jako jsme přidávali nyní efekt profil, nebo tak, že si vyplníme černou barvou stejný tvar jako má puk, který rozostříme, a vrstvu umístíme pod vrstvu s naším pukem. Puk se stínem by mohl vypadat podobně jako na obr. 13.

Obr. 13 – se stínem si pohrajte, někdy méně znamená více…

Nyní budeme vytvářet stopu na ledě po projetí našeho puku. Vytvoříme si výběr, jako je to na obr. 14 a tento výběr invertujeme Ctrl+I nebo jablko+I. Pomocí tohoto výběru aplikujeme masku na naši vrstvu se sněhem. Takto aplikovaná maska na sněhové vrstvě nám vytvoří dojem, že puk po projetí ledu cestu očistil. Vrstvě dáme režim překrýt a vrstvu zduplikujeme. Zduplikované vrstvě masku smažeme a nastavíme ji krytí na 30 %. Pokud této duplikované vrstvě budeme měnit hodnotu krytí, nastavíme tak intenzitu stopy, kterou puk na ledě zanechal. (trošku složitější krok bude ukázán ve videu k tomuto tutoriálu) obr. 15.

Obr. 14 – výběr pro stopu

Obr. 15 – vytvořená stopa

Máme skoro hotovo. Pro lepší dojem naší montáže můžeme ještě se štětcem v režimu brush, v nové vrstvě a za použití bílé barvy “obtáhnout kraje této stopy a vytvoříme tím dojem nepravidelné sněhové čáry. Ideálním štětcem pro tento efekt bude nějaká “tečkovaná struktura”.

Nyní už jen zbývá dopsat nějaký nápis a banner je hotov. Pro text jsem použil kulatější font – Helvetica Rounded – a máme hotovo. obr. 16

Obr. 16 – Finální výsledek banneru

Do jaké míry je náš banner reálný či nikoli, zde můžeme diskutovat :-). Vy co nás navštěvujete pravidelně již víte, že naše tutoriály mají za úkol úkázat cestu, jak určité věci ve photoshopu vytvářet.

Pokud se vám zdá, že tutoriál není až tak podrobný jak byste potřebovali, možná budete rádi za video s kompletním postupem krok za krokem. zde

Závěr

Vytvořili jsme banner poskládáním a naefektováním textur. Možnost, jak ho ještě vylepšit, už nechám na vás. Kdyby přeci jen někdo chtěl pro svůj hokejový server tento banner využít, dávám volně ke stažení editovatelné PSDčko 😉 Češi do toho!

Kompletní videotutoriál jak vytvořit banner najdete zde

Soubory z tutoriálu ke stažení:

Logo MS 2016
Textura škrábance
Textura sněhu