Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Creación de animación GIF animado usando INkscape y Gimp - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 2 de enero de 2024 por Fernando B.

54 visualizaciones

En este segundo vídeo vamos a partir del personaje anterior y vamos a realizar una animación tipo StopMotion, también llamada Frame by Frame (fotograma a fotograma) empleando Inkscape y exportando a PNG's transparentes.
Luego abriremos toda la secuencia de imágenes como capas en GIMP y nos permitirá generar muy rápidamente un GIF animado que poder emplear en cualquier navegador.

Más información Transcripción

Descargar la transcripción

Hola a todos, en este vídeo, como podéis apreciar, la idea es generar una animación 00:00:00
usando Inkscape y luego GIMP para hacer un GIF animado. 00:00:06
Como podéis ver, esto es una animación que tenemos abierto en Firefox o en cualquier 00:00:10
otro navegador. 00:00:14
Es un archivo, que lo tenemos aquí, que es relativamente pequeño, no llega ni siquiera 00:00:15
a los 700 kilobytes, y como podéis apreciar, basta simplemente con darle con el botón 00:00:19
derecho a cualquier navegador, vamos a hacerlo en esta ocasión con Chrome, y veis que efectivamente 00:00:25
se abre, y que se queda un rato mirando, y veis que es un tipo de animación relativamente 00:00:29
sofisticado. 00:00:35
Bien, lo vamos a hacer justo empleando Inkscape, a partir del personaje que habíamos diseñado 00:00:36
en el vídeo anterior. 00:00:44
Vamos a ello. 00:00:47
Lo primero que vamos a hacer es que vamos a hacer que, por ejemplo, pestañee, pestañee 00:00:48
con los ojos. 00:00:54
En ese sentido, lo que vamos a hacer es trabajar con lo que van a ser las pestañas y con los 00:00:55
párpados. 00:01:07
Vamos a crearle un párpado. 00:01:09
¿Cómo vamos a hacer eso? 00:01:10
Vamos a subir un poquito las cejas, provisionalmente, y voy a crear justo añadido aquí lo que 00:01:12
va a ser precisamente una especie de párpado. 00:01:19
Vamos a procurar que los párpados vayan a estar tanto por arriba como por abajo, pero 00:01:22
sobre todo por arriba. 00:01:26
Evidentemente, ésta no es el trazo que nosotros queremos, botón derecho, relleno y borde. 00:01:27
El relleno va a ser exactamente igual que el que tenemos aquí de fondo, es decir, que 00:01:35
se confunde el relleno con el fondo, y eso sí, color de trazo, pues ninguno. 00:01:40
Y vamos a procurar que lo que son las pestañas esté por encima. 00:01:44
Tengo que desagrupar el ojo, para que los elementos vayan por su cuenta, independientes, 00:01:52
y esto lo vamos a poner delante, es decir, aquí está el párpado, aquí está la pestaña 00:02:01
y aquí está el párpado. 00:02:05
Y vamos a hacer tres cuartas partes lo mismo, de hecho, voy a aumentar, le voy a poner provisionalmente 00:02:08
trazo para ver lo que muevo, en el estilo de trazo lo voy a poner a 0.1, y voy a eliminar 00:02:15
todos estos nodos, todo esto lo voy a hacer para que resulte todo mucho, mucho más sencillo 00:02:22
luego trabajar con ello, así, vale, la ceja evidentemente la queremos por encima del párpado, 00:02:27
y de hecho voy a aumentar un poquito el tamaño, es decir, que incluso exceda, ahí está, 00:02:37
el tamaño de lo que es la propia pestaña, vale, y voy a hacer lo mismo, voy a duplicarlo, 00:02:45
y lo voy a invertir, ahí está, no horizontalmente, sino verticalmente, a ver si soy capaz, ahí está, 00:02:52
vale, y lo vamos a poner de tal manera que justo esta pestaña inferior, a ver si soy 00:03:01
capaz de coger la pestaña inferior, esté por encima, vale, muy bien, ahí tengo los 00:03:07
dos párpados ya, vamos a girarlo un poquito, e incluso voy a hacer que esto se ajuste un 00:03:13
poquito más, algo así, por aquí, por allá, vale, féteno, voy a seleccionar las dos pestañas 00:03:21
y le vamos a quitar el color de trazo a ambas, vale, sabemos que están ahí, vale, muy bien, 00:03:29
pues voy a hacer lo mismo, como lo he puesto de esta manera, con el ojo de la derecha, 00:03:36
entonces, ¿qué es lo que voy a hacer?, pues voy a quitar todo esto, voy a seleccionar 00:03:41
el par, los dos párpados, los ojos, la ceja, la pestaña, todo cristo, y entonces vamos a poner 00:03:45
el nodo, no se me ajusta porque no tenemos activado el ajuste, ahora ya sí, y recordad 00:03:51
que tiene que estar todo esto activado, concretamente, sobre todo, y ante todo, 00:04:00
tiene que estar con mutar a ajuste esa línea, y tiene que estar también activado con mutar 00:04:03
ajuste a este acento de rotación, vale, que es este de aquí, el ajuste de acento de rotación, 00:04:08
botón derecho, vamos a duplicar, y lo vamos a, pues eso, reflejar, ahí está, bueno, 00:04:12
esto sería, por tanto, nuestro fotograma número uno, vale, por ahí con los ojos totalmente 00:04:22
abiertos, así que vamos a exportar por primera vez nuestro fotograma número uno, vamos a 00:04:27
archivo, vamos a darle a exportar imagen png, se nos abre esta ventana, y aquí vamos a 00:04:32
tener que tener en consideración varias cosas, la primera, siempre, siempre, siempre tenemos 00:04:38
que mirar que tenemos primero página, no dibujo, ni selección, ni personalización, siempre página, 00:04:42
vamos a exportar lo que es la página completa, todo aquello que esté dentro de la página es lo 00:04:47
que se va a exportar, eso qué significa, que si yo, por ejemplo, exporto el muñeco de esta manera, 00:04:52
vale, todo esto de aquí a aquí alrededor, se va a exportar como fondo transparente, 00:04:59
vamos a probar, primero, mirad a ver dónde lo estáis exportando, yo lo tengo, lo estoy exportando 00:05:06
a una carpeta en concreto, que se llama animación gif, vosotros lo podéis exportar al escritorio, 00:05:11
donde estiméis, pero siempre dentro de una misma carpeta, voy a exportar para que veáis cómo 00:05:16
funciona esto, voy a ver si encuentro la carpeta correspondiente, la tengo, es esta de aquí, 00:05:21
y fijaos que cuando le doy doble clic, es exactamente lo que se me ha exportado, 00:05:31
veis que me exporta todo el canvas, todo el lienzo completo, es decir, qué tengo que hacer, 00:05:35
pues si yo selecciono esto, lo que quiero es quedarme solamente con, ya más así posible, 00:05:42
centradito, vale, pues lo que vamos a hacer, es que vamos a asegurarnos, vale, de que toda esta 00:05:47
parte del pecho, del tronco, excede ligeramente, precisamente, la parte inferior, y de esta manera, 00:05:53
recordad, tenemos página, le doy a exportar, me va a decir que si lo quiero reemplazar, 00:05:59
pues claro que lo quiero reemplazar, vamos a ver ahora cuál es el resultado, ahí está, 00:06:03
doble clic y veis que ahora ya sí, me exporta exactamente lo que quiero, 00:06:07
este fondo cuadriculado significa que tenemos el fondo transparente, es decir, 00:06:11
que nosotros cuando vayamos a usar esta imagen con un fondo, ese fondo se va a transparentar 00:06:16
perfectamente, no vamos a tener que, en Gimp, tener que quitar absolutamente nada, 00:06:21
todo ventajas de entrada, vale, vamos a ello, entonces, lo que me interesa, sobre todo, 00:06:25
también, luego, de cara a exportar, es que exportemos una secuencia de imágenes, de fotogramas, 00:06:32
que sea lo más sencillo posible, entonces, el nombre bitmap, que tenemos aquí, pues se puede 00:06:40
sustituir por algo mucho más sencillo, como podría ser, por ejemplo, el número 1 1 punto png, 00:06:45
así que voy a exportarlo, ahí está, y ahora vamos a empezar a cambiar cosas, 00:06:50
de manera muy progresiva, vamos a coger, por ejemplo, el párpado y la pestaña, 00:06:55
tanto del ojo derecho como del izquierdo, veis que selecciono todo con shift y simplemente, 00:07:01
fijaos lo que voy a hacer con las teclas, vale, vamos a bajar dos pasos, por decirlo de alguna 00:07:06
manera, aquí tenemos que tener cuidado, en exportar imagen, ves que en cuanto tengo algo 00:07:12
seleccionado, en este caso, la pestaña y el párpado, va a selección, no, no, no, no, 00:07:16
queremos siempre página, y vamos a sustituir 1 punto png, por 2 punto png, vamos a exportar, 00:07:21
comprobamos que efectivamente, ya tenemos 1 png, seguido de 2 png, veis, aquí, 00:07:28
esta pequeña transición, que hemos obtenido de una manera muy, muy rápida, muy inmediata, 00:07:34
y seguimos, tenemos seleccionado nuestros párpados, así que seguimos, dos pasitos más abajo, 00:07:40
de nuevo, vamos a estar aquí, selecciono estas dos, por la razón que sea, dos pasos más, 00:07:47
página, pasamos de 2 a 3 punto png, le damos a exportar, ya está, siguiente, vamos otra vez, 00:07:53
pasito, no sé si hay alguna manera, con shift, mojamos dos pasos más, página, 4 punto png, 00:08:03
shift, dos pasos más, página, 5 png, vale, y vamos también a acompañarnos, 00:08:17
como no pasa de esta manera también, de los párpados inferiores, un poquito, así que, 00:08:29
de nuevo, vamos a seleccionar todo esto, he dicho que bajamos dos pasitos, y eso sí, 00:08:33
acompañamos con los párpados inferiores, que suben, vamos a ponerle 6 png, 00:08:40
sigue bajando, dos pasitos, dos pasitos, subimos, y subimos dos pasitos más, 00:08:47
página, 7 punto png, ya estamos casi, vamos a coger, espérate, que no coja lo que no es, 00:09:01
dos pasos más, ya se le está haciendo de noche, esto se está durmiendo, 00:09:11
progresivamente, página, 8 png, vamos a cambiar alguna cosa, incluso, no, vamos a seguir bajando, 00:09:20
estas dos las vamos a ir subiendo, página, 9 png, vale, y ya llegados a este punto, 00:09:31
ya sí vamos a estar obligados a, vamos a ver, a cambiar algunas cosas, como por ejemplo, 00:09:48
vamos a hacer que, vamos a quitar el ajuste, para poder movernos de manera mucho más libre, 00:09:55
y vamos a hacer que todo esto, que tengo un montón de nodos, le voy a quitar todos esos nodos, 00:10:03
para que se vaya ajustando, veis, precisamente, y se vaya cerrando, y aquí lo mismo, 00:10:10
voy a coger todos esos nodos, los elimino, y simplemente con los tiradores, veis que me 00:10:14
adapto mucho mejor, voy a hacer lo mismo, por cierto, con el párpado de abajo, y aquí, 00:10:20
lo mismo, voy a seleccionar todos estos nodos, fuera, abandona este cuerpo, y vamos a ir adaptando, 00:10:28
vale, aquí lo mismo, selecciono todos esos nodos, esto se va cerrando, y aquí lo mismo, 00:10:34
a ver si soy capaz, se va adaptando, a esta, vale, y le damos aquí, 00:10:44
número 10, punto png, y seguimos cerrando los ojos, a ver, 00:10:51
ya está casi, casi, espérate que le da lo que no es, ah, no, no, sí, sí, es el párpado, 00:11:04
es el párpado, a ver los ojitos que se le cierran, ahí está, y aquí lo mismo, 00:11:09
cerramos el párpado, y ahora las pestañas, casi, casi, esto lo vamos a ampliar un poquito, 00:11:18
que se vea un poquito de blanco ahí, y aquí lo mismo, ya está casi, casi dormidito, ahí está, 00:11:27
ahí está, subimos, y terminó de subir, y esto hemos dicho que es el número 11, 00:11:33
exportamos, de vez en cuando echamos un vistazo a ver cómo va la línea, 00:11:40
ahí está, vamos a cerrar definitivamente los ojos, 00:11:51
y ahora os enseño cómo convertimos esto en animación, vamos a hacer que se cierre por 00:11:55
arriba más que por abajo, ahí está, lo mismo aquí, ya está, ojos cerraditos, página número 12, 00:12:04
punto png, ahí está, vale, ¿qué podríamos hacer? ahora, pues, simplemente vamos volviendo atrás, 00:12:12
con control z, y le vamos añadiendo, 13, exportamos, 00:12:23
página 14, punto png, volvemos con control z, página, esto sería número 15, 00:12:34
página 16, 00:12:53
17, 00:13:01
18, 19, 00:13:02
hay habido un error, voy a mirar, 00:13:26
si veo que algo ha salido extraño, 00:13:28
20, vamos a ver, 00:13:30
no, va bien, de acuerdo, 00:13:34
pues seguimos. 00:13:36
Página, hemos dicho 20, 00:13:38
volvemos atrás, página, este es número 21, 00:13:40
si vemos que nos hemos pasado, 00:13:50
con control y, 00:13:52
deshacemoslo, 00:13:54
22, 00:13:56
control Z, 00:13:58
página 23, 00:14:02
página 24, 00:14:08
enter, 00:14:10
y yo creo que ya estamos, casi, 00:14:12
casi, 25, 00:14:14
a 25 fotogramas por segundo, 00:14:16
os dais cuenta de que, 00:14:18
a ser un pestañeo, 00:14:20
que va a durar un segundo completo. 00:14:22
Bien, esto en cuenta la parte 00:14:24
de Inkscape, comprobamos que, 00:14:26
efectivamente, 00:14:28
ahí está, 00:14:30
ahí estaría el pestañeo 00:14:34
completo, incluso, 00:14:36
la vuelta, 00:14:38
que es, 00:14:40
un proceso, 00:14:42
que se puede, perfectamente, 00:14:44
emplear en loop. 00:14:46
Pues vamos aquí, vamos a crearnos, 00:14:48
ya nuestro GIF animado, 00:14:50
de nuestro personaje, pestañeando, 00:14:52
voy a cerrar, 00:14:54
aquí, le voy al archivo, 00:14:56
y vamos a abrir como capas, 00:14:58
a ver, 00:15:00
como capas, 00:15:02
vamos a la carpeta, donde lo tengamos, 00:15:04
y eso sí, tenemos que seleccionar, 00:15:06
la secuencia completa, 00:15:08
del 1 al 25, 00:15:10
en este caso, ¿vale? 00:15:12
Vosotros podéis hacerlo más corto, o, incluso, 00:15:14
más largo, eso ya, como queráis. 00:15:16
Pero veis que, efectivamente, 00:15:18
me está generando, aquí, 00:15:20
dos capas, una detrás de otra. 00:15:22
Ahí está, todo esto, 00:15:26
es perfectamente, válido. 00:15:28
Muy bien. 00:15:30
Lo que vamos a hacer, además, 00:15:32
es que, tened en consideración, 00:15:34
que todo esto, tiene fondo transparente. 00:15:36
A la hora de exportarlo a GIF, 00:15:40
GIF no va a tener fondo transparente. 00:15:42
¿Vale? 00:15:44
Vamos a ir, de todas maneras, para que no tendremos a filtros, 00:15:46
vamos a animación, 00:15:48
y vamos a reproducción, a ver qué tal queda, 00:15:50
a 100 milisegundos, 00:15:52
por cada fotograma. 00:15:54
Es que se hace, 00:15:58
un poco largo de ver, 00:16:00
a 100 milisegundos. 00:16:02
Así que, lo que vamos a hacer, 00:16:06
es que, el último fotograma, 00:16:08
que es este de aquí, 00:16:10
es, precisamente, el número 1, 00:16:12
vamos a darle doble clic, 00:16:14
y vamos a ponerle, entre paréntesis, 00:16:16
vamos a hacer que dure, en vez de 100 milisegundos, 00:16:20
vamos a decir que dure, 00:16:22
por ejemplo, 1000 milisegundos, 00:16:24
para que esté un segundo sin pestañear. 00:16:26
¿Vale? 00:16:28
1000ms entre, 00:16:30
entre paréntesis. Aceptamos. 00:16:34
Vamos a filtros, animación de nuevo, 00:16:36
reproducción, 00:16:38
y le damos. 00:16:40
Ya se queda un rato, mirando fijamente, 00:16:44
ahí está. 00:16:46
Bien, si nosotros quisiéramos que, 00:16:48
el resto de los fotogramas, 00:16:50
en vez de 100 milisegundos, 00:16:52
durara, por ejemplo, 50 o 40 milisegundos, 00:16:54
que fuera más rápido, pues tendríamos que darle, 00:16:56
a todos y cada uno de ellos, 00:16:58
entre paréntesis, 00:17:00
dicho número. 00:17:02
Pero, hay otra manera más rápida de hacer eso, 00:17:04
y es en la exportación directamente, 00:17:06
que es que le digamos, en la ventana, 00:17:08
lo voy a hacer ahora, para que lo veáis, 00:17:10
vamos a archivo, exportar como, 00:17:12
aquí en la selección, 00:17:14
el tipo de archivo, vamos a buscar, 00:17:16
gif, gif, gif, gif, gif, 00:17:18
¿dónde estás? 00:17:20
Lo habré pasado, 00:17:22
gif, 00:17:24
ahí está, imagen gif, 00:17:26
ah, tengo dos gif, una imagen y otra. 00:17:28
Bueno, vamos a darle al primero, 00:17:30
¿vale? 00:17:32
Y voy a cambiar el nombre, 00:17:34
no se va a llamar 25.gif, 00:17:36
se va a llamar, 00:17:38
animación.gif, ¿vale? 00:17:40
Y ahora me dice, 00:17:42
que lo queremos hacer como una animación, 00:17:44
y aquí es donde os digo, veréis, 00:17:46
retraso entre cuadros, 00:17:48
cuando no esté especificado, 00:17:50
es decir, este primero, este que queremos 00:17:52
que esté sin hacer nada durante un segundo, 00:17:54
está especificado, así que, 00:17:56
no va a afectar, pero todos los demás, 00:17:58
en vez de 100 milisegundos, vamos a hacer 00:18:00
que dure, pues, por ejemplo, 00:18:02
no sé, 30 milisegundos, 00:18:04
de tal manera que va a durar lo que es el pestaño 00:18:06
tres veces menos, un tercio de segundo, 00:18:08
lo cual tendría que darle 00:18:10
algo más de naturalidad. 00:18:12
Vamos a darle a exportar. 00:18:14
Ahí está, y vamos a 00:18:18
probar qué tal ha quedado. 00:18:20
Toda vez, ahí está, 00:18:22
animación.gif, lo vamos a abrir con, 00:18:24
¿con qué va a ser? Pues con 00:18:26
Firefox, por ejemplo. Ahí está. 00:18:28
¿Vale? Ahí está. 00:18:30
Me mira, y 00:18:32
pestañea. Estupendo. 00:18:34
No. 00:18:36
Pues eso sería todo. 00:18:40
Muchas gracias. 00:18:42
Idioma/s:
es
Autor/es:
Fernando Briones
Subido por:
Fernando B.
Licencia:
Dominio público
Visualizaciones:
54
Fecha:
2 de enero de 2024 - 19:20
Visibilidad:
Público
Centro:
IES ALFREDO KRAUS
Duración:
18′ 44″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
205.66 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid