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 prováděné grafickými profesionály pomocí Muse je docela úžasné a můžete vidět vzorek toho, co můžete udělat návštěvou Muse Site of the Day . 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.
Jednou z technik, která je s Muse neuvěřitelně snadná, je posun paralaxy a pokud chcete vidět dokončenou verzi cvičení. Procházíme a nasměrujeme Váš prohlížeč na tuto stránku. 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 07
Vytvořte webovou stránku
Když spustíte Muse, klikněte na odkaz Nový web . Tím se otevře nové vlastnosti serveru . Tento projekt bude navržen pro aplikaci pro stolní počítače a můžete ji vybrat v rozbalovací nabídce Výchozí rozvržení . 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 prostě klikli na OK .
02 z 07
Formátování stránky
Když jste nastavili vlastnosti webu a klikli jste na OK, byli jste převedeni na to, co se nazývá pohled na plán . V horní části je domovská stránka a hlavní stránka ve spodní čá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í. Abychom toho dosáhli, klikneme na černobílý čip Browser Fill a vybereme černý z výběru barev.
03 ze dne 07
Přidat text na stránku
Dalším krokem je přidat nějaký text na stránku. Vybrali jsme textový nástroj a vytáhli textové pole. Zadali jsme slovo "Vítejte" a ve Vlastnosti nastavíme text na Arial, 120 pixelů bílý. Center Aligned.
Pak jsme přešli na nástroj pro výběr, klikli jsme na textové pole a nastavili jeho polohu Y na 168 pixelů od horní části. Po výběru textového pole jsme otevřeli panel Zarovnat a zarovnali textové pole do středu.
Nakonec s vybraným textovým rámečkem jsme podrželi klávesy Option / Alt a Shift a vytvořili čtyři kopie textového pole. Změnili jsme text a polohu Y každé kopie na:
- To, 871
- Grafika, 1621
- Software, 2371
- @ About.com, 3181
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 07
Přidání zástupců obrázků
Dalším krokem je umístit obrázky mezi textové bloky.
Prvním krokem je vybrat Nástroj Obdélník a nakreslit náš rámeček, který se táhne od jedné strany stránky k druhé. S vybraným obdélníkem nastavíme výšku na 250 pixelů a jeho polohu 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 na tlačítko o šířce 100% ve vlastnostech. 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 07
Přidání obrázků do zástupců obrázků
S vybraným obdélníkem jsme klikli na odkaz Vyplnit - nikoliv na barevný čip - a kliknuli na inkoust I magie pro přidání obrázku do obdélníku. V oblasti Fitting jsme zvolili položku Scale To Fit a kliknutím na středovou rukojeť v oblasti Position (Poloha) zajistíme, že obraz bude zmenšen od středu obrazu.
Dále jsme použili techniku drag / Alt-Shift pro přetahování kopie obrazu mezi první dva textové bloky, otevření panelu Fill a výměnu obrázku za jiný. 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 07
Př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 Vyplnění, klepněte na kartu Posun a při jeho otevírání klikněte na zaškrtávací políčko Pohyb .
Zobrazí se hodnoty počátečního a konečného pohybu . 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.
Horizontální a vertikální šipky určují směr pohybu. Pokud jsou hodnoty 0, snímky nebudou blikat bez ohledu na to, kterou šipku kliknete.
Střední hodnota - Klíčová poloha - 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 07
Test prohlížeče
V tomto okamžiku jsme skončili. První věc, kterou jsme udělali ze zřejmých důvodů, bylo vybrat soubor File> Save Site . 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.