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 el lloc del museu 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 increïblement fàcil d'aconseguir amb Muse és el desplaçament de paralaje i, si voleu veure la versió completa de l'exercici, anirem passant, assenyala el vostre navegador a aquesta pàgina. 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 07
Creeu una pàgina web
Quan feu clic a Muse, feu clic a l'enllaç del lloc nou . Això obrirà les Propietats del nou lloc . Aquest projecte estarà dissenyat per a una aplicació d'escriptori i el podeu seleccionar al menú desplegable del disseny inicial . També podeu establir els valors del nombre de columnes, amplada de canal, marges i farcit. En aquest cas, no estem molt preocupats per això i simplement feu clic a Acceptar .
02 de 07
Format de la pàgina
Quan configureu les propietats del lloc i feu clic a Acceptar, se us va portar al que es coneix com a Vista del pla . Hi ha una pàgina d' inici a la part superior i una pàgina principal al final 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-ho, fem clic al xip de color del farcit del navegador i escollim el negre del selector de colors.
03 de 07
Afegiu text a la pàgina
El següent pas és afegir un text a la pàgina. Hem seleccionat l' Eina de text i hem dibuixat un quadre de text. Introduïm la paraula "Benvinguda" i, a les Propietats, estableix el text a Arial, 120 píxels de color blanc. Centre alineat.
A continuació, es va canviar a l'eina de selecció, es va fer clic al quadre de text i es va establir la seva posició Y a 168 píxels de la part superior. Amb el quadre de text encara seleccionat, obrim el panell Alinear i alinear el quadre de text al centre.
Finalment, amb el quadre de text seleccionat, mantenim premudes les tecles Opció / Alt i Majús i féu 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
- @ About.com, 3181
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 07
Afegeix marcadors de posició d'imatge
El següent pas és posar imatges entre els blocs de text.
El primer pas és seleccionar l' eina rectangular i dibuixar una caixa que s'estén des d'un costat de la pàgina a l'altra. Amb el rectangle seleccionat, fixem la seva alçada a 250 píxels i la seva posició 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 aconseguir-ho, hem fet clic al botó d' amplada del 100% 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 07
Afegeix imatges als marcadors de posició d'imatges
Amb el Rectangle seleccionat, hem fet clic a l' enllaç Fill, no el Xip de color, i feu clic a la tinta I mage per afegir una imatge al rectangle. A la zona de muntatge , hem seleccionat Scale To Fit i feu clic a l' identificador central de l'àrea de Posició per assegurar-vos que la imatge s'escorneix del centre de la imatge.
A continuació, hem utilitzat la tècnica Option / Alt-Shift-drag per crear una còpia de la imatge entre els dos primers blocs de text, obrir el tauler d'emplenament i canviar la imatge per 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 07
Afegeix 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 el tauler d'emplenament estigui obert, feu clic a la pestanya Desplaçament i, quan s'obre, feu clic a la casella de selecció Moviment .
Veureu els valors del moviment inicial i final . 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.
Les fletxes horitzontals i verticals determinen la direcció del moviment. Si els valors són 0, les imatges no es mouen independentment de la freqüència que feu clic.
El valor mig: 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 07
Prova del navegador
En aquest punt, vam acabar. El primer que vam fer, per raons òbvies, era seleccionar File> Save Site . A la prova de navegador, simplement seleccionem Fitxer> Pàgina de visualització prèvia al 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.