Jak vytvořit profesionální záhlaví webové stránky v Photoshopu

Photoshop CC 2014 je ideální nástroj pro tvorbu profesionálních obrázků pro váš web, včetně bannerů. Při navrhování prvního banneru zachovejte jednoduchý design, aby grafika nebyla přeplácaná. Pokud má vaše firma firemní barvy a písmo, můžete je v banneru použít.

Krok 1 – Vytvoření nového dokumentu

Spusťte Photoshop, stiskněte Ctrl+N nebo zvolte Soubor → Nový. V dialogu zadejte požadovanou šířku a výšku, např. 900 px × 150 px, a klikněte na OK.

Krok 2 – Pozadí

Pokud chcete jednotné pozadí, klikněte na ikonu popředí barvy v panelu nástrojů, vyberte barvu a pomocí Obdélníkového nástroje vyplňte celý banner. V tomto tutoriálu však použijeme dva překrývající se gradienty.

Krok 3 – První gradient

Vyberte Gradient nástroj, v horní liště zvolte přednastavený černobílý gradient a táhněte kurzorem z horní části plátna dolů přes banner. Uvolněním tlačítka aplikujete gradient.

Krok 4 – Text

Aktivujte Textový nástroj (Horizontal), přetáhněte oblast na banner a napište požadovaný text. V horní liště nastavte typ písma, velikost i barvu. Umístěte text tak, aby byl vodorovně vycentrovaný na levé straně banneru.

Krok 5 – Přidání loga nebo obrázku

Vyberte Soubor → Otevřít a načtěte obrázek (logo, fotografii apod.). Pak zvolte Vrstva → Duplikovat, jako cíl vyberte otevřený banner (např. „Untitled‑1“) a potvrďte. Obrázek se tak objeví jako nová vrstva.

Krok 6 – Úprava velikosti obrázku

Vyberte Úpravy → Transformace → Měřítko. Přetáhněte jeden z rohů výřezu, držte Shift pro zachování poměru stran a stiskněte Enter. Přesuňte obrázek na pravou stranu banneru.

Krok 7 – Výběr barvy z obrázku

Klikněte na ikonu popředí barvy, v editoru barev klikněte na pravou část banneru a tím načtěte barvu z obrázku. Potvrďte OK.

Krok 8 – Gradientový pruh

Vyberte Obdélníkový nástroj, v nastavení výplně zvolte Gradient a táhněte od levé strany obrázku až k levému okraji banneru. Vytvoří se pruh s gradientem odpovídajícím vybrané barvě.

Krok 9 – Průhlednost gradientu

V panelu Vrstvy najděte vrstvu „Rectangle 1“, přetáhněte ji pod vrstvu s textem (třetí shora). V nastavení opacity snižte hodnotu na cca 50 %, aby se vrstvy prolínaly a vytvořily bohaté pozadí.

Krok 10 – Styl písma – Emboss

Vyberte textovou vrstvu, zvolte Vrstva → Styl vrstvy → Broušení a reliéf. V nastavení stylu zvolte typ „Emboss“ a posuňte posuvník Depth na přibližně 225 % – mírný reliéf.

Krok 11 – Saténový efekt

V okně stylu vrstvy aktivujte možnost Satin. Nastavte režim prolnutí na Multiply a opacity na cca 15 %. Potvrďte OK.

Krok 12 – Uložení pro web

Vyberte Soubor → Uložit pro web (Legacy). Jako formát zvolte JPEG a nastavte kvalitu obrázku na 75–80 %. Tím získáte soubor s malou velikostí, který se rychle načítá. Klikněte na Uložit, vyberte umístění a poté soubor vložte do své webové stránky.