Objekty v aplikaci Adobe Muse zahrnují prvky návrhu vytvořené v této aplikaci nebo importované z externích zdrojů. Obrazy, text, rámy obrazů a další lze přidávat do webové stránky a upravovat pomocí různých nástrojů aplikace Adobe Muse.

Jedním z nejčastějších pracovních postupů je vytvoření a import tlačítka z aplikace Adobe Photoshop. Aplikace Adobe Muse dokáže rozpoznat vrstvy a kompozice vrstev vytvořené v aplikaci Photoshop. Aplikace Adobe Muse umožňuje nastavit tyto vrstvy ve vašem webu jako stavy tlačítka.

Objektům umístěným na plátnu webové stránky lze přidávat transformace odpovídající potřebám návrhu webu. Objekt můžete také izolovat a přidat vhodné odsazení a vlastnosti mezer mezi sloupci, aby byly zajištěny mezery mezi vnořenými prvky.

Umístění rámečků obrazů v projektech Adobe Muse

Kliknutím na nástroj rámečku obrazu můžete přímo umístit rámeček obrazu do projektu Adobe Muse. Na panelu nástrojů klikněte na nástroj rámečku obrazu a poté klikněte do požadovaného umístění v projektu.

Umístění jednoho obrázku na stránku

Pracovní plocha aplikace Muse funguje podobně jako aplikace Illustrator a InDesign, kdy nejprve načtete umisťovaný obrázek a poté kliknete na stránku, kde se má zobrazovat. Chcete-li přidat soubor obrazu jeho přímým umístěním do stránky, postupujte následovně:

1. Vyberte možnost Soubor > Umístit, nebo pomocí klávesové zkratky Command-D (Mac) nebo Control-D (Windows) otevřete dialogové okno Import.
2. Vyberte soubor s názvem made-with-muse.png umístěný ve složce vzorových souborů. Vyberte jej kliknutím na možnost Otevřít a zavřete dialogové okno Import.

Jedním kliknutím u spodní části stránky obrázek umístěte. V tomto případě chcete obrázek umístit v plné velikosti, proto klikněte jen jednou. Pokud byste chtěli velikost umístěného obrázku změnit, měřítko upravíte na konkrétní velikost kliknutím a přetažením obrázku. 

Pomocí nástroje pro výběr přetáhněte obrázek ke svislému středu dlaždicového obdélníku v zápatí a všimněte si, jak během přetahování se krátce zobrazí červené a tyrkysové měřicí rámečky, jež vám umožní obrázek zarovnat na střed.

Po těchto změnách je oblast zápatí webu téměř dokončena.

Jak aplikace Muse optimalizuje obrázky při publikování nebo exportu webu

Do aplikace Adobe Muse můžete ale umístit i obrazy určené k tisku – provede se jejich převedení do formátu vhodného pro web. Nicméně pokud má být obraz vhodný pro web, je často nutné jej zkomprimovat a obětovat tak část jeho kvality. Pokud do aplikace Muse umístíte obraz, který není vhodný pro web, dojde k jeho automatické kompresi. Pokud nebudete po publikování nebo exportu webu spokojeni s tímto automatickým výsledkem, můžete experimentovat a ručně vytvářet či optimalizovat svoje vlastní obrazy vhodné pro web v aplikaci Photoshop nebo Adobe Fireworks®. Odstraňte původní obrazy, umístěte do stránek nové, optimalizované obrazy a poté web znovu publikujte nebo exportujte.

Pamatujte si, že pokud provedete další změny obrazu v aplikaci Muse –·například oříznutí, změnu velikosti nebo přidání úkosů, stínů či září – provede aplikace Muse opětovné vytvoření obrazu a jeho automatickou kompresi. Pokud chcete mít větší kontrolu nad procesem optimalizace, můžete do obrazu přidat efekty pomocí aplikace Photoshop nebo Fireworks, optimalizovat soubor v programu pro úpravy obrazů a poté obraz umístit do aplikace Muse – zajistíte tak vlastní úroveň použité komprese. Soubory PSD z aplikace Photoshop můžete umístit přímo do aplikace Muse –·není nutné je exportovat do formátu PNG, JPG nebo GIF – ale i v tomto případě provede aplikace Muse automatické vytvoření nového souboru obrazu, a to pomocí svých vlastních automatických kompresních algoritmů.

Optimalizace obrázku pro zobrazení na webu

Pokud došlo k umístění propojeného souboru o velice vysokém rozlišení a k jeho následnému výraznému zmenšení na stránce, mohou nastat chyby při exportu a zpomalení procesu exportu. Tento postup proto nedoporučujeme. Tyto problémy se ještě zvýrazní v případě opakovaného umístění obrazů v plném rozlišení (přes 2 000 pixelů) a jejich následného zmenšení pro potřeby návrhu.

Pokud umístíte velice velký soubor obrazu, tak aplikace Muse automaticky omezí jeho velikost a převzorkuje šířku obrazu na hodnotu 2 048. Když podržíte ukazatel myši na názvu datového zdroje v panelu Datové zdroje, zobrazí se v popisku původní velikost umístěného obrazu a převzorkovaná velikost obrazu (přizpůsobená podle maximálního limitu velikosti).

Je tedy vhodné upravit velikost webové grafiky a optimalizovat ji v programu pro úpravy obrazů ještě před umístěním obrazů na stránky. Umístění obrazů o extrémně velkých rozměrech může způsobit zbytečně velkou velikost souboru .muse. Soubor .muse musí zpracovat zbytečná data pixelů, která nejsou potřebná pro zobrazení obrazu na webu. Může se tím prodloužit doba zpracování při exportu nebo publikování webu. U velice velkého souboru .muse může dokonce při exportu nebo publikování dojít k vypršení časového limitu při pokusu o změnu velikosti a optimalizaci všech souborů. Mohou se vyskytnout chyby spojené s vypršením časového limitu.

Tento problém můžete vyřešit kliknutím pravým tlačítkem na názvy datových zdrojů a vybráním volby Optimalizovat velikost datového zdroje – provede se odebrání dat, která nejsou potřebná k zobrazení zmenšeného obrazu.

Pokud v návrhu zvětšíte optimalizovaný soubor, může se zobrazit chyba datového zdroje Převzorkováno nahoru plus. V takovém případě můžete použít volbu Importovat větší velikost, která načte dodatečná data potřebná k přijatelnému zobrazení zvětšeného obrazu.

Kreslení tvarů zástupců

Tvar zástupce může být elipsa, obdélník nebo polygon a můžete jej vyplnit obrazem, textem nebo barvou.

Umístění souboru Photoshop jako tlačítka s efektem přechodu

Tlačítko Sdílet zobrazuje své stavy podle očekávání. V následující kapitole se naučíte zarovnat tlačítko Sdílet s obrazem kapky na pravé straně navigace webu.

V další části se naučíte definovat oblasti záhlaví a zápatí vzorové stránky.

Přichycení objektů k oknu prohlížeče

Při umísťování obrazu nebo při používání jiných metod přidávání kreseb do stránky se ke změně jejich umístění používá nástroj pro výběr. Když obrazem pohybujete, pohybuje se ve vztahu k ostatním elementům (obrazům, textu a médiím) nacházejícím se na stránce. Tyto ostatní elementy můžete také přesunovat, ale celá stránka se chová jako brožura nebo plakát. Položky na stránce existují na jediné rovině. Pokud je stránka dlouhá (obsahuje hodně svislého obsahu) a návštěvník ji posune směrem dolů, již neuvidí obrazy nacházející se v horní části stránky.

Při prohlížení webových stránek jste pravděpodobně narazili na přichycené objekty - jedná se o „přetrvávající“ položky, které jsou neustále zobrazeny v jednom umístění. Vypadají, jako že se vznášejí nad zbytkem obsahu stránky.

Při použití nástroje Přichytit v podstatě odeberete obraz z toku stránky. Místo jeho umístění ve vztahu k ostatním elementům stránky jej nastavíte do specifického umístění ve vztahu k prohlížeči. Přichycené obrazy vypadají „přilepené“ - vždy zůstávají na jednom místě (například v pravém horním rohu nebo se vznášejí poblíž spodního okraje prohlížeče) a to bez ohledu na posouvání dalších elementů stránky. Pokud návštěvník změní velikost svého prohlížeče, zůstanou přichycené obrazy vždy přichycené na svém místě ve vztahu k oknu prohlížeče.

Přichycení si můžete představit jako „vytržení obrazu“ z návrhu stránky a jeho připevnění k prohlížeči, podobně jako přichycení poznámky k nástěnce. Přichycený element se přesune za účelem zachování své přichycené pozice ve vztahu k prohlížeči, pokud návštěvník změní velikost svého prohlížeče, ale nebude se posouvat, pokud návštěvník posune obsah stránky svisle nebo vodorovně.

Nástroj Přichytit se používá následujícím způsobem:

1. Když je v zobrazení návrhu otevřená stránka Vzor-A, vyberte pomocí nástroje pro výběr ikonu Facebook.
2. Na rozhraní Přichytit ovládacího panelu klikněte na horní prostřední pozici přichycení. Toto nastavení „přichytí“ element v aktuálním umístění jeho pravého horního rohu.

3. Opakováním kroků 1 a 2 přichyťte tlačítka ikon Google+ a Twitter k jejich pravým horním pozicím tak, aby se nepohybovala v okně prohlížeče, ani když dochází k posouvání zbytku stránky.
4. Kliknutím na možnost Plán si zobrazte miniatury stránek. Všimněte si, že všechny stránky nyní obsahují tyto tři ikony sociálních médií, protože jste je přidali do vzorové stránky.
5. V zobrazení plánu dvojitým kliknutím na stránku s pokrmy otevřete tuto stránku v zobrazení návrhu. Pokud již je otevřená, tak kliknutím na kartu stránky s pokrmy tuto stránku aktivujte. Pomocí možnosti nabídky Soubor > Náhled stránky v prohlížeči si zobrazte stránku v prohlížeči.
6. Kliknutím na položku nabídky Zákusek přeskočte dlouhou stránku do části s menu Zákusky. Všimněte si, že zatímco se zbytek stránky posouvá, tři ikony sociálních médií zůstávají na jednom místě na pravé straně stránky, protože jsou přichycené.

V nápovědě PDF Vytvoření prvního webu pomocí aplikace Muse, kapitola 6 se dozvíte, jak lze seskupovat sady objektů tak, aby se chovaly jako jeden element. Dokončíte také stránku Kde nás najdete přidáním vložené mapy Google zobrazující umístění kavárny Katie's Cafe. A po dokončení webu uvidíte, jak snadné je odeslat web do hostitelského serveru (založeného na systému Business Catalyst) pro jeho publikování online, abyste mohli sdílet vaše rozpracované dílo se svými klienty a kolegy.

V kapitole č. 4 příručky Vytvoření prvního webu pomocí aplikace Muse jste se naučili přidat kotvy a propojit je s položkami nabídky v ručním widgetu Vodorovná nabídka. Také jste zjistili, jak připnout elementy na stránku, aby se neposunovaly. A naučili jste se přidat odkazy na soubory, aby je návštěvníci mohli stáhnout.

Můžete se také podívat na seskupování objektů a práci se skupinami, abyste mohli na stránky vkládat sady obsahu. Budete pracovat také s dalším vnořeným kódem HTML, tentokrát přidáte interaktivní mapu Google na stránku návštěv. A nakonec se dozvíte, jak doladit web přidáním ikony oblíbené položky a poté publikovat zkušební web na zahrnuté hostingové servery.

