V aplikaci Dreamweaver (zobrazení Design nebo Code) umístěte kurzor na stránku na místo, kam chcete obrázek vložit.
Naposledy aktualizováno
27. 4. 2021
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
Poznámka
Pracovní postupy integrace aplikace Photoshop jsou v aplikaci Dreamweaver 21.0 a novějších verzích ukončeny.
Do webových stránek v aplikaci Dreamweaver můžete vkládat soubory obrázků aplikace Photoshop (formát PSD) a nechat aplikaci Dreamweaver je optimalizovat jako obrázky připravené pro web (formáty GIF, JPEG a PNG). Když to uděláte, aplikace Dreamweaver vloží obrázek jako Smart Object a udržuje živé připojení k původnímu souboru PSD.
Do webové stránky v aplikaci Dreamweaver můžete také vložit celý nebo část vícevrstvého nebo vícedílného obrázku aplikace Photoshop. Když však kopírujete a vkládáte z aplikace Photoshop, žádné živé připojení k původnímu souboru se neudržuje. Chcete-li obrázek aktualizovat, proveďte změny v aplikaci Photoshop a znovu zkopírujte a vložte.
Poznámka
Pokud tuto funkci integrace používáte často, možná budete chtít uložit soubory aplikace Photoshop na webu aplikace Dreamweaver pro snadnější přístup. Pokud tak učiníte, nezapomeňte je skrýt, abyste předešli odhalení původních prostředků a také zbytečným přenosům mezi místním webem a vzdáleným serverem.
Výukovou lekci o integraci aplikace Photoshop v aplikaci Dreamweaver najdete v tématu Integrace aplikace Dreamweaver s aplikací Photoshop.
O pracovních postupech s inteligentními objekty a mezi aplikacemi Photoshop a Dreamweaver
Existují dva hlavní pracovní postupy pro práci se soubory aplikace Photoshop v aplikaci Dreamweaver: pracovní postup kopírování/vkládání a pracovní postup Smart Objects.
Pracovní postup kopírovat/vložit
Pracovní postup kopírování/vkládání vám umožňuje vybrat řezy nebo vrstvy v souboru aplikace Photoshop a poté použít aplikaci Dreamweaver k jejich vložení jako obrázků připravených pro web. Pokud však chcete obsah později aktualizovat, musíte otevřít původní soubor aplikace Photoshop, provést změny, znovu zkopírovat řez nebo vrstvu do schránky a poté vložit aktualizovaný řez nebo vrstvu do aplikace Dreamweaver. Tento pracovní postup se doporučuje pouze v případě, že chcete vložit část souboru aplikace Photoshop (například část návrhu) jako obrázek na webovou stránku.
Pracovní postup využívající Smart Objects
Při práci s úplnými soubory aplikace Photoshop Adobe doporučuje pracovní postup Smart Objects. Smart Object v aplikaci Dreamweaver je prostředek obrázku umístěný na webové stránce, který má živé připojení k původnímu souboru aplikace Photoshop (PSD). V zobrazení Návrh aplikace Dreamweaver je Smart Object označen ikonou v levém horním rohu obrázku.
Když je webový obrázek (tj. obrázek na stránce aplikace Dreamweaver) nesynchronizovaný s původním souborem aplikace Photoshop, aplikace Dreamweaver zjistí, že byl původní soubor aktualizován, a zobrazí jednu ze šipek ikony Smart Object červeně.Když vyberete webový obrázek v zobrazení Návrh a kliknete na tlačítko Aktualizovat z originálu v inspektoru vlastností, obrázek se automaticky aktualizuje a odráží všechny změny, které jste provedli v původním souboru aplikace Photoshop.
Když používáte pracovní postup Smart Objects, nemusíte otevírat aplikaci Photoshop pro aktualizaci webového obrázku. Kromě toho jsou všechny aktualizace, které provedete u Smart Object v aplikaci Dreamweaver, nedestruktivní. To znamená, že můžete změnit webovou verzi obrázku na své stránce a zachovat původní obrázek z aplikace Photoshop nedotčený.
Smart Object můžete také aktualizovat, aniž byste vybrali webový Obrázek v zobrazení Návrh. Panel Prostředky vám umožňuje aktualizovat všechny Smart Objects, včetně obrázků, které nemusí být v okně Dokument volitelné (například obrázky 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 vlastností.
Ukládání souborů aplikace Photoshop
Pokud jste vložili webový obrázek 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 najdete v tématu Úprava se zpětným převodem v aplikaci Photoshop.
Vytvoření inteligentního objektu
Když vložíte obrázek aplikace Photoshop (soubor PSD) na svou stránku, aplikace Dreamweaver vytvoří Smart Object.Smart Object je Obrázek připravený pro web, který udržuje živé připojení k původnímu obrázku aplikace Photoshop. Kdykoli aktualizujete původní Obrázek v aplikaci Photoshop, aplikace Dreamweaver vám dá možnost aktualizovat Obrázek v aplikaci Dreamweaver kliknutím na tlačítko.
Vyberte volbu Vložit > Obraz.
Poznámka
Soubor PSD můžete také přetáhnout na stránku z panelu Files, pokud ukládáte soubory aplikace Photoshop na svém web produktu. Tím překročíte další krok.
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.
V dialogovém okně Optimalizace obrazu, které se zobrazí, upravte dle potřeby nastavení optimalizace a klikněte na tlačítko OK.
Uložte soubor s obrazem připraveným pro web do umístění ve
kořenové složce vašeho web produktu.
Dreamweaver vytvoří Smart Object podle vybraného nastavení optimalizace a umístí verzi obrázku připravenou pro web na vaši stránku.Smart Object udržuje živé připojení k původnímu obrazu a dá vám vědět, když nejsou oba 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 vlastností 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 najdete v tématu Úprava se zpětným převodem v aplikaci Photoshop.
Aktualizace inteligentního objektu
Pokud změníte soubor aplikace Photoshop, na který je váš Smart Object odkazován, Dreamweaver vás upozorní, že Obraz připravený pro web není synchronizovaný s originálem. V aplikaci Dreamweaver jsou Smart Objects označeny ikonou v levém horním rohu obrazu. Když je obrázek připravený pro web v aplikaci Dreamweaver synchronizovaný s původním souborem aplikace Photoshop, obě šipky v ikoně jsou zelené.Když obraz připravený pro web není synchronizovaný s původním souborem aplikace Photoshop, jedna ze šipek ikony se změní na červenou.
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 vlastností na tlačítko Aktualizovat podle originálu.
Poznámka
Pro aktualizaci z aplikace Dreamweaver nepotřebujete nainstalovanou aplikaci Photoshop.
Aktualizace více inteligentních objektů
Můžete aktualizovat více Smart Objects najednou pomocí panelu Assets. Panel Assets také umožňuje zobrazit Smart Objects, které nemusí být vybratelné v okně Document (například Obrázky pozadí CSS).
V panelu Files klikněte na kartu Assets pro zobrazení
zdrojů webu.
Ujistěte se, zda je vybráno zobrazení Obrazy. Pokud tomu tak není, klikněte na tlačítko Obrazy.
Vyberte jednotlivé datové zdroje obrazů na panelu Datové zdroje. Když
vyberete Smart Object, uvidíte ikonu Smart Object v levém
horním rohu obrazu. Běžné obrazy tuto ikonu nemají.
Pro každý Smart Object, který chcete aktualizovat, klikněte pravým tlačítkem na název souboru a vyberte Aktualizovat z originálu.Můžete také pomocí klávesy Control kliknout
pro výběr více názvů souborů a aktualizovat je všechny najednou.
Poznámka
Pro aktualizaci z aplikace Dreamweaver nepotřebujete nainstalovanou aplikaci Photoshop.
Změna velikosti inteligentního objektu
Smart Object můžete změnit velikost v okně Document stejně jako jakéhokoli jiného obrazu.
Vyberte Smart Object v okně Dokument a přetáhněte úchyty pro změnu velikosti obrázku.Můžete zachovat poměry šířky a výšky podržením klávesy Shift při tažení.
Klikněte na tlačítko Aktualizovat podle předlohy v Inspektoru vlastností.
Když aktualizujete Smart Object, webový obrázek se nedestruktivně znovu vykreslí v nové velikosti podle aktuálního obsahu původního souboru a původního nastavení optimalizace.
Úprava původního souboru aplikace Photoshop Smart Object
Poté, co vytvoříte Smart Object na stránce aplikace Dreamweaver, můžete upravit původní soubor PSD v aplikaci Photoshop. Poté, co provedete změny v aplikaci Photoshop, můžete snadno aktualizovat webový obrázek v aplikaci Dreamweaver.
Poznámka
Ujistěte se, že máte aplikaci Photoshop nastavenou jako primární externí editor obrázků.
Vyberte inteligentní objekt v okně Dokument.
V Inspektoru vlastností klikněte na tlačítko Upravit.
Proveďte změny v aplikaci Photoshop a uložte nový soubor PSD.
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 vlastností. |
|
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 vlastností 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 vlastností. |
Opravte cestu k souboru v textovém poli Originál v Inspektoru vlastností nebo přesuňte soubor aplikace Photoshop do aktuálně uvedeného umístění. |
Kopírování a vkládání výběru z aplikace Photoshop
Můžete zkopírovat celý obrázek z aplikace Photoshop nebo jeho část a vložit výběr na svou stránku v aplikaci Dreamweaver jako obrázek připravený pro web.Můžete zkopírovat jednu vrstvu nebo sadu vrstev pro vybranou oblast obrázku nebo můžete zkopírovat řez obrázku. Když to však uděláte, Dreamweaver nevytvoří Smart Object.
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 vlastností.
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.
V aplikaci Dreamweaver (zobrazení Design nebo Code) umístěte vkládací bod na stránku tam, kde chcete obrázek vložit.
Vyberte volbu Úpravy > Vložit.
V dialogovém okně Optimalizace obrazu podle potřeby upravte nastavení optimalizace a klikněte na tlačítko OK.
Uložte soubor obrázku připraveného pro web do umístění v kořenové složce vašeho webu.
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í obrázků z aplikace Photoshop na stránky v aplikaci Dreamweaver můžete upravit původní PSD soubor v aplikaci Photoshop. Při použití pracovního postupu kopírování/vkládání Adobe doporučuje vždy provádět úpravy původního PSD souboru (nikoli samotného obrázku připraveného pro web) a poté znovu vložit, abyste zachovali jednotný zdroj.
Poznámka
Ujistěte se, že máte aplikaci Photoshop nastavenou jako primární externí editor obrázků pro typ souboru, který chcete upravit.
V aplikaci Dreamweaver vyberte obraz připravený pro web, který byl původně vytvořen v aplikaci Photoshop, a proveďte jednu z následujících akcí:
- Klikněte na tlačítko Úpravy v Inspektoru vlastností obrazu.
- Stiskněte klávesu Control (Windows) nebo Command (Macintosh) a poklepejte na soubor.
- Klikněte pravým tlačítkem (Windows) nebo při stisknuté klávese Control klikněte (Macintosh) na obraz, v místní nabídce zvolte Upravit originál pomocí a pak zvolte Photoshop.
Poznámka
To předpokládá, že aplikace Photoshop je nastavena jako primární externí editor obrázků pro soubory PSD.Můžete také chtít nastavit aplikaci Photoshop jako výchozí editor pro typy souborů JPEG, GIF a PNG.
Upravte soubor v aplikaci Photoshop.
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 vlastností.
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 vlastností.) 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í. V pozadí se zobrazí okamžitý náhled obrázku s aplikovaným nastavením.
Například pro obrazy, které je třeba zobrazit s vysokou průzračností, zvolte přednastavení PNG24 pro fotografie (ostré detaily). Vyberte GIF pro obrázky pozadí (vzorky), pokud vkládáte vzorek, který bude působit jako pozadí stránky.
Jakmile přednastavení vyberete, zobrazí se jeho konfigurovatelné volby. Pokud chcete dále přizpůsobit nastavení optimalizace, upravte hodnoty pro tyto možnosti.
Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.
