Zjistěte, jak je aplikace Photoshop integrována v aplikaci Dreamweaver. Práce s inteligentními objekty v pracovních postupech aplikace Photoshop a Dreamweaver.

O integraci aplikace Photoshop

Máte možnost vložit obrazové soubory aplikace Photoshop (formát PSD) na webové stránky v aplikaci Dreamweaver a nechat aplikaci Dreamweaver, ať je optimalizuje jako obrazy vhodné pro web (formáty GIF, JPEG a PNG). Při provedení této akce aplikace Dreamweaver vloží obraz jako inteligentní objekt a udržuje živé spojení s původním souborem PSD.

Máte také možnost vložit část nebo vše z obrazu aplikace Photoshop s více vrstvami nebo více řezy na webovou stránku v aplikaci Dreamweaver. Při kopírování a vkládání v aplikaci Photoshop však není zachováno žádné živé připojení s původním souborem. Chcete-li obraz aktualizovat, proveďte změny v aplikaci Photoshop a obraz zkopírujte a znovu vložte.

Poznámka:

Používáte-li funkci integrace často, můžete chtít soubory aplikace Photoshop uložit na webu Dreamweaver, odkud k nim lze snadněji získat přístup. Pokud tak učiníte, zamaskujte je, aby nedocházelo k vystavení původních položek a zbytečným přenosům mezi místním webem a vzdáleným serverem.

Výuková lekce o integraci aplikace Photoshop v aplikaci Dreamweaver viz Integrace aplikace Dreamweaver s aplikací Photoshop.

O pracovních postupech s inteligentními objekty a mezi aplikacemi Photoshop a Dreamweaver

Pro práci se soubory Photoshop v aplikaci Dreamweaver jsou k dispozici dva hlavní pracovní postupy: pracovní postup kopírovat/vložit a pracovní postup využívající inteligentní objekty.

Pracovní postup kopírovat/vložit

Pracovní postup kopírovat/vložit vám umožňuje vybírat v souboru Photoshop řezy nebo vrstvy a poté je v aplikaci Dreamweaver vložit jako obrazy připravené na Internetu. Pokud však budete chtít později aktualizovat obsah, musíte otevřít původní soubor v aplikaci Photoshop, provést změny, nakopírovat svůj řez nebo vrstvu znovu do schránky a vložit aktualizovaný řez nebo vrstvu do aplikace Dreamweaver. Tento pracovní postup se doporučuje pouze tehdy, když chcete vložit část souboru aplikace Photoshop (např. část designové kompozice) jako obraz na internetovou stránku.

Pracovní postup využívající inteligentní objekty

Při práci s kompletními soubory aplikace Photoshop doporučuje společnost Adobe pracovní postup využívající Smart Objects. Smart Object (inteligentní objekt) v aplikaci Dreamweaver je obraz umístěný na internetové stránce, který je aktivně propojen s původním souborem v aplikaci Photoshop (PSD). V návrhovém zobrazení aplikace Dreamweaver je Smart Object označen ikonou v levém horním rohu obrazu.

Inteligentní objekt
Inteligentní objekt

Když tento webový obrázek (to jest obrázek na stránce aplikace Dreamweaver) není synchronizován s původním souborem aplikace Photoshop, Dreamweaver zaznamená, že původní soubor byl aktualizován, a zobrazí jednu ze šipek ikony inteligentního objektu červeně. Když vyberete webový obrázek v návrhovém zobrazení a kliknete na tlačítko Aktualizovat z originálu v inspektoru Vlastnosti, obrázek se automaticky zaktualizuje a objeví se v něm všechny změny, které jste provedli v původním souboru aplikace Photoshop.

Když používáte Smart Objects, nemusíte otevírat Photoshop a aktualizovat v něm webový obraz. Kromě toho, veškeré změny inteligentního objektu, které provedete v aplikaci Dreamweaver, nemají destruktivní povahu. To znamená, že můžete provést změny ve webové verzi obrazu na vaší stránce a přitom si uchovat původní obraz aplikace Photoshop nedotčený.

Inteligentní objekt můžete také aktualizovat, aniž byste museli vybrat webový obraz v návrhovém zobrazení. Na panelu Položky lze aktualizovat všechny inteligentní objekty včetně obrazů, které nemusí být možné vybrat v okně Dokument (například obrazy pozadí CSS).

Nastavení optimalizace obrazu

