Jednou z "nejžhavějších" technik na webu dnes je paralaxa rolování. My všichni jsme na těch místech, kde otáčíte kolečkem myši a obsah stránky se pohybuje nahoru a dolů nebo přes stránku při otáčení kolečka myši.
Pro ty, kteří jsou noví na web design a grafický design, může být tato technika obtížně dosažitelná kvůli množství potřebných CSS.
Pokud vás to popisuje, existuje řada aplikací, které se mohou obrátit jen na grafiku. V podstatě používají známý přístup k rozvržení stránek na webové stránky, což znamená, že není zapotřebí mnoho kódování. Jednou z aplikací, která se opravdu dostala do popředí, je Adobe Muse.
Práce, kterou provádí grafické profesionály pomocí Muse, je docela úžasná a můžete vidět vzorek toho, co můžete udělat návštěvou Muse Místo dne . Ačkoli internetoví profesionálové mají tendenci považovat Muse za nějakou "wind-up hračku", používají je také návrháři k vytvoření mobilních a webových prototypů, které budou eventuálně předány vývojářům v jejich týmu.
Jedna technika, která je s Muse neuvěřitelně jednoduchá, je posouvání paralaxy a pokud chcete vidět dokončenou verzi cvičení. Když posouváte kolečko myši, zdá se, že se text pohybuje nahoru nebo dolů na stránce a obrázky se mění.
Začněme.
01 z 07Vytvořte webovou stránku
Když spustíte Muse, klikněte na tlačítko Nové stránky odkaz. Otevře se Nové vlastnosti serveru. Tento projekt bude navržen pro aplikaci pro stolní počítače a můžete ji vybrat v aplikaci Počáteční rozložení rozbalovací nabídka. Můžete také nastavit hodnoty počtu sloupců, šířky žlábku, okrajů a polstrování. V tomto případě jsme se s tím moc netrápili a jednoduše jsme klikli OK.
Formátování stránky
Když nastavíte vlastnosti webu a kliknete OK byli jste odvezeni do toho, co je nazýváno Plán Pohled. Tady je Domov stránky v horní části a a Hlavní stránka v dolní části okna. Potřebovali jsme pouze jednu stránku. Chcete-li se dostat do Design View, dvakrát jsme klikli na domovskou stránku, která otevře rozhraní.
Vlevo je několik základních nástrojů a vpravo jsou různé panely používané k manipulaci s obsahem na stránce. Podél horní části jsou vlastnosti, které lze použít na stránku, nebo něco, co je na stránce vybráno. V tomto případě jsme chtěli mít černé pozadí. K tomu dosáhnete kliknutím na tlačítko Vyplňte prohlížeč barevný čip a vybral černý z výběru barev.
03 ze dne 07Přidat text na stránku
Dalším krokem je přidat nějaký text na stránku. Vybrali jsme si Textový nástroj a vytáhl textový rámeček. Zadali jsme slovo "Vítejte" a ve složce Vlastnosti jsme nastavili text Arial, 120 pixelů bílá. Center Aligned.
Následně jsme přešli na nástroj pro výběr, klikli na textové pole a nastavili jeho Poloha Y na 168 pixelů shora. Po výběru textového pole jsme otevřeli Zarovnejte panel a zarovnat textové pole do středu.
Nakonec s vybraným textovým rámečkem jsme podrželi dolů Možnost / Alt a Posun a vytvořil čtyři kopie textového pole. Změnili jsme text a polohu Y každé kopie na:
- To, 871
- Grafika, 1621
- Software, 2371
Všimnete si, že když nastavíte umístění každého textového pole, velikost stránky se přizpůsobí umístění textu.
04 z 07Přidání zástupců obrázků
Dalším krokem je umístit obrázky mezi textové bloky.
Prvním krokem je výběr Nástroj Obdélník a nakreslíme krabici, která se táhne z jedné strany stránky na druhou. S vybraným obdélníkem nastavíme jeho výška až 250 pixelů a jeho Y na 425 pixelů. Plán je nechat je vždy roztahovat nebo zkrátit na šířku stránky přizpůsobit prohlížeč prohlížeče uživatele. K tomu jsme klikli 100% šířka v Vlastnosti. Co to dělá, je šedá hodnota X a zajistit, aby obraz byl v prohlížeči vždy 100% šířky výřezu.
05 z 07Přidání obrázků do zástupců obrázků
S vybraným Obdélníkem jsme klikli Vyplnit odkaz - ne Barevný čip - a kliknul jsem na Iinkoust mágie přidat obrázek do obdélníku. V Montáž oblasti jsme vybrali Měřítko pro přizpůsobení a klikněte na tlačítko středová rukojeť v Pozice , abyste zajistili, že obraz bude zmenšen od středu obrazu.
Dále jsme použili Option / Alt-Shift techniku pro vytvoření kopie obrazu mezi prvními dvěma textovými bloky, otevření panelu Vyplnit a výměna obrázku za jinou. Udělali jsme to i pro zbývající dva obrázky.
S obrázky na místě, je čas přidání pohybu.
06 z 07Přidat Parallax Scrolling
Existuje několik způsobů, jak přidat scrolling paralaxy v Adobe Muse. Ukážeme vám jednoduchý způsob, jak to zvládnout.
Otevřete panel Výplň a klepněte na tlačítko Posunout kartu a když se otevře, klikněte na tlačítko Zaškrtávací políčko Motion.
Uvidíte hodnoty pro Počáteční a Konečný pohyb. Ty určují, jak rychle se pohybuje obraz ve vztahu k otočnému kolečku. Například hodnota 1,5 posune obrázek 1,5 krát rychleji než kolo. Při uzamknutí obrázků jsme použili hodnotu 0.
The Horizontální a vertikální šipky určit směr pohybu.Pokud jsou hodnoty 0, snímky nebudou blikat bez ohledu na to, kterou šipku kliknete.
Střední hodnota – Klíčová pozice - ukazuje místo, kde se snímky začnou pohybovat. Řádek nad obrazem začíná pro tento obrázek 325 pixelů od horní části stránky. Když posuvník dosáhne této hodnoty, obraz se začne pohybovat. Tuto hodnotu můžete změnit buď změnou v dialogovém okně nebo klepnutím a přetažením bodu v horní části řádku nahoru nebo dolů.
Opakujte to pro ostatní snímky na stránce.
07 z 07Test prohlížeče
V tomto okamžiku jsme skončili. První věc, kterou jsme z pochopitelných důvodů udělali, bylo vybrat Soubor> Uložit stránku. Pro testování prohlížeče jsme jednoduše vybrali Soubor> Náhled stránky v prohlížeči. Tím jsme otevřeli výchozí prohlížeč počítače a po otevření stránky jsme začali procházet.
