Photoshop – Maskování vlasů a jak udělat přesnou masku
18.4.2016
Indesign – Jak vytvořit rozostřený text s možností editace
16.5.2016
Ukázat vše

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.

 

– reklama Google Adsense –


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.

01_plna plocha 30_10_10_0

obr. 01 plná plocha barvy

 


– reklama Seznam Sklik –

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.

02_cervena cara

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

03_cervena cara

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.

04_cervena cara rozostreni

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

05_skrabance

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

06_skabance rezim zavoj

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

07_snih

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

08_snih prekryt

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

09 puk a

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

10 puk b

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.

11 puk c

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.

12 puk d

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.

13 puk e

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.

14 puk f

Obr. 14 – výběr pro stopu

15 puk g

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

PSD kompletního tutoriálu




– reklama Google Adsense –


– reklama Sklik –


dtpko.cz
dtpko.cz
Snahou redaktorů portálu dtpko.cz je vytvářet takový obsah, který není jen odborný. Snažíme se zde publikovat články i pro pobavení a inspiraci. Portál dtpko.cz byl založen roku 2013. redakce@dtpko.cz

3 Comments

  1. Petr napsal:

    Dobrý den, účím se a zkouším. Nejde mi vytvořit stopa ve sněhu. Když vyberu laso a podržím Alt tak neudělám rovnou čáru. Používam MAC, Ps2015.5. Poradíte mi?
    Děkuji

    • Profile photo of dtpko.cz dtpko.cz napsal:

      krok 1 – Zmáčknout levé tlačítko myši a současně levý ALT
      krok 2 – Pustit levé tlačítko myši a stále držet levý ALT a hejbnout myší kamkoli
      Krok 3 – kliknout levým tlačítkem tam, kde chci mít ohraničení lasem…

      snad pomůže 😉

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *