Poznámka:

Vytváření webových fotogalerií v aplikaci Photoshop CS5 je popsáno v části Vytvoření fotogalerie pro web nápovědy k aplikaci Adobe Bridge. Chcete-li používat starší doplňkový plugin Web Photo Gallery (Fotogalerie pro web) popsaný v následujících tématech, stáhněte si ho a nainstalujte pro systém Windows nebo Mac OS.

O webových fotogaleriích

Webová fotogalerie je web, který obsahuje domovskou stránku s miniaturami obrazů a stránky galerie s obrazy v plné velikosti. Každá stránka obsahuje odkazy, které návštěvníkům umožňují procházet stránkami. Když například návštěvník klikne na obraz miniatury na domovské stránce, načte se stránka galerie s příslušným obrazem v plné velikosti. Příkaz Fotogalerie pro web se používá k automatickému generování webové fotogalerie ze sady obrazů.

Photoshop: Domovská stránka webové fotogalerie
Domovská stránka webové fotogalerie

Photoshop nabízí mnoho stylů pro galerie, které můžete vybrat pomocí příkazu Fotogalerie pro web. Pokud jste pokročilý uživatel a znáte HTML, můžete vytvořit nový styl nebo styl přizpůsobit úpravou sady souborů předloh HTML.

Každá předloha stylu galerie obsahuje jiné volby. Pokud použijete přednastavený styl, některé volby mohou být pro určitý styl ztlumené nebo nedostupné.

Vytváření webových galerií pomocí aplikace Adobe Bridge

Aplikace Adobe Bridge poskytuje aktualizované funkce webové galerie. Pokyny naleznete v části Vytvoření fotogalerie pro web v nápovědě aplikace Adobe Bridge nebo můžete zobrazit následující výukové lekce.

Používání staršího doplňkového pluginu aplikace Photoshop

  1. Stáhněte si a nainstalujte starší plugin Web Photo Gallery (Fotogalerie pro web) pro systém Windows nebo Mac OS.

  2. (Volitelně) V Adobe Bridge vyberte soubor nebo složku, kterou chcete použít.

    Vaše obrazy se uspořádají v pořadí, ve kterém se zobrazují v Bridge. Pokud byste chtěli raději použít jiné pořadí, změňte je v Bridge.

  3. Proveďte jeden z následujících úkonů:

    • V Adobe Bridge zvolte Nástroje > Photoshop > Fotogalerie pro web.

    • V aplikaci Photoshop zvolte Soubor > Automaticky > Fotogalerie pro web.

  4. Zvolte styl galerie z rozbalovací nabídky Styly. V dialogovém okně se objeví náhled domovské stránky s vybraným stylem.

  5. (Volitelně) Zadejte e–mailovou adresu jako kontaktní informaci pro galerii.

  6. Z nabídky Use (Použít) zvolte zdrojové soubory pro galerii.

    Selected Images From Bridge (Vybrané obrazy z programu Bridge)

    Použije obrazy, které jste vybrali před otevřením dialogového okna Fotogalerie pro web.

    Složka

    Použije obrazy ze složky, které vyberete pomocí tlačítka Procházet (Windows) nebo Vybrat (Mac OS). Vyberte Include All Subfolders (Včetně všech podsložek), chcete-li zahrnout obrazy uvnitř všech podsložek vybrané složky.

  7. Klikněte na Destination (Cíl), vyberte složku, do které chcete uložit obrazy a stránky HTML galerie. Klikněte na OK (Windows) nebo Vybrat (Mac OS).

  8. Pro webovou galerii vyberte volby formátování. Pomocí nabídky Options (Volby) zobrazte všechny sady voleb. Viz Volby fotogalerie pro web.

  9. Klikněte na OK. Photoshop umístí do cílové složky následující soubory HTML a JPEG:

    • Domovskou stránku pro galerii, nazvanou index.htm nebo index.html, podle nastavení volby Extension (Přípona). Náhled galerie můžete zobrazit otevřením tohoto souboru v libovolném prohlížeči webu.

    • Obrazy JPEG uvnitř podsložky s obrazy.

    • Stránky HTML uvnitř podsložky se stránkami.

    • Miniatury JPEG obrazů uvnitř podsložky s miniaturami obrazů.

Zajištění shodných barev

Pokud pracujete s fotografiemi v barevném pracovním prostoru s širokým gamutem, jako je ProPhoto RGB nebo Adobe RGB, při zobrazování ve webové galerii s použitím prohlížeče, který nenačítá vložené profily barev, se mohou změnit barvy obrazu. Pokud se to stane, zkuste před optimalizací obrazů nebo jejich začleněním do fotogalerie pro web převést profily obrazů do sRGB (který většina prohlížečů používá jako výchozí). Převeďte je do sRGB jedním z následujících způsobů. Je dobré pracovat s kopiemi obrazů.

