Jednou z "najhorúcejších" techník na dnešnom webe je paralaxa rolovanie. Všetci sme boli na stránkach, na ktorých otáčate rolovacím kolieskom na myši a obsah stránky sa pohybuje hore a dole alebo po celej stránke pri otáčaní kolieska myši.
Pre tých nových, ktorí sa zaoberajú návrhom webových stránok a grafickým dizajnom, môže byť táto technika mimoriadne ťažko dosiahnutá kvôli potrebnej veľkosti CSS.
Ak vás to opisuje, existuje niekoľko aplikácií, ktoré sa môžu obrátiť na grafických umelcov. Oni v podstate používajú známy prístup k rozloženiu stránok na webových stránkach, čo znamená, že nie je veľa, ak nejaké, kódovanie je zapojený. Jednou z aplikácií, ktorá sa naozaj dostala do popredia, je Adobe Muse.
Práca, ktorú robia profesionálni grafici pomocou nástroja Muse, je celkom úžasná a môžete vidieť vzorkovanie toho, čo môžete urobiť, keď navštívite stránku Muse The Day . Hoci weboví profesionáli majú tendenciu považovať Muse za určitú "wind-up hračku", dizajnéri ju používajú aj na vytváranie mobilných a webových prototypov, ktoré budú eventuálne odovzdané vývojárom v ich družstve.
Jednou technikou, s ktorou je Muse neuveriteľne ľahké, je posúvanie paralaxy a ak chcete vidieť dokončenú verziu cvičenia. Budeme prechádzať, nasmerovať váš prehliadač na túto stránku. Pri rolovaní rolovacieho kolieska myši sa zdá, že text sa pohybuje hore alebo dole na stránke a obrázky sa menia.
Začnime.
01 z 07
Vytvorte webovú stránku
Keď spustíte Muse, kliknite na odkaz Nový web . Tým sa otvoria nové vlastnosti stránky . Tento projekt bude navrhnutý pre desktopovú aplikáciu a môžete ju vybrať v rozbaľovacej ponuke Počiatočné rozloženie . Môžete tiež nastaviť hodnoty počtu stĺpcov, šírky žľabu, okrajov a výplne. V tomto prípade sme sa s tým netrápili a jednoducho klikli na OK .
02 z 07
Formátovanie stránky
Keď ste nastavili vlastnosti stránky a klikli ste na tlačidlo OK, dostali ste sa do toho, čo sa nazýva Plan view. V hornej časti je hlavná stránka a hlavná stránka v spodnej časti okna. Potrebovali sme iba jednu stránku. Ak sa chcete dostať do Design View, dvakrát sme klikli na domovskú stránku, ktorá otvorila rozhranie.
Na ľavej strane je niekoľko základných nástrojov a vpravo sú rôzne panely používané na manipuláciu s obsahom na stránke. V hornej časti sú vlastnosti, ktoré sa môžu použiť na stránku alebo niečo, čo je na stránke vybrané. V tomto prípade sme chceli mať čierne pozadie. Aby sme to dosiahli, klikneme na farebný čip prehliadača a vyberieme čierne z výberu farieb.
03 z 07
Pridajte text na stránku
Ďalším krokom je pridať nejaký text na stránku. Vybrali sme Textový nástroj a vybrali sme textové pole. Zadali sme slovo "Vitajte" a v časti Vlastnosti nastavte text na Arial, 120 pixelov Biela. Center Aligned.
Následne sme prešli na nástroj výberu, klikli sme na textové pole a nastavili jeho polohu Y na 168 pixelov hore. Po vybratí textového poľa sme otvorili panel Zarovnať a zarovnali textové pole do stredu.
A nakoniec, pri vybratom textovom poli sme podržali klávesy Option / Alt a Shift a urobili sme štyri kópie textového poľa. Text a pozíciu Y každej kópie sme zmenili na:
- Do, 871
- Graphics, 1621
- Software, 2371
- @ Quajto.info, 3181
Všimnete si, že keď nastavíte umiestnenie každého textového poľa, veľkosť stránky sa zmení tak, aby vyhovovala umiestneniu textu.
04 z 07
Pridajte zástupné symboly obrázka
Ďalším krokom je vloženie obrázkov medzi textové bloky.
Prvým krokom je vybrať Nástroj Obdĺžnik a nakresliť rámček, ktorý sa tiahne z jednej strany stránky do druhej. Pri zvolenom obdĺžniku nastavíme výšku na 250 pixlov a jeho pozíciu Y na 425 pixelov . Plán je mať ich vždy roztiahnuť alebo kontrastovať so šírkou stránky tak, aby vyhovovali zobrazeniu prehliadača používateľa. Aby sme to dosiahli, klikli sme na tlačidlo 100% šírky v časti Vlastnosti. Čo robí, je šedá hodnota X a zaistiť, aby obraz bol v prehliadači vždy 100% šírky výrezu.
05 z 07
Pridajte obrázky do zástupných symbolov obrázka
S vybraným obdĺžnikom sme klikli na odkaz Vyplniť - nie na farbu čipu - a klikli sme na atrament I magic, aby sme pridali obrázok do obdĺžnika. V oblasti Spojenie sme vybrali položku Scale To Fit a klikli sme na strednú rukoväť v oblasti Position (Poloha), aby sme zabezpečili, že obraz bude zmenšený od stredu obrazu.
Ďalej sme použili techniku drag / Alt-Shift, aby sme vytvorili kópiu obrázka medzi prvými dvoma textovými blokmi, otvorili panel Vyplniť a vymeníme obrázok za iný. Urobili sme to aj pre zvyšné dva obrázky.
S obrázky na mieste, je čas pridať pohyb.
06 z 07
Pridať Parallax rolovanie
Existuje niekoľko spôsobov, ako pridať scrolling paralaxy v aplikácii Adobe Muse. Ukážeme vám jednoduchý spôsob, ako to urobiť.
Po otvorení panelu Výplň kliknite na kartu Posúvanie a po jeho otvorení kliknite na začiarkavacie políčko Pohyb .
Zobrazia sa hodnoty pre počiatočné a konečné pohyby . Tieto určujú, ako rýchlo sa obraz posúva vo vzťahu k rolovaciemu koliesku. Napríklad hodnota 1,5 posunie obrázok o 1,5 krát rýchlejšie ako koleso. Na uzamknutie obrázkov sme použili hodnotu 0.
Horizontálne a vertikálne šípky určujú smer pohybu. Ak sú hodnoty 0, obraz sa nezmizne bez ohľadu na šípku, ktorú kliknete.
Stredná hodnota - pozícia klávesov - zobrazuje miesto, kde sa obrázky začnú pohybovať. Čiarka nad obrazom začína pre tento obrázok 325 pixelov od hornej časti stránky. Keď posuvník dosiahne túto hodnotu, obrázok sa začne pohybovať. Túto hodnotu môžete zmeniť buď zmenou v dialógovom okne, alebo kliknutím a posunutím bodu v hornej časti čiary nahor alebo nadol.
Zopakujte to pre ostatné obrázky na stránke.
07 z 07
Testovanie prehliadača
V tomto momente sme skončili. Prvá vec, ktorú sme urobili, bola zo zrejmých dôvodov vybrať položku Súbor> Uložiť stránku . Na testovanie prehliadača sme jednoducho vybrali Súbor> Náhľad stránky v prehliadači . Toto otvorilo predvolený prehliadač počítača a po otvorení stránky sme začali rolovať.