Una de les tècniques "més calentes" a la web d'avui és el desplaçament de paralaje. Tots hem estat en aquells llocs on gireu la roda de desplaçament al ratolí i el contingut de la pàgina es mou cap amunt i cap avall o cap a la pàgina mentre gira la roda del ratolí.
Per a aquells nous en disseny web i disseny gràfic, aquesta tècnica pot ser extremadament difícil d'aconseguir a causa de la quantitat de CSS requerida.
Si això us ho descriu, hi ha diverses aplicacions que només poden interessar els artistes gràfics. Bàsicament, utilitzen un enfocament de disseny de pàgina familiar a les pàgines web, el que significa que no hi ha gaire, si s'escau, la codificació. Una de les aplicacions que realment s'ha convertit en protagonista és Adobe Muse.
El treball realitzat per professionals gràfics amb Muse és bastant sorprenent i podeu veure una mostra del que podeu fer visitant la Muse Lloc del dia . Tot i que els llocs web tendeixen a considerar a Muse com una mena de "joguina de liquidació", també s'estan utilitzant els dissenyadors per crear prototips mòbils i web que eventualment seran lliurats als desenvolupadors del seu equip.
Una tècnica que és increïblement fàcil d'aconseguir amb Muse és el desplaçament de paralaje i, si voleu veure la versió completa de l'exercici. Quan feu rodar la roda de desplaçament del ratolí, el text sembla que es mou cap amunt o cap avall i les imatges canvien.
Comencem.
01 de 07Creeu una pàgina web
Quan feu clic a Muse, feu clic al botó Nou lloc enllaç. Això obrirà el Noves propietats del lloc. Aquest projecte estarà dissenyat per a una aplicació d 'escriptori i es pot seleccionar al Disseny inicial menú desplegable. També podeu establir els valors del nombre de columnes, amplada de canal, marges i farcit. En aquest cas, no ens preocupa molt aquest fet i simplement hem fet clic D'acord.
Format de la pàgina
Quan configureu les propietats del lloc i feu clic D'acord se't va portar al que es diu Pla veure. Hi ha un Inici pàgina a la part superior i a Pàgina Mestra a la part inferior de la finestra. Només necessitem una pàgina. Per arribar a Design View, hem fet doble clic a la pàgina d'inici que va obrir la interfície.
A l'esquerra hi ha algunes eines bàsiques i, a la dreta, hi ha una varietat de panells usats per manipular el contingut de la pàgina. Al llarg de la part superior hi ha les propietats, que es poden aplicar a la pàgina, o qualsevol cosa seleccionada a la pàgina. En aquest cas, volíem tenir un fons negre. Per aconseguir això, fem clic a la icona Reenviament del navegador xip de color i escolliu el color negre del selector de colors.
03 de 07Afegiu text a la pàgina
El següent pas és afegir un text a la pàgina. Hem seleccionat el Eina de text i va treure un quadre de text. Hem introduït la paraula "Benvinguda" i, a les Propietats, estableix el text Arial, 120 píxels de color blanc. Centre alineat.
Després, hem canviat a l'eina de selecció, fes clic al quadre de text i configura el seu Posició en Y a 168 píxels de la part superior. Amb el quadre de text encara seleccionat, obrim el Alinea el panell i alinear el quadre de text al centre.
Finalment, amb el quadre de text seleccionat, hem mantingut premut el Opció / Alt i Majúscules tecleja i fa quatre còpies del quadre de text. Vam canviar el text i la posició Y de cada còpia per:
- A, 871
- Gràfics, 1621
- Programari, 2371
Notaràs que, a mesura que establiu la ubicació de cada quadre de text, la pàgina es canviarà per adaptar-se a la ubicació del text.
04 de 07Afegeix marcadors de posició d'imatge
El següent pas és posar imatges entre els blocs de text.
El primer pas és seleccionar el Eina rectangular i dibuixem una caixa que s'estén des d'un costat de la pàgina a l'altra. Amb el rectangle seleccionat, configurem el seu alçada a 250 píxels i la seva Posició en Y a 425 píxels. El pla consisteix a tenir-los sempre estretes o contractar-se amb l'amplada de la pàgina per adaptar-se a la finestra de visualització del navegador d'un usuari. Per fer això, hem fet clic al botó Ample del 100% botó a les Propietats. El que fa és grisitzar el valor de X i assegurar-se que la imatge sempre és del 100% de l'amplada de la vista en un navegador.
05 de 07Afegeix imatges als marcadors de posició d'imatges
Amb el Rectangle seleccionat, hem fet clic a Enllaç de farciment - no el Xip de color - i feu clic a la iconatinta del mage per afegir una imatge al rectangle. A la Arranjament àrea que hem seleccionat Escala per adaptar-se i feu clic a la icona mànec central a la Posició àrea per garantir que la imatge s'escala des del centre de la imatge.
A continuació, hem utilitzat el Opció / Alt-Majús. Arrossegueu tècnica per crear una còpia de la imatge entre els dos primers blocs de text, obrir el tauler de farcit i canviar la imatge per a un altre. Ho vam fer també per a les dues imatges restants.
Amb imatges en el lloc, és hora d'afegir el moviment.
06 de 07Afegeix Parallax Scrolling
Hi ha diverses maneres d'afegir el desplaçament de paralaje a Adobe Muse. Us mostrarem una manera senzilla de fer-ho.
Quan estigui obert el tauler de farcit, feu clic a la icona Pestanya de desplaçament i, quan s'obre, feu clic a la icona Caixa de selecció de moviment.
Veureu valors per a Inicial i Final Motion. Aquestes determinen la rapidesa amb què es mou la imatge en relació amb la roda de desplaçament. Per exemple, un valor de 1.5 mourà la imatge 1,5 vegades més ràpid que la roda. Hem utilitzat un valor de 0 per bloquejar les imatges en el lloc.
El Fletxes horitzontals i verticals determina la direcció de la moció.Si els valors són 0, les imatges no es mouen independentment de la freqüència que feu clic.
El valor mitjà – Posició clau: mostra el punt on les imatges comencen a moure's. La línia que hi ha a sobre de la imatge comença, per aquesta imatge, 325 píxels des de la part superior de la pàgina. Quan el desplaçament arriba a aquest valor, la imatge comença a moure's. Podeu canviar aquest valor canviant-lo al quadre de diàleg o fent clic i arrossegant el punt a la part superior de la línia, cap amunt o cap avall.
Repetiu això per a les altres imatges de la pàgina.
07 de 07Prova del navegador
En aquest punt, vam acabar. El primer que vam fer, per raons òbvies, era seleccionar Fitxer> Desa el lloc. A la prova de navegador, només hem seleccionat Fitxer> Vista prèvia del navegador. Això va obrir el navegador predeterminat de la nostra computadora i, quan es va obrir la pàgina, vam començar a desplaçar-vos.
