Seti
25/03/2006, 20:15
Saludos cordiales a todos:
Como es ya un compromiso mío con el foro (y todos sus miembros), es para mí un placer y gusto, presentar el segundo tutorial de una de las aplicaciones que más pueden interesarles para tareas comúnes en internet... CREAR O EDITAR GIF ANIMADOS.
ATENCIÓN: ESTE MATERIAL ES PROPIEDAD EXCLUSIVA DE Y PARA USO DE COMUNIDADP2P. Cualquier interés de alguno de los miembros en él para obtener algún duplicado para uso personal, favor de comunicarlo a Administradores y/o Webmaster. Por su atención y comprensión, gracias....
Parte de las acciones y fundamentos utilizados en éste material, ha sido extraído de otros sitios y modificada para adecuación al tutorial.
Cómo trabajar con un gif
Antes de entrar en materia y de saber como se puede transparentar o, incluso si eres un buen dibujante, para construir un gif, empezaremos por una cosa muy sencilla pero que provoca la mayoría de las consultas…: ¿como bajar un gif animado?. Fácil... aunque siempre es fácil aquello que se conoce y complicado lo que no sabemos.
Lo primero que debes hacer, es colocar el cursor (la flecha) encima del gif que deseas bajar y con el botón derecho del ratón seleccionar la opción "guardar como" o "save as"... eso esta en función del navegador que utilices. Sólo queda escoger un directorio donde guardarlo y ya está!!! ¿Sencillo verdad?. Ante cualquier duda ya sabes donde postear.
Diseña o transparenta tus gif animados
Los gifs animados, son varias imágenes en formato “gif”, unidas a través del programa adecuado. Podríamos hablar tranquilamente de "Dibujos animados" ya que la técnica utilizada es prácticamente la misma. Hay muchos programas que puedes encontrar en internet, pero por el momento, utilizaré para efectos del tutorial, el programa "Jasc Animation Shop Pro". Incluso, aunque nos vamos a basar en Animation Shop para el tutorial, se puede aplicar éste proceso en cualquier editor de GIF´s animados, sin importar que sea Freeware, Shareware o de pago de licencia.
Según la versión disponible de Animation Shop, es probable (aunque no indispensable) que se necesite utilizar otros programas como el Paint de Windows y/o el Photo Editor de Office (el programa editor de imágenes, puede variar según la versión de Office). De cualquier manera, hay varios programas semejantes a éstos, los denominados "Freeware" -de libre uso- o Shareware -probar antes de comprar-) .
Evidentemente, si eres un buen dibujante, puedes crear tus propios gifs animados (creando un frame a la vez, hacer un leve movimiento en él, y crear otro, al estilo cuadro-a-cuadro). De lo contrario, tendrás que conformarte, y este es mi caso, con intentar conseguir la máxima calidad en las animaciones que encuentres por la red... No hace falta que recomiende alguno, aunque lo haré... http://gifsanimados.espaciolatino.com
¡Manos a la obra…!
Mi propio Avatar servirá de ejemplo:
http://img517.imageshack.us/img517/462/cubeoriginal6cx.gif (http://imageshack.us) http://img61.imageshack.us/img61/2540/cubetransparent9rh.gif (http://imageshack.us)
Como has comprobado, la segunda imagen (transparente) es mucho mas estética que la primera, ya que la puedes colocar encima de cualquier fondo sin que aparezca ese molesto recuadro verde.
Para conseguir esta transparencia, abriremos el gif original con "Animation Shop"
http://img61.imageshack.us/img61/4263/dibujo13nk.th.jpg (http://img61.imageshack.us/my.php?image=dibujo13nk.jpg)
Como podrás observar, el fondo del cubo es verde, y el dibujo también utiliza algunas partes del mismo color. Ello nos impide efectuar una transparencia directa ya que transparentaríamos partes del cubo.
El segundo paso consistirá en guardar cada "frame"... F:1, F:2... etc en formato BMP...
http://img61.imageshack.us/img61/8331/dibujo26yr.th.jpg (http://img61.imageshack.us/my.php?image=dibujo26yr.jpg)
Paso siguiente, es abrir cada uno de los frames BMP, abre el menú Animation en la barra de tareas, selecciona la opción Replace color; aquí, especifica el color a modificar (en éste caso, usa el cuentagotas activado en automático para seleccionar el fondo verde).
http://img61.imageshack.us/img61/3494/dibujo37zv.th.jpg (http://img61.imageshack.us/my.php?image=dibujo37zv.jpg)
y más abajo, marca la opción a cambiar a Transparent Opacity (transparentar opacidad), para obtener el resultado deseado.
http://img517.imageshack.us/img517/7765/dibujo43bi.th.jpg (http://img517.imageshack.us/my.php?image=dibujo43bi.jpg)
Acto siguiente, es guardar nuevamente cada frame modificado (BMP con transparencia), a formato .gif
Recuerda: Este paso lo repetiremos con cada uno de los 30 frames que componen este gif animado.
Opcion alternativa:
Con el Paint de Windows o Photo Editor de Office, transparentaremos el color verde consiguiendo el efecto deseado. A partir de aquí ya disponemos de una imagen transparente que procederemos a guardar en formato GIF. Repetiremos este paso con todas la imágenes que tenemos en BMP.
Y continuando… :
Una vez guardadas todas las imágenes en formato GIF, ya en condiciones de construir un gif animado transparente. Volveremos a utilizar "Animation Shop", escogeremos la opción "Animation Wizard" que tenemos en "File" y, procurando que en la segunda pantalla que nos aparece este activada la casilla "Transparent", clicaremos "Siguiente" hasta llegar a la ventana en la que se nos deja escoger la velocidad de los frames.
En este caso seleccionaremos 15 ó 20 y dejaremos activada la opción "yes, repeat
the animation indefinitely". Ello nos proporcionará una animación repetida. Veamoslo
gráficamente.
http://img386.imageshack.us/img386/830/dibujo52zp.th.jpg (http://img386.imageshack.us/my.php?image=dibujo52zp.jpg)
Solo nos queda insertar los gifs transparentes (frames) por orden, guardar el archivo obtenido y tendremos ya cumplido nuestro objetivo: El cubo en gif animado transparente.
http://img521.imageshack.us/img521/8131/dibujo63mn.th.jpg (http://img521.imageshack.us/my.php?image=dibujo63mn.jpg)
Por último, guarda tu nuevo gif animado transparente, y listo….
Tutorial terminado con fecha 25 de Marzo de 2006 a las 13:48 p.m. GMT -6:00.
Bye...
Como es ya un compromiso mío con el foro (y todos sus miembros), es para mí un placer y gusto, presentar el segundo tutorial de una de las aplicaciones que más pueden interesarles para tareas comúnes en internet... CREAR O EDITAR GIF ANIMADOS.
ATENCIÓN: ESTE MATERIAL ES PROPIEDAD EXCLUSIVA DE Y PARA USO DE COMUNIDADP2P. Cualquier interés de alguno de los miembros en él para obtener algún duplicado para uso personal, favor de comunicarlo a Administradores y/o Webmaster. Por su atención y comprensión, gracias....
Parte de las acciones y fundamentos utilizados en éste material, ha sido extraído de otros sitios y modificada para adecuación al tutorial.
Cómo trabajar con un gif
Antes de entrar en materia y de saber como se puede transparentar o, incluso si eres un buen dibujante, para construir un gif, empezaremos por una cosa muy sencilla pero que provoca la mayoría de las consultas…: ¿como bajar un gif animado?. Fácil... aunque siempre es fácil aquello que se conoce y complicado lo que no sabemos.
Lo primero que debes hacer, es colocar el cursor (la flecha) encima del gif que deseas bajar y con el botón derecho del ratón seleccionar la opción "guardar como" o "save as"... eso esta en función del navegador que utilices. Sólo queda escoger un directorio donde guardarlo y ya está!!! ¿Sencillo verdad?. Ante cualquier duda ya sabes donde postear.
Diseña o transparenta tus gif animados
Los gifs animados, son varias imágenes en formato “gif”, unidas a través del programa adecuado. Podríamos hablar tranquilamente de "Dibujos animados" ya que la técnica utilizada es prácticamente la misma. Hay muchos programas que puedes encontrar en internet, pero por el momento, utilizaré para efectos del tutorial, el programa "Jasc Animation Shop Pro". Incluso, aunque nos vamos a basar en Animation Shop para el tutorial, se puede aplicar éste proceso en cualquier editor de GIF´s animados, sin importar que sea Freeware, Shareware o de pago de licencia.
Según la versión disponible de Animation Shop, es probable (aunque no indispensable) que se necesite utilizar otros programas como el Paint de Windows y/o el Photo Editor de Office (el programa editor de imágenes, puede variar según la versión de Office). De cualquier manera, hay varios programas semejantes a éstos, los denominados "Freeware" -de libre uso- o Shareware -probar antes de comprar-) .
Evidentemente, si eres un buen dibujante, puedes crear tus propios gifs animados (creando un frame a la vez, hacer un leve movimiento en él, y crear otro, al estilo cuadro-a-cuadro). De lo contrario, tendrás que conformarte, y este es mi caso, con intentar conseguir la máxima calidad en las animaciones que encuentres por la red... No hace falta que recomiende alguno, aunque lo haré... http://gifsanimados.espaciolatino.com
¡Manos a la obra…!
Mi propio Avatar servirá de ejemplo:
http://img517.imageshack.us/img517/462/cubeoriginal6cx.gif (http://imageshack.us) http://img61.imageshack.us/img61/2540/cubetransparent9rh.gif (http://imageshack.us)
Como has comprobado, la segunda imagen (transparente) es mucho mas estética que la primera, ya que la puedes colocar encima de cualquier fondo sin que aparezca ese molesto recuadro verde.
Para conseguir esta transparencia, abriremos el gif original con "Animation Shop"
http://img61.imageshack.us/img61/4263/dibujo13nk.th.jpg (http://img61.imageshack.us/my.php?image=dibujo13nk.jpg)
Como podrás observar, el fondo del cubo es verde, y el dibujo también utiliza algunas partes del mismo color. Ello nos impide efectuar una transparencia directa ya que transparentaríamos partes del cubo.
El segundo paso consistirá en guardar cada "frame"... F:1, F:2... etc en formato BMP...
http://img61.imageshack.us/img61/8331/dibujo26yr.th.jpg (http://img61.imageshack.us/my.php?image=dibujo26yr.jpg)
Paso siguiente, es abrir cada uno de los frames BMP, abre el menú Animation en la barra de tareas, selecciona la opción Replace color; aquí, especifica el color a modificar (en éste caso, usa el cuentagotas activado en automático para seleccionar el fondo verde).
http://img61.imageshack.us/img61/3494/dibujo37zv.th.jpg (http://img61.imageshack.us/my.php?image=dibujo37zv.jpg)
y más abajo, marca la opción a cambiar a Transparent Opacity (transparentar opacidad), para obtener el resultado deseado.
http://img517.imageshack.us/img517/7765/dibujo43bi.th.jpg (http://img517.imageshack.us/my.php?image=dibujo43bi.jpg)
Acto siguiente, es guardar nuevamente cada frame modificado (BMP con transparencia), a formato .gif
Recuerda: Este paso lo repetiremos con cada uno de los 30 frames que componen este gif animado.
Opcion alternativa:
Con el Paint de Windows o Photo Editor de Office, transparentaremos el color verde consiguiendo el efecto deseado. A partir de aquí ya disponemos de una imagen transparente que procederemos a guardar en formato GIF. Repetiremos este paso con todas la imágenes que tenemos en BMP.
Y continuando… :
Una vez guardadas todas las imágenes en formato GIF, ya en condiciones de construir un gif animado transparente. Volveremos a utilizar "Animation Shop", escogeremos la opción "Animation Wizard" que tenemos en "File" y, procurando que en la segunda pantalla que nos aparece este activada la casilla "Transparent", clicaremos "Siguiente" hasta llegar a la ventana en la que se nos deja escoger la velocidad de los frames.
En este caso seleccionaremos 15 ó 20 y dejaremos activada la opción "yes, repeat
the animation indefinitely". Ello nos proporcionará una animación repetida. Veamoslo
gráficamente.
http://img386.imageshack.us/img386/830/dibujo52zp.th.jpg (http://img386.imageshack.us/my.php?image=dibujo52zp.jpg)
Solo nos queda insertar los gifs transparentes (frames) por orden, guardar el archivo obtenido y tendremos ya cumplido nuestro objetivo: El cubo en gif animado transparente.
http://img521.imageshack.us/img521/8131/dibujo63mn.th.jpg (http://img521.imageshack.us/my.php?image=dibujo63mn.jpg)
Por último, guarda tu nuevo gif animado transparente, y listo….
Tutorial terminado con fecha 25 de Marzo de 2006 a las 13:48 p.m. GMT -6:00.
Bye...