Una dintre tehnicile "cele mai tari" de pe web astăzi este paralogul de parcurgere. Am fost toți la acele site-uri în care rotiți rotița de derulare a mouse-ului și conținutul paginii se deplasează în sus sau în jos sau de-a lungul paginii în timp ce rotiți rotița mouse-ului.
Pentru cei noi de design web și design grafic, această tehnică poate fi extrem de dificil de realizat din cauza cantității de CSS necesare.
În cazul în care vă descrie, există o serie de aplicații care ar putea doar să apeleze la artiștii grafici. În practică, utilizează o abordare familială a paginilor în paginile web, ceea ce înseamnă că nu există prea multe codificări, dacă există. O aplicație care a devenit într-adevăr proeminență este Adobe Muse.
Lucrul realizat de profesioniștii grafici care utilizează Muse este destul de uimitor și puteți vedea o probă a ceea ce puteți face vizitând Muse Site-ul Zilei . Deși profesioniștii web tind să considere Muse ca fiind un tip de jucărie "wind-up", este, de asemenea, folosită de designeri pentru a crea prototipuri mobile și web care vor fi în cele din urmă predate dezvoltatorilor din echipa lor.
O tehnică care este incredibil de ușor de realizat cu Muse este derularea paralaxelor și, dacă doriți să vedeți versiunea completă a exercițiului. Când rotiți rotița de derulare a mouse-ului, textul pare să se deplaseze în sus sau în jos pe pagină și imaginile se schimbă.
Să începem.
01 din 07Creați o pagină Web
Când lansați Muse, faceți clic pe Site nou legătură. Aceasta va deschide Proprietăți noi ale site-ului. Acest proiect va fi proiectat pentru o aplicație desktop și îl puteți selecta în Layout inițial meniul derulant. De asemenea, puteți seta valorile pentru numărul de coloane, lățimea jgheabului, marginile și garnitura. În acest caz, nu ne-am îngrijorat îngrijorat de acest lucru și pur și simplu am făcut clic O.K.
Formatați pagina
Când setați proprietățile site-ului și faceți clic pe acesta O.K ați fost duși la ceea ce se numește Plan vedere. Este un Acasă pagina de sus și a Pagina principală în partea de jos a ferestrei. Avem nevoie doar de o pagină. Pentru a ajunge la Design View, am făcut dublu clic pe pagina de pornire care a deschis interfața.
În partea stângă sunt câteva instrumente de bază, iar în partea dreaptă există o varietate de panouri folosite pentru a manipula conținutul paginii. Pe partea de sus sunt proprietățile care pot fi aplicate paginii sau orice element selectat pe pagină. În acest caz, am vrut să avem un fundal negru. Pentru a realiza acest lucru, faceți clic pe Plăcirea browserului chip color și a ales negru din Color Picker.
03 din 07Adăugați text la pagina
Următorul pas este să adăugați un text în pagină. Am selectat Instrument de text și a desenat o cutie de text. Am introdus cuvântul "Bun venit" și, în Proprietățile setați textul Arial, 120 pixeli alb. Alinierea centrului.
Am trecut apoi la instrumentul de selecție, am făcut clic pe caseta de text și l-am setat Poziția Y la 168 pixeli din partea de sus. Cu caseta de text selectată încă, am deschis Aliniați panoul și aliniați caseta text la centru.
În cele din urmă, cu caseta de text selectată, am ținut apăsată tasta Opțiunea / Alt și Schimb chei și a făcut patru copii ale casetei de text. Am schimbat textul și poziția Y a fiecărei copii la:
- Pentru, 871
- Grafica, 1621
- Software, 2371
Veți observa că, pe măsură ce setați locația fiecărei casete text, pagina este redimensionată pentru a se potrivi cu locația textului.
04 din 07Adăugați Suporturi pentru imagine
Următorul pas este să plasați imagini între blocurile de text.
Primul pas este să selectați Instrumentul dreptunghiului și trageți o cutie care se întinde de la o parte a paginii la cealaltă. Cu dreptunghiul selectat, îl setăm înălțime la 250 de pixeli si este Poziția Y la 425 de pixeli. Planul este de a le întinde întotdeauna sau de a contracta la lățimea paginii pentru a găzdui fereastra de vizualizare a browserului utilizatorului. Pentru a realiza acest lucru, am făcut clic pe Lățimea 100% butonul din Proprietăți. Ceea ce face acest lucru este de a șterge valoarea X și pentru a asigura că imaginea este întotdeauna 100% din lățimea ferestrei de vizualizare într-un browser.
05 din 07Adăugați imagini la locurile de reprezentare a imaginii
Cu dreptunghiul selectat am făcut clic pe Completați linkul - nu culoarea Chip - și a dat clic pe Image cerneală pentru a adăuga o imagine în dreptunghi. În Montaj zonă, am selectat Redimensionează pentru potrivire și ați dat clic pe mânerul central în Poziţie pentru a asigura că imaginea este scalată din centrul imaginii.
Apoi, am folosit Opțiunea / Alt-Shift-tragere tehnica pentru a crea o copie a imaginii între primele două blocuri de text, a deschis panoul Fill și a schimbat imaginea pentru alta. Am făcut asta și pentru celelalte două imagini.
Cu imaginile în loc, este timpul să adăugați mișcarea.
06 din 07Adăugați Parallax Scrolling
Există o serie de moduri de a adăuga derularea paralaxelor în Adobe Muse. Vă vom arăta un mod simplu de a face acest lucru.
Cu panoul Fill deschis, faceți clic pe Parcurgere fila și, când se deschide, dați clic pe Bifați caseta de căutare.
Veți vedea valori pentru Iniţială și Final Motion. Acestea determină cât de repede se mișcă imaginea în raport cu roata de derulare. De exemplu, o valoare de 1,5 va muta imaginea de 1,5 ori mai rapid decât roata. Am folosit o valoare de 0 pentru a bloca imaginile la locul lor.
Săgeți orizontale și verticale determină direcția mișcării.Dacă valorile sunt 0, imaginile nu se vor bloca, indiferent de săgeata pe care faceți clic.
Valoarea medie – Poziția cheie - arată punctul în care imaginile încep să se miște. Linia de deasupra imaginii începe, pentru această imagine, cu 325 de pixeli din partea de sus a paginii. Când parcurgeți această valoare, imaginea începe să se miște. Puteți modifica această valoare fie prin schimbarea acesteia în caseta de dialog, fie prin clic și trasând punctul din partea superioară a liniei fie în sus, fie în jos.
Repetați acest lucru pentru celelalte imagini de pe pagină.
07 din 07Browser Test
În acest moment, am terminat. Primul lucru pe care l-am făcut, din motive evidente, a fost acela de a selecta Fișier> Salvare site. Pentru a testa browserul, am selectat pur și simplu Fișier> Previzualizare pagină în browser. Acest lucru a deschis browserul implicit al computerului nostru și, când pagina a fost deschisă, am început să derulăm.
