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 folosesc Muse este destul de uimitor și puteți vedea o mostră despre ceea ce puteți face vizitând site-ul Muse al 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 Vom merge pe jos, orientați browserul spre această pagină. 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 07
Creați o pagină Web
Când lansați Muse, faceți clic pe link- ul Site nou . Aceasta va deschide Proprietățile noi ale site-ului . Acest proiect va fi proiectat pentru o aplicație desktop și îl puteți selecta din meniul pop-down inițial Layout . De asemenea, puteți seta valorile pentru numărul de coloane, lățimea jgheabului, marginile și garnitura. În acest caz, nu am fost îngrijorați de acest lucru și pur și simplu am făcut clic pe OK .
02 din 07
Formatați pagina
Când ați setat proprietățile site-ului și ați făcut clic pe OK, ați fost duși la ceea ce se numește Plan view. Există o pagină principală în partea de sus și o pagină 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 cipul de culoare Browser Fill și alegeți negru din Color Picker.
03 din 07
Adăugați text la pagina
Următorul pas este să adăugați un text în pagină. Am selectat Instrumentul de Text și am desenat o casetă de text. Am introdus cuvântul "Bun venit" și, în Proprietățile setați textul la Arial, 120 pixeli alb. Alinierea centrului.
Apoi am trecut la instrumentul de selecție, am făcut clic pe caseta Text și am stabilit poziția Y la 168 de pixeli din partea de sus. Cu caseta de text selectată, am deschis panoul Aliniere și aliniat caseta de text la centru.
În cele din urmă, cu caseta de text selectată, am ținut apăsată tasta Opțiuni / Alt și Shift și am 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
- @ 31 decembrie,
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 07
Adăugați Suporturi pentru imagine
Următorul pas este să plasați imagini între blocurile de text.
Primul pas este să selectați instrumentul Rectangle și să desenați o cutie care se întinde de la o parte a paginii la cealaltă. Cu dreptunghiul selectat, setăm înălțimea la 250 de pixeli, iar poziția lui Y la 425 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 butonul de lățime de 100% 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 07
Adăugați imagini la locurile de reprezentare a imaginii
Cu dreptunghiul selectat am făcut clic pe link-ul Fill - nu pe Color Chip - și am făcut clic pe cerneala pentru a adăuga o imagine în dreptunghi. În zona Ajustare , am selectat Scală pentru potrivire și am făcut clic pe mânerul central din zona Poziție pentru a vă asigura că imaginea este scalată din centrul imaginii.
Apoi, am folosit tehnica de selectare a opțiunii / Alt-Shift pentru a crea o copie a imaginii între primele două blocuri de text, a deschis panoul de umplere ș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 07
Adă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 fila Derulare și, atunci când se deschide, faceți clic pe caseta de selectare Motion .
Veți vedea valori pentru mișcarea inițială și finală . 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țile 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 intermediară - 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 07
Browser Test
În acest moment, am terminat. Primul lucru pe care l-am făcut, din motive evidente, a fost să selectăm File> Save Site . Pentru a testa browserul, am selectat fișierul File> Preview Page din Browser . Acest lucru a deschis browserul implicit al computerului nostru și, când pagina a fost deschisă, am început să derulăm.