[Tutoriales] Gifs Animados y Manejo del Programa Ulead Gif Animator (UGA)

[Eloy58]

Hola Amig@s Intercambios@s.

Uno de los formatos de imagen que siempre me ha fascinado ha sido el GIF.

Si bien, por sus características no es un formato apropiado para imágenes fotográficas, si lo es para todo tipo de gráficos y en especial para animaciones.

GIF (Compuserve GIF) es un formato gráfico utilizado generalmente en la Web, entre otras, tiene la propiedad de permitir transparencias en las imágenes, tanto para imágenes fijas, como para animaciones (otra propiedad de este formato).

Un Gif animado está compuesto por una secuencia de imágenes.

Se utilizan en gran medida en las páginas Web de Internet como: banners, enlaces, etc, … o como simple decoración … además es un formato soportado por todos los navegadores.

Los Gif animados pueden componerse y/o modificarse mediante algunos programas de edición de imagen como Photoshop, Gimp, etc., … o con algunas aplicaciones y programas específicos para ello … quizá el mejor de todos, (aunque algo antiguo), sea Gif Animator de la firma Ulead, empresa hoy día propiedad de Corel, que ha dejado de dar soporte a éste fantástico programa, en parte por el creciente auge en el uso del formato Flash para animaciones.

Si les gustan los Gifs y les gustaría saber como hacerlos, sigan leyendo …

A lo largo de algunos tutoriales que iré haciendo para el FORO, iremos viendo cómo funciona el programa y como crear o modificar Gifs para hacer banners, tarjetas, etc., etc. ...

Saludos.

[Eloy58]

Ulead® Gif Animator 5 en Español + Xenofex 2 Plug-in

INFORMACIÓN

Ulead GIF Animator 5: Es una excelente herramienta para crear GIFs animados fácilmente. GIF Animator ofrece un control total sobre la paleta de colores, y opciones potentes de diseño que te permiten crear ficheros GIF animados para Web.

Las opciones del programa incluyen: soporte AVI; optimización inteligente de "frames" (secuencias de animación) y paletas; inserción de imágenes mediante "arrastrar y soltar" (drag-and-drop); comandos de cambio globales; composición visual (con la posibilidad de arrastrar "frames" a cualquier posición de la pila de secuencias de animación, así como arrastrar imágenes entre "frames"); recortes de imagen; fusión de capas; efectos de transición; efectos de animación de color; gradientes de paleta; bucles infinitos; soporte de plug-ins Photoshop; y mucho más.

A la hora de crear "banners" con texto que se desplaza ("scroll"), tienes control total sobre la fuente, tamaño, dirección, duración, velocidad, "frames" y bordes.

Esta es la herramienta que deberían tener todos los diseñadores de páginas Web.

Ulead® Gif Animator 5 en Español + Xenofex 2 Plug-in

[Eloy58]

Veamos cómo se instala Ulead Gif Animator (UGA):


Empezamos por descomprimir el rar que nos hemos descargado y abrimos la carpeta: UGA5+plugins, nos encontramos con dos nuevas carpetas, dejamos de momento la carpeta: Plugin_Xenofex 2 para otro tutorial más adelante y abrimos la carpeta: Ulead Gif Animator 5.0.5 Retail, que es la que contiene el programa.

Contenido de la carpeta

En Windows XP, la instalación se hace como cualquier otro programa, doble clic en el ejecutable (Ulead GIF Animator v5.05 Retail.exe), seguimos las instrucciones del asistente y posteriormente las que vienen en el documento de texto “Leer” y ya está.

Para Windows 7, deberemos hacer lo siguiente:

Antes de hacer nada y dado que no es un programa actualizado para Win7, nos ponemos encima del ejecutable de instalación (Ulead GIF Animator v5.05 Retail.exe), con el botón derecho del ratón damos en propiedades ….

… en la ventana que sale nos vamos a la pestaña Compatibilidad, donde marcamos:

1º.- Ejecutar este programa en modo de compatibilidad para: (dejamos la que viene por defecto).

2º.- Ejecutar este programa como administrador y pinchamos en Aceptar.

NOTA

Esto es válido para cualquier programa que tengamos antiguo y que no lo hayan actualizado/compatibilizado a Win7.

Una vez hecho esto, instalamos normalmente según nos va indicando el asistente:

Spoiler:

Una vez haya finalizado la instalación y sin abrir aún el programa, pasamos a dejarlo full siguiendo las indicaciones del documento de texto “Leer.txt” que hay en la carpeta.

Hecho esto, nos dirigimos al icono que nos ha creado en el Escritorio:

De nuevo nos ponemos encima y con el botón derecho del ratón repetimos lo que ya hicimos con el ejecutable del instalador al principio.

Ahora ya podemos abrir el programa:

Cerramos el asistente …

NOTA

Si marcamos la casilla: no mostrar este mensaje la próxima vez, no nos volverá a molestar.

Si lo necesitamos alguna vez lo encontramos en: Archivo-> Asistente

… y nos quedamos con el programa en sí, de momento con un documento en blanco, pero eso, pronto cambiará …

Como ya dije al principio, iremos conociendo el programa y su funcionamiento en el transcurso de algunos tutoriales que iré haciendo.

Un saludo.

[Eloy58]

Holas amig@s Intercambiosos@s

Para esta primera toma de contacto con el programa UGA (Ulead Gif Animator) vamos a crear un sencillo banner que al mismo tiempo nos puede servir como Firma para el Foro si así lo queremos.

Empezamos por abrir el programa, cerramos el asistente y creamos un archivo nuevo de 400x100 píxeles ... las medidas admitidas para las firmas.

El siguiente paso es buscar un fondo que nos guste, por ejemplo en Google

Yo he elegido este para esta ocasión.

Vamos a importarla al programa, para ello pinchamos en el icono que se muestra en la imagen de abajo (añadir imagen), con la práctica aprenderemos a hacerlo casi sin mirar.

Se nos abrirá el explorador para que la busquemos, marcamos “Insertar en el marco actual”, y doble clic sobre la elegida … porqué marcamos “Insertar …..”, si nos fijamos en la imagen de arriba “la primera”, tenemos marcado en azul el marco 1, ahora solo hay uno pero cuando tengamos más, esto es importante para que el programa sepa dónde queremos la imagen.

Bueno pues ya tenemos la imagen dentro del programa, ahora vamos a ajustarla a nuestra ventana “proyecto”.

Nos vamos al panel de “objetos” el de la derecha y nos ponemos encima de la imagen que tiene que estar seleccionada “en azul” y con el botón derecho del ratón marcamos en “Propiedades de objeto”

Se nos abre la ventana de propiedades, por defecto sale en “General”, cambiamos de pestaña a “Tamaño y posición” y ajustamos el tamaño a nuestro proyecto que es de 400x100 recuerdan, solo es necesario cambiar el ancho y tener marcada “Guardar proporción”, nos aseguramos de dejarla un poco más grande para no tener problemas al ajustarla ahora después ... pinchamos en OK y nos dirigimos a la ventana central.

Con el puntero pinchamos y recolocamos la imagen hasta que esté a nuestro gusto.

Bueno amig@s hasta aquí llevamos la mitad del trabajo hecho, con el tiempo en esto no tardaremos más de un minuto en hacerlo, incluida la búsqueda de la imagen … jajajajaja

Continuamos… vamos a poner y animar las letras, eso lo hacemos de la siguiente manera:

