Jedna od "najtoplijih" tehnika na webu danas je paralaksa pomicanje. Svi smo bili na tim mjestima na kojima rotirate kotačić za upravljanje na mišu, a sadržaj na stranici se pomiče gore ili dolje ili preko stranice dok okrećete kotačić miša.
Za one koji su novi u web dizajnu i grafičkom dizajnu, ova tehnika može biti iznimno teško postići zbog potrebne količine CSS-a.
Ako vas to opisuje, postoji niz aplikacija koje bi se mogle apelirati samo na grafičare. U osnovi koriste poznati pristup stranicama stranica na web stranicama, što znači da nema puno, ako ih ima, kodiranja. Jedna aplikacija koja je doista zurila u istaknuto je Adobe Muse.
Rad koji je napravio grafički profesionalci pomoću Muse je prilično nevjerojatan i možete vidjeti uzorkovanje onoga što možete učiniti posjetom Muse stranice dana . Iako web profesionalci smatraju Muza kao nekakvu "wind-up igračku", također ga koriste dizajneri za izradu mobilnih i web prototipova koji će na kraju biti uručeni razvojnim programerima na timu.
Jedna tehnika koja je nevjerojatno lako postići s Muzeom je paralaksa, a ako želite vidjeti dovršenu verziju vježbe Proći ćemo kroz, usmjeriti vaš preglednik na ovu stranicu. Kada pomičete kotačić za miša, čini se da se tekst pomiče prema gore ili dolje, a slike se mijenjaju.
Započnimo.
01 od 07
Izradite web stranicu
Kada pokrenete Muse kliknite vezu Nova web stranica . Time će se otvoriti svojstva nove web-lokacije . Ovaj projekt će biti dizajniran za desktop aplikaciju i možete ga odabrati na početnom izgledu skočnom izborniku. Možete također postaviti vrijednosti za broj stupaca, širinu žlijeba, margine i padding. U ovom slučaju, nismo bili strašno zabrinuti za ovo i jednostavno kliknuli OK .
02 od 07
Formatiranje stranice
Kada postavite svojstva web stranice i kliknete U redu, preusmjereni ste na ono što se zove Plan pogled. Na vrhu se nalazi Početna stranica i Glavna stranica pri dnu prozora. Trebali smo samo jednu stranicu. Da biste pristupili prikazu dizajna, dvaput smo kliknuli početnu stranicu koja je otvorila sučelje.
Na lijevoj strani nalaze se nekoliko osnovnih alata, a desno su različiti paneli koji se koriste za manipuliranje sadržajem na stranici. Uz vrh su svojstva koja se mogu primijeniti na stranicu ili bilo što odabrano na stranici. U ovom slučaju, htjeli smo imati crnu pozadinu. Da bismo to postigli, kliknemo na žeton boja za ispunjavanje preglednika i odabrali crnu boju iz odabira boja.
03 od 07
Dodaj tekst na stranicu
Sljedeći korak je dodavanje teksta na stranicu. Odabrali smo alat za tekst i izvukli tekstni okvir. Ušli smo u riječ "dobrodošlica" i u Svojstva postavili tekst na Arial, 120 piksela Bijela. Centar je poravnat.
Zatim smo prebacili na alat za odabir, kliknuli na tekstualni okvir i postavili njegov položaj na 168 piksela s vrha. Ako je tekstni okvir još uvijek odabran, otvorili smo okvir Align i poravnali tekstni okvir u središte.
Konačno, odabranim tekstualnim okvirom držali smo tipke Option / Alt i Shift i napravili četiri kopije tekstualnog okvira. Promijenili smo tekst i položaj Y svake kopije na:
- Za, 871
- Grafika, 1621
- Softver, 2371
- @ About.com, 3181
Primijetit ćete, prilikom postavljanja lokacije svakog tekstualnog okvira, veličinu stranice kako biste prilagodili mjesto teksta.
04 od 07
Dodaj slikovni prostor
Sljedeći je korak stavljanje slika između blokova teksta.
Prvi korak je odabir alata pravokutnika i nacrtati okvir koji se proteže s jedne strane stranice na drugu. S odabranim pravokutnikom postavili smo visinu do 250 piksela i položaj Y na 425 piksela . Plan je da ih se uvijek protežu ili ugovorite do širine stranice kako bi se prilagodili korisničkom pregledniku. Da bismo to postigli, kliknuli smo gumb 100% širine u Svojstva. Ono što to čini sive je vrijednosti X i kako bi slika bila uvijek 100% širine prikaza u pregledniku.
05 od 07
Dodaj slike na srodne mjesta s slikom
Pomoću odabranog pravokutnika kliknuli smo vezu Ispuni - a ne Chip boje - i kliknuli I mage tintu da biste dodali sliku u pravokutnik. U području Priloga odabrali smo Skale za fit i kliknuli središnju ručku u području položaja kako bismo osigurali da je slika izrezana iz središta slike.
Zatim smo upotrijebili tehniku opcija Option / Alt-Shift da stvorimo kopiju slike između prva dva bloka teksta, otvorimo ploču Ispuni i zamijenimo sliku drugoj. Učinili smo to za preostale dvije slike.
S slikama na mjestu, vrijeme je za dodavanje kretnje.
06 od 07
Dodaj Parallax Pomicanje
Postoji nekoliko načina dodavanja pomicanja paralakse u programu Adobe Muse. Pokazat ćemo vam jednostavan način za to.
Kada otvorite ploču Ispuni, kliknite karticu Pomicanje i, kada se otvori, kliknite potvrdni okvir Kretanje .
Vidjet ćete vrijednosti za Inicijalni i Završni pokret . Oni određuju brzinu slike koja se kreće u odnosu na kotačić za pomicanje. Na primjer, vrijednost 1,5 će premjestiti sliku 1,5 puta brže od kotača. Koristili smo vrijednost od 0 da bismo zaključali slike na mjestu.
Horizontalne i vertikalne strelice određuju smjer kretanja. Ako su vrijednosti 0, slike se neće mijenjati bez obzira na koju strelicu kliknete.
Srednja vrijednost - Položaj ključa - pokazuje točku gdje se slike počinju kretati. Redak iznad slike započinje, za ovu sliku, 325 piksela od vrha stranice. Kada pomična stranica dosegne tu vrijednost, slika se počinje pomicati. Tu vrijednost možete promijeniti tako da ga promijenite u dijaloškom okviru ili klikom i povlačenjem točke na vrhu linije gore ili dolje.
Ponovite ovo za ostale slike na stranici.
07 od 07
Test preglednika
U ovom smo trenutku završili. Prva stvar koju smo napravili, iz očitih razloga, bila je odabrati File> Save Site . Za testiranje preglednika jednostavno smo odabrali Datoteka> Pregledna stranica u pregledniku . To je otvorilo zadani preglednik našeg računala i kada smo otvorili stranicu, počeli smo pomicati.