Author Topic: Tutorial: Hacer gifs animados  (Read 5580 times)

sigrid

  • Patinajius Delirium Tremens
  • *******
  • Posts: 5446
  • Karma: 201
  • Gender: Female
  • ^^ mi reacción cuando Evan anunció su regreso
  • Awards Segundo clasificado búsqueda del tesoro 2013 Ganador mejor montaje aniversario 2013 Tercer clasificado trivial 2012 Ganador de la búsqueda del tesoro 2011 Premio Ariquitaun al mejr posteador 2011 Premio Ariquitaun al forero más activo 2011
Tutorial: Hacer gifs animados
« on: September 12, 2012, 12:52:46 PM »
A petición de Ituriel, os traigo un tutorial para aprender hacer gifs animados. Espero que os sea de utilidad.

Para hacer gifs animados existen multitud de programas que os pueden ayudar. Yo solía convertir los videos a gif utilizando el programa gratuito SUPER (un convertidor de formatos), también se puede hacer online a traves de páginas como Gifsoup. Son opciones muy válidas, pero el gif pierde algo de calidad, así que os voy a mostrar como lo hago yo ahora, una manera que preserva bastante bien la calidad. En mi caso utilizo Adobe Premiere Pro para crear el gif y Adobe Photoshop CS4 para editarlo.

Voy a dividir el tutorial en diferentes apartados, así que si ya teneis una manera que os guste de convertir los videos en gif, podeis saltar hasta el último punto de este tutorial.
Nota: tengo los programas en inglés así que para que sepais donde está cada herramienta he intentado hacer unas cuantas capturas para no liaros.



DESCARGAR EL VIDEO

* El primer paso sería descargar el video en cuestión. Yo tengo instalado el complemento "download helper" para Mozilla Firefox asi que es muy sencillo:
con el video abierto, pincho en la esquina superior izquierda en el pequeño triangulo y selecciono el formato .mp4 y en la calidad mas alta disponible.

http://i50.tinypic.com/2rzsavl.jpg

Si no teneis download helper hay muchas webs que ofrecen este servicio, como Keepvid. Tutorial aquí




CONVERTIR EL VIDEO EN GIF

* Abrid Adobe Premiere Pro y cread un nuevo proyecto.

http://i45.tinypic.com/2rmm5ck.jpg

* Aceptamos y ahora nos aparecerá la pantalla "Nueva secuencia" donde elegiremos la calidad. En este caso he elegido HDV 1080p24.

http://i49.tinypic.com/2md1sm.jpg

* Ahora hay que abrir el video en cuestión buscandolo donde lo hayais guardado. Yo me voy a window > media browser. Y en el cuadrito que se me abre, busco el video y con un doble click lo abro.

* Teneis que seleccionar el fragmento de video que querais utilizar con los pequeños paréntesis que hay bajo el video. Una vez seleccionado, en la pantalla del video lo "agarrais" y lo soltais en la barra inferior "video 1"

http://i49.tinypic.com/34ytfft.jpg

Ahora si haceis click en el trocito de video en la barra "video 1" lo vereis en la pantalla superior derecha, que es donde apreciaremos el resultado final.

* El siguiente paso es deshabilitar el audio (es un gif, asi que el audio nos da igual) pinchando en el icono del altavoz en la barra "Audio 1".
También ajustaremos el tamaño del clip pinchando con el boton derecho en el trozo de video en la barra "video 1" y seleccionando "scale to frame size". Vereis como el video en la parte derecha se agranda.

http://i49.tinypic.com/9thb8l.jpg

Bien, si quisieramos, ya podriamos salvar nuestro trocito de video como gif, pero la ventaja de Premiere Pro es poder empezar a modificar la imagen con sus herramientas, tiene algunas muy chulas.

Si quereis guardarlo y ya está, pinchad primero en el trozo de video en "video1" id a "Archivo, Exportar, Media" y en la ventana que se abre, seleccionar como formato "animated gif". Abajo podeis seleccionar los ajustes mas detalladamente, yo suelo poner estos:

http://i49.tinypic.com/jj6vkz.jpg

Lo guardais, y si teneis el paquete completo de Adobe se os abrira el Adobe Media Converter para realizar la conversión de formato. Donde solo tendreis que aceptar pinchando en "start queue" Y ya tendreis vuestro gif hecho.



MODIFICAR EL VIDEO EN PREMIERE PRO

Este paso no es necesario, pero siempre es divertido investigar con las diferentes herramientas de cada programa.

*Abrimos la ventana de efectos yéndonos a window > effects. Y ahi desplegamos los "video effects". Por otro lado abrimos window > effect controls para poder trabajar con los efectos seleccionados
La parte superior de la pantalla quedaria mas o menos asi:
[expando]http://i48.tinypic.com/2cyqwkl.jpg[/expando]
http://i48.tinypic.com/2cyqwkl.jpg