Pinchamos sobre la “T” de texto que tenemos abajo del todo y se nos abrirá la caja de edición … en la pestaña “Texto” empezamos por poner nuestro nombre o lo que queramos, “claro” y con el puntero lo ajustamos en la ventana de arriba, como vamos a poner dos líneas de texto yo lo he ajustado arriba y centrado el primero, “Eloy58”, ajustamos la fuente, el tamaño, etc, etc ….. eso lo dejo a vuestro gusto, de momento … jajaja … el color da lo mismo en este caso ya que lo vamos a dejar como neón sin color interno… pero como todo … yo les doy unas pautas, luego cada cual que ensaye y lo ponga como mejor se ajuste a su proyecto.

Ahora nos vamos a la pestaña “Neon”, para ver el efecto que le vamos a dar.

Yo le he dado esos valores para que se hagan una idea, pero ustedes ensayen, con el tiempo sabremos lo que queremos.

El siguiente paso es darle movilidad, nos vamos a la pestaña “Efecto”:

Yo lo he puesto en inmóvil … lógicamente porque no quiero que se mueva, ustedes a lo suyo … practiquen … para ver cómo va quedando pinchamos en “Visualizar”, los valores de “Marcos” en este caso, “Inmovil”, no son importantes, pero para la próxima línea de texto sí, lo veremos a continuación, pichamos en OK y le damos en “crear como banner” en la ventanita que nos sale …

… como vemos, nos ha creado un nuevo “Marco”, lo dejamos porque vamos a tener que crear más, si no, no haría falta y podríamos quitar uno de ellos … Cuanto menos bultos más claridad, que decimos por aquí.. jajajajaja

Y finalmente vamos con la siguiente línea de texto.

Esta línea como ya han visto en el banner de muestra, entra, para y sale de nuevo, eso nos pide que tengamos una serie de “Marcos” para que tenga movimiento, lo que hablábamos antes… por eso tenemos que preparar antes los marcos creándolos nosotros, ya que si no, no se vería la primera línea: “Eloy58” durante el movimiento del otro que ocupará 20 Marcos en total, vamos a ello:

Para crear los Marcos necesarios solo tenemos que tener marcados los que queramos duplicar, en este caso ya tenemos los dos primeros marcados, ahora vamos al icono duplicar “Marcos” que hay en la barra de herramientas de abajo y pinchamos varias veces hasta completar los 20 que necesitamos.

Una vez creados todo los Marcos, nos situamos en el primero de ellos (importante esto), lo marcamos y procedemos a crear la siguiente línea de texto.

Seguimos los pasos como en la anterior línea de texto, hasta llegar al paso final de movimiento en la pestaña “Efecto”:

Como ven, he cambiado los parámetros de desplazamiento y los Marcos ahora si son importantes, son los que van a hacer que se mueva el texto en la dirección que le indicamos arriba.

Comprobamos que todo esté a nuestro gusto en la ventana principal de nuestro proyecto, para eso lo ponemos en movimiento en el icono “Play” de abajo y cuando lo tengamos claro procedemos a guardar el trabajo.

Bueno Amig@s, esto es todo por el momento, lo que ustedes van a tardar en hacer, 5 minutos, a mí me ha llevado 3 horas y media … jajajaja, pero me alegro de haber empezado algo que llevo desde hace tiempo queriendo hacer.

Espero que les guste y hasta el próximo que será ya mismo, solo que ya, serán más expertos … jajajaja

Me gustaría ver alguno de sus trabajos y si tienen alguna duda ya saben, solo tienen que preguntar.


Saludos.

[carmen10]

M giuchas gracias Eloy a la espera,me gusta mucho los gif animados.Saludos

[Eloy58]

De nada Carmen10.

Hasta que posteen el programa en el Blog IV, si alguien lo quiere me lo pueden pedir por MP.

Saludos.

[wpiaw]

Gracias Eloy si puedes pasamelo!

[csart]

Me uno al pedido de mi amia wpiaw, pasamelo man porfavor...saludos!!!!

[carmen10]

Ya han publicado el pograma en el Blo IVSaludos

[MartiXFX]

Eloy muchas gracias me lo podrias pasar?