Použijete-li Obrazový procesor, můžete ukládat soubory přímo do formátu JPEG v požadované velikosti. Pokud tak učiníte, přesvědčte se, že je vypnutá možnost Resize Images (Měnit velikost obrazů) ve volbách Large Image (Velký obraz).

General (Všeobecné)

Volby přípon souboru, kódování a metadat.

Extension (Přípona)

Použije příponu názvu souboru .htm nebo .html.

Use UTF 8 Encoding For URL (Použít kódování UTF-8 pro URL)

Použije kódování UTF–8.

Add Width And Height Attributes For Images (Přidat k obrazům atributy Výška a Šířka)

Určí rozměry kvůli zkrácení doby stahování.

Preserve All Metadata (Zachovat všechna metadata)

Zachová informace metadat.

Banner (Proužek)

Volby textu pro proužek, který se zobrazí na každé stránce galerie. Zadejte text pro:

Site Name (Název serveru)

Název galerie.

Photographer (Fotograf)

Jméno osoby nebo název organizace, která má zásluhy na vytvoření fotografií v galerii.

Contact Info (Kontaktní informace)

Kontaktní informace pro galerii, jako je například telefonní číslo nebo adresa firmy.

Date (Datum)

Datum, které se zobrazí na každé stránce galerie. Standardně Photoshop použije současné datum.

Font (Písmo) a Font Size (Velikost písma)

(Dostupné pro některé styly webu) Volby pro text proužku.

Large Images (Velké obrazy)

Volby hlavních obrazů, ktere se zobrazí na každé stránce galerie.

Add numeric links (Přidat číselné odkazy)

(Dostupné pro některé styly webu) Nahoru na každou stránku galerie umístí vodorovně číselnou posloupnost (začínající 1 a končící celkovým počtem stránek v galerii). Každé číslo je odkaz na příslušnou stránku.

Resize Images (Měnit velikost obrazů)

Změní velikost zdrojových obrazu pro umístění na stránkách galerie. Vyberte velikost z rozbalovací nabídky nebo zadejte velikost v obrazových bodech. Z nabídky Constrain (Omezit) zvolte, které rozměry obrazu chcete při změně velikosti omezit. Pro JPEG Quality (kvalitu JPEG) vyberte volbu z rozbalovací nabídky, zadejte hodnotu mezi 0 a 12 nebo přetáhněte jezdec. Čím vyšší je hodnota, tím lepší bude kvalita obrazu a větší soubor.

Poznámka:

Photoshop použije výchozí metodu interpolace obrazu nastavenou v předvolbách. Zvolte Bikubická ostřejší jako výchozí, chcete-li dosáhnout nejlepších výsledků při zmenšování velikosti obrazu.

Border Size (Velikost okraje)

Určuje šířku okraje kolem obrazu v obrazových bodech.

Titles Use (Použít popisky)

(Dostupné pro některé styly webu) Určuje volby pro zobrazení popisků pod každým obrazem. Vyberete-li volbu Název souboru, zobrazí se název souboru. Vyberete-li volbu Popis, Zásluhy, Záhlaví a Copyright, zobrazí se popisný text získaný z dialogového okna Informace o souboru.

Font (Písmo) a Font Size (Velikost písma)

(Dostupné pro některé styly webu) Určuje písmo a velikost popisků.

Thumbnails (Miniatury)

Volby pro domovskou stránku galerie, včetně velikosti miniatur obrazů.

Size (Velikost)

Určuje velikost miniatury. Zvolte rozbalovací nabídku nebo zadejte hodnotu šířky každé miniatury v obrazových bodech.

Řádky (Columns) a Rows (Sloupce)

Určuje počet sloupců a řádků, ve kterých se zobrazí miniatury na domovské stránce. Tato volba se neuplatní pro galerie, které používají styl Horizontal Frame (Vodorovný rámeček) nebo Vertical Frame (Svislý rámeček).

Border Size (Velikost okraje)

Určuje šířku okraje kolem každé miniatury v obrazových bodech.

Titles Use (Použít popisky)

(Dostupné pro některé styly webu) Určuje volby pro zobrazení popisků pod každou miniaturou. Vyberete-li volbu Název souboru, zobrazí se název souboru. Vyberete-li volbu Popis, Zásluhy, Název a Copyright, zobrazí se popisný text získaný z dialogového okna Informace o souboru.

Font (Písmo) a Font Size (Velikost písma)