Skupinové objekty a vkládání skupin jako jedné jednotky

Podobně jako v aplikaci InDesign a dalších můžete kombinovat několik objektů do skupiny, aby byly považovány za jednu jednotku. V této části vytvoříte návrh složený z několika elementů (vložených obrazů a textových rámečků) a pak zjistíte, jak je lze seskupit, abyste je mohli snadno umístit nebo je zkopírovat jako jednu položku. Postupujte takto:

1. V pohledu Plán dvojitým kliknutím na miniaturu domovské stránky otevřete tuto stránku v pohledu Návrh.
2. Zvolte položky Soubor > Umístit. Vyhledejte a vyberte ve složce ukázkových souborů soubor s názvem panel-open-bottom.png. Kliknutím na Otevřít zavřete dialogové okno Import a pak jedním kliknutím do blízkosti dolního okraje domovské stránky (pod widget Kompozice světelného boxu a nad zápatí) umístěte grafiku v plné velikosti.

Soubor PNG byl nastaven na nižší průhlednost, takže poloprůhledný květinový vzor umožňuje viditelnost dlaždicového obrazu na pozadí.

3. Znovu klikněte na Soubor > Umístit. Tentokrát vyhledejte a vyberte obraz s názvem spoon-map.png. Klikněte na tlačítko Otevřít a pak jej jedním kliknutím do okvětního lístku nahoře uprostřed umístěte.
4. Když je vybrán obraz lžíce, stiskněte a podržte klávesu Option (Mac) nebo Alt (Windows), čímž obraz lžíce duplikujete, a přetáhněte obraz lžíce do okvětního lístku vpravo nejblíže ke středu. Opakováním této akce duplikujte obraz lžíce, a přetáhněte jej k okvětnímu lístku vlevo. Pomocí nástroje Výběr umístěte tyto tři lžíce, jak znázorňuje následující obrázek.

5. Pomocí nástroje Text přetáhněte textový rámeček do centrálního okvětního lístku a zadejte následující text:

Katie's Cafe

Noe Valley

123 Elizabeth Street

PO – PÁ 6:00 – 22:00

SO – NE 7:00 – 22:00

6. Na panelu Text použijte u textu následující nastavení formátování:
   • Písmo: Droid Serif (nebo libovolné písmo serif)
   • Velikost písma: 14
   • Barva písma: #222222  (v části 5 jste tuto barvu nazvali katieblack)
   • Zarovnání písma: Na střed
   • Proklad: 120 %

7. Pak vyberte pouze poslední dva řádky (začínající dny v týdnu) a nastavte barvu písma na červenou (č. A6342A).
8. Pomocí nástroje pro výběr vyberte textový rámeček. Stiskněte a podržte klávesu Option (Mac) nebo Alt (Windows), čímž textový rámeček duplikujete, a přetáhněte jej k okvětnímu lístku co nejblíže vpravo nad obrázek lžíce. Opakováním této akce duplikujte textový rámeček a přetáhněte jej k okvětnímu lístku vlevo. Pomocí nástroje Výběr umístěte tyto tři textové rámečky tak, aby byly zarovnány nad třemi lžícemi, jak znázorňuje následující obrázek.

9. Přepněte do nástroje Text. Vyberte text v levé adrese a změňte jej na:

Katie's Cafe

Laurel Heights

800 Spruce Street

PO – PÁ 5:00 – 12:00

SO – NE 9:00 – 1:00

10. Pomocí nástroje Text vyberte text v pravé adrese a změňte jej na:

Katie's Cafe

Cole Valley

301 Carmel Street

PO – PÁ 7:00 – 22:00

SO – NE 9:00 – 22:00

Když je nyní návrh dokončen, vyberete elementy a seskupíte je.

