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 grafici profesionáli pomocou Muse je celkom úžasná a môžete vidieť vzorkovanie toho, čo môžete urobiť navštívením Muse Miesto dňa , 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. 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 07Vytvorte webovú stránku
Keď spustíte Muse, kliknite na tlačidlo Nový web link. Otvorí sa to Nové vlastnosti stránky, Tento projekt bude navrhnutý pre desktopovú aplikáciu a môžete ju vybrať v Počiatočné rozloženie rozbaľovacej ponuky. Môžete tiež nastaviť hodnoty počtu stĺpcov, šírky žľabu, okrajov a výplne. V tomto prípade sme sa s touto záležitosťou nebáli a jednoducho sme klikli OK.
Formátovanie stránky
Keď nastavíte vlastnosti stránky a kliknete na ne OK ste boli vzatí k tomu, čo sa nazýva plán vyhliadka. Existuje a Domov stránky v hornej časti stránky 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 ste to dosiahli, klikneme na Vyplňte prehľadávač farebný čip a vybrali čierne z výberu farieb.
03 z 07Pridajte text na stránku
Ďalším krokom je pridať nejaký text na stránku. Vybrali sme Textový nástroj a vytiahol textové pole. Zadali sme slovo "Vitajte" av časti Vlastnosti nastavíme text na Arial, 120 pixelov biela. Center Aligned.
Následne sme prešli na výberový nástroj, klikli sme na textové pole a nastavili jeho Pozíciu Y na hodnotu 168 pixelov zhora. Po vybratí textového poľa sme otvorili Zarovnať panel a zarovnajte textové pole so stredom.
Napokon, pri vybratom textovom poli sme držali nadol Option / Alt a smena a vytvorili š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
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 07Pridajte zástupné symboly obrázka
Ďalším krokom je vloženie obrázkov medzi textové bloky.
Prvým krokom je výber Obdĺžnikový nástroj a nakresliť našu škatuľu, ktorá sa tiahne z jednej strany na druhú. S vybratým obdĺžnikom nastavíme jeho výška až 250 pixelov a jeho 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 100% šírka v Vlastnosti. Čo robí, je šedá hodnota X a zaistiť, aby obraz bol v prehliadači vždy 100% šírky výrezu.
05 z 07Pridajte obrázky do zástupných symbolov obrázka
S vybratým Obdĺžnikom sme klikli na Vyplniť odkaz - nie farebný čip - a klikli na tlačidlo Iatrament mágie pridať obrázok do obdĺžnika. V vybavenie oblasti sme vybrali Zväčšiť aby to sedelo a kliknite na tlačidlo stredová rukoväť v pozície aby ste zabezpečili, že obraz bude zmenšený od stredu obrazu.
Ďalej sme použili Option / Alt-Shift-ťahať techniku vytvoriť kópiu obrazu medzi prvými dvoma textovými blokmi, otvoriť panel Vyplniť a vymazať 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 07Pridať 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 Posúvajte kartu a keď sa otvorí, kliknite na tlačidlo Motion checkbox.
Uvidíte hodnoty pre počiatočné a Final Motion, 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čiť smer pohybu.Ak sú hodnoty 0, obraz sa nezmizne bez ohľadu na šípku, ktorú kliknete.
Stredná hodnota – Kľúčová pozícia - 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 07Testovanie prehliadača
V tomto momente sme skončili. Prvá vec, ktorú sme zo zrejmých dôvodov vybrali 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ť.