(Dostupné pro některé styly webu) Určuje písmo a velikost popisků.

Custom Colors (Vlastní barvy)

Volby barev pro prvky v galerii. Barvy jednotlivých prvků změníte kliknutím na vzorek barvy a volbou nové barvy v dialogu pro výběr barvy Adobe. Můžete změnit barvu pozadí na všech stránkách (volba Background/Pozadí) a barvu proužku (volba Banner/Proužek).

Security (Zabezpečení)

Zobrazí text přes každý obraz jako ochranu proti zneužití.

Content (Obsah)

Určuje jaký text se zobrazí. Vyberte Custom Text (Vlastní text) a zadejte vlastní verzi textu. Vyberte Filename (Název souboru), Description (Popis), Credits (Zásluhy), Title (Název) nebo Copyright, aby se zobrazil text z dialogového okna Informace o souboru.

Font (Písmo), Color (Barva) a Position (Poloha)

Určuje písmo, barvu a zarovnání popisků.

Rotate (Otočení)

Umístí text přes obraz pod určitým úhlem.

Poznámka:

Vytváření fotogalerií pro web v aplikaci Photoshop CS5 je popsáno v části Vytvoření fotogalerie pro web nápovědy k aplikaci Adobe Bridge. Chcete-li používat starší doplňkový plugin Web Photo Gallery (Fotogalerie pro web) popsaný dále, stáhněte si ho a nainstalujte pro systém Windows nebo Mac OS.

Photoshop nabízí množství stylů pro vaše fotogalerie pro web. Pokud jste pokročilý uživatel a znáte HTML, můžete vytvořit nový styl nebo styl přizpůsobit úpravou sady souborů předloh HTML.

Styly fotogalerií pro web, které Photoshop obsahuje, jsou uloženy v jednotlivých složkách na následujících místech:

Operační systém Windows

Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery.

Mac OS

Adobe Photoshop CS5/Presets/Web Photo Gallery.

Název každé složky v tomto místě se objeví jako volba v nabídce Styles (Styly) v dialogovém okně Web Photo Gallery (Fotogalerie pro web). Každá složka obsahuje následující soubory HTML předloh, které Photoshop používá při generování galerie:

Caption.htm

Určuje rozvržení popisku, který se objeví pod každou miniaturou na domovské stránce.

FrameSet.htm

Určuje rozvržení sady rámců pro zobrazování stránek.

IndexPage.htm

Určuje rozvržení domovské stránky.

SubPage.htm

Určuje rozvržení stránek galerie s obrazy v plné velikosti.

Thumbnail.htm Určuje uspořádání miniatur, které se objeví na domovské stránce.

Každý soubor předlohy obsahuje kód HTML a tokeny. Token je textový řetězec, který Photoshop nahradí, když nastavíte odpovídající volbu v dialogovém okně Web Photo Gallery (Fotogalerie pro web). Soubor předlohy může například obsahovat následující element TITLE, který používá token jako obsažený text:

<TITLE>%TITLE%</TITLE>

Když Photoshop generuje galerii s použitím tohoto souboru předlohy, nahradí token %TITLE% textem, který jste zadali do pole Site Name (Název serveru) v dialogovém okně Web Photo Gallery (Fotogalerie pro web).

Abyste lépe pochopili stávající styly, můžete otevřít a prostudovat odpovídající soubory HTML předloh pomocí editoru HTML. Protože k vytvoření dokumentu HTML se vyžadují pouze standardní znaky ASCII, můžete otevřít, upravit a vytvářet tyto dokumenty pomocí editoru neformátovaného textu, jako je například Poznámkový blok (Windows) nebo TextEdit (Mac OS).