11. Pomocí nástroje Výběr klikněte a přetáhněte výběr přes celý návrh květiny. Ujistěte se, že jste vybrali vložený obraz květiny, tři obrazy lžíce a tři textové rámečky. Klikněte pravým tlačítkem myši a v zobrazené nabídce klikněte na příkaz Skupina. Můžete také kliknout na položky Objekt > Skupina.

Všimněte si, že po seskupení sady objektů indikátor výběru v levém horním rohu ovládacího panelu zobrazí slovo: Skupina.

12. Zkopírujte vybranou skupinu. Kliknutím na položku Plán se vraťte do pohledu Plán a pak dvojitým kliknutím na miniaturu stránky návštěv otevřete tuto stránku v pohledu návrhu. Výběrem možností Úpravy > Vložit v místě vložte celou skupinu elementů do stejného umístění.

Jak můžete vidět v tomto krátkém příkladu, skupiny jsou užitečné, když jste dokončili návrh a chcete s ním pracovat jako s jedním elementem, přesunovat jej na stránce nebo jej zkopírovat a vložit na jinou stránku.

Kromě seskupení pro vás po dokončení návrhu mohou být užitečné funkce zámku. Klikněte pravým tlačítkem myši na skupinu nebo vybranou sadu elementů a zamkněte je kliknutím na příkaz Zamknout v zobrazené kontextové nabídce. (Můžete také kliknout na položky Objekt > Zamknout). Zamčení zajistí, že náhodně nepřesunete nebo neodstraníte dokončené elementy na stránce, protože je již nebude možné vybrat. Pokud budete zamčené elementy později potřebovat upravit, zvolte možnost Objekt > Odemknout vše na stránce.

Po vložení návrhu květiny do dolní části stránky návštěv je obsah stránky částečně dokončen. V další části budete pokračovat v úpravách stránky návštěv a přidáte interaktivní rozhraní mapy, aby návštěvníci mohli vyhledat nejbližší kavárnu.

Vložení mediálního obsahu pro přidání animace

Využití panelu Rozestup

Panel Rozestup umožňuje používat vlastnosti odsazení a mezer mezi sloupci jazyka CSS. Odsazení vytvoří prostor kolem obsahu (uvnitř okraje) prvku. Odsazení je ovlivňováno barvou pozadí prvku.

Odsazení nahoře, vpravo, dole a vlevo lze nezávisle měnit pomocí samostatných vlastností. Můžete také sjednotit vlastnosti odsazení nastavením jejich jednotných úprav.

1. V aplikaci Adobe Muse zvolte Okno > Rozestup a zobrazí se panel Rozestup.

2. Zadejte hodnoty pro vlastnosti odsazení vlevo, vpravo, nahoře a dole. Chcete-li zadat jiné hodnoty, zrušte výběr tlačítka .

3. Můžete také zadat vlastnosti vodorovných a svislých mezer mezi sloupci.

Změna velikosti a otáčení objektů pomocí panelu Transformace

Aplikace Adobe Muse umožňuje aplikovat na objekty 2D transformace. Objekty můžete umisťovat, měnit jejich velikost a otáčet je podél osy X a Y.

Pomocí přepínače 100% šířka na panelu Transformace můžete nastavit objekt na 100% šířku. Objekty umožňující změnu velikosti lze také nastavit tak, aby se roztáhly po celé šířce prohlížeče podle velikosti obrazovky počítače.

Transformace lze na vybraný objekt aplikovat následujícím způsobem:

1. V aplikaci Adobe Muse zvolte okno > Transformace.

2. Na vybraný objekt lze aplikovat libovolné následující transformace:
   • Pozice: Zadáním hodnot X a Y umístěte objekt do požadovaného místa na webové stránce.
   • Velikost: Zadejte hodnoty Šířka a Výška objektu. Kliknutím na tlačítko můžete také upravit velikost objektu pomocí jednotné šířky a výšky.
   • Natočení (): Zadejte úhel natočení objektu.
   • 100% šířka (): Můžete nastavit objekt na 100% šířku a umožnit jeho roztažení podle šířky prohlížeče.