U obou pracovních postupů (kopírovat/vložit a inteligentní objekty) můžete v dialogovém okně Optimalizace obrazu zadat nastavení optimalizace. Toto dialogové okno vám umožňuje nastavit formát souboru a kvalitu obrazu. Pokud poprvé kopírujete řez či vrstvu nebo poprvé vkládáte soubor aplikace Photoshop jako inteligentní objekt, aplikace Dreamweaver zobrazí toto dialogové okno tak, abyste mohli snadno vytvořit webový obraz.

Pokud kopírujete a vkládáte aktualizaci určitého řezu nebo vrstvy, Dreamweaver si pamatuje původní nastavení a znovu vytvoří webový obraz s těmito nastaveními. Podobně, když aktualizujete Smart Object s pomocí inspektoru Vlastnosti, Dreamweaver použije stejná nastavení, jaká jste použili při prvním vkládání obrazu. Nastavení obrazu můžete kdykoliv změnit tak, že vyberete webový obraz v zobrazení Návrh a kliknete na tlačítko Upravit nastavení obrazu v inspektoru Vlastnosti.

Ukládání souborů aplikace Photoshop

Pokud jste vložili webový obraz a neuložili původní soubor aplikace Photoshop na vaší stránce vytvořené v programu Dreamweaver, rozpozná Dreamweaver cestu k původnímu souboru jako absolutní lokální cestu k souboru. (To platí pro pracovní postup kopírovat/vložit i se Smart Object.) Pokud má například cesta k vaší stránce Dreamweaver tvar C:\Sites\mySite a soubor aplikace Photoshop je uložen na adrese C:\Images\Photoshop, Dreameaver nerozpozná původní položku jako součást webu s názvem mySite. To způsobí problémy, pokud budete někdy chtít sdílet soubor aplikace Photoshop s ostatními členy týmu, protože Dreamweaver pouze rozpozná, že soubor je k dispozici na konkrétním lokálním disku.

Pokud soubor aplikace Photoshop uložíte uvnitř vaší stránky, Dreamweaver vytvoří cestu k souboru vztahující se ke stránce. Jakýkoliv uživatel s přístupem na stránku bude také schopen vytvořit správnou cestu k souboru, a to za předpokladu, že jste soubor také poskytl ostatním ke stažení.

Výukové video o úpravě se zpětným převodem v aplikaci Photoshop viz Úprava se zpětným převodem v aplikaci Photoshop.

Vytvoření inteligentního objektu

Při vkládání obrazu aplikace Photoshop (soubor PSD) na stránku aplikace Dreamweaver vytvoří inteligentní objekt. Inteligentní objekt je obraz připravený pro web, který si zachovává živé spojení s původním obrazem aplikace Photoshop. Při každé aktualizaci původního obrazu v aplikaci Photoshop nabízí aplikace Dreamweaver možnost aktualizace obrazu jediným kliknutím.

  1. V aplikaci Dreamweaver (zobrazení Návrh nebo Kód) umístěte kurzor na stránku do místa, kam chcete obraz vložit.
  2. Vyberte volbu Vložit > Obraz.

    Poznámka:

    Můžete také přetáhnout soubor PSD na stránku z panelu Soubory, pokud jsou soubory aplikace Photoshop uloženy na vašem webu. Tím překročíte další krok.

  3. V dialogovém okně Vybrat zdrojový obraz vyhledejte obrazový soubor PSD aplikace Photoshop tak, že kliknete na tlačítko Procházet a pak přejdete na soubor.

  4. V dialogovém okně Optimalizace obrazu, které se zobrazí, upravte dle potřeby nastavení optimalizace a klikněte na tlačítko OK.

  5. Uložte soubor obrazu pro web do místa uvnitř kořenové složky webového místa.

Aplikace Dreamweaver vytvoří inteligentní objekt na základě vybraného nastavení optimalizace a umístí verzi obrazu připravenou pro web na požadovanou stránku. Inteligentní objekt si zachová živé připojení k původnímu obrazu a uvede okamžik, kdy tyto objekty nejsou synchronizované.

Poznámka:

Jestliže se později rozhodnete, že chcete změnit nastavení optimalizace obrazu na stránkách, můžete obraz vybrat, kliknout na tlačítko Upravit nastavení obrazu v inspektoru Vlastnosti a provést změny v dialogovém okně Optimalizace obrazu. Změny provedené v dialogovém okně Optimalizace obrazu jsou použity nedestruktivně. Aplikace Dreamweaver nikdy nezmění původní soubor aplikace Photoshop a vždy znovu vytvoří webový obraz na základě původních dat.