*Ya podemos empezar a usar los efectos, yo voy a probar la herramienta de balance de color (video effects > color correction > color balance) para usarla se "agarra" y se suelta en la ventana de "effect controls" una vez ahi, pinchamos en la flechita a la izquierda para desplegarla:
[expando]http://i45.tinypic.com/35i0g3d.jpg[/expando]
http://i45.tinypic.com/35i0g3d.jpg

* Intento darle un toque sepia a la imagen con los siguientes ajustes:
[expando]http://i49.tinypic.com/35d3y4l.jpg[/expando]
http://i49.tinypic.com/35d3y4l.jpg
Como podeis ver, voy observando el resultado final en la pantalla de la derecha. Si no os gusta el resultado es tan sencillo como clickar en la ventana de "effect controls" el efecto que no os esté convenciendo y borrarlo.

* Voy a aplicarle un toque de luz yendome a video effects > adjust > lighting effects.
[expando]http://i45.tinypic.com/2s8pphu.jpg[/expando]
http://i45.tinypic.com/2s8pphu.jpg

Como veis es todo ensayo-error e ir toqueteando hasta que os guste como queda.
Cuando esteis contentos con el resultado final, salvad el gif como expliqué en el punto anterior.



ABRIR Y MODIFICAR EL GIF EN PHOTOSHOP

* De la manera que sea, ahora teneis un gif con el que trabajar en photoshop, para abrir ese gif, teneis que iros a Archivo > Importar > Video frames to layers. Iros a la ubicación donde tengais el archivo y escribid *.* asi se mostraran todos los archivos de esa carpeta, seleccionad vuestro gif y abridlo.
(Nota: cuanto mas largo sea el gif, mas costará cargarse en photoshop)

* Una vez abierto lo primero que hago es recortarlo y disminuir el tamaño para que sea mas fácil trabajar con el (se hace de la misma forma que con una foto normal)

* Para poder modificar el gif, aseguraos que teneis la ventana de animación abierta (ventana > animación)

* Ahora tenemos la animación separada por cuadros, o frames; y capas o layers.

* Por defecto, la duración de cada cuadro en mi animación se puso como 0.6 segundos, si la salvo asi, aparecerá acelerada, asi que pongo todos los cuadros a 0.1 segundos para que la velocidad sea la correcta. Se hace de la siguiente manera:
 en el cuadro animación selecciono todos los cuadros, y en cualquiera de ellos, pincho en "0.06 sec." y lo cambio a "0.1":
[expando]http://i50.tinypic.com/2ptdjs6.jpg[/expando]
http://i50.tinypic.com/2ptdjs6.jpg

* Voy a oscurecer las partes oscuras algo mas de la siguiente forma. Creo una capa nueva (capas > crear nueva capa), y en la ventana de capas, la situare encima de todas las demás. Cualquier cosa que le haga a esta capa, se vera reflejado en todos los cuadros de la animación
Selecciono un pincel grande con una opacidad al 30% y comienzo a pintar las partes ya oscuras. Si oscurezco alguna parte que no quiera, es tan sencillo como borrarlo en esta capa.
[expando]http://i50.tinypic.com/69m22o.jpg[/expando]
http://i50.tinypic.com/69m22o.jpg

* A esta capa podéis hacerle básicamente lo que queráis: añadirle texturas, estampados, autoformas, lo que sea. Recordad que hagais lo que hagais, quedará reflejado sobre todo el gif.

* Para ponerle texto a la animación, es importante que tengais seleccionados todos los cuadros mientras lo escribais/modifiqueis, porque si no, los cambios solo se reflejaran en uno de los cuadros.
[expando]http://i48.tinypic.com/efp9gj.jpg[/expando]
http://i48.tinypic.com/efp9gj.jpg
(Como veis he añadido una linea rosada tras las letras para que destaquen, pintando con un pincel pequeño sobre la capa que creamos anteriormente)

* Por ultimo añadiré un recuadro al gif de la siguiente forma: En la capa que creamos, con la herramienta de rectángulo, selecciono todo el gif y le doy al boton derecho del ratón: stroke
[expando]http://i46.tinypic.com/f3i4rd.jpg[/expando]
http://i46.tinypic.com/f3i4rd.jpg

En la ventana que se abre, poneis los pixeles de ancho que quereis que tenga el recuadro, y el color. Aceptais
[expando]http://i45.tinypic.com/l9nw1.jpg[/expando]
http://i45.tinypic.com/l9nw1.jpg

* Para guardar el gif tenemos que irnos a: Archivo > save for web and devices. Ahi podeis ajustar la calidad del gif, e incluso guardarlo en escala de grises si asi lo preferis.

En mi caso, al ir a salvarlo me dice que en la mejor calidad el gif va a pesar mas de 4MB (era un gif muy largo) asi que decido hacerlo mas pequeño y quitarle algunos cuadros. Los cuadros se eliminan, seleccionandolos y dandole click a la esquina superior derecha del cuadro de animacion > Borrar cuadros
[expando]http://i46.tinypic.com/nbvrl3.jpg[/expando]
http://i46.tinypic.com/nbvrl3.jpg

* Ahora que es mas corto, puedo salvarlo sin problema. Archivo > save for web and devices. Y se abrirá esta pantalla
[expando]http://i49.tinypic.com/dz4u8.jpg[/expando]
http://i49.tinypic.com/dz4u8.jpg
(en mi caso lo bajo a 128 colores porque la calidad del gif no va a sufrir mucho y asi pesará menos)

En esas cuatro pantallas veis en la primera, el gif original, y en las otras tres, como quedaría el gif con diferentes ajustes. Para bajar la calidad y que pese menos se le puede añadir grano al gif o disminuirle mas los colores. En este caso, no le he añadido nada de grano y lo he dejado a 128 colores.

Una vez satisfechos con el resultado, guardais y voilà ya teneis vuestro gif terminado  :dance:



He intentado detallar la explicación de la mejor manera posible, pero si no habeis entendido algo, o quereis que profundice mas en algún punto, decidmelo.
¡A practicar!  :guino:
« Last Edit: November 14, 2016, 14:34:52 PM by mokhfi »
Miembro del PAVOH(Plataforma Anti Violinistas Obsesos Horteras y fan del kilt de John Kerr.

Narodnaia

  • Al lío, al lío... snifando canela
  • ****
  • Posts: 121
  • Karma: 5
  • Gender: Female
    • Balletomanos
Re: Tutorial: Hacer gifs animados
« Reply #1 on: September 12, 2012, 13:36:41 PM »
Anda, que mira yo, se trabajar con el premiere y no se me había ocurrido hacer gifs ahi .... :vergonzoso:
Una verdad sin interés puede ser eclipsada por una falsedad emocionante.

Ituriel

  • CONTADORA JEFA ARIQUITAUN
  • Obseso del patineo en estado absoluto
  • ******
  • Posts: 1251
  • Karma: 74
  • Gender: Female
  • Define Dancing
  • Awards Ganador del concurso de avatares 2011 Trivial chocolate 2013 Ganador concurso de avatares aniversario 2012 Ganador concurso de firmas aniversario 2012 Segundo puesto en el concurso de banners 2011
Re: Tutorial: Hacer gifs animados
« Reply #2 on: November 05, 2012, 23:50:57 PM »
En primer lugar Gracias por el tutorial :sonrisa:

Y en seguno

¡¡¡¡¡LO LOGRE!!!!![/color][/size][/font]

 :bailongo: :bailongo: :bailongo: :bailongo: :bailongo: :bailongo: :bailongo: :bailongo: :bailongo: :bailongo: :bailongo:

Me he conseguido un photoshop cs4 muy guapo

Ya he estado experimentando un poco, me he liado bastante :zombie: pero he conseguido alguito.

Les dejo el resultado  :jijiji:

 

Princess Purpple

  • Patinaje en español... GUAY!!
  • **
  • Posts: 32
  • Karma: 0
  • Gender: Female
Re:Tutorial: Hacer gifs animados
« Reply #3 on: May 29, 2014, 19:59:19 PM »
Hay otro programa para editar gif que no sea Photoshop?

mokhfi

  • Ariquidependiente
  • Administrador(Mode) Fanático irrecuperable del patín
  • Obseso del patineo en estado absoluto
  • *********
  • Posts: 3860
  • Karma: 114
  • Gender: Female
  • Awards Bronce danza predicciones 17/18 Oro General predicciones 17/18 Campeón invierno predicciones 17/18 Oro masculino predicciones 17/18 Oro pareja predicciones 17/18 Ganador mejor firma aniversario 2013 Ganador concurso de avatares aniversario 2012 Ganador concurso de firmas aniversario 2012 Segundo puesto en el concurso de avatares 2011
Re:Tutorial: Hacer gifs animados
« Reply #4 on: May 29, 2014, 20:33:54 PM »
Sí, hay varios, pero el más completo es photoshop. Uno de los más conocidos es gimp. Pero no lo he usado jamás. Yo usaba uno que tenía unos efectos muy chulos, pero solo era para fotografias, al formatear el disco duro lo perdí, y ahora no recuerdo el nombre.


El món no avança, gira

Princess Purpple

  • Patinaje en español... GUAY!!
  • **
  • Posts: 32
  • Karma: 0
  • Gender: Female
Re:Tutorial: Hacer gifs animados
« Reply #5 on: May 29, 2014, 20:37:17 PM »
de donde puedo puedo descargar gimp en español?


EDITO:Gracias mokhfi ya encontre el programa y ya me hice el gif. como podran ver,aunque no esta tan trabajado ya vale,por ahora.
Gracias  :abrazo:  :ok:  :abrazo: .Este ramo es para ti  :ramo:
« Last Edit: May 30, 2014, 03:14:49 AM by Princess Purpple »