View Full Version: Cómo hacer gifs animados

Seattle Grace > Tutoriales > Cómo hacer gifs animados


Title: Cómo hacer gifs animados
Description: con el image Ready


Lau - April 25, 2007 09:58 PM (GMT)
Bueno, este es el primer tutorial que hago en mi vida asi que espero que no sea demasiado desastre y se pueda entender bien

A ver lo primero sera elegir unas pocas imagenes, yo he escogido unas capturas de Derek de la segunda temporada, una vez abiertas todas con el image ready, las dejamos del mismo tamaño
user posted image

abrimos una nueva imagen del mismo tamaño que las que ya tenemos

user posted image
user posted image

( si no sabemos de que tamaño exacto son podemos mirarlo en imagen > tamaño de imagen)

user posted image

una vez creada la nueva imagen, arrastramos de una en una y EN ORDEN DE APARICION las capas de las imagenes a nuestro gif...
user posted image

procurando que todas queden en la misma posicion, esto es facil de saber ya que aparece una linea azul claroto en los bordes superior e izquierdo
user posted image

en este momento nos quedamos tan solo con la imagen que nosotros hemos creado, que debe temer tantas capas como imagenes hayamos arrastrado ( sin contar con el fondo)
user posted image

cuando ya esten todas las capas cuadradas abrimos la ventana de animacion
user posted image

Cuando este abierta nos va a salir una nueva ventana en la q hay una imagen que corresponde a la de nuestro gif.
Ahora, en la ventana de las capas, deseleccionamos la vista de todas las capas excepto de la primera ( siempre sin contar con el fondo) pulsando sobre el ojo que aparece junto al nombre de la capa
user posted image

duplicamos la imagen de la animacion hasta que haya el mismo numero de imagenes en la animacion como capas del gif ( sin contar el fondo)
user posted image

cuando ya esten duplicadas seleccionamos el primer cuadro de la ventana de animacion y selccionamos la vista de la primera capa, SOLO DE LA PRIMERA, luego hacemos lo mismo con las demas capas

user posted imageuser posted image
si todoo ha salido bien, la animacion ya deberia estar terminada, para comprobarlo la ponemos en marcha con el boton play de la ventana animacion
user posted image

si la animacion funciona ya solo falta guardarla, para ello vamos a edicion guardar como optimizada, ahi nos dsaldra una ventana, elegimos la extension gif, y le ponemos nombre el nombre que queramos y voila! gif!
user posted image

user posted image
---NOTA--- si queremos cambiar la duracion del gif podemos hacerlo retardando mas o menos la duracion de cada imagen
user posted image



espero haberos servido de ayuda. :shy: :erm: .. si teneis alguna duda decidmelo e intentare aclararlo lo mejor que pueda...
muchos besos :holas:

letty224 - April 25, 2007 10:03 PM (GMT)
Oye... muy bueno.... a si nos animamos un pilo a hacer gifs..... gracias por ponerlo te estaba esperando... :P Parece facilito... vamos a ver q sale :ouch:

Solo tengo otra duda o como haces para poner el gif dentro de la firma??? eso me haria ya falta..

Gracias de antemano

Lau - April 25, 2007 10:09 PM (GMT)
QUOTE (letty224 @ 25 Apr 2007, 23:03)
Oye... muy bueno.... a si nos animamos un pilo a hacer gifs..... gracias por ponerlo te estaba esperando... :P Parece facilito... vamos a ver q sale :ouch:

Solo tengo otra duda o como haces para poner el gif dentro de la firma??? eso me haria ya falta..

Gracias de antemano

Para eso lo unico que tienes que hacer es que en el primer recuadro de la animacion, se vea otra capa, q sea la q lleve la firma, y a partir de esa base ir añadiendo las demas capas a la animacion
a ver si me explico
antes de empezar a duplicar las capas de la animacion tienes que dejar visibles la capa de la firma y la primera de la animacion y a partir de ahi ir duplicando y cambiando la imagen que se vea del gif, pero sin quitar la de la firma
( como no soy muy buena explicando estas cosas, a ver si mañana por la mañana me da tiempo y te lo pongo en imagenes)

( Otra forma de hacerlo es, que la imagen que quieras usar en el gif vaya dentro de una estatica en todas las capas, como si en vez de la capa de derek q yo he ultilizado hubiera otra alrededor, esto tb te lo pongo mañana, ya te digo que no soy muy buena cn las explicaciones :shy: se me dan mejor las imagenes)

letty224 - April 25, 2007 10:54 PM (GMT)
y yo un poco brutica para entender... tamos hechas :parte: ... no pero la idea si la capte y con imagenes la refuerzo. :P y gracias por ser tan linda :shy:

PD: Puchica ... ya te dije q estas en mi lista de regalos de navidad...... ????

