BetaRedes
Crear un GIF animado - Versión para impresión

+- BetaRedes (http://betaredes.com)
+-- Foro: Diseño (/foro-dise%C3%B1o)
+--- Foro: Adobe Photoshop (/foro-adobe-photoshop)
+---- Foro: Tutoriales (/foro-tutoriales)
+---- Tema: Crear un GIF animado (/tema-crear-un-gif-animado)

Crear un GIF animado - SaNTii - 19-03-2012 09:47 AM

Bueno, este es una sencilla guía para un efecto sencillo.
Les mostraré como crear fácilmente una animación GIF.

Para esto tomaré el logo de BetaRedes (espero que Javier y Esteban no me cobren copyright)
Haré que el circulo de BR de un giro de 360°, la palabra Beta subirá a su respectivo lugar y Redes bajará.
Puede quedar largo pero así será claro de deducir como se hace


PASO 1
Para empezar creamos un archivo PSD, en el cual colocamos todas las imagenes o textos que apareceran en la animación.
Abriremos la herramienta en Ventana > Animación.
Spoiler:
Spoiler:


PASO 2
Duplicaremos las capas que serán animadas, a su vez le daremos su posición y rotación deseada
Entre mas capas mas cuadros llevará la animación y mas fluida será la misma, a su vez será mas pesado el archivo.
Talvez no es un proceso practico pero no se me ocurre otro
Spoiler:


PASO 3
Ocultar todas las capas y dejar solo visible la que será la primer imagen de la animación
Se verá que debajo se crea un cuadro con la capa visible
Dar click en "Duplicar los cuadros seleccionados", asi se creará un nuevo cuadro, ahora ocultaremos la capa anterior y pondremos como visible la siguiente y repetiremos el proceso las veces que sea necesario.
Una vez terminado presionamos el botón "Reproduce la animacíon" para ver como vamos
Spoiler:


PASO 4
Yo ya tengo el logo girando los 360°, ahora toca agregar el movimiento de "Beta".
Para eso no ocultaré la ultima capa que quedó seleccionada, y empezaré a agragar cuadros de la misma forma que antes.
Al finalizar previsualicemos nuevamente


PASO 5
Repetiré el proceso con la palabra "Redes".
Aqui tambien dejaremos visible la ultima posicion de la palabra "Beta" y del circulo


PASO 6
Una vez hayamos terminado seleccionaremos todos los cuadros y daremos click en la flechita que aparece debajo de uno y ahi elegiremos cuanto demorará la transición, entre mas corto, mas fluido, obviamente.
Spoiler:


PASO 7
Donde dice "Una vez" podremos elegir las veces que se repetirá la animación, también puede elegirse que sea infinitamente.


PASO 8
Una vez hayamos terminado procederemos a guardar.
Para esto iremos a Archivo > Guardar para Web y dispositivos
Ahi seleccionaremos GIF donde se indica, damos click en Guardar y lista nuestra animación.
Spoiler:

Espero que no haya quedado muy confuso

Aqui el resultado final

[Imagen: QdpSq.gif]

Gracias

PD: Lo lei y no me parece que está tan bien explicado.
Cualquier cosa me avisan

RE: Crear un GIF animado - Esteban - 19-03-2012 09:50 AM

Muy bueno el tutorial! Lo entendí perfectamente. Y el efecto final... uuuf me dieron ganas de cambiar el logo jajaja. +1

RE: Crear un GIF animado - Javier - 19-03-2012 10:07 AM

Jaja esta bueno el tutorial. +1

RE: Crear un GIF animado - The_Bimbo - 19-03-2012 12:09 PM

Simplemente un excelente tutorial, muchísimas gracias! +1

RE: Crear un GIF animado - Zenc-Maticai - 19-03-2012 12:23 PM

Ya lo sabia , pero siempre hay algun novato , muy buena Gran sonrisa

RE: Crear un GIF animado - Renzo - 19-03-2012 03:21 PM

Muy buen tuto SaNTii gracias. Sonrisa

RE: Crear un GIF animado - JT7 - 19-03-2012 04:51 PM

Buenísimo Santii!!
Me encantó el tutorial, está todo bien explicado Tímido

RE: Crear un GIF animado - Cuervo077 - 11-05-2012 01:14 AM

Excelente Tutorial! Y si, siempre hay algún novato como yo JAJA!! Graciassss!!