Z obsahu vrstvy nebo skupiny vrstev v souboru PSD je možné generovat obrazové datové zdroje JPEG, PNG nebo GIF. Datové zdroje se vygenerují automaticky, když k názvu vrstvy nebo skupiny vrstev připojíte příponu podporovaného formátu obrazu. Volitelně lze také pro generované obrazové datové zdroje určit parametry kvality a velikosti.

Generování obrazových datových zdrojů ze souboru PSD je obzvlášť užitečné při navrhování webů pro více druhů zařízení.

Video: Generování webových zdrojů v aplikaci Photoshop CC

Video: Generování webových zdrojů v aplikaci Photoshop CC
Toto video vás provede různými způsoby, jak lze v aplikaci Photoshop CC pomocí generátoru zdrojů vytvářet obrázky různých velikostí a rozlišení, které pak budete moct použít v jiných projektech.
Chris Converse

Další informace o tom, jak pomocí nástroje Adobe Generator vytvářet webovou grafiku, najdete v tématu Extrahování zdrojů pro web.

Generování obrazových datových zdrojů z vrstev nebo skupin vrstev

Fungování generátoru obrazových zdrojů lze dobře ilustrovat na jednoduchém souboru PSD (stáhnout si ho můžete odsud) s touto hierarchií vrstev:

Photoshop: Generování obrazových datových zdrojů
Příklad souboru PSD a jeho hierarchie vrstev

Hierarchie vrstev tohoto souboru obsahuje dvě skupiny vrstev – Rounded_rectangles a Ellipses. Každá z těchto dvou skupin vrstev obsahuje pět vrstev.

Z tohoto souboru PSD vygenerujete obrazové datové zdroje následujícím postupem:

  1. Otevřete soubor PSD a klikněte na položku Soubor > Generovat > Obrazové datové zdroje.
  2. K názvům vrstev nebo skupin vrstev, ze kterých chcete generovat obrazové zdroje, přidejte vhodné přípony souborů (.jpg, .png nebo .gif). Skupiny vrstev Rounded_rectangles a Ellipses můžete přejmenovat například na Rounded_rectangles.jpg a Ellipses.png a vrstvu Ellipse_4 na Ellipse_4.gif.

Poznámka:

V názvech vrstev nejsou podporovány speciální znaky : a *.

Aplikace Photoshop vygeneruje obrazové datové zdroje a uloží je do podsložky obsahující zdrojový soubor PSD. Pokud zdrojový soubor PSD dosud není uložen, aplikace Photoshop uloží vygenerované datové zdroje do
nové složky v počítači.

Photoshop: Názvy obrazových datových zdrojů
Názvy obrazových datových zdrojů se tvoří z názvů vrstev nebo skupin vrstev.

Poznámka:

Generování obrazových datových zdrojů se povoluje pro aktuální dokument. Když je tato funkce povolena, je k dispozici při každém dalším otevření dokumentu. Generování obrazových datových zdrojů lze zakázat zrušením výběru možnosti Soubor > Generovat > Obrazové datové zdroje.

Generování více datových zdrojů z vrstvy nebo skupiny vrstev

Chcete-li z vrstvy nebo skupiny vrstev vygenerovat více datových zdrojů, oddělte názvy zdrojů čárkami. Například při použití následujícího názvu vrstvy se vygenerují tři datové zdroje:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Uložení zdrojů do podsložky

Můžete si vybrat, zda chcete ukládat obrazové datové zdroje vygenerované z určité vrstvy/skupin vrstev přímo do podsložky ve složce datových zdrojů dokumentu. Název podsložky začleňte do názvu vrstvy/skupiny vrstev, například:

[podsložka]/Ellipse_4.jpg 

Případ použití při navrhování webových stránek

Vytváření obrazových datových zdrojů ze souboru PSD je obzvlášť užitečné při navrhování webů pro více druhů zařízení. Posuďte následující návrh webu a jeho strukturu vrstev:

Návrh webu a jeho hierarchie vrstev
Návrh webu a jeho hierarchie vrstev

Ikonu nahoře a horní řádek mřížky obrazů Global Hotspots vyjmeme jako obrazové datové zdroje:

  • Ke vhodným názvům vrstev připojte přípony formátů obrazu.