Existující styl webové fotogalerie můžete přizpůsobit úpravou jednoho nebo několika jeho souborů HTML předloh. Při úpravách stylů musíte dodržet následující pravidla, aby mohl Photoshop vygenerovat galerii správně:

  • Složka stylu musí obsahovat následující soubory: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm a FrameSet.htm.

  • Složku stylu můžete přejmenovat, ale nesmíte přejmenovat soubory HTML předloh ve složce.

  • Soubor Caption.htm může být prázdný a kód HTML a tokeny, určující uspořádání popisku, mohou být v souboru Thumbnail.htm.

  • Token v souboru předlohy můžete nahradit odpovídajícím textem nebo kódem HTML, takže volba bude nastavena pomocí souboru předlohy místo využití dialogového okna Web Photo Gallery (Fotogalerie pro web). Například soubor předlohy může obsahovat element BODY s následujícím atributem barvy pozadí, který používá jako svou hodnotu token:

    bgcolor=%BGCOLOR%

    Chcete-li nastavit barvu pozadí webové stránky na červenou, můžete nahradit token %BGCOLOR% hodnotou „FF0000“.

  • Do souborů předlohy můžete přidat kód HTML a tokeny. Všechny tokeny musí být zapsány velkými písmeny a musí začínat a končit symbolem procenta (%).

  1. Najděte složku, kde jsou uloženy existující styly pro webové fotogalerie.
  2. Proveďte jeden z následujících úkonů:
    • Chcete-li upravit styl, vytvořte kopii složky stylu a uložte ji na místě, kde jsou uloženy existující složky stylů.

    • Chcete-li vytvořit nový styl, vytvořte novou složku pro nový styl a uložte ji na místě, kde jsou uloženy existující složky stylů.

    Nový nebo upravený styl (pojmenovaný po své složce) se zobrazí v nabídce Styles (Styly) v dialogovém okně Web Photo Gallery (Fotogalerie pro web).

  3. Pomocí editoru HTML proveďte jeden z následujících úkonů:
    • Upravte soubor HTML předlohy.

    • Vytvořte nezbytné soubory HTML předloh a uložte je ve složce stylů.

    Při vytváření souborů předlohy musíte dodržovat pravidla pro úpravy, uvedená v části O přizpůsobení stylů fotogalerie pro web.

    Poznámka:

    Při přizpůsobování nebo vytváření předlohy pro styl galerie byste měli umístit každý z následujících tokenů na samostatný řádek v souboru HTML: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% a %PREVINDEX%. Při generování jednotlivých stránek galerie Photoshop přeskakuje řádky v předloze, které obsahují tokeny, které se neuplatní pro tyto stránky. Například když Photoshop generuje první stránku galerie, přeskočí všechny řádky v předloze, které obsahují token %PREVIMAGE%, který určuje odkaz na předcházející stránku galerie. Umístěním tokenu %PREVIMAGE% na samostatný řádek zajistíte, že Photoshop nebude ignorovat další tokeny v předloze.

Photoshop používá tokeny v HTML souborech předloh k určení výchozích hodnot stylu fotogalerie pro web. Photoshop používá tyto tokeny ke generování galerie vytvořené podle zadání uživatele v dialogovém okně Web Photo Gallery (Fotogalerie pro web).

Při přizpůsobování nebo vytváření stylu galerie můžete přidat kterýkoliv token do kteréhokoliv souboru HTML předlohy, s výjimkou tokenů %THUMBNAILS% a %THUMBNAILSROWS%, které se mohou objevit pouze v souboru IndexPage.htm. Při přidávání tokenu si uvědomte, že budete možná také muset do souboru přidat kód HTML, aby se token použil správně.

V soborech HTML předloh můžete použít následující tokeny:

%ALINK%

Určuje barvu aktivních odkazů.

%ALT%

Určuje název souboru obrazu.

%ANCHOR%

Poskytuje možnost návratu k miniatuře obrazu, který si uživatel prohlíží, místo návratu na začátek indexu. To se projeví, když uživatel klikne na tlačítko Domovská stránka.

%BANNERCOLOR%

Určuje barvu proužku.

%BANNERFONT%

Určuje písmo textu proužku.

%BANNERFONTSIZE%

Určuje velikost písma textu proužku.

%BGCOLOR%

Určuje barvu pozadí.

%CAPTIONFONT%

Určuje písmo popisku pod každou miniaturou na domovské stránce.

%CAPTIONFONTSIZE%

Určuje velikost písma popisku.

%CAPTIONTITLE%

Vloží název dokumentu pro titulky z informací o souboru.

%CHARSET%

Určuje znakovou sadu použitou na každé webové stránce.

%CONTACTINFO%

Určí kontaktní informace pro galerii, např. telefonní číslo a místo.

%CONTENT_GENRATOR%

Roztáhne se na text „Adobe Photoshop CS5 – Fotogalerie pro web“.

%COPYRIGHT%

Vloží informace o autorských právech pro titulky z informací o souboru.

%CREDITS%

Vloží poděkování pro titulky z informací o souboru.

%CURRENTINDEX%

Určuje odkaz na platnou domovskou stránku.

%CURRENTINDEXANCHOR%

Používá se v souboru subpage.htm a ukazuje na první stránku indexu.

%DATE%

Určuje datum, které se objeví v proužku.

%EMAIL%

Určuje kontaktní emailovou adresu pro galerii.

%FILEINFO%

Určuje informace o obrazovém souboru pro popisek.

%FILENAME%

Určuje název souboru obrazu. Použijte tento token pro metadata, která se zobrazí jako text HTML.

%FILENAME_URL%

Určuje URL názvu souboru obrazu. Tento token použijte pouze pro URL názvů souborů.

%FIRSTPAGE%

Určuje odkaz na první stránku galerie, který se objeví v pravém rámci sady rámců.

%FRAMEINDEX%

Určuje odkaz na domovskou stránku, který se objeví v levém rámci sady rámců.

%HEADER%

Určuje záhlaví galerie.

%IMAGEBORDER%

Určuje velikost okraje obrazu v plné velikosti na stránce galerie.

%IMAGE_HEIGHT%

Zapne volbu Add Width And Height Attributes For Images (Přidat k obrazům atributy Výška a Šířka). To umožňuje uživateli načíst tyto atributy a výsledkem je rychlejší stahování.

%IMAGE_HEIGHT_NUMBER%

Tento token se nahradí číslem, představujícím šířku obrazu.

%IMAGEPAGE%

Určuje odkaz na stránku galerie.

%IMAGE_SIZE%

Pokud je zaškrtnuté pole Resize Images (Měnit velikost obrazů), bude mít tento token hodnotu v obrazových bodech použitou v panelu Large Images (Velké obrazy). Pokud toto pole není vybrané, bude tento token obsahovat prázdný řetězec. To je užitečné pro JavaScript v předlohách, protože token může reprezentovat maximální výšku a šířku všech obrazů v generovaných stránkách.

%IMAGESRC%

Určuje URL pro obraz v plné velikosti na stránce galerie.

%IMAGE_WIDTH%

Zapne volbu Add Width And Height Attributes For Images (Přidat k obrazům atributy Výška a Šířka). To umožňuje uživateli načíst tyto atributy a výsledkem je rychlejší stahování.

%IMAGE_WIDTH_NUMBER%

Tento token se nahradí číslem, představujícím šířku obrazu.

%LINK%

Určuje barvu odkazů.

%NEXTIMAGE%

Určuje odkaz na následující stránku galerie.

%NEXTIMAGE_CIRCULAR%

Nastavuje odkaz z velkého náhledového obrazu na následující velký náhledový obraz.

%NEXTINDEX%

Určuje odkaz na následující domovskou stránku.

%NUMERICLINKS%

Vloží do všech velkých náhledových obrazů číslované odkazy na podstránky.

%PAGE%

Určuje umístění současné stránky (například stránka 1 ze 3).

%PHOTOGRAPHER%

Určuje jméno osoby nebo název organizace, která má práva na fotografie v galerii.

%PREVIMAGE%

Určuje odkaz na předcházející stránku galerie.

%PREVINDEX%

Určuje odkaz na předcházející domovskou stránku.

%SUBPAGEHEADER%

Určuje záhlaví galerie.

%SUBPAGETITLE%

Určuje záhlaví galerie.

%TEXT%

Určuje barvu textu.

%THUMBBORDER%

Určuje velikost okrajů miniatury.

%THUMBNAIL_HEIGHT%

Zapne volbu Add Width And Height Attributes For Images (Přidat k obrazům atributy Výška a Šířka). To umožňuje uživateli načíst tyto atributy a výsledkem je rychlejší stahování.

%THUMBNAIL_HEIGHT_NUMBER%

Tento token se nahradí číslem, představujícím výšku miniatury.

%THUMBNAILS%

Tento token se nahradí miniaturami pomocí souboru Thumbnail.htm pro styly rámců. Tento token musíte umístit samostatně v jediném, nezalamovaném řádku v souboru HTML.

%THUMBNAIL_SIZE%

Obsahuje hodnotu v obrazových bodech pro velikost miniatur z panelu Thumbnails (Miniatury). To je užitečné pro JavaScript v předlohách, protože token může reprezentovat maximální výšku a šířku všech miniatur v generovaných stránkách.

%THUMBNAILSRC%

Určuje odkaz na miniaturu.

%THUMBNAILSROWS%

Pro styly bez rámců se tento token nahradí řádky miniatur s použitím souboru Thumbnail.htm. Tento token musíte umístit samostatně v jediném, nezalamovaném řádku v souboru HTML.

%THUMBNAIL_WIDTH%

Zapne volbu Add Width And Height Attributes For Images (Přidat k obrazům atributy Výška a Šířka). To umožňuje uživateli načíst tyto atributy a výsledkem je rychlejší stahování.

%THUMBNAIL_WIDTH_NUMBER%

Tento token se nahradí číslem, představujícím šířku miniatury.

%TITLE%

Určuje záhlaví galerie.

%VLINK%

Určuje barvu navštívených odkazů.

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