Nástroje pro web v aplikaci Photoshop usnadňují vytváření jednotlivých součástí pro webové stránky nebo vytváření kompletních webových stránek v přednastavených nebo uživatelem upravených formátech.

  • K návrhu webových stránek a elementů uživatelského rozhraní webových stránek použijte vrstvy a řezy. (Další informace naleznete v tématech Vrstvy a Rozdělení webových stránek na řezy.)

  • Chcete-li experimentovat s různými kompozicemi stránky nebo exportovat varianty stránky, použijte kompozice vrstev. (Viz Kompozice vrstev.)

  • Vytvářejte text nebo grafiky tlačítek s efekty přechodu myši pro import do programů Dreamweaver nebo Flash.

  • Vytvořte webové animace pomocí panelu Animace a pak je exportujte jako animované obrazy GIF nebo soubory QuickTime. Viz Vytváření animací snímků.

  • Pomocí aplikace Adobe Bridge vytvořte webovou fotogalerii pro rychlý převod sady obrázků na interaktivní web s využitím profesionálně vyhlížejících šablon.

Video týkající se navrhování webových stránek pomocí aplikací Photoshop a Dreamweaver najdete na webu Access Photoshop from Dreamweaver to enhance web image (Přístup k aplikaci Photoshop z aplikace Dreamweaver pro tvorbu dokonalejší webové grafiky).

Vytváření obrazů s efektem přechodu

Efekt přechodu je tlačítko nebo obraz na webové stránce, který se změní, když je nad ním ukazatel myši. Chcete-li vytvořit efekt přechodu, potřebujete alespoň dva obrazy: primární obraz pro normální stav a sekundární obraz pro změněný stav.

Photoshop obsahuje mnoho užitečných nástrojů pro vytváření obrazů s efekty přechodu:

  • Použijte vrstvy pro vytvoření primárního a sekundárního obrazu. Vytvořte obsah v jedné vrstvě, pak duplikujte tuto vrstvu a upravte ji, abyste vytvořili podobný obsah se zachováním zarovnání mezi těmito vrstvami. Když vytváříte efekt přechodu, můžete změnit styl, viditelnost nebo polohu vrstvy, provést úpravy barev nebo tónů nebo aplikovat efekty filtrů. Viz Duplikování vrstev.

  • Můžete také použít styly vrstvy k aplikování takových efektů, jako je překrytí barvou, vržený stín, záře nebo reliéf, na primární vrstvu. Chcete-li vytvořit pár obrazů pro efekt přechodu, zapněte nebo vypněte styl vrstvy a uložte obraz v každém z těchto stavů. Viz Efekty a styly vrstvy.

  • Použijte přednastavené styly tlačítek z panelu Styly k rychlému vytvoření tlačítek s efektem přechodu se stavy normální, myš nad a myš dole. Nástrojem obdélník nakreslete základní tvar a aplikujte na něj styl, například Zkosené – normální, který obdélník automaticky změní na tlačítko. Pak zkopírujte tuto vrstvu a aplikujte další přednastavené styly, například Zkosené – myš nad, které vytvoří další stavy tlačítka. Uložte každou vrstvu jako samostatný obraz a tím vytvořte hotovou sadu tlačítka s efektem přechodu.

  • Pomocí dialogového okna Uložit pro web a zařízení můžete ukládat obrazy s efektem přechodu ve formátu kompatibilním s webem a s optimalizovanou velikostí souboru. Viz Optimalizace obrazů.

Poznámka:

Když uložíte obrazy pro efekt přechodu, použijte nějakou konvenci pojmenování k rozlišení primárního obrazu (stavu bez efektu přechodu) od sekundárního obrazu (stavu s efektem přechodu).

Po vytvoření sady obrazů pro efekt přechodu v aplikaci Photoshop použijte Dreamweaver k umístění obrazů na webovou stránku a k automatickému přidání kódu v Javascriptu pro akci efektu přechodu.

Export do Zoomify

Na web můžete umístit obrazy ve vysokém rozlišení, které si uživatelé mohou zvětšit a posouvat v nich výřez, aby viděli více detailů. Obraz v základní velikosti se stáhne za stejnou dobu jako soubor JPEG s ekvivalentní velikostí. Photoshop exportuje soubory JPEG a soubor HTML, který můžete umístit na svůj webový server.

  1. Zvolte Soubor > Export > Zoomify a nastavte volby exportu.

    Šablona

    Nastaví pozadí a navigaci pro obraz zobrazený v prohlížeči.

    Umístění výstupu

    Určuje umístění a název souboru.

    Volby dlaždice obrazu

    Určuje kvalitu obrazu.

    Volby prohlížeče

    Nastaví šířku a výšku obrazu v obrazových bodech pro základní obraz v prohlížeči návštěvníka.

  2. Odešlete obrazové soubory a soubory HTML na svůj webový server.

Práce s hexadecimálními hodnotami barev

Photoshop umí zobrazovat hexadecimální hodnoty barev obrazu nebo zkopírovat hexadecimální hodnotu barvy pro použití v souboru HTML.

Zobrazení hexadecimálních hodnot barev na panelu Informace

  1. Zvolte Okna > Informace nebo tento panel zobrazte kliknutím na záložku panelu Informace.
  2. Z nabídky panelu zvolte Volby panelu. V sekci Hodnota barvy 1 nebo Hodnota barvy 2 zvolte z nabídky Režim volbu Webová barva a klikněte na OK.
  3. Umístěte ukazatel myši nad barvu, pro kterou chcete zobrazit hexadecimální hodnoty.

Kopírování barvy jako hexadecimální hodnoty

Aplikace Photoshop kopíruje barvy jako atribut BARVY HTML obsahující hexadecimální hodnotu (barva=#xxyyzz) nebo jako hexadecimální hodnotu samotnou.

  1. Proveďte jeden z následujících úkonů:
    • S vybraným nástrojem kapátko umístěte ukazatel nad barvu, kterou chcete kopírovat. Klikněte pravým tlačítkem myši (Windows) nebo se stisknutou klávesou Ctrl (Mac OS) a zvolte možnost Kopírovat barvu jako HTML nebo Kopírovat hexadecimální kód barvy.

    • Nastavte barvu popředí pomocí panelu Barvy, panelu Vzorník nebo dialogu pro výběr barvy. V nabídce panelu Barvy zvolte možnost Kopírovat barvu jako HTML nebo Kopírovat hexadecimální kód barvy.

    • V dialogovém okně Uložit pro web klikněte na políčko barvy nebo vyberte položku Podklad > Jiný. Ve voliči barev klikněte pravým tlačítkem na hexadecimální hodnotu a zvolte příkaz Kopírovat.

  2. Otevřete požadovaný soubor v aplikaci pro úpravu HTML a vyberte příkaz Upravit > Vložit.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online