Animación simple~Botón con movimiento

El estilo que les enseñaré a hacer es el mostrado en el banner de la entrada, es muy útil cuando quieren mostrar un banner o imagen grande en un espacio pequeño.

El programa que utilizaba entonces era image ready, venía incluido cuando bajabas photoshop pero era un programa independiente, las versiones más nuevas de photoshop lo traen incluido, si quieres saber como agregarlo tienes que ir a Ventana>Animación~ le das click y te aparecerá el menú de animación.

Si no te aparece ésta opcion es porque tu versión de photoshop es muy antigua.(y como dije, se supone que venga photoshop e image ready como un paquete de dos programas diferentes)

Éste luce de la siguiente forma:

Ya que tenemos nuestro menú de animación procederemos a hacer nuestra animación.

Abriremos nuestro documento del tamaño que queramos archivo<nuevo yo lo haré de 300 px x 300 px para que sea grande y poder mostrarles mejor. le damos ok~

Ahora digamos que queremos que nuestro botón tenga alguna forma especifica c: lo que haremos será ir a la barra de herramientas, iremos al rectángulo, daremos click derecho sobre el y vamos a la herramienta de forma y trazamos la figura deseada en nuestro lienzo.

Asegúrense que su menú superior se encuentre de la siguiente forma, entonces damos en la pestaña de forma y seleccionamos la que queramos y procedemos a trazarla.

Esta es mi figura ya trazada, el color no importa mucho porque igual la imagen estará dentro de ella.

Lo siguiente que haremos será abrir nuestro banner o imagen y ponerla arriba de nuestra figura.

Fijémonos muy bien que nuestra imagen éste arriba y procederemos a presionar las teclas ctrl+alt+G esas tres al mismo tiempo mientras estamos posicionadas en la capa de la imagen.

Lo que pasará será que nuestra imagen ''llenará'' la figura y no se saldrá de los bordes y podremos moverla.

y ahora sí! podemos proceder a hacer la animación.

Y así la vamos moviendo como ''desplazandola'' por el espacio, creamos una capa de animación, movemos la imagen, creamos una capa de animación, movemos la imagen.

nuestra barra lucirá algo así.

Si le damos al simbolo de play que se encuentra ahi podemos visualizar nuestra animación y notaremos que está demasiado rapido D:!! así que lo que haremos será aumentar el tiempo que pasa entre capa y capa.

Primero seleccionaremos todas las capas de animacion y lo hacemos de la siguiente manera:

Dan click en la pestaña de la esquina inferior derecha del cuadro y se les abrirá una pestaña entonces seleccionaran ''Select all frames'' seleccionar todas.

Ahora procedemos a dar click en la pestaña que dice ''0 sec'' abajo de la pequeña imagen y dar click.

Nos surgirá una pestaña y ahí cambiamos el tiempo, a mi me gusta 0.2 segundos pero pueden usar el que les parezca mejor, ya que seleccionaron el tiempo le pueden dar play para visualizar.

Por ultimo vamos a GUARDAR nuestro gif y no! no se guarda igual que cualquier otra imagen, tenemos una forma especial para guardarlos porque si solo lo guardamos así nos lo guardará sin movimiento.
Iremos a archivo<guardar para web & blabla-click- y se abrirá el recuadro de la derecha, vemos que esté todo bien y damos ''guardar'' 

Si lo guardaron así y al abrirlo tienen problemas puede ser porque no tienen un visualizador de imagen que pueda visualizar gifs.

¿Les gustaría ver más de éste tipo de tutoriales? incluso estoy pensando en traerles como hacer un gif con un video y más animaciones de estas con otras transiciones ¿Qué opinan?

En cuanto a plantillas gracias por sus comentarios en la entrada anterior, ya estoy preparando una entrada para cumplir sus exigencias(?)

Espero les haya gustado y lo encuentren útil, cualquier duda les respondo en los comentarios :D 

PD: Disculpen si no se muy bien la traducción de las herramientas al español xDD toda mi vida he tenido el PS en ingles y ya me acostumbré, pero espero las imagenes sean lo suficiente ilustrativas.

Recursos utilizados:

shapes:♥

Photoshop cs4 versión portable