Como hacer botones con ImageReady?

  • Autor Usuario eliminado 128250
  • Fecha de inicio
Estado
Cerrado para nuevas respuestas
U

Usuario eliminado 128250

Guest
Quisiera saber como hago los botones con ImageReady, la vdd no se nada de eso algún tutorial una explicación algo? :eek:

estoy out.. no se que sea ni un rollover ni nada por el estilo :eek:

Quisiera hacerlos con animacion x porfavor.. alguien me ayude :(
 

Nicelan

Ex- Mod
Miembro
aquí hay unos que pueden ayudarte!

Tutorial ROLLOVER en IMAGE READY

Abrimos Image Ready y creamos un archivo nuevo de 200 px X 200 px con el fondo blanco.

Creamos una nueva capa (CONTROL+MAYUS+N) y pulsamos OK.

Ahora dibujamos con la herramienta MARCO ELIPTICO (M) un círculo, y lo rellenamos con el BOTE DE PINTURA (G) de un color [en este caso lo he hecho de rojo].

image001.gif

El siguiente paso será crear una nueva capa, y rellenar el círculo k habiamos hecho de otro color [en etes caso azul].

image002.gif

Ahora, vamos a VENTANA --> CONTENIDO WEB, y nos saldrá una nueva ventana.
Vamos a seleccionar la herramienta SECTOR (K) y vamos ha hacer un recuadro alrededor de el circulo.

image003.gif

Ahora vemos que en la ventana de CONTENIDO WEB k hemos sacado antes ha aparecido una nueva imagen, la última k hemos hecho, pues pulsamos con el botón derecho sobre la imagen y despues le damos a AÑADIR ESTADO DE ROLLOVER.

image004.gif

Por último, vamos a quitarle el OJO que sale al lado de la última capa que hemos creado para que cuando pongamos el cursor encima de el circulo se vea la capa roja.

image005.gif

Solo falta guardarlo.

Archivo --> Guardar optimizada como..., le ponemos un nombre y ya está listo
Rollovers
In questo semplice tutorial vedremo come realizzare un pulsante in rollover con Image Ready. Supponiamo di avere questo pulsante

001.gif

Qui puoi scaricare il file PSD compresso

Aprendo il file con Image Ready noterai che esso è composto da tre livelli

002.gif

Il layer 0 rappresenterà il pulsante nello stato iniziale, il layer 1 rappresenterà invece il pulsante al passaggio del mouse.
Dalla paletta Rollovers clicca sul pulsante indicato in figura

003.gif

Saranno generati due nuovi stat, il primo rappresenta il pulsante allo stato iniziale, il secondo, aggregato al primo, rappresenta lo stato al passaggio del mouse

004.gif

Seleziona il primo stato

005.gif

e dalla paletta dei livelli nascondi il layer 1, ovvero quello luminoso, in tal modo sarà visibile solo il layer 0 ed il pulsante apparirà "spento"

006.gif

seleziona il secondo stato dalla paletta rollovers

007.gif

e rendi visibile il layer 1. Dato che esso copre interamente il layer 0, puoi anche evitare di nascondere quest'ultimo.

008.gif

Assegna adesso allo stato un url di destinazione. Per fare ciò rendi visibile la finestra slice finestra/ritaglio (window/slice) e nalla proprietà URL inserisci un link di destinazione. In target puoi specificare se aprire il link in una nuova finestra o specificare il frame di destinazione.

009.gif

puoi testare con image ready il risultato semplicemente cliccando sul pulsante indicato in figura oppure testare la pagina con i browser installati nel sistema. Attenzione, Internet Explorer potrebbe impedire l'esecuzione dello script in locale.

010.gif

Non ci resta che salvare il lavoro. Dal menù file clicca su Salva ottimizzazione (Save optimized) . Come puoi vedere il file viene salvato in formato HTML e gli stati dell'animazione verranno salvati come immagini gif in una cartella images.

Verrà generata questa pagina

Questo è il risultato finito, sposta il mouse sull'immagine e fai clic.
rollovers_Layer-0-copy.gif

Questo è il codice dello script generato da Image Ready:
Insertar CODE, HTML o PHP:
<!-- ImageReady Preload Script (rollovers.html) -->
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
rollovers_Layer_0_copy_over = newImage("images/rollovers_Layer-0-copy-over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
e quanto segue va inserito nel punto in cui vogliamo che appaia il pulsante:
Insertar CODE, HTML o PHP:
<!-- ImageReady Slices (rollovers.html) -->
<A HREF="http://www.graphixmania.it" TARGET="_blank"
ONMOUSEOVER="changeImages('rollovers_Layer_0_copy', 'images/rollovers_Layer-0-copy-over.gif'); return true;"
ONMOUSEOUT="changeImages('rollovers_Layer_0_copy', 'images/rollovers_Layer-0-copy.gif'); return true;">
<IMG NAME="rollovers_Layer_0_copy" SRC="images/rollovers_Layer-0-copy.gif" WIDTH=80 HEIGHT=31 BORDER=0 ALT=""></A>
<!-- End ImageReady Slices -->

ATTENZIONE: Se copi lo script e la relativa chiamata in un'altra pagina, non dimenticare di inserire nel body questa proprietà:

<BODY ONLOAD="preloadImages();">
...
...
</BODY>
Attenzione anche al percorso delle immagini. Dal momento in cui decidi di utilizzare lo script su altre pagine, controlla che il percorso sia giusto.
Create Rollovers in ImageReady
Photoshop Tutorial

How to create javascript rollovers in ImageReady
These are the trendy effects that are all over the web, that make the image change when the mouse moves over it. Try it here, move your mouse over the image at the bottom of the page.
INGREDIENTS
by Colin Smith

  • ImageReady
  • 2 States of Image
  • Layers
  • Rollovers
  • Slices
  • Difficulty 6/10

1
cafe.gif
Start with your button image. Create it in Photoshop.

2
cafe-over.gifNow create a new layer, how you want the button to look when the mouse rolls over it. (You can do it easily by using layer styles)
3
See how the rollover will look before and after simply by turning on and off the top layer in Photoshop.
We now have the images ready. Time to make then into rollovers in ImageReady.
up_01.jpgup_02.gif
The image on the background with layer 2 hidden
down_01.jpgdown_02.gif

The image on the background with layer 2 visible


4
switch-to-imageready.gif
Switch to ImageReady, by simply clicking on the button at the bottom of the tools palette. ImageReady will launch with your layers intact.

5

1567506031530.png


Go to the rollover palette. ( Now called the appearance palette in Photoshop CS and newer) Make sure the top layer is hidden and your "Normal State" (How it looks before the mouse touches it) will be set.

1567506056982.png

6
step2.gif

Click on the new state button and the "over state" is created. This is will appear on the webpage when the mouse moves over the image. Change its apperance by making the top layer visable. Each state will reflect what is visable in the layers palette.

down_02.gif
7
url.gifNow click on the slice tab and assign a URL to your rollover. A URL iswhere you want the link to take you. If it's a differant site then use a http:// address. If you are going to a differant html page on the same website then make sure to use a .htm extension.
8
1567505948246.png

You can test your rollover by clicking the test button on the tool palette.
When you are happy with the rollover effect: File>Save Optimized, give your page a name and Imageready will do all the work for you including creating the html page. Copy the html document and the new folder containing the images to your webserver and you are now in business.
estan muy detallados y espero que te servan! xDD

saludos
 
U

Usuario eliminado 128250

Guest
Gracias por los tutos crei que nadie me resolveria la duda..

Saludos. o_O
 
Estado
Cerrado para nuevas respuestas
Arriba Pie