Photoshop: Přejmenování vhodných vrstev nebo skupin vrstev
Photoshop: Přejmenování vhodných vrstev nebo skupin vrstev

Přejmenování vhodných vrstev nebo skupin vrstev

Poznámka:

Z obsahu vrstvy nebo skupiny vrstev se vygeneruje jeden obrazový datový zdroj. Například skupina vrstev AdventureCo Logo na snímku obrazovky výše obsahuje vrstvu tvaru a vrstvu živého textu. Tyto vrstvy se při generování obrazového datového zdroje ze skupiny vrstev slučují.

Aplikace Photoshop vygeneruje obrazové datové zdroje a uloží je do stejného umístění jako zdrojový soubor PSD.

Photoshop: Vygenerované obrazové datové zdroje
Vygenerované obrazové datové zdroje

Určení parametrů kvality a velikosti

Datové zdroje JPEG se ve výchozím nastavení generují v 90% kvalitě. Datové zdroje PNG se ve výchozím nastavení generují jako 32bitové obrazy. Datové zdroje GIF se vytvářejí se základní průhledností alfa.

Během přejmenovávání vrstev nebo skupin vrstev při přípravě na generování datových zdrojů můžete upravit kvalitu a velikost.

Parametry datových zdrojů JPEG

  • Požadovanou kvalitu výstupu přidejte k názvu zdroje jako příponu: .jpg(1-10) nebo .jpg(1-100%), například:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Požadovanou velikost výstupního obrázku (relativní nebo v podporovaných formátech: px, in, cm a mm) přidejte k názvu zdroje jako předponu. Aplikace Photoshop změní odpovídajícím způsobem velikost obrazu, například:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Poznámka:Mezi předponu a název datového zdroje nezapomeňte vložit mezeru. Pokud zadáváte velikost v obrazových bodech, můžete jednotku vypustit, například 300 x 200.

Poznámka:

Z výše uvedeného vyplývá, že při určování požadované velikosti výstupního obrazu je možné kombinovat různé jednotky a obrazové body, například 4in x 100 Rounded_rectangle_3.jpg je platný název vrstvy pro generování datového zdroje.

Parametry datových zdrojů PNG

  • Požadovanou kvalitu výstupu přidejte k názvu zdroje jako příponu: 8, 24 nebo 32. například:
    • Ellipse_4.png24
  • Požadovanou velikost výstupního obrázku (relativní nebo v podporovaných formátech: px, in, cm a mm) přidejte k názvu zdroje jako předponu. Aplikace Photoshop změní odpovídajícím způsobem velikost obrazu, například:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

Poznámka:Mezi předponu a název datového zdroje nezapomeňte vložit mezeru. Pokud zadáváte velikost v obrazových bodech, můžete jednotku vypustit, například 300 x 200.

Poznámka:

Z výše uvedeného vyplývá, že při určování požadované velikosti výstupního obrazu je možné kombinovat různé jednotky a obrazové body, například 4in x 100 Rounded_rectangle_3.png je platný název vrstvy pro generování datového zdroje.

Parametry datových zdrojů GIF

  • Požadovanou velikost výstupního obrázku (relativní nebo v podporovaných formátech px, in, cm a mm) přidejte k názvu zdroje jako předponu. například:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

Poznámka:Mezi předponu a název datového zdroje nezapomeňte vložit mezeru. Pokud zadáváte velikost v obrazových bodech, můžete jednotku vypustit, například 300 x 200.

Poznámka:

Z výše uvedeného vyplývá, že při určování požadované velikosti výstupního obrazu je možné kombinovat různé jednotky a obrazové body, například 4in x 100 Rounded_rectangle_3.gif je platný název vrstvy pro generování datového zdroje.

Parametry kvality nejsou k dispozici pro datové zdroje GIF.

Sestavování složitých názvů vrstev

