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 se bavi grafičkim profesionalcima pomoću Muse je prilično nevjerojatan i možete vidjeti uzorkovanje onoga što možete učiniti posjetom Muse Mjesto 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 Museom je paralaksa i ako želite vidjeti završenu verziju vježbe. 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 07Izradite web stranicu
Kada pokrenete Muse kliknite na Nova web stranica veza. To će otvoriti Svojstva nove web-lokacije, Ovaj projekt će biti dizajniran za desktop aplikaciju i možete ga odabrati u Početni izgled skočni izbornik. Možete također postaviti vrijednosti za broj stupaca, širinu žlijeba, margine i padding. U ovom slučaju, nismo bili strašno zabrinuti za to i jednostavno kliknuli u redu.
Formatiranje stranice
Kada postavite entitete web mjesta i kliknete u redu bili ste odvedeni na ono što se zove Plan pogled. Tamo je Dom stranica na vrhu i a Glavna stranica na 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 Ispunjavanje preglednika boja i izabrao crnu boju iz Birača boja.
03 od 07Dodaj tekst na stranicu
Sljedeći korak je dodavanje teksta na stranicu. Odabrali smo Alat za tekst i izvukao tekstualni okvir. Ušli smo u riječ "Dobrodošli" i u Svojstva postavili tekst Arial, 120 piksela bijela. Centar je poravnat.
Zatim smo se prebacili na alat za odabir, kliknuli na tekstualni okvir i postavili ga Položaj Y na 168 piksela s vrha. Kada je tekstni okvir još uvijek odabran, otvorili smo Poravnajte ploču i poravnali tekstni okvir u središte.
Konačno, s odabranim tekstualnim okvirom, pritisnuli smo Opcija / Alt i smjena tipke i napravio četiri kopije tekstualnog okvira. Promijenili smo tekst i položaj Y svake kopije na:
- Za, 871
- Grafika, 1621
- Softver, 2371
Primijetit ćete, prilikom postavljanja lokacije svakog tekstualnog okvira, veličinu stranice kako biste prilagodili mjesto teksta.
04 od 07Dodaj slikovni prostor
Sljedeći je korak stavljanje slika između blokova teksta.
Prvi korak je odabir Pravokutni alat i nacrtati naš okvir koji se proteže s jedne strane stranice na drugu. S odabranim pravokutnikom postavili smo je visine do 250 piksela I je 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 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 07Dodaj slike na srodne mjesta s slikom
Odabranim pravokutom kliknuli smo Napunite vezu - ne Chip boja - i kliknuli Image tinta za dodavanje slike u pravokutnik. U pogodan područje koje smo odabrali Skala za prilagodbu i kliknuli gumb središnja ručka u Položaj kako bi se osiguralo da je slika izrezana iz središta slike.
Zatim smo upotrijebili Opcija / Alt + Shift + povuci tehnika za stvaranje kopije slike između prva dva bloka teksta, otvorila je ploču Ispuna i zamijenila sliku drugoj. Učinili smo to za preostale dvije slike.
S slikama na mjestu, vrijeme je za dodavanje kretnje.
06 od 07Dodaj Parallax Pomicanje
Postoji nekoliko načina dodavanja pomicanja paralakse u programu Adobe Muse. Pokazat ćemo vam jednostavan način za to.
Kada je otvorena ploča Ispuna, kliknite Pomičite karticu i kada se otvori, kliknite Potvrdni okvir kretanja.
Vidjet ćete vrijednosti za početni i Završni prijedlog, 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 odrediti smjer gibanja.Ako su vrijednosti 0, slike se neće mijenjati bez obzira na koju strelicu kliknete.
Srednja vrijednost – Pozicija 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 07Test preglednika
U ovom smo trenutku završili. Prva stvar koju smo učinili, iz očitih razloga, bila je odabir Datoteka> Spremi web stranicu, Za test preglednika jednostavno smo odabrali Datoteka> Pregled stranice u pregledniku, To je otvorilo zadani preglednik našeg računala i kada smo otvorili stranicu, počeli smo pomicati.