Lau - April 25, 2007 10:56 PM (GMT)
QUOTE (letty224 @ 25 Apr 2007, 23:54)
y yo un poco brutica para entender... tamos hechas :parte: ... no pero la idea si la capte y con imagenes la refuerzo. :P y gracias por ser tan linda :shy:

PD: Puchica ... ya te dije q estas en mi lista de regalos de navidad...... ????

me vas a regalar un derek??? :tutu: :rolleyes: :rolleyes: :P :P si lo se hago antes el tutorial!! xd
:hug:

letty224 - April 25, 2007 11:01 PM (GMT)
Si el bono de navidad ta bueno este año.. :unsure: .. a ver.... 2+2 = 4 .. Un derek.. pasaje a usa... hotel..... :ouch:

Me dejas seguir haciendo cuentas y te aviso... ;) :parte:

ipop - April 26, 2007 10:16 AM (GMT)
Q guay!!!!!! ahora me pongo a practicar!!!!

;)

Gracias, lau!!

Lau - April 26, 2007 01:14 PM (GMT)
Bueno, aki esta la forma de poner un gif en las firmas, lo primero que hay que hacer es escoger la imagen de fondo de la firma y el gif que queramos utilizar,
para hacer la imagen del gif hay que seguir los pasos del primer post, es decir elegir las capas y moverlas todas a una misma imagen cuidando que esten cuadradas, nos quedara algo así:

user posted image

Ahora abrimos un nuevo documento con las mismas dimensiones que la firma que vayamos a utilizar como fondo, en este casi, 500 x 200

user posted image

Con la herramienta mover ( la flecha) trasladamos la capa de la firma a nuestro nuevo documento ( tras esto podemos minimizar la imagen antigua para no confundirnos)

user posted image

El siguiente paso es enlazar todas las capas del gif para poder trasladarlas todas juntas, con esto nos evitamos dos cosas, tener que trasladarlas de una en una y que puedan quedar en posiciones diferentes

user posted image

Ahora con la misma herramienta de antes, trasladamos todas las capas delf gif a la imagen nueva, hasta dejarlas en la posición que nos guste

user posted image

Abrimos la ventana de animación, y en el primer cuadro dejamos vosoble la capa de fondo ( de la firma) y la primera capa del gif, este es el cuadro que debemos duplicar en la ventana de animación

user posted image

El siguiente paso ya es como el del primer post, duplicamos el cuadro de animación tantas veces como imágenes tenga el gif, y vamos dejando visible una capa en cada cuadro, la unica diferencia es que, en este caso también hay que dejar visible la capa de la firma, por lo que en cada cuado habra dos capas visibles, una estatica, de la firma, y una movil: del gif
Cuando ya estemos satisfechos guadamos la imagen en edicion> guadar optimizada como y listo! Firma con gif!

user posted image

