Os he hecho un pequeño tutorial para todos aquellos que estáis interesados en aprender a hacer botones, banners ó gifs animados. Espero que os sirva para empezar a conocer el Image Ready que es una potente herramienta de animación. Esto es solo una introducción a las miles de cosas que con Photoshop e Image Ready juntos, podemos llegar a hacer...
Lo primero que hice, fué diseñar en Photoshop los graficos que van a componer este pequeño botón animado. Para este sencillo ejemplo, yo hice un botón y luego le cambié su color de azul a rojo. Fijaros como tengo cada botón en una capa y pulso sobre ese icono de la ventana de herramientas que directamente me abre Image ready y me traspasa todos los datos a él, incluidas las capas...



Una vez tengo el Image abierto, (ahora ya estamos en el Image Ready), debiérais ver algo parecido a lo que véis en la siguiente imagen. Si no véis alguna de las ventanas que se ven en mi imagen, arriba pulsad en Ventana y seleccionar al menos animación, capas, herramientas y optimizar. Depués pulsad sobre el icono que véis en la siguiente imagen en la ventana de animación y os duplicará el cuadro actual:



Id a la ventana de capas y pulsad sobre el ojo de la capa de arriba, con lo cual ahora en el nuevo cuadro que habéis duplicado se verá azul, como en la capa de fondo:



Ahora vamos a utlizar una función del Image Ready muy interesante y que se llama INTERCALAR. Lo que hace es crear una transición automáticamente desde el primer cuadro al segundo. Es decir, en nuestro caso irá pasando de rojo a azul poquito a poco. Podéis intercalar el número de cuadros que queráis, pero tened en cuenta que a mayor número de cuadros, más pesará en bytes la imagen y esto a veces no interesa demasiado. Por ejemplo, yo he usado 5 cuadros:



Por último, podéis modificar el tiempo que estará presente en la animación debajo de cada uno de los cuadros, hasta dejarlo a vuestra manera. En la ventana de animación, podéis también dar al botón de play en todo momento para ver la animación también.
En la ventana de optimizar tenéis que seleccionar el formato Gif ya que las animaciones deben ir todas en él. El número de colores podéis pornerlo a 256 o menos. A menor número de colores, menos peso en bytes del botón, pero los gráficos pierden calidad..



Ya sólo os queda ir al menú de archivo y en guardar optimizada como..., le ponéis un nombre y ya es todo vuestro...



Sé que al principio, este tipo de programas resultan muy complicados. He tratado de poneros un ejemplo muy sencillito para que os sirva de introducción. Espero que vosotros ahora practiquéis en casa y probéis con nuevas cosas, que así es como realmente se aprende...
Un abrazo para todos
Nacho

Muchísimas gracias por colgar el tutorial. Tiene muy buena pinta. Ahora es muy tarde y tengo sueño, pero mañana en cuanto conecte me pongo en marcha y te enseño lo que haya logrado. Saludos!

Yo que era nulo en el tema, ahora ya sé un poco más.
Empecé haciendo el tuto de los botones, me fuí entusiasmando y ahora.... MIREN MI AVATAR!!!!

Gracias Nacho, seré tu pequeño saltamontes...

Pues te quedó de maravilla el avatar artefakto...
Me gusta mucho.
Es solo un pequeño ejemplo de las miles de cosas que se pueden hacer con ese programa, pero para introduciros un poquito en él, espero que os haya servido...
Un abrazo para todos.

Muy bueno el tutorial y los que he visitado, estoy aprendiendo poco poco, he relizado un peqeño boton mivil y no se como ponerlo para que se vea como el de nacho o el de artefakto, me gustaria me indicarais como hacer, gracias

Hola pericosB:
Eso lo puedes hacer desde tu Perfil, en el apartado de Panel de control de Avatar. Desde ahí lo puedes subir al server, pero lee atentamente los requerimientos de peso y tamaño máximos permitidos...
Un abrazo
Nacho

Holas, al final ia me decidi a registrarme que estado muy liada con mil cosillas, me encanta el foro nacho y veo mucha actividad, espero sacar tiempo para ver todas las cosillas que comentais por aqui

Un saludo

pd: Espero mas tutoriales sobre el image ready!!!

Mas o menos lo he entendido, pero me surje un problema el cual no encuentro a ver si se explicarme ya que no entiendo mucho de esto, mi intencion era crear un boton el cual esta compuesto de 4 imagenes, lo que queria hacer era digamos la 1º fuera fija y las otras 3 saliesen dentro de la primera eso es posible vasandonos en este manual

Claro que se puede Alicanti, siempre y cuando las capas 2, 3 y 4 sean de fondo transparente.

Osea que lo primero seria crear por ejemplo un banner en Photoshop y luego ir a Image ready ¿ no ?

Y otra cosa las capas si se necesitan ¿ donde se hacen en Image Ready o en photoshop?

Hola BEN-HUR:
El banner se diseña en Photoshop. Todo lo que vaya a llevar el banner, primero tienes que diseñarlo ahí.
Al exportar a Image ready todas las capas y su configuración se exportan automáticamente también al Image ready. El funcionamiento de las capas aquí es igual que en Photoshop...
Si a pesar de esto sigues teniendo muchas problemas, me comentas y ya trateremos de verlo más detalladamente paso a paso
Un abrazo

Nacho-Lopez escribió:

(...)Si a pesar de esto sigues teniendo muchas problemas, me comentas y ya trateremos de verlo más detalladamente paso a paso Un abrazo

Ok, gracias.

Por sierto, asias nacho, gracias a este tuto me cambie el avatar jijijiji

Muchas gracias por este tutorial! ya se hacer animaciones! xDD

Aqui esta mi muestra :P lo he puesto tb en el avatar! espero q os guste

Claro que nos gusta
Te quedó de maravilla Madlax
Enhorabueba
Un abrazo