lunes, 28 de marzo de 2011

¡Animaciónes en Photoshop! Tutorial

¡Me alégra mucho el haber tirado tantos tutoriales! De verdad, primera vez que me pongo las pilas tanto ^W^

De segúro a algunos les entró curiosidad de como animar banners como el nuevo todo chulo y genialoso que hice. Les contaré, yo ya sabía como animár un poco y mover corazoncitos en el Photoshop LOL XD Pero recién hace dos días logre descubrir como mover una imagen así de chula. Ojo: Este tutorial solo servirá si tu version de Photoshop tiene la opción de animación

Animaciones en Photoshop

1) Necesitaremos una nueva capa, con el tamaño a su gusto, arrastramos y ajustámos la imágen que queremos animar dentro de aquella capa. Ahora, vamos a la parte superiór del prográma y veremos una opción que dice "Ventana", clickamos en ella y se nos abrirá una sub-ventana en donde elegirémos la opción "Animación"


2) Creamos una nuevo cuadro, como se verá en la imagen, desde el cuadradito pequeño inferior. En el moveremos la imagen del banner hacia el lado donde quieres que quede al final. Por ejémplo, el final de mi imágen son las flores, entonces moví la imagen desde el ciélo donde estaba al comienzo, hasta las flores en el nuévo cuadro



3) Luego de haber movido la imagen en aquel cuadro, veremos unos números bajo de los cuadros de animación, que dícen "0 Seg", estos son los segúndos que pasarán durante cada cuadro, volviendolo animación o no; Seleccionámos cada uno, y elegimos "0,1 Segundos";


4) A continuación, al lado izquierdo de "Crear un nuevo Cuadro" hay un botón que al pasar el cursor por encima nos dirá "Intercalar cuadros de animación" ¿Ya saben para que es, no? Es para intercalar varios cuadros en el centro, donde gradualmente se muestra la imagen un poco mas abajo hasta llegar al segundo cuadro (o de un lado a otro, depende de como colocaron la imagen del segundo cuadro)


Y finalmente quedaría así:



Así quedaría entonces; La opción a final de cuentas nos permite mover de un punto a otro la imagen, pidiendonos ademas la cantidad de cuadros que se usarán; Es decir, a mayor cantidad es el número, mejor se verá la animación

Consejo: Intenten dejar en modo "0,5 Segúndos" los cuadros donde quieres que se vea la cara, objeto o cualquier cosa de la imagen por un tiempo pausado -Solo cuando termines todo el trabajo-. Por último vas a Archivo -> Guardar para Webs y Dispositivos, y se elige el formato .GIF que es con el cual se ven las animaciones

7) ¿Como hacer que vaya después desde abajo hacia arríba? Facíl, es el mismo procedimiento. Seleccionas el último cuadro y haces click en "Intercalar cuadros de animación" y esta vez en "intercalar con" eliges la opcion de "Primer cuadro"

 Resultado final:




¿Algúna pregúnta? ¿Te quedaste atorado en algun paso? No dudes en comentar en esta entrada tu problema o en el CBOX ^W^

CUIDADO: Debo aclararles que la animación no sirve si piensan hacer un "Aplicar imagen", porque se recortará y no se podrá mover

Lo recomendable es hacer el banner, firma, cabecera, etc, con efectos, ajustes y todo. Luego, elegir la opcion de "grupo" y arrastras todas las capas que quieras juntas





Así, cuando hagas los dos cuadros, en vez de tomar una sola capa, selecciones la capa de grupo, para que se muevan todos los efectos dentro :3

10 comentarios :

  1. Geniiiaaal!!
    el nuevo botoncito te ha quedado increíble *-* me encanta
    te deberías dedicar a eso (?)
    xD gracias por el tutorial yo intentare hacer uno.

    ResponderEliminar
  2. De nuevo otro muy buen tutorial!
    Qué lastima que yo tenga photoshop cs3 D:

    Ni modo x__x

    Gracias :3

    ResponderEliminar
  3. Owww encerio Gracias por este tuto, ahora si podre hacer el mio propio jeje, definitivamente lo pondre en practica, Que estes bien, tienes premios en mi blog ;3 Saludos!

    ResponderEliminar
  4. kya! arigato por el, tuto, otra duda como se hace esa capa de dimensiones solo eso no entendi xD

    ResponderEliminar
  5. YA ME SALIO! Arigato Ryo-neechan! me has salvado la vida >.< deberías ser maestra xD

    ResponderEliminar
  6. Ryo-chan! Hace bastante que no me pasaba por mis andadas de blogger, pero estuve bastante ocupada con la escuela :S
    Veo que hay muchas cosillas nuevas. El diseño, tutoriales, otro capitulo del psiquiatrico xD
    Disculpa por no haberme pasado, pero seguro tu entiendes.
    Por cierto, usaré algunos tutoriales. Luego te aviso como me fue. Gracias por ponerlos en tu blog n.n

    Saludos! Que estés muy bien :3

    ResponderEliminar
  7. ¡¡Me encanta hacer animaciones en photoshop!! :D La de horas que me he pasado delante del ordenador haciendo chorraditas, y probando todo tipo de opciones :)

    Genial tutorial, seguro le será muy útil para cualquiera que esté empezando y no sepá como se hace. Gracias a gente como tu que se curra un montón estos tutos yo aprendí a hacerlo en su día. :D

    ¡Besos!

    ResponderEliminar
  8. Genial, Ryo-chan!
    necesito el photoshop cs4 :c
    TE QUEDOO GEENIAAAAL Ryoo-chaan!*O*

    ResponderEliminar
  9. hay hay hay ya se me antojo hacer uno *-* si me sale bien te digo XD jejejejeje

    ResponderEliminar
  10. No entendi eso de como se arrastra y se ajusta :c
    help me Please D:
    me encanta como se mira ese tipo de animacion T.T
    te quedo muy lindo el Boton!

    ResponderEliminar