Bueno, espero que este bien explicado, no soy muy buena p`rofesora, de todas formas para cualquier duda, ya saben
Lau

jonatff - April 26, 2007 02:24 PM (GMT)
Gracias, intentare hacerlo como dices... yo eske hago todas las capas en PS y luego lo paso a IR! xD soy un desastre!

letty224 - April 26, 2007 02:59 PM (GMT)
Como q no eres buena explicando.. eres genial.... gracias este tuto esta genial

buffymak - April 26, 2007 06:35 PM (GMT)
Magnífico tutorial Lau, lo has explicado estupendamente; Muchiiiisimas Gracias,xq nos viene de lujo!! Estoy deseando probar;)

cristina1990 - April 27, 2007 04:38 AM (GMT)
justamente! estaba buscando un tuto para hacer gifs animados graciaaas Lau!! y a practicaar!! :holas:

"beqizit" - April 28, 2007 12:59 AM (GMT)
esta buenisimo
gracias

"beqizit" - April 29, 2007 10:15 PM (GMT)
pero tengo un problema... no lo puedo guardar ... me aparece en gris para guardar .... ayuda que puedo hacer!!

Lau - April 29, 2007 10:19 PM (GMT)
QUOTE ("beqizit" @ 29 Apr 2007, 23:15)
pero tengo un problema... no lo puedo guardar ... me aparece en gris para guardar .... ayuda que puedo hacer!!

como que te aparece en gris para guardar no entiendo... ( si puedes ponme una captura para ver si se lo q pasa y poder ayudarte)

me alegro que lo hayas arreglao!
ya me enseñareis los resultados del tutorial, q estoy deseando verlos! XD

Coconaut-Extract - May 4, 2007 12:41 PM (GMT)
Magnifio tutorial!!!!! Eternamente agradeco!!!! Y ahe hecho mi primera prueba, cuando acabe el challenge en el que estoy participando la poondre (porque ha de ser secreto) xD


Para guardar as de hacer esto:

Archivo----> Guardar optimizado como (y seleccionas GIF)

vigila no cojas simpemente guardar como..


Muchas GRacias!!!!

UnaiChambers - May 9, 2007 07:09 PM (GMT)
muchas gracias! he aprendido ha hacer gifs animados y he hecho mi primer gif!!!! :D

trucutru - May 9, 2007 10:35 PM (GMT)
Perdonad pero para que yo me entere que para estas cosas soy más bien corta: ¿se necesita solo un programa que se llama Image Ready? ¿y el PS qué? ayy que ya me veo que me piran de casa por contaminar el PC a base de toda clase de software jejeje.

Lau - May 9, 2007 10:38 PM (GMT)
Tucutru el image ready es el programa basico necesario para hacer los gifs, pero para editar ls imagenes hay que usar el photoshop, de todas formas el image ready a mi al menos, me venia con el photoshop cd me lo baje

Unai! me encanta tu avatar, felicidades!!!

UnaiChambers - May 10, 2007 05:39 PM (GMT)
Gracias a ti ya se hacer gifs animados y voy a presentarme a un challenge!

Mono - June 9, 2007 08:51 PM (GMT)
Yujujui!!!! lo he hecho!! otra cosa más que sé hacer con el photoshop... weno, con el imageready :xd:
Muy bien explicado, me ha servido de mucho, muchas gracias Lau, espero que publiques más y me avises cuando eso pase.

Un abrazo

Mono

grey's_z_19 - October 14, 2007 08:42 PM (GMT)
Me salio me salio lo se hacer bueno es la primera ya ire mejorando:
user posted image

Mercri - May 25, 2008 02:40 PM (GMT)
Muchas gracias Lau!!!!!!!!!!!
A mi me salió esto:
XDDD

user posted image

que guay!! gracias de nuevo wapa!

Luly1391 - April 11, 2009 08:06 PM (GMT)
Hola!. yo se que este tutorial se subio hace bastante timepo, pero tengo una duda y capaz alguien me la pueda responder: Una vez que guardé el GIF voy a mi carpeta para ver como quedó pero solo aparece un cuadro negro del mismo tamañno que las imagenes. alguien me podria decir qe es lo que estoy haciendo mal para que las imagenes no aparezcan?.
Muchas gracias! ;)

Luly1391 - April 11, 2009 08:13 PM (GMT)
QUOTE (Lau @ 25 Apr 2007, 22:58)
Bueno, este es el primer tutorial que hago en mi vida asi que espero que no sea demasiado desastre y se pueda entender bien


....


si la animacion funciona ya solo falta guardarla, para ello vamos a edicion guardar como optimizada, ahi nos dsaldra una ventana, elegimos la extension gif, y le ponemos nombre el nombre que queramos y voila! gif!
user posted image

user posted image
---NOTA--- si queremos cambiar la duracion del gif podemos hacerlo retardando mas o menos la duracion de cada imagen
user posted image



espero haberos servido de ayuda. :shy:  :erm: .. si teneis alguna duda decidmelo e intentare aclararlo lo mejor que pueda...
muchos besos :holas:

Hola!. yo se que este tutorial se subio hace bastante timepo, pero tengo una duda y capaz alguien me la pueda responder: Una vez que guardé el GIF voy a mi carpeta para ver como quedó pero solo aparece un cuadro negro del mismo tamañno que las imagenes. alguien me podria decir qe es lo que estoy haciendo mal para que las imagenes no aparezcan?.
Muchas gracias! wink2.gif

Lau - April 11, 2009 09:20 PM (GMT)
Luly, acabo de leer el mensaje, y la verdad es que no se que puede fallar para que te salga en negro.. quizas es por la version del photoshop, en la CS3 hay que darle a guardar para web... no se
:( :( :( :(

Luly1391 - April 11, 2009 09:49 PM (GMT)
QUOTE (Lau @ 11 Apr 2009, 22:20)
Luly, acabo de leer el mensaje, y la verdad es que no se que puede fallar para que te salga en negro.. quizas es por la version del photoshop, en la CS3 hay que darle a guardar para web... no se
:( :( :( :(

No, eso tmpco es :S probé todas las opciones y nada que va :snif:
Enzima me habia entusiasmado x haberlo logrado u.u :angry:
Buen después veré a quien le puedo preguntar. Igual muchas gracias ;)

munloka - May 7, 2009 02:14 PM (GMT)
me salió!!!!!!!!!!!!!!!!!!! :D muchas gracias ^^ lo hice de prueba con fotis caca... ya pondre uno q haga guai ^_^ muchas gracias por el tuto!

Chofi - September 13, 2009 12:20 AM (GMT)
:yuju:
primera vez que intento algo en el photoshop.. y me funcionó!!!

jaja eso significa que tu tutorial está muy muy bueno!!!

va-n3sa paola - October 30, 2009 02:30 AM (GMT)
sta buenoo.. graxiass




* Hosted for free by InvisionFree