Na panelu nástrojů klikněte na nástroj obdélníkového rámečku nebo eliptického rámečku.
Naučte se organizovat, spravovat a transformovat různé objekty v aplikaci Adobe Muse. Dále se dozvíte, jak optimalizovat obrázky pro aplikaci Adobe Muse.
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.
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.
Na panelu nástrojů klikněte na nástroj obdélníkového rámečku nebo eliptického rámečku.
Klikněte na nástroj rámečku obrazu a přetažením umístěte rámeček obrazu do projektu.
Kliknutím a umístěním můžete do projektu umístit několik rámečků obrazů. Můžete také měnit velikost rámečků obrazů a přesouvat je podle potřeb návrhu.
Rámeček můžete vyplnit barvou nebo do rámečku můžete umístit obraz. Obraz umístíte přetažením na rámeček. Velikost obrazu se upraví podle rámečku.
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ě:
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.
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ů.
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.
Tvar zástupce může být elipsa, obdélník nebo polygon a můžete jej vyplnit obrazem, textem nebo barvou.
Na panelu nástrojů vyberte buď nástroj obdélník nebo nástroj elipsa.
Přetažením umístěte tvar obdélníku nebo elipsy do projektu Adobe Muse.
Tvary můžete vyplnit grafikou, textem nebo barvou.
Chcete-li nastavit vlastnosti přizpůsobení objektu, vyberte obdélník nebo elipsu a klikněte na možnost nabídky Objekt > Přizpůsobení.
Můžete vybrat jednu z následujících možností přizpůsobení:
Zvolte Soubor > Umístit tlačítko aplikace Photoshop. V zobrazeném dialogu Import z Photoshopu vyhledejte soubor ve formátu PSD. Vyberte soubor kliknutím na tlačítko Vybrat (Mac) nebo Otevřít (Windows).
Zobrazí se dialog Volby importu aplikace Photoshop. Prohlédněte si způsob, jakým jsou nastavení používána. Pomocí nabídek můžete určit, která vrstva souboru aplikace Photoshop se zobrazí jako normální stav tlačítka (způsob, jakým se tlačítko zobrazuje při prvním načtení stránky), stav při přechodu myši (způsob, jakým se tlačítko zobrazuje, když nad ním návštěvník podrží kurzor) a při kliknutí myší (způsob, jakým se tlačítko zobrazuje, když na něho návštěvník klikne). Zde uvedené tři stavové nabídky zobrazují názvy vrstev souboru Photoshop a obrazy miniatur vizuálně znázorňují vzhled jednotlivých vybraných vrstev.
V této ukázce byly již vrstvy souboru Photoshop správně uspořádány pro zobrazení stavů tlačítka. Nastavení nabídek není tedy nutné měnit. Kliknutím na tlačítko OK potvrďte výchozí uspořádání stavů.
Jedním kliknutím v pravé horní části záhlaví stránky A-vzorová umístěte soubor aplikace Photoshop v jeho originální velikosti.
Kliknutím na odkaz Náhled spusťte emulátor vykreslení založený na modulu WebKit. Zkontrolujte zobrazení stránky A-vzorová. Při prvním zobrazení stránky se zobrazí tlačítko v normálním stavu. Pokud nad tlačítkem podržíte kurzor, dojde k malé změně jeho vzhledu (hnědá barva kapky zesvětlá) a pokud na tlačítko kliknete, změní se po dobu stisknutí tlačítka myši bílá barva textu na světle hnědou.
Kliknutím na odkaz Návrh se vraťte k úpravám stránky A-vzorová v zobrazení Návrh.
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ř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:
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.
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:
Soubor PNG byl nastaven na nižší průhlednost, takže poloprůhledný květinový vzor umožňuje viditelnost dlaždicového obrazu na pozadí.
Katie's Cafe
Noe Valley
123 Elizabeth Street
PO – PÁ 6:00 – 22:00
SO – NE 7:00 – 22:00
Katie's Cafe
Laurel Heights
800 Spruce Street
PO – PÁ 5:00 – 12:00
SO – NE 9:00 – 1:00
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.
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.
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.
V zobrazení Plán dvojitým kliknutím na miniaturu stránky MasterFlash otevřete tuto stránku pro úpravy v zobrazení Návrh. Jelikož jste stránku A-vzorová předtím duplikovali, nachází se v ní stále ještě statický obraz s logem. Statický obraz vám pomůže přesně umístit obdélník s animací, ale nezapomeňte tento statický obraz loga po vložení multimediálního prvku odstranit.
Zvolte Soubor > Umístit. V zobrazeném dialogu Importovat přejděte do složky Kevins_Koffee_Kart a vyberte soubor pojmenovaný logo.swf.
Umístěte soubor SWF do levého horního rohu, přesně na umístění stávajícího souboru s logem.
Po zarovnání nového okna souboru SWF se starším statickým logem toto statické logo odstraňte tak, že jej vyberete a stisknete klávesu Delete.
Zkontrolujte si vzhled celého webu, včetně nových změn v domovské stránce, pomocí příkazu Soubor > Náhled webu v prohlížeči a vyzkoušejte zobrazení loga na různých stránkách. Není nutné web publikovat, můžete pracovat lokálně na svém počítači a poté si zobrazit náhled webu v prohlížeči a procházet stránkami pomocí navigace webu. Všimněte si, že animace (soubor SWF) se na domovské stránce zobrazí jednou a poté se zastaví. Když kliknete na ostatní stránky, zobrazí se pouze statické logo.
Pokud použijete příkaz nabídky Soubor > Náhled webu v prohlížeči, načte se nové okno prohlížeče zobrazující domovskou stránku rychleji, ale zobrazí pouze náhled aktivní (domovské) stránky. Tuto volbu tedy použijte pouze v případě, když chcete zkontrolovat jednu stránku webu, a nikoli celý web.
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.
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:
Přihlaste se ke svému účtu.