Vytváření webových fotogalerií

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 Web Photo Gallery (Fotogalerie pro web) se používá k automatickému generování webové fotogalerie ze sady obrazů.

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é.

Vytvoření fotogalerie pro web

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

Aplikace Adobe Bridge poskytuje aktualizované funkce webové galerie. Pokyny najdete 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 zásuvného modulu aplikace Photoshop

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ů.

• Chcete-li převést jeden obraz, klikněte na položku Úpravy > Převést do profilu a vyberte možnost sRGB. Další informace naleznete v části Přiřazení nebo odstranění profilu barev (Illustrator, Photoshop).

• Chcete-li převést složku obrazů, použijte Obrazový procesor. Vyberte položku Soubor > Skripty > Obrazový procesor. Další informace naleznete v části Převádění souborů pomocí Obrazového procesoru.

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).

Volby fotogalerie pro web

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

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

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

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

Zachová informace metadat.

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

Název galerie.

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

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

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

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

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

(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.

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.

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

(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.

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

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

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

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).

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

(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.

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

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).

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

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.

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

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

Styly fotogalerie pro web

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:

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

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:

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

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

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

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

Thumbnail.htm Určuje rozvržení 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).

O přizpůsobení stylů fotogalerie pro web

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 (%).

Přizpůsobení nebo vytvoření stylu webové fotogalerie

Tokeny stylu fotogalerie pro web

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:

Určuje barvu aktivních odkazů.

Určuje název souboru obrazu.

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.

Určuje barvu proužku.

Určuje písmo textu proužku.

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

Určuje barvu pozadí.

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

Určuje velikost písma popisku.

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

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

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

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

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

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

Určuje odkaz na platnou domovskou stránku.

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

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

Určuje kontaktní emailovou adresu pro galerii.

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

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

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

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

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

Určuje záhlaví galerie.

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

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í.

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

Určuje odkaz na stránku galerie.

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.

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

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í.

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

Určuje barvu odkazů.

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

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

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

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

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

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

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

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

Určuje záhlaví galerie.

Určuje záhlaví galerie.

Určuje barvu textu.

Určuje velikost okrajů miniatury.

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í.

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

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.

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.

Určuje odkaz na miniaturu.

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.

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í.

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

Určuje záhlaví galerie.

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