14 de julio de 2009

HA903 – Ejercitando Filtro /Fundir / Optimizar para gif

Trabajando con los gif se planteó la problemática:

¿Cómo hacer para que no se mezclen los textos y las imágenes de un personaje que se mueve “ de lugar “ en la pantalla?

Fue así que elaboré e investigué los siguientes archivos gif:

  • EJEMPLO 1

Archivo inicial con cuatro capas de sapito saltando y texto incorporado a las capas. ( Inicialmente el texto se crea en otras capa, es así que se combinaron con las capas de los sapitos para lograr las cuatro capas .)

Total de capas: cuatro.

Se aplicó fundir con tres capas intermedias ( lo que el programa ofrece como mínimo).

Total de capas: doce.

Se optimzó para gif y se guardó el archivo ( con tiempo 300ms, para poder observar más detenidamente qué ocurre con la imagen ).

El gif que se obtuvo es el siguiente.



sapito1-sin fondo, títulos incorporados

  • EJEMPLO 2

Al archivo anterior ( Cuatro capas con sapito saltando con texto incorporado) se le agregó una capa de fondo ( solo lago, sin sapito) .

Total de capas cinco.

Se aplicó fundir con tres capas intermedias.

Total de capas: dieciséis.

Se optimzó para gif y se guardó el archivo ( con tiempo 300ms ).

El gif que se obtuvo es el siguiente.

sapito2 - con fondo,titulos incorporados


  • EJEMPLO 3

Se trabajó SIN incorporar el texto a las capas de los sapitos, es decir NO se combinan con ellas los textos.

Archivo inicial ocho capas ( Cuatro del sapito y cuatro de los textos ).

Se aplicó fundir con tres capas intermedias.

Total de capas: veintiocho

Se optimzó para gif y se guardó el archivo ( con tiempo 300ms ).

El gif que se obtuvo es el siguiente:

sapito3 - sin fondo, titulos separados

  • EJEMPLO 4

Se trabaja sin incorporar el texto a las capas de los sapitos saltando y se agrega una novena capa de fondo ( lago solo, sin sapito) .

Total de capas nueve.

Se aplicó fundir con tres capas intermedias.

Total de capas: treinta y dos .

Se optimizó para gif y se guardó el archivo ( con tiempo 300ms ).

El gif que se obtuvo es el siguiente:

sapito4 - con fondo, titulos separados

  • EJEMPLO 5

Al gif anterior se le han variados los ms. de las capas.

Primero se llevaron todas las capas a 100ms

Luego se abrió de nuevo el archivo con el Gimp y se buscó las capas que tuvieran escrito el texto lo más legible posible ( sólo texto) y se colocó 40ms. a todas ellas. Seguidamente se buscaron las capas donde se visualizaba el sapito lo más nítido posible ( y sin texto a la vista) y a ellas se le varió el valor a 200ms.

El archivo gif ahora se ve así:

sapito5 - con fondo, titulos separados y tiempo de capas modificados

A mi criterio es el que se ve mejor.

Pienso que si ponemos más capas intermedias seguramente el efecto de avance de la imagen se verá más lograda.

CONCLUSIÓN PERSONAL: Si deseo realizar un gif cuyo personaje deba cambiar de lugar ( avanzar, retroceder...) y en el que también se desee colocar texto, debo incorporar una capa de fondo ( sin el personaje ) para que se produzca el efecto deseado.

A partir de estos ejemplos anteriores dejo abierto unos interrogantes:

  • ¿Por qué ocurre ésto?
  • ¿Cómo trabaja el programa al aplicar fundir? ¿Y al optimizar para gif?

Ayudita: Para responder los interrogantes hay que bajar los archivos gif e investigar sus capas ( cerrar uno a uno los ojitos que hay en la ventana capas y observar los cambios en la ventana donde se ver la imagen) .

También es orientador desoptimizar el gif ( Filtro/Animación/ desoptimizar) e investigar de igual modo sus capas.

¡Suerte en el empeño!

Saludos a todos. Espero que este post sea útil. Y ... seguimos aprendiendo.


12 de julio de 2009

HA903 - Gimp - Concluyendo la animación del sapito

He aprovechado el adelantamiento y extensión del receso escolar para concluir el trabajo del sapito. Es así que este post es la continuidad del anterior sobre el sapito.


a) Fondo

Elegí una foto ( Lago Rivadavia – Pcia de Chubut – Argentina) y la abrí en el Gimp.

Después la copié y roté en forma horizontal .

Luego coloqué las dos imágenes en una misma capa. ( una al lado de la otra) .

Como me pareció que faltaban piedritas le agregué unas. Copié algunas de las que traía la foto. Las modifiqué con las herramientas de escalado y rotación. Finalmente las pegué en diferentes lugares .

b) Incorporando los animalitos

En cuanto a las modificaciones de las imágenes del sapito ya las expliqué en el post de referencia anterior.

A la sapita le modifiqué la ubicación de los brazos. Esto lo hice seleccionando un área, copiándola, rotándola , pegándola nuevamente y borrando lo que sobra del dibujo anterior.

Los procesos que tuvieron fueron los siguientes:

Una vez que tuve animalitos por un lado fondo por otro dupliqué varias veces los fondos e incorporé las imágenes de los animalitos.


Primero hice las imágenes del sapito yendo de derecha a izquierda . Luego dupliqué el archivo y fui a imágenes/transformar/voltear horizontalmente. De esta forma el sapito haría el camino de regreso de izquierda a derecha. Para que saltara un poco en el medio de la pantalla le agregué unas imágenes de saltitos intermedios .

A esta altura el sapito iba hacia la izquierda y al regresar hacia la derecha saltaba un poco antes de llegar a la derecha de la pantalla.

Luego dupliqué todas estas imágenes creadas hasta entonces, junté todos los duplicados, los puse a continuación de los originales y les agregué a esas capas duplicadas la sapita saltando al lado del sapito.

Entonces ahora el sapito da una segunda ida y vuelta ( hacia la izquierda y regreso a la derecha) pero acompañado con la sapita.

Contado, parece sencillo, pero lleva su tiempo y a veces... enredo...

A mi parecer el sapito se ve más ágil que la sapita porque al pegarlo trabajé algunas imágenes con la herramienta de inclinación. Cuando llegué a la sapita, ya algo apurada por terminar la tarea, olvidé hacerlo también.

Después de tener todas las capas terminadas agregué algunos títulos, lo optimicé para gif pensando hacer después el archivo avi.


Como no me agradó como se veía el fondo de las imágenes ( el cielo, más precisamente), siempre el problema de los degradé optimizados. Fui a “guardar como” y guardé cada capa como archivo png. Luego puse estos archivos png en un editor de video e hice el video que ven al comienzo de esta entrada.

El video, con título lleva 1 minito y 22 segundos, pero la labor anterior lleva variooooossss minutos..., horas..., más.

¿Qué se podría mejorar del trabajo?

Se podría acercar las imágenes de los sapitos, es decir menos cielo y más personajes.


A la sapita la mandaría a hacer algo de gimnasia para que quede un poquito más ágil. Además la dieta que hizo en el Inkscape parece que fue muy rigurosa porque un poquito más gordita hubiera quedado, quizás, más simpática.

Yo, como madraza que me gusta ser, amo a estos personajes como son hoy. Espero que a ustedes les resulten agradables y simpáticos como a mí.

Saludos y seguimos ejercitando y aprendiendo.

5 de julio de 2009

HA903 Recordando procesos - Gif animado con sonido

Me pareció que podría ser útil recordar ( según mi experiencia de aprendizaje) alguno de los pasos que, a mi parecer, han presentado más dificultad para elaborar el “ gif animado - con sonido” .

Creo que es conveniente tener elegida la música antes de hacer el gif, ya que el tiempo de duración de la misma debe coincidir con el tiempo de duración del gif .

¿CÓMO LOGRÉ QUE AMBOS TUVIERAN LA MISMA DURACIÓN?

Por un lado la duración del mp3 la visualicé cuando lo escuché, con el reproductor que lo abrí.

Para saber el tiempo de reproducción del gif, me la ingenié caseramente. Seguramente existe otra forma con el programa Gimp pero, como no la sé lo abrí con el navegador y ... con el cronómetro del celular lo medí.

Luego fui variando los valores de reproducción de algunas capas, más lentas las primeras ( cuando el caracol se despierta) y así hasta lograr lo más próximo a los 38 segundos del mp3.

¿CÓMO CAMBIAR LOS 100ms QUE APARECEN PREDETERMINADOS AL ABRIR EL PROGRAMA?

- Para cambiar los 100ms ( que aparecen predeterminados) en todas las capas existen diferentes posibilidades:

a) Abrir el gif con el programa Gimp, ir a capas y hacer doble clic sobre el número 100 y escribir el nuevo valor , también se puede hacer clic con botón derecho y buscar “ Atributos de capa” y cambiar el valor.

Esta tarea no la recomiendo si debo cambiar “todos” los valores. La usaría para modificar el tiempo de “algunas” capas. Es decir, si quiero que unas pasen más lentamente o más ligero que el resto de las mismas.

b) Un camino más corto para cambiar “todos” los valores ( los 100ms predeterminados) es, cuando aparece la siguiente ventana...



es cambiarlo allí y hacer clic abajo donde dice: “usar el retardo introducido para todos los fotogramas”, de esta forma se modifican “todas” las capas.

¿CÓMO HAGO SI YA TENGO EL GIF HECHO Y QUIERO MODIFICARLO?

Lo abro con el Gimp y voy a Archivo/ “guardar como”. Entonces el programa crea otro archivo. Sigo el caminito que el programa propone. El mismo me llevará a la ventana que está arriba de estas líneas. Allí cambio el valor como lo expliqué antes.

Al finalizar la labor tendré un nuevo archivo con el valor cambiado en todos los fotogramas. O sea que si tenía 100ms para todos y los cambié a 300ms, el nuevo archivo tendrá 300ms en todos.

Si este valor no me sirve, veo que es muy lento o muy ligero, repito el proceso y tendré otro/s archivo/s . Luego elijo el que es más conveniente según mi necesidad.

Otra forma es abrir el gif creado inicialmente con el Gimp. Ir a Filtro/Animación/Reproducción. Allí se puede ir probando con algunos tiempos. Abajo, a la izquierda de la ventana que se abre ( Llamada Reproducción animación) dice:

100% corresponde a 100ms
50% corresponde a 200ms
25 % corresponde a 400ms
12,5 corresponde a 800ms

Se puede ir probando , elegir la que convenga y luego cerrar esa ventana e ir a guardar como y colocar los ms más apropiados.

Si aún no he obtenido igualdad de tiempo en ambos archivos, puedo ir variando los valores en “algunas capas” hasta que los dos archivos sean iguales. Es decir si con 300ms se acerca al valor del mp3, pero no es igual, elijo algunas capas y les cambio “sólo a esas” el valor. Colocaré más o menos tiempo hasta lograr igualdad con el mp3.

Espero se haya entendido, perdón por la repetición de palabras, creo era necesario para comprender mejor el mensaje.


¿CÓMO LE COLOCO AL GIF SONIDO, SI NO TODOS LOS FOTOGRAMAS TIENEN LA MISMA DURACIÓN?

Hemos de acordar que debo tener el mp3 y el gif con el mismo tiempo de duración total, es decir deben durar lo mismo.

No importa si algunas imágenes tendrán más exposición y en cambio otras pasarán más ligero. Sí importa que dure en total igual tiempo.Así el archivo avi. que crearé comienza y termina con la imagen y el sonido juntos, al mismo tiempo.

Lo explicaré según los pasos que yo seguí.

Cree una carpeta en el escritorio y la llamé con_sonido. Coloqué adentro los dos archivos (el del gif y el del mp3) .

Acordamos que llamé:
al gif → caracol.gif
al mp3 → caracol.mp3
Al nuevo archivo → caracolcito.avi

Después fui a Aplicaciones/ Accesorios/Terminal e hice clic allí.

Se abrió la ventana de la línea de comandos. En ella trabajé así:

a) Escribí: cd e hice un espacio.
b) Arrastré la carpeta “ con_sonido “ a la ventana y la solté. Clic en la ventana de comando e hice enter.
c) Escribí ls e hice enter.
Aparecieron escritos los dos archivos (el gif y el mp3) y la ruta para llegar a la carpeta.
d) A continuación del texto visualizado escribí:

mencoder caracol.gif –ovc lavc -fps 0 -o caracolcito.avi -oac copy -audiofile caracol.mp3

Hice enter y apareció en la carpeta “ con_sonido” ( la que está en el escritorio) el archivo avi llamado caracolcito.

A continuación le dejo una impresión de pantalla de la ventana “terminal”.


Este nuevo archivo, que tiene sonido, respeta el tiempo dispuesto y calculado.

La modificación que realicé sobre lo aconsejado fue colocar 0 (cero) en lugar de 5 después de -fps. Esto hace que cada imagen se observe con los tiempos planificados.

Espero que esta nueva estrada sirva para recordar o aclarar el proceso.

Un saludo a todos y seguimos en contacto.

4 de julio de 2009

HA903 - Gif "Convivencia"


Para elaborar la imagen titulada “convivencia” trabajé en el Gimp y realicé los siguiente pasos:

1)Busqué rostros con diferentes rasgos en el google.
2)Selecciné la imagen que observan a continuación y que me pareció apropiada para la tarea dispuesta.
3)Elegí un niño sobre el cual trabajar, ya que creí oportuno que la vestimenta no cambiara.

Con la “máscara rápida”seleccioné las caritas de las diferentes personas que disponía en la imagen inicial (Clic abajo, izquierda , en un cuadradito que aparece algo difuso) .

Entonces las copié y las pegué en diferentes capas. Antes de anclar la imagen tuve en cuenta que los rostros quedaran uno arriba del otro.

Después recorté la imagen dejando solamente el sector que deseaba ( una sola persona). Seleccioné la zona y fui a Imagen/ Truncar a la selección

Luego dupliqué una o dos veces las capas que tenían las caritas y con la herramienta de relleno ( baldecito ) les modifiqué los colores del cabello, piel, ojos ... con el fin de que parecieran ser otras personas. ¡ Espero que a la vista de otros luzcan así!

Siguidamente copié la imagen que tenía la ropa,le borré la cara y dupliqué varias veces la capa de la ropa .

A continuación ubiqué apropiadamente una ropa para cada cara y combiné las capas ( Capas/ Combinar hacia abajo).

Luego le agregué el texto que se observa.

Finalmente lo optimicé para gif. .

Detallaré nuevamente el proceso anterior :
Filtros/ Animación / Optimizar (para gif) .
Aparece una nueva ventana: Archivo/ Guardar( nombre + punto gif) / Guardar.
Clic en guardar como animación , clic en Exportar .
Atención aquí: cambiar el valor del retardo entre cuadros de 100ms a 400ms y clic en “ usar el retardo introducido arriba para todos los fotogramas”. Clic Guardar. ¡Listo...! De esta forma todas imágenes aparecen cada 400ms.

Espero les agrade el gif, el motivo de su labor es el de incentivar a un grupo de alumnos que trabajan el tema “ No a la discriminación” . Comparto la labor que realizan.
Saludos y seguimos en contacto.

1 de julio de 2009

HA903 - Gif animado “Caracolcito”, con sonido – Archivo avi

Después de varios intentos fallidos he podido colocarle sonido al gif, usando la línea de comandos.




Previamente le agregué al archivo xcf unas capas en las que puse algunos datos relacionados al trabajo realizado. Luego lo optimicé para gif siguiendo los pasos que expliqué en entradas anteriores.

Después fui variando el tiempo que tarda cada capa optimizada, de tal forma que el gif animado dura los 38 segundos igual que el archivo mp3. No todas las capas están dispuesta con el mismo tiempo.

Luego cree en el escritorio una carpeta y la llamé con_sonido. Coloque allí los dos archivos a los que llamé: caracol.gif y caracol.mp3

Después fui a Aplicaciones/ Accesorios/Terminal e hice clic allí. Se abrió la ventana de la línea de comandos. En ella trabajé así:

a) Escribí: cd e hice un espacio.

b) Arrastré la carpeta “ con_sonido “ a la ventana y la solté. Hice enter.

c) Escribí ls e hice enter.

Aparecieron escritos el nombre de los dos archivos (el gif y el mp3) y la ruta para llegar a la carpeta.

d) A continuación del texto visualizado escribí:

mencoder caracol.gif –ovc lavc -fps 0 -o caracolcito.avi -oac copy -audiofile caracol.mp3

Hice enter y apareció en la carpeta “con_sonido" el archivo avi llamado "caracolcito".

Este nuevo archivo, que tiene sonido, respeta el tiempo dispuesto y calculado. Las imágenes iniciales son las más lentas y las finales ( las de los textos con títulos )son las más ligeras.

La modificación que realicé sobre lo aconsejado por Nina fue colocar cero en lugar de 5 " después de -fps" . Esto hace que cada imagen se observe con los tiempos planificados.

Para poder terminar con acierto la tarea he de agradecer las orientaciones iniciales que recibí de mi hijo ( fanático Linuxero ) y de mi compañera Celi , ya que la lectura de su blog me fue de gran utilidad y orientación.

Ésta labor no fue fácil para mí, puesto que nunca antes trabajé con “ la terminal”. Pero, estoy muy contenta por haber vencido el obstáculo y haber podido aprender varias cosas nuevas.

Seguimos en contacto y saludos a quien lea este post.