En af de "hotteste" teknikker på nettet i dag er parallaxrulning. Vi har alle været på de steder, hvor du drejer rullehjulet på din mus, og indholdet på siden bevæger sig op og ned eller på tværs af siden, mens du drejer musens hjul.
For de nye til webdesign og grafisk design kan denne teknik være yderst vanskelig at opnå på grund af den krævede mængde CSS.
Hvis det beskriver dig, er der en række applikationer, der måske kun appellerer til grafikere. De bruger i grunden en velkendt side layout tilgang til websider, hvilket betyder, at der ikke er meget, hvis nogen, kodning er involveret. En applikation, der virkelig har styrket ind i fremtiden, er Adobe Muse.
Det arbejde, der udføres af grafikproffer ved hjælp af Muse, er helt fantastisk, og du kan se et udsnit af hvad du kan gøre ved at besøge Muse Dagens websted . Selvom webprofiler plejer at betragte Muse som en slags "wind-up-legetøj", bruges det også af designere til at oprette mobil- og webprototyper, der til sidst vil blive afleveret til udviklerne på deres hold.
En teknik, der er utrolig let at opnå med Muse, er parallaxrulning og, hvis du vil se den færdige version af øvelsen. Når du ruller musens rullehjul, synes teksten at bevæge sig op eller ned på siden, og billederne ændres.
Lad os komme igang.
01 af 07Opret en webside
Når du starter Muse klik på Nyt websted link. Dette åbner Egenskaber for nye websteder. Dette projekt vil blive designet til en desktop applikation, og du kan vælge den i Indledende layout pop-down menu. Du kan også indstille værdierne for antallet af kolonner, gutterbredde, margener og polstring. I dette tilfælde var vi ikke forfærdeligt bekymrede over dette og simpelthen klikket på Okay.
Formater siden
Når du indstiller webstedets egenskaber og klikker Okay du blev taget til det, der kaldes Plan udsigt. Der er en Hjem side øverst og a Master side nederst i vinduet. Vi havde kun brug for en side. For at komme til Design View, dobbeltklikede vi på startsiden, der åbnede grænsefladen.
Til venstre er et par grundlæggende værktøjer, og til højre er en række paneler brugt til at manipulere indholdet på siden. Langs toppen er egenskaberne, som kan anvendes på siden eller noget, der er valgt på siden. I dette tilfælde ønskede vi at have en sort baggrund. For at opnå dette klikker vi på Browser Fill farvechip og valgte sort fra farvevælgeren.
03 af 07Tilføj tekst til siden
Det næste skridt er at tilføje nogle tekst til siden. Vi valgte Tekstværktøj og udtalt en tekstboks. Vi indtaste ordet "Velkommen", og i teksten indstilles teksten til Arial, 120 pixels Hvid. Center Aligned.
Vi skiftede derefter til markeringsværktøjet, klikede på tekstboksen og satte det Y position til 168 pixels fra toppen. Med den tekstboks, der stadig er valgt, åbnede vi Juster panelet og justerede tekstboksen til midten.
Endelig holdt vi den markerede tekstboks ned Alternativ / Alt og Flytte nøgler og lavet fire kopier af tekstboksen. Vi ændrede teksten og Y-positionen for hver kopi til:
- Til, 871
- Grafik, 1621
- Software, 2371
Du vil bemærke, når du angiver placeringen af hver tekstboks, ændres siden for at rumme placeringen af teksten.
04 af 07Tilføj billede stedindehavere
Det næste skridt er at placere billeder mellem tekstblokkene.
Det første skridt er at vælge Rektangelværktøj og tegne vores en kasse, der strækker sig fra den ene side af siden til den anden. Med det valgte rektangel sætter vi det højde til 250 pixels ogdet er Y position til 425 pixel. Planen er at få dem til altid at strække eller kontrakt til sidebredden for at rumme en brugers browservisning. For at opnå dette, klikker vi på 100% bredde knappen i egenskaberne. Hvad dette gør er grå ud X-værdien og for at sikre, at billedet altid er 100% af visningsbredden i en browser.
05 af 07Tilføj billeder til billedplacering
Med den valgte rektangel klickede vi på Fyld link - ikke Color Chip - og klikket på Imagelblæk for at tilføje et billede til rektanglet. I Montering område, vi valgte Skala, der passer og klikket på center håndtag i Position område for at sikre, at billedet skaleres fra midten af billedet.
Dernæst brugte vi Alternativ / Alt-Skift-træk teknik til at lave en kopi af billedet mellem de to første tekstblokke, åbnede Fill panelet og byttede billedet til et andet. Det gjorde vi også for de resterende to billeder.
Med billeder på plads er det tid til at tilføje bevægelsen.
06 af 07Tilføj Parallax Scrolling
Der er flere måder at tilføje parallaxrulle på i Adobe Muse. Vi skal vise dig en enkel måde at gøre det på.
Når Fill panelet er åbent, skal du klikke på Rul fanen og når den åbnes, skal du klikke på Afkrydsningsfelt.
Du vil se værdier for Initial og Final Motion. Disse bestemmer, hvor hurtigt billedet bevæger sig i forhold til rullehjulet. For eksempel vil en værdi på 1,5 flytte billedet 1,5 gange hurtigere end hjulet. Vi brugte en værdi på 0 for at låse billederne på plads.
Det Horisontale og lodrette pile bestemme bevægelsens retning.Hvis værdierne er 0, vil billederne ikke sprænge uanset hvilken pil du klikker på.
Mellemværdien – Nøgleposition - viser det punkt, hvor billederne begynder at bevæge sig. Linjen over billedet starter for dette billede 325 pixels fra toppen af siden. Når rullen når den værdi, begynder billedet at bevæge sig. Du kan ændre denne værdi ved enten at ændre den i dialogboksen eller ved at klikke og trække punktet øverst på linjen enten op eller ned.
Gentag dette for de andre billeder på siden.
07 af 07Browser Test
På dette tidspunkt var vi færdige. Det første, vi gjorde af åbenbare grunde, var at vælge Fil> Gem websted. Til browser test valgte vi simpelthen Fil> Preview Page i Browser. Dette åbnede vores computers standardbrowser, og når siden blev åbnet, begyndte vi at rulle.
