Recordeu que la paraula Rollover vól dir en anglés "lliscar per sobre"("deslizar por encima"). És una de les formes de generar interactivitat en funció de on posa el ratolí l'usuari i què fa amb ell.
ROLLOVERS DIRECTES
- Creem un document nou[Archivo > Nuevo] de 700x350 amb fons transparent. [És una bona mida per que càpigue en el forat estàndard dels navegadors, ja sabeu que és millor que no sobrepassi les mides: 780x430]. Podem començar al photoshop i passar-lo després a l'ImageReady o començar directament amb ImageReady.
- Pintem la única capa que tenim amb el bot de pintura a fí que s'ompli d'un color de fons i que tota la capa sigui plena de píxels.
- Posem guies als centres vertical i horitzontal i als costats aprofitant que aquesta capa està ocupada ja que hi ha magnetisme.
- Amb la calculadora trobarem la tercera part de l'amplada, o sigui que fem 700/3 i obtenim: 233.
- Creem una altra capa per sobre de la que teniem inicialment.
- Fem una sel·lecció quadrada de 233px per 233px
i l'arroseguem fins que s'enganxin els seus centres vertical i horitzontal amb les guies aprofitant-nos del magnetisme que hi ha a photoshop. I també aprofitant-nos del magnetisme de les guies amb les sel·leccions posarem una guia horitzontal amb l'extrem superior del quadrat i una guia inferior amb l'extrem inferior.
- Aquesta sel·lecció la guardarem per si la necessitem més endavant. La podem guardar com a quadret. [Sel·lecció > Guardar Sel·lecció].
- A continuació obro dues fotos que siguin més grans de 233px tant d'ample com d'alçada.
- Amb la eina de sel·lecció quadrada farem una sel·lecció quadrada tot mantenint les proporcions i enquadrem la zona que volem.
Quan ja sabem quin troç de la imatge volem fem Imagen > Recortar.
- Amb la eina "mover"
arroseguem les dues imatges fins al llençol de la imatge en la que estem treballant, la de les guies.
- Anirem a la capa d'una de les dues imatges i farem Edición > Transformación libre. Col·locarem cada imatge enganxada a les guies i redimensionarem fins que encaixin dins les guies. (En el cas d'aquest exemple poseu a la Marilyn en una capa damunt d'Einstein).
- Un cop col·locades les imatges passarem a dividir la imatge de la Marilyn en 4 peces, que col·locarem en capes diferents. Per poder separar aquests 4 troçets haurem de fer sel·leccions aprofitant-nos del magnetisme. Fixa't a la figura següent com faig la sel·lecció.
Fixeu-vos que ho faig començo a sel·leccionar des de fora i m'aprofito del magnetisme amb les guies. - Anant tota la estona a la capa de la Marilyn farem la operació de sel·leccionar i extreure cada quart de la següent manera: Capa > Nueva > Capa Vía Cortar. Observeu que cada cop que feu això es crea una capa nova que contindrà un quart de la Marilyn. Si ho feu 3 cops ja es suficient ja que la quedarà ja tindrà precísament un 4t de Marilyn.
- A continuació amb la eina sectors
aprofitant-nos de nou del magnetisme de les guies farem 4 sectors, un per cada quart. 
[Assegureu-vos que els sectors estàn ben alineats amb les guies. Us recomano que us apropeu amb la lupa i si no encaixen perfectament amb la eina de sel·leccionar sectors
sel·leccioneu sectors i amb els agafadors acabeu de posar ben alineats tots els sectors i que no s'hagin creat "mini-sectors" que de llun no es veuen.] - Si no estiguessim encara treballant amb ImageReady li donem al botó de passar a Image Ready, que és on farem lo dels Rollovers.
- A continuació heu de tenir a mà els panells Capes i Contenido de web.
Fixeu-vos que jo he canviat els noms a les capes i als sectors de la paleta contenido de web per aclarar-me millor, per una banda i per a que ImageReady no generi arxius d'imatge amb accents, cosa que faria que ens surtíssim de ASCII. - Amb el botó
de la finestra Contenido de web afegirem un estat de rollover per cada sector fins a obtenir
[Apretar per veure millor els detalls]
Observeu que se'ns han creat estats "Sobre" a cada sector. - A continuació anirem per cada un dels estats "sobre" de cada sector i ocultarem o mostrarem la capa del quart que li correspón al sector on estem.
- Un cop fet això ja podem fer Guardar Optimizada Como i generarem així l'HTML i les imatges. Us recomano fer-ho en una carpeta nova.
- Guardeu també l'axiu de projecte PSD d'aquesta imatge des de ImageReady.
NOTA: A l'ImageReady del Photoshop 7 es podia també mostrar i ocultar capes que no fossin del mateix sector sense haver de fer res. A la versió CS2 això ho han canviat. A continuació aprofitant aquest exercici explicarem com fer per aconseguir a la versió CS2 "ROLLOVERS INDIRECTES", és a dir, de sectors que no són els que l'usuari estigui passat per sobre amb el ratolí, sinó uns altres.És a dir: lo que posaré a continuació no es va arribar a fer a classe el divendres passat. És nou a partir d'aquest punt.
ROLLOVERS INDIRECTES
(Rollovers que afecten a sectors que no són els que l'usuari activa).
Si volem activar altres sectors al mateix temps que el que estem tocant hem de fer lo següent.
- Ens posem a l'estat "Sobre" de la finestra Contenido de Web. I ens fixem en una petita espiraleta que hi ha
Fixeu-vos que si us poseu uns segons a sobre us surt un cartellet que diu... - Doncs feu lo que diu. Convertirem en sectors remots els altres sectors, o els desitjats, arrosegant aquesta espiraleta a cada un d'aquests sectors, com si fós un "metre enrotllable".
- Un cop hem convertit els altres sectors, o els que hem volgut, en sectors remots podem mostrar u ocultar capes que afectin a aquests sectors. De tal manera que podriem fer que si l'usuari passa per sobre de la cantonada dreta inferior de la Marilyn podriem ocultar les 4 capes de la Marilyn deixant veure sencer a l'Einstein.
- Per últim per evitar que ImageReady ens fabriqui les imatges de les cel·les-sectors, de la part del fons anirem al panell sector i direm sense imatge i a l'apartat Fondo posarem el color frontal si és que és del mateix color que el que tenim com a fons de la imatge o si no ho averiguem i ho posem nosaltres manualment, sabent el valor hexadecimal del color. Això ho farem sector per sector.
Aquesta seria una entre d'altres possibles utilitats dels Rollovers indirectes amb Image Ready. Veureu que en Dreamweaver també ho podrem fer. Aquí ha intervingut lo que en ImageReady es coneix com a sectors remots que són aquests que hem associat a un estat "sobre" d'un dels sectors tot estirant de la espiraleta.
Baixeu-vos els arxius de l'exemple aquí.
Entradas
