Ena izmed "najbolj vročih" tehnik na spletu danes je paralakalno pomikanje. Vsi smo bili na tistih mestih, na katerih vrtite kolesce za pomikanje na miški, vsebina na strani pa se premika navzgor ali navzdol ali čez stran, ko zavrtite kolesce miške.
Za tiste nove, ki se nanašajo na spletno oblikovanje in grafično oblikovanje, je to tehniko izjemno težko doseči zaradi količine potrebnega CSS.
Če vas to opisuje, obstaja veliko aplikacij, ki se lahko pritožijo samo grafičnim izvajalcem. V bistvu uporabljajo znani način postavitve strani na spletne strani, kar pomeni, da ni veliko, če sploh, kodiranje. Ena aplikacija, ki je resnično uveljavljena, je Adobe Muse.
Delo, ki ga opravljajo grafični profesionalci z uporabo Musea, je precej neverjetno in si lahko ogledate vzorčenje, kaj lahko storite z obiskom Musea Spletna stran dneva . Čeprav spletni strokovnjaki menijo, da je Muse nekakšna "vetrna igrača", jo oblikovalci uporabljajo tudi za ustvarjanje mobilnih in spletnih prototipov, ki bodo sčasoma izročili razvijalcem v svoji ekipi.
Ena tehnika, ki je izjemno enostavna za izvedbo z Museom je paralakalno pomikanje in, če želite videti izpolnjeno različico vaje. Ko zavrtite kolesce za pomikanje miške, se zdi, da se besedilo premakne navzgor ali navzdol po strani in se slike spremenijo.
Začnimo.
01 od 07Ustvarite spletno stran
Ko zaženete Muse, kliknite na Nova spletna stran povezavo. To bo odprlo Lastnosti novega spletnega mesta. Ta projekt bo zasnovan za namizno aplikacijo in ga lahko izberete v Začetna postavitev spustni meni. Vrednosti lahko nastavite tudi za število stolpcev, širine žleba, robov in oblog. V tem primeru nas nismo zelo skrbeli in preprosto kliknili v redu.
Oblikujte stran
Ko nastavite lastnosti spletnega mesta in kliknete v redu odnesli ste se na tisto, kar se imenuje Načrt pogled. Obstaja Domov stran na vrhu in a Glavna stran na dnu okna. Potrebovali smo samo eno stran. Da bi prišli do Design View, smo dvokliknite na domačo stran, ki je odprla vmesnik.
Na levi strani je nekaj osnovnih orodij in na desni strani so različne plošče za manipuliranje vsebine na strani. Na vrhu so lastnosti, ki se lahko uporabijo na strani ali kaj drugega, ki je izbrano na strani. V tem primeru smo želeli imeti črno ozadje. Za dosego tega, kliknite na Brskalnik izpolnite barvni čip in izberete črno iz Color Pickerja.
03 od 07Dodaj besedilo na stran
Naslednji korak je dodati nekaj besedila na stran. Izbrali smo Orodje za besedilo in izvlekel polje z besedilom. Vnesli smo besedo "Dobrodošli" in v nastavitvah Properties nastavili besedilo na Arial, 120 slikovnih pik Bela. Center poravnani.
Nato smo preklopili na orodje za izbiro, kliknili na polje za besedilo in ga nastavili Y položaj do 168 pikslov z vrha. Z izbrano besedilno polje smo odprli Poravnajte ploščo in usmerite besedilno polje v center.
Nazadnje, z izbranim besedilnim poljem smo zadržali Možnost / Alt in Shift tipke in naredil štiri kopije besedilnega polja. Besedilo in položaj Y vsake kopije smo spremenili na:
- Do, 871
- Grafika, 1621
- Programska oprema, 2371
Ko boste določili lokacijo vsakega besedilnega polja, boste opazili, da se stran prilagodi glede na lokacijo besedila.
04 od 07Dodajanje podobe slik
Naslednji korak je ustvarjanje slik med besedilnimi bloki.
Prvi korak je, da izberete Pravokotno orodje in narišite našo škatlo, ki se razteza od ene strani do druge strani. S pravokotnikom, ki smo ga izbrali, ga nastavimo višina do 250 slikovnih pik in njeno Y položaj do 425 slikovnih pik. Načrt je, da se vedno raztezajo ali se strinjajo s širino strani, da se prilagodi uporabniški pogled v brskalniku. Za dosego tega smo kliknili na 100% širina gumb v lastnostih. Kaj to naredi je siva iz vrednosti X in zagotovite, da je slika vedno 100% širine pogleda v brskalniku.
05 od 07Dodaj slike v podobe slikalcev
Z izbranim pravokotnikom smo kliknili na Izpolnite povezavo - ne Color Chip - in kliknil na Ičrnilo črnila dodati sliko v pravokotnik. V Ljubljani Montaža smo izbrali Scale To Fit in kliknili na sredinski ročaj v Položaj da zagotovite, da se slika pomakne iz središča slike.
Nato smo uporabili Option / Alt-Shift-povleci tehnika ustvariti kopijo slike med prvima dvema besedilnima blokoma, odprla ploščo Polnilo in zamenjala sliko za drugo. To smo storili tudi za preostale dve sliki.
S slikami na mestu je čas, da dodate gibanje.
06 od 07Dodaj Parallax pomikanje
Obstaja več načinov dodajanja paralakse v Adobe Museu. Pokazali vam bomo preprost način za to.
Ko je plošča Fill odprta, kliknite Zavihek za pomikanje in ko se odpre, kliknite na Potrditveno polje.
Videli boste vrednosti za Začetni in Final Motion. Ti določajo, kako hitro se premika slika glede na kolesce za drsenje. Na primer, vrednost 1,5 premakne sliko 1,5-krat hitreje kot kolo. Uporabili smo vrednost 0 za zaklepanje slik na mestu.
The Horizontalne in vertikalne puščice določi smer gibanja.Če so vrednosti 0, se slike ne premaknejo ne glede na to, s katero puščico kliknete.
Srednja vrednost – Ključni položaj - prikazuje točko, kjer se slike začnejo premikati. Črta nad sliko se začne za to sliko 325 vrst od vrha strani. Ko drsnik doseže to vrednost, se slika začne premikati. To vrednost lahko spremenite tako, da jo spremenite v pogovornem oknu ali tako, da kliknete in povlečete točko na vrhu črte bodisi gor ali dol.
Ponovite to za druge slike na strani.
07 od 07Preskus brskalnika
Na tej točki smo bili končani. Prva stvar, ki smo jo zaradi očitnih razlogov izbrali Datoteka> Shrani stran. Preskus brskalnika smo preprosto izbrali Datoteka> Predogled strani v brskalniku. To je odprlo privzeti brskalnik našega računalnika in ko se je stran odprla, smo začeli pomikati.