Výukové video o úpravě se zpětným převodem v aplikaci Photoshop viz Úprava se zpětným převodem v aplikaci Photoshop.

Aktualizace inteligentního objektu

Pokud změníte soubor aplikace Photoshop, s nímž je inteligentní objekt spojený, aplikace Dreamweaver vás upozorní, že je obraz připravený pro web mimo synchronizaci s předlohou. V aplikaci Dreamweaver jsou inteligentní objekty označeny ikonou v levém horním rohu. Jakmile je obraz připravený pro web Dreamweaver synchronizován s původním souborem aplikace Photoshop, obě šipky v této ikoně jsou zelené. Je-li obraz připravený pro web mimo synchronizaci s původním souborem aplikace Photoshop, jedna ze šipek ikon se zbarví červeně.

  1. Chcete-li aktualizovat inteligentní objekt aktuálním obsahem původního souboru aplikace Photoshop, vyberte jej v okně Dokument a pak klikněte v inspektoru Vlastnosti na tlačítko Aktualizovat podle originálu.

Poznámka:

Není nutné mít instalovanou aktualizaci aplikace Photoshop, aby bylo možné provést aktualizaci z aplikace Dreamweaver.

Aktualizace více inteligentních objektů

Je možné aktualizovat více inteligentních objektů současně pomocí panelu Datové zdroje. Ten rovněž umožňuje zobrazování inteligentních objektů, které nemusí být možné vybrat v okně Dokument (například obrazy na pozadí šablon CSS).

  1. Na panelu Soubory zobrazte kliknutím na záložku Datové zdroje tyto zdroje na webu.
  2. Ujistěte se, zda je vybráno zobrazení Obrazy. Pokud tomu tak není, klikněte na tlačítko Obrazy.

  3. Vyberte jednotlivé datové zdroje obrazů na panelu Datové zdroje. Po výběru inteligentního objektu se v levém horním rohu obrazu zobrazí ikona inteligentního objektu. Běžné obrazy tuto ikonu nemají.
  4. U každého inteligentního objektu, který chcete aktualizovat, klikněte pravým tlačítkem myši na název souboru a klikněte na příkaz Aktualizovat podle originálu. Můžete také podržet stisknutou klávesu CTRL a vybrat více názvů souborů, které pak aktualizujete všechny najednou.

Poznámka:

Není nutné mít instalovánu aktualizaci aplikace Photoshop, aby bylo možné provést aktualizaci z aplikace Dreamweaver.

Změna velikosti inteligentního objektu

V okně Dokument můžete změnit velikost inteligentního objektu stejně jako u jakéhokoli jiného obrazu.

  1. Vyberte inteligentní objekt v okně Dokument a přetažením úchytů pro změnu velikosti změňte jeho velikost. Můžete zachovat poměr výšky a šířky podržením klávesy Shift při přetahování.
  2. Klikněte na tlačítko Aktualizovat podle předlohy v inspektoru Vlastnosti.

    Při aktualizaci inteligentního objektu se webový obraz nedestruktivně vykreslí v nové velikosti na základě stávajícího obsahu původního obrazu a původního nastavení optimalizace.

Úprava původního souboru aplikace Photoshop inteligentního objektu

Po vytvoření inteligentního objektu na stránce aplikace Dreamweaver můžete původní soubor PSD upravit v aplikaci Photoshop. Po provedení změn v aplikaci Photoshop pak můžete webový obraz snadno aktualizovat v aplikaci Dreamweaver.

Poznámka:

Aplikaci Photoshop musíte mít nastavenu jako primární editor externích obrazů.

  1. Vyberte inteligentní objekt v okně Dokument.
  2. v inspektoru Vlastnosti klikněte na tlačítko Upravit.

  3. Proveďte změny v aplikaci Photoshop a uložte nový soubor PSD.
  4. V aplikaci Dreamweaver znovu vyberte inteligentní objekt a klikněte na tlačítko Aktualizovat podle originálu.

Poznámka:

Pokud jste změnili velikost obrazu v aplikaci Photoshop, bude nutné znovu nastavit velikost webového obrazu v aplikaci Dreamweaver. Aplikace Dreamweaver aktualizuje inteligentní objekt pouze na základě obsahu původního souboru aplikace Photoshop a nikoli na základě velikosti. Chcete-li synchronizovat velikost webového obrazu s původním souborem aplikace Photoshop, klikněte pravým tlačítkem myši na obraz a vyberte volbu Obnovit velikost podle originálu.

Stavy inteligentních objektů

Následující tabulka uvádí různé stavy inteligentních objektů.

Stav inteligentního objektu

Popis

Doporučená akce

Synchronizované obrazy

Webový obraz je synchronizován se stávajícím obsahem původního souboru aplikace Photoshop. Atributy výšky a šířky v kódu HTML odpovídají rozměrům webového obrazu.

Žádné

Původní datový zdroj změněn

Původní soubor aplikace Photoshop se po vytvoření webového obrazu v aplikaci Dreamweaver změnil.

K synchronizaci dvou obrazů použijte tlačítko Aktualizovat podle předlohy v inspektoru Vlastnosti.

Rozměry webového obrazu se liší od vybrané výšky a šířky HTML

Atributy výšky a šířky v kódu HTML se liší od výšky a šířky webového obrazu, který aplikace Dreamweaver vytvořila při vkládání. Pokud jsou rozměry webového obrazu menší než hodnoty výšky a šířky vybraného souboru HTML, mohou být na webovém obrazu patrné jednotlivé pixely.

Pomocí tlačítka Aktualizovat podle originálu v inspektoru Vlastnosti znovu vytvořte webový obraz z původního souboru aplikace Photoshop. Aplikace Dreamweaver použije aktuálně zadanou výšku a šířku při opětovném vytváření obrazu.

Rozměry původního datového zdroje jsou příliš malé pro vybranou šířku a výšku HTML

Atributy Výška a Šířka v kódu HTML jsou větší než rozměry výšky a šířky v původním souboru aplikace Photoshop. Na webovém obrazu mohou být patrné jednotlivé pixely.

Nevytvářejte webové obrazy s většími rozměry, než má původní soubor aplikace Photoshop.

Původní datový zdroj nenalezen

Aplikace Dreamweaver nemůže najít původní soubor aplikace Photoshop zadaný v textovém poli Originál inspektoru Vlastnosti.

Opravte cestu k souboru v textovém poli Originál v inspektoru Vlastnosti nebo přesuňte soubor aplikace Photoshop do aktuálně uvedeného umístění.

Kopírování a vložení výběru z aplikace Photoshop

Máte možnost zkopírovat část obrazu nebo celý obraz z aplikace Photoshop a výběr vložit na stránku aplikace Dreamweaver jako obraz připravený pro web. Můžete kopírovat jednu vrstvu nebo více vrstev z vybrané oblasti obrazu nebo kopírovat řez obrazu. Pokud tak však učiníte, aplikace Dreamweaver nevytvoří inteligentní objekt.

Poznámka:

I když funkce Aktualizovat podle originálu není k dispozici u vkládaných obrazů, máte možnost otevřít a upravit původní soubor aplikace Photoshop výběrem vloženého obrazu a kliknutím na tlačítko Upravit v inspektoru Vlastnosti.

  1. V aplikaci Photoshop proveďte jeden z následujících úkonů:
    • Zkopírujte část jedné vrstvy nebo celou vrstvu pomocí nástroje pro výběr a pak vyberte volbu Úpravy > Kopírovat. To zkopíruje do schránky jen vybranou část aktivní vrstvy. Pokud používáte efekty založené na vrstvách, nezkopírují se.
    • Více vrstev zkopírujete a sloučíte tak, že je vyberete nástrojem pro výběr a pak vyberete volbu Úpravy > Kopírovat sloučené. Tím sloučíte a do schránky zkopírujete vybranou oblast aktivní vrstvy a všech vrstev pod ní. Pokud používáte efekty založené na těchto vrstvách, zkopírují se.
    • Řez zkopírujete tak, že ho vyberete nástrojem pro výběr řezu a pak vyberete volbu Úpravy > Kopírovat. Tím do schránky systému zkopírujete aktivní vrstvu řezu a všechny vrstvy pod ní.

    Poznámka:

    Celý obraz můžete rychle vybrat výběrem volby Vybrat > Vše.

  2. V aplikaci Dreamweaver (zobrazení Návrh nebo Kód) umístěte kurzor na stránku do místa, kam chcete obraz vložit.
  3. Vyberte volbu Úpravy > Vložit.

  4. V dialogovém okně Optimalizace obrazu podle potřeby upravte nastavení optimalizace a klikněte na tlačítko OK.

  5. Uložte soubor obrazu pro web do místa uvnitř kořenové složky webového místa.

Aplikace Dreamweaver definuje obraz podle nastavení optimalizace a vloží verzi připravenou pro web na stránku. Informace o obrazu, například umístění zdrojového souboru PSD, se uloží do poznámky k návrhu, nezávisle na tom, zda jste ve webovém místě povolili poznámky k návrhu nebo ne. Poznámka k návrhu umožňuje vrátit se z aplikace Dreamweaver k původnímu souboru aplikace Photoshop.

Úprava vložených obrazů

Po vložení obrazů aplikace Photoshop na stránky aplikace Dreamweaver můžete upravit původní soubor PSD v aplikaci Photoshop. Při použití pracovního postupu kopírovat/vložit doporučuje společnost Adobe vždy provádět úpravy původního souboru PSD (místo vlastního obrazu připraveného pro web) a pak jej znovu vložit, aby se zachoval jeden zdroj.

Poznámka:

Aplikace Photoshop musí být nastavena jako primární editor externích obrazů pro typ souboru, které chcete upravovat.

  1. V aplikaci Dreamweaver vyberte obraz připravený pro web, který byl původně vytvořen v aplikaci Photoshop, a poté proveďte jeden z následujících úkonů:
    • Klikněte na tlačítko Úpravy v inspektoru Vlastnosti obrazu.
    • Při poklepání na soubor stiskněte klávesu Ctrl (Windows) nebo Cmd (Macintosh).
    • Klikněte pravým tlačítkem myši (Windows) nebo podržte stisknutou klávesu Ctrl (Macintosh)a klikněte na obraz, v místní nabídce vyberte volbu Upravit originál pomocí programu a pak zvolte aplikaci Photoshop.

    Poznámka:

    Tento postup předpokládá, že je aplikace Photoshop nastavena jako primární externí editor obrazu pro soubory PSD. Můžete také chtít nastavit aplikaci Photoshop jako výchozí editor souborů typu JPEG, GIF a PNG.

  2. Upravte soubor v aplikaci Photoshop.
  3. Vraťte se do aplikace Dreamweaver a vložte aktualizovaný obraz nebo výběr na stránku.

Chcete-li kdykoli změnit optimalizaci obrazu, můžete obraz vybrat a kliknout na tlačítko Upravit nastavení obrazu v inspektoru Vlastnosti.

Nastavení voleb dialogového okna Optimalizace obrazu

Pokud vytvoříte inteligentní objekt nebo vložíte výběr z aplikace Photoshop, aplikace Dreamweaver zobrazí dialogové okno Optimalizace obrazu. (Aplikace Dreamweaver zobrazí toto dialogové okno také pro jakýkoli jiný typ obrazu, pokud tento obraz vyberete a kliknete na tlačítko Upravit nastavení obrazu v inspektoru Vlastnosti.) V tomto dialogovém okně je možné definovat nastavení pro obrazy připravené pro web pomocí správného poměru barvy, komprese a kvality a zobrazit jeho náhled.

Obraz připravený pro web je obraz, který dokážou zobrazit všechny moderní prohlížeče webu a který vypadá vždy stejně, nezávisle na operačním systému a prohlížeči. Obecně platí, že nastavení umožní dosáhnout kompromisu mezi kvalitou a velikostí souboru.

Poznámka:

Provedené nastavení ovlivní jen importovanou verzi souboru obrazu. Původní soubor PSD aplikace Photoshop nebo soubor PNG aplikace Fireworks vždy zůstane beze změny.

Přednastavení

Zvolte přednastavení, které nejlépe odpovídá vašim potřebám. Velikost souboru obrazu se změní v závislosti na vybraném přednastavení. Na pozadí se zobrazí okamžitý náhled obrazu s použitými nastaveními.

Například pro obrazy, které je třeba zobrazit s vysokou průzračností, zvolte přednastavení PNG24 pro fotografie (ostré detaily).  Pokud vkládáte vzorek, který poslouží jako pozadí stránky, zvolte přednastavení GIF pro obrazy na pozadí (vzory).

Jakmile přednastavení vyberete, zobrazí se jeho konfigurovatelné volby.  Chcete-li pokračovat v přizpůsobování nastavení optimalizace, změňte hodnoty pro tyto volby.

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