Při přejmenovávání vrstvy pro generování datových zdrojů lze zadat více názvů datových zdrojů s parametry, například:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Aplikace Photoshop z této vrstvy vygeneruje následující datové zdroje:

  • Delicious.jpg (obraz JPG v kvalitě 8 zvětšený na 120 %)
  • Delicious.png (24bitový obraz PNG zmenšený na 42 %)
  • Delicious_2.jpg (obraz JPG v kvalitě 90 % s absolutní velikostí 100x100 ob)
  • Delicious.gif (obraz GIF zvětšený na 250 %)

Určení výchozích nastavení pro datové zdroje

Nyní můžete pro vygenerované datové zdroje specifikovat výchozí nastavení pro celý dokument. Postupujte takto:

  1. Vytvořte prázdnou vrstvu v dokumentu.
  2. Zadejte název hladiny tak, aby začínal klíčovým slovem default. Nyní zadejte nastavení, která chcete použít na všechny obrazové datové zdroje, vygenerované z dokumentu. Příklad:

default hi-res/

Vygeneruje všechny datové zdroje v podsložce s názvem hi-res. Příklad: [složka_datového_zdroje]/hi-res/Delicious.jpg.

default hi-res/@2x

Vygeneruje všechny datové zdroje v podsložce s názvem hi-res. Dále přidá ke všem názvům datových zdrojů příponu @2x. Příklad: [složka_datového_zdroje]/hi-res/Delicious@2x.jpg.

default 50% lo-res/

Uloží obrazové datové zdroje zmenšené o 50 % do podsložky lo-res ve složce dotových zdrojů dokumentu

default hi-res/@2x + 50% lo-res/

Vygeneruje dva obrazové datové zdroje z vrstvy:

  • V podsložce hi-res bude uložen obrazový datový zdroj, jehož název nese příponu @2x
  • V podsložce lo-res bude uložen obrazový datový zdroj, zmenšený o 50 %

Poznámka:

Výchozí měřítka jsou přepsána měřítky, zadanými pro jednotlivé vrstvy.

Zákaz generování obrazových datových zdrojů pro všechny dokumenty

Generování obrazových datových zdrojů lze zakázat globálně pro všechny dokumenty aplikace Photoshop změnou nastavení v dialogu Předvolby.

  1. Vyberte Úpravy > Předvolby > Zásuvné moduly.
  2. Zrušte výběr možnosti Povolit generátor.
  3. Klikněte na tlačítko OK.

Poznámka:

Pokud zakážete generování obrazových datových zdrojů v dialogu Předvolby, nebude k dispozici příkaz nabídky Soubor > Generovat. Tuto funkci lze znovu povolit pouze v dialogu Předvolby.

Časté otázky

Musím zadávat jedinečné názvy datových zdrojů?

Názvy datových zdrojů musí být jedinečné na úrovni dokumentu.

Jaká je výchozí úroveň kvality, na které jsou generovány obrazové datové zdroje?

Datové zdroje JPG jsou ve výchozím nastavení generovány v 90% kvalitě. Datové zdroje PNG se ve výchozím nastavení generují jako 32bitové obrazy. Datové zdroje GIF se vytvářejí se základní průhledností alfa.

Generuje Photoshop obrazové datové zdroje z vrstev s průhledností a dalšími efekty?

Ano. Průhlednost a další efekty použité na vrstvu se projeví v datových zdrojích, které se z ní vygenerují. Tyto efekty se však ve vygenerovaných datových zdrojích mohou sloučit.

Jak se obrazové datové zdroje generují z vrstev, které přesahují plátno?

Datové zdroje jsou ořezány podle ohraničení dokumentu. Pokud je obraz mimo ohraničení dokumentu, generátor nevytvoří související obrazové datové zdroje.

Je čárka jediný povolený oddělovač mezi názvy obrazových datových zdrojů?

Kromě čárky (,) můžete jako oddělovač mezi názvy obrazových datových zdrojů používat znaménko plus (+). Příklad:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

je totéž jako:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Video: Vytvoření projektu Edge Reflow pomocí generátoru aplikace Photoshop

Video: Vytvoření projektu Edge Reflow pomocí generátoru aplikace Photoshop
Toto video ukazuje, jak vytvořit webové rozvržení odpovídající velikostem obrazovky se šířkou od 320 do 1000 obrazových bodů.
Chris Converse

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