Dibujo y animación digital con software libre

LICENCIATURA EN
TECNOLOGÍA EDUCATIVA
GESTIÓN DE RECURSOS DIGITALES CON SOFTWARE
LIBRE
UNIDAD 3
DIBUJO, DIAGRAMACIÓN Y ANIMACIÓN DIGITAL
p. 1
Centro de e-Learning SCEU UTN - BA.
Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
www.sceu.frba.utn.edu.ar/e-learning
UNIDAD III:
PRESENTACIÓN
En esta unidad trabajaremos la forma de pensar visualmente la sociedad y la cultura. A

través de las imágenes comunicamos de manera diferente y los receptores interpretan
también las imágenes de forma diferente. De esta manera, las imágenes fijas o con
movimiento adquieren cada vez más importancia como nuevas estrategias de conocimiento
en la sociedad actual.1
El arte gráfico es una de las expresiones más primales del ser humano, que puede ser
realizado por cualquiera que tenga un lápiz, un color o un soporte.
El dibujo es comprendido como una de las formas más estimulantes y útiles para el
desarrollo de capacidades tales como la creatividad, la originalidad, el estilo personal y la
formación de la libertad.
Uno de los elementos más importantes del dibujo es que puede fácilmente transmitir ideas,
conceptos, sensaciones y sentimientos, independientemente del grupo al que uno
pertenezca, teniendo un idioma diferente al del autor.2
1 http://www.redalyc.org/articulo.oa?id=79000105
2 https://www.importancia.org/dibujo.php
p. 2
OBJETIVO GENERAL:
Identificar y comprender la importancia de la información gráfica, sus diferentes tipos y los

programas de software libre que existen para realizarla.
OBJETIVOS ESPECÍFICOS:
● Conocer las características principales de la comunicación gráfica.

● Identificar la importancia de la imagen digital y su aplicación a diversas áreas.
● Analizar diferentes tipos de imágenes: Mapas de bits - Vectoriales
● Definir qué es la animación digital y la diagramación digital.
● Analizar cómo se realiza la transmisión atractiva de mensajes animados.
● Conocer programas online que permiten trabajar la comunicación gráfica.
p. 3
TEMARIO
1. Definición de comunicación gráfica.

2. Importancia de la imagen digital y su aplicación a diversas áreas.
3. Tipos de imágenes: Mapas de bits y Vectoriales.
4. Qué es la animación digital.
5. Qué es la diagramación digital.
6. La transmisión atractiva de mensajes animados.
7. Programas online que permiten realizar la comunicación gráfica
p. 4
1. Definición de comunicación gráfica.
1.1. ¿Que es la comunicación?
Podemos definir a la comunicación como el

acto en el cual dos o más personas
intercambian información con un objetivo en
común. Para el intercambio se utiliza un
lenguaje, y el objetivo en común puede ser
la comprensión de una idea, la transmisión
de un pensamiento o la obtención de un acuerdo.
La palabra comunicación deriva del latín comunicare, que significa “compartir algo, poner
en común”. Por lo tanto, la comunicación es un fenómeno inherente a la relación que los
seres vivos mantienen. A través de la comunicación, las personas o animales obtienen
información respecto a su entorno y pueden compartirla con los demás.3
1.2. La comunicación como proceso
La comunicación es un proceso en el que intervienen diferentes actores:
• Fuente: Por fuente entendemos el origen primario de la información de la cual el

emisor selecciona aquella que considera importante para estructurar el mensaje que
va a transmitir.
• Emisor: Es la persona que tiene una información, necesidad o deseo así como un
propósito para comunicárselo a otra persona o a varias.
• Mensaje: La información total que el emisor ha codificado con el objeto de ser

transmitida por medio del habla, gestos, escrita, movimientos corporales, etc., y la
cual va a ser captada por el receptor.
• Canal: El medio formal de comunicación entre un emisor y un receptor.
3 http://definicion.de/comunicacion/#ixzz357x7qMC3
p. 5
• Decodificar: Implica la interpretación del mensaje enviado por el emisor.
• Receptor: Aquella persona que recibe el mensaje del emisor y puede retransmitirlo
convirtiéndolo así en un emisor, dando origen al proceso denominado
retroalimentación.
Este proceso comunicativo puede presentar distorsiones o inclusive anularse por diferentes
razones entre las que se pueden mencionar:
a) El emisor y el receptor manifiestan intereses diferentes.
b) Las palabras, juicios o conceptos que emplean pueden tener significados diferentes.
c) Cuando se presenta el proceso de comunicación generalmente existen factores emotivos

tanto del emisor como del receptor los cuales alteran la comunicación.
d) En muchas ocasiones no se consigue estructurar el mensaje de la manera que se desea.
1.3. La comunicación como herramienta
Las herramientas que nos sirven como facilitadores de la comunicación son las siguientes;
• Habilidad: Un conjunto de actividades o conocimientos que un sujeto puede realizar

de manera fácil y efectiva aunque no exista aprendizaje previo (y cuando existe dicho
aprendizaje esa actividad se desarrolla con gran precisión).
• Capacidad: Entendemos por capacidad a todo un conjunto de posibilidades o de

conductas que un sujeto tiene como características naturales.
• Actitud: Son determinadas posiciones que toma un emisor con un receptor

(generalmente) ante una determinada situación. Pueden ser positivas o negativas.
• Código: Es un conjunto de signos gráficos, auditivos, táctiles, etc., que tienen un

significado común para el emisor y para el receptor, lo cual les permite relacionarse
de manera más eficaz.
p. 6
• Contenido: Se refiere a toda aquella información o bien todos aquellos significados
que el receptor debe conocer según el criterio del emisor.
• Tratamiento: Es la estructura o la forma en que se relacionan los códigos y los

contenidos para que sean accesibles a los receptores.
• Denotativo: Se refiere al significado exacto de los términos, figuras, señales,

utilizados.
• Connotativo: Es la interpretación que un sujeto da a las diversas señales, términos,

palabras, etc., de un mensaje específico.4
1.4. La comunicación gráfica
La comunicación gráfica es el “proceso de

transmitir mensajes por medio de imágenes
visuales que están en una superficie plana; se usan
dos tipos de imágenes: ilustraciones y símbolos
visuales” (Alba, 1990,p. 12.). Sin embargo Bruno
Munari (1976) nos dice que es más que eso porque
las imágenes visuales no solo se encuentran en
superficies planas ni se limita a expresarse en dos tipos de imágenes, para él la
comunicación gráfica o visual abarca todo lo que podemos ver; la diferencia de las
imágenes es cuando son intencionales o casuales, por lo que “la comunicación gráfica tiene
que ser conformada por mensajes visuales, que forman parte de la gran familia de todos
los mensajes que actúan sobre nuestros sentidos” (p.82).
Otra definición que concuerda con este autor es la de Acaso (2010), que dice que es “un
sistema de transmisión de señales cuyo código es el lenguaje visual (…)”.
Carmen del Alba (1990) piensa que el lenguaje, no es sólo código de la comunicación visual,
sino que es toda la comunicación humana, y que para entender el funcionamiento del
4 http://comunicacion-grafica-cb.blogspot.com.ar/search/label/COMUNICACI%C3%93N
p. 7
lenguaje se tienen que observar todos los recursos visuales como composición, forma y
textura.
Jonathan Baldwin (2007) concuerda con esta autora, por lo que dice que la comunicación
visual la podemos encontrar en todos lados y añade que ya es parte de nuestra cultura.
Pero Juan Martínez (2004), a su vez piensa que lo que realmente importa de la
comunicación visual es su aplicación en el diseño para manejar una lógica visual que se
forma como mensaje de lo que vemos, y de sus posibles significados porque “la mirada no
es una propiedad gratuita de los seres; en muchos casos es su más fuerte atadura al mundo
que les rodea; el canal más preciso que les permite analizar el mundo que habita” (p. 12).
Actualmente la comunicación gráfica es un elemento fundamental de la existencia

económica, política y cultural. Por eso es necesario entender cómo se desenvuelve, por lo
que autores como María Acaso (2010), ponen como elemento principal la comunicación
visual, luego la escrita y finalmente la oral. La visual se diferencia de las otras en que la
información que maneja está en la vista, el código es totalmente diferente a la escrita
aunque se perciba igual. 5
2. Importancia de la imagen digital y su aplicación a diversas áreas.
Para definir la imagen digital debemos referirnos a su

origen etimológico. En este sentido, las dos palabras
que lo conforman proceden del latín: Imagen proviene
5 http://opi-art-ak.blogspot.com.ar/2011/06/la-comunicacion-grafica.html
p. 8
de “imago”, que, a su vez, es fruto de la derivación del verbo “imitari”, que es sinónimo de
“imitar”.
Digital, por otro lado, procede de “digitalis”, que puede traducirse como “relativo al dedo” y
que es fruto de la suma de dos componentes: “digitus”, que significa “dedo”, y el sufijo “al”,
que indica “relativo a”.
Digital, por lo tanto, es aquello relativo a los dedos, aunque actualmente el concepto se
utiliza en el ámbito de la tecnología en referencia a la representación de información de
modo binario (en dos estados).
Estas definiciones nos permiten indicar que una imagen digital es aquella representación
bidimensional construida a partir de una matriz binaria (compuesta de unos y ceros).
Es posible obtener estas imágenes de distintas maneras. Una posibilidad es utilizar un
dispositivo que se encargue de la conversión analógica-digital. Ese el caso de una cámara
fotográfica digital o de un escáner. Con una cámara de este tipo, una persona puede tomar
una imagen y almacenarla en formato digital, ya sea en una computadora o en otro soporte.
El escáner, por su parte, permite registrar y capturar una imagen física (como una foto
impresa en una revista) y transformarla en una imagen digital.
Otra opción es crear imágenes digitales a través de un software. Con un programa básico
como el Paint, es posible hacer un dibujo con ayuda del mouse y crear una imagen digital.
A la hora de conseguir una buena imagen digital es fundamental cuidar aspectos tales como
la profundidad del color, la resolución tanto de entrada como de salida, el tamaño, los
p. 9
niveles de gris, el formato (jpeg, png, gif,…), la textura o el modo del color, sin olvidarse,
por supuesto, de la saturación o del brillo.6
De acuerdo a su resolución, la imagen digital puede clasificarse de diferentes formas. Es
posible hablar, en este sentido, de imagen matricial o de imagen vectorial. La preferencia
por uno u otro formato depende de las necesidades del diseñador o de la persona que hará
uso de la imagen. Trabajaremos este tema más adelante.
La aplicación de las imágenes digitales toma día a día más importancia. No hay espacio en
la vida cotidiana donde no esté presente ya sea en cualquier publicidad que encontremos
por la calle o por la televisión, o por internet.
Una gran parte de la información que obtiene fácilmente un sujeto en su día a día proviene
de la imagen digital.
3. Tipos de imágenes: Mapas de bits y Vectoriales.

3.1. Imágenes bitmap (mapas de bits)
Las imágenes de mapa de bits están construidas mediante una gran cantidad de
cuadraditos, llamados pixel. Cada uno de estos cuadraditos está relleno de un color
uniforme, pero la sensación obtenida es el resultado de integrar visualmente, en la retina,
las variaciones de color y luminosidad entre píxeles vecinos.
6 https://definicion.de/imagen-digital/
p. 10
Las imágenes de mapa de bits, también llamadas
bitmap, son la alternativa ideal para reproducir objetos
sutilmente iluminados y escenas con gran variación
tonal. De hecho, es el tipo de imagen utilizado para la
fotografía y el cine. Obviamente, la calidad de la
imagen dependerá de la cantidad de píxeles utilizados
para representarla.
Las imágenes bitmap no permiten el

cambio de escala. Se observa en la
imagen de la derecha, lo que pasa al
hacer zoom sobre las flores de la
imagen anterior: los píxeles son
evidentes y la representación es
totalmente irreal. Este efecto, que se
conoce con el nombre de pixelado se
hace más evidente en las líneas curvas
y en las zonas en las que hay cambios bruscos de luminosidad.
Los programas más utilizados para generar, o editar, este tipo de imágenes bitmap son
Photoshop de Adobe y el Photopaint de Corel. Existe una alternativa de software libre
llamada The Gimp, un programa excelente, potente y profesional, que tiene muy poco que
envidiar al costoso Photoshop.
3.2. Imágenes vectoriales
Las imágenes vectoriales están compuestas por entidades

geométricas simples: segmentos y polígonos básicamente
(de hecho, una curva se reduce a una sucesión de
segmentos). Cada una de estas entidades está definida
p. 11
matemáticamente por un grupo de parámetros (coordenadas inicial y final, grosor y color
del contorno, color del relleno, etc.) Por compleja que pueda parecer una imagen, puede
reducirse a una colección de entidades geométricas simples. La imagen presentada en el
párrafo anterior es una imagen vectorial.
Al estar compuestas por entidades geométricas simples, las imágenes vectoriales se

pueden cambiar de escala, para ampliarlas o reducirlas, sin que la imagen pierda calidad.
Por ejemplo la imagen de la izquierda, obtenida haciendo zoom

sobre la imagen anterior. Sin perder calidad en los bordes de la
imagen tenemos muchos más detalles sobre el sistema de
fijación de la cruceta al eje del grifo.
Esta es su gran ventaja, porque proporcionan siempre imágenes

de colores planos con contornos limpios, sin importar el tamaño enl que se muestran.
De entre los programas utilizados para realizar esta clase de imágenes hay que destacar
Corel Draw, todo un clásico, e Illustrator, que forma parte del producto Creative Suite de la
empresa Adobe, el preferido por los profesionales del diseño gráfico. Existe una
prometedora alternativa, en el mundo del software libre, para la creación de imágenes
vectoriales: se llama Sodipodi y, de momento, sólo está disponible para plataformas Linux.
Así pues, resumiendo, antes de crear una imagen hay que elegir una de las dos tecnologías
de imagen digital: vectorial o bitmap. Cada una de ellas tiene unas aplicaciones y su
producción exige unos requisitos que hay que conocer.
Las imágenes vectoriales son ideales para cartelería, diseño de envases, imagen
corporativa, logotipos etc., es decir en todas aquellas situaciones en las que una misma
imagen, hecha con una gama reducida de tintas planas, debe ser reproducida en distintos
soportes y a distintos tamaños.
Las imágenes en mapa de bits, en cambio, son perfectas cuando la gama de colores cambia
sutilmente. En este caso, la imagen debe generarse teniendo muy en cuenta dónde y cómo
p. 12
va a mostrarse, con una cantidad de píxeles y una gama de colores adaptados al soporte
en el que va a reproducirse.
3.3. Compresión de archivos
Una vez creada una imagen, ya sea capturada con la cámara o creada a mano, la
guardamos en un archivo. El archivo, con un nombre y una extensión, no sólo contiene la
información de cada pixel. Tiene también una cabecera en la que se guarda información
destinada al programa encargado de abrir la imagen y mostrarla en el monitor.
Aunque, por regla general, los archivos vectoriales tienen tamaños mucho menores que los
archivos bitmap, todos los archivos gráficos suelen tener tamaños muy grandes. Este gran
consumo de espacio en disco hizo necesario el desarrollo de tecnologías capaces de
comprimir archivos gráficos.
Cada sistema de compresión utiliza un algoritmo matemático propio para reducir la cantidad
de bits necesarios para describir la imagen, y marca el archivo resultante con una extensión
característica: bmp, wmf, jpg, gif, png, etcétera.
Algunos de estos algoritmos están patentados, son propiedad de una empresa, y hay que
pagar por utilizarlos. Otros algoritmos, en cambio, son de dominio público y pueden
utilizarse libremente. También se distinguen entre si por las pérdidas producidas en la
información de la imagen durante el proceso de compresión. Así pues hay algoritmos con
pérdidas y sin pérdidas. Veamos algunos de los formatos de compresión más utilizados:
Formato JPG: Es un formato de compresión con pérdidas, pero que desecha en primer
lugar la información no visible, por lo que las pérdidas apenas se notan.
El algoritmo jpg está basado en el hecho de que el ojo humano percibe peor los cambios
de color que las variaciones de luminosidad. jpg divide la información de la imagen en dos
partes: color y luminosidad y las comprime por separado.
p. 13
Admite modos en escala de grises con una profundidad de 8 bits y en color hasta 24 bits.
Permite la carga progresiva en un navegador, lo que lo ha convertido en el formato estándar
en la web. No es un formato adecuado para imágenes con alto contraste de color.
Además, hay que tener en cuenta que la compresión se produce automáticamente cada
vez que se guarda el archivo, por lo que es aconsejable guardar en este formato una única
vez, cuando la imagen esté ya terminada.
Formato GIF: Es un formato que devuelve imágenes de tamaño muy reducido. Esa
reducción se consigue indexando los colores, es decir, asimilándolos a uno de los 256
colores de su tabla. Su profundidad de color máxima, por tanto, es de 8 bits.
El formato gif permite hacer algunas cosas curiosas: puede hacerse transparente uno de
los colores indexados en la tabla, lo que permite suprimir fondos. También permite enlazar
varias imágenes gif en una secuencia, lo que se conoce con el nombre gif animado.
El pequeño tamaño de los archivos gif hizo que fuera el formato más extendido en los
primeros tiempos de Internet. Pero su principal defecto consiste en que es un formato
propietario (CompuServe Inc.), lo que ha provocado la aparición del formato libre png que,
además, comprime mejor que gif.
Formato PNG: Es el formato de más rápido crecimiento en la web, porque reúne lo mejor
de jpg y gif.
Se trata de un formato de compresión sin pérdidas, con una profundidad de color de 24 bits.
Soporta hasta 256 niveles de transparencia, lo que permite fundir la imagen perfectamente
con el fondo. Entre sus inconvenientes hay que citar que no soporta animaciones y que el
tamaño de los archivos png, debido a la capa de transparencia, siempre es mayor que el
de los archivos jpg.
Formato BMP: Es un formato de compresión sin pérdidas. Admite cualquier tipo de

resolución y una profundidad de color máxima de 24 bits.
p. 14
Es el formato nativo de Microsoft y se usa en todas sus aplicaciones (Windows, Office, etc.).
Por esta razón es muy frecuente encontrar archivos bmp, pero su tasa de compresión es
sumamente baja. Entre los navegadores, sólo es soportado por Internet Explorer. 7
4. ¿Qué es la animación digital?
En el mundo multimedia (audio y vídeo) cuando se habla de "animación", se refiere a lo que

conocemos popularmente como "dibujos animados".
La animación es el proceso que logra dar movimiento a dibujos u objetos inanimados por lo
general. Esto es posible gracias a una secuencia de dibujos o fotografías que al estar
ordenadas consecutivamente logran generar un movimiento creíble ante nuestros ojos, los
cuales se prestan al juego de la ilusión visual. Por ejemplo si se quiere generar la sensación
de una caminata en un personaje, se deberá dibujar cada uno de los pasos que realizará
en hojas separadas (cada hoja dibujada con una pose distinta se define o se conoce como
"fotograma" o "frame") para que al pasarlos consecutivamente, percibamos la sensación de
movimiento.
La calidad de este movimiento dependerá de la paciencia, esfuerzo y dedicación que se le

dedique al proceso.
Todo el proceso antes explicado es el procedimiento básico para desarrollar la tarea, sin
embargo animar es algo más que eso, ya que si profundizamos más en la palabra "animar"
encontraremos que su origen parte del latín: "Anima" cuyo significado será "Alma". Por lo
tanto podríamos decir que Animar es dotar de Alma a dibujos o elementos que no la tienen.
7 http://platea.pntic.mec.es/~lgonzale/tic/imagen/conceptos.html
p. 15
Darle alma a un objeto es un trabajo que tiene mucho más que ver con un proceso artístico
que mecánico. La animación parte de la observación de los seres vivos que nos rodean.
Esta observación permitirá a los animadores darle un toque más real, más humano a
elementos tan simples como un cuadrado, un logotipo, un personaje creado o hasta una
lámpara de escritorio.8
Ejemplo de un flipbook: https://youtu.be/xRnyAClVy2Y
Se denomina animación digital a la técnica de animación que utiliza una computadora.
Para crear la ilusión del movimiento, una imagen se muestra en pantalla sustituyéndose
rápidamente por una nueva imagen en un fotograma diferente. Esta técnica es idéntica a la
manera en que se logra la ilusión de movimiento en las películas y en la televisión.
Para las animaciones 3D, los objetos se modelan en la computadora (modelado) y las
figuras 3D se unen con un esqueleto virtual (huesos). Para crear una cara en 3D se modela
el cuerpo, ojos, boca, etc. del personaje y posteriormente se animan con controladores de
animación. Finalmente, se renderiza la animación.
Existen distintos tipos de animación, entre ellos:
1- Dibujos Animados o Animación Tradicional: Consiste en el dibujo cuadro a cuadro o

fotograma a fotograma.
Ejemplo: https://youtu.be/dx_hFK8514U
2- StopMotion: Técnica de animación que no entra en la categoría de dibujo animado.
Consiste en aparentar los movimientos de objetos estáticos, capturando fotografías cuadro por
cuadro o movimiento por movimiento.
Ejemplo: https://youtu.be/eQ8ZWMlObGE
8 https://pixel-creativo.blogspot.com.ar/2012/09/que-es-animacion.html
p. 16
3- Pixelación: Variante del stop-motion en la que los objetos no son ni modelos (muñecos y
plastilina) ni maquetas, sino que son objetos comunes e incluso personas.
Al igual que en el StopMotion Los objetos son fotografiados repetidas veces y desplazados
ligeramente entre cada fotografía.
Ejemplo: https://youtu.be/BIODhAPVwlo
4- Rotoscopia: Este tipo de animación consiste en dibujar directamente sobre la referencia,

por ejemplo sobre los cuadros de la filmación de una persona real.
Ejemplo: https://youtu.be/djV11Xbc914
5- Animación por Recortes ó Cut out Animation: Técnica que usa figuras recortadas, ya
sea papel o fotografías.
Ejemplo: https://youtu.be/3DQ0xGntRHw
6- Animación 3D: En la animación en tres dimensiones un programa editor permite realizar

animaciones y simulación de texturas, iluminación, movimiento de cámaras y efectos
especiales.
https://www.youtube.com/watch?v=ChbPhOVSH4s
Otro tipo de animación más realista es la «captura de movimiento» (calco semántico del
inglés motion capture), que requiere que un actor vista un traje especial provisto de
sensores, siendo sus movimientos captados por una computadora y posteriormente
incorporados en el personaje.
Ejemplo: https://www.youtube.com/watch?v=ZnrKKjaVxCA&t=48s
p. 17
5. ¿Qué es la diagramación digital?
La diagramación es el arte de distribuir la composición en una página. Es la organización

de un conjunto de elementos jerarquizados, basado en un sistema estético de carácter
funcional. Todo material informativo pasa por un proceso de diagramación previa a su
elaboración.
El diagramador es la persona que prepara el esqueleto de lo que posteriormente será la

página. Marca las líneas y los puntos. Distribuye todos los elementos dentro de la página.
Marca la ubicación de la foto, el texto, los títulos y subtítulos, etc. Decide la cantidad de
columnas, y si estas irán en orden vertical u horizontal.
Luego los diseñadores ordenan en la computadora todos estos elementos. Eligen las
tipografías más apropiadas, los colores, los sombreados.
Si hay dibujos y fotos los introducen a la computadora a través de un escáner, y lo ubican

en el lugar señalado por el diagramador.
5.1. Diferencia entre diseño y diagramación
La diferencia principal entre diseño y diagramación es el papel que cumple cada uno en la
edición periódica de la publicación.
El diseñador establece las pautas de la diagramación: formato, tamaño, estilo, formateo de

párrafos, sangrías; propone el color corporativo para textos, tratamiento de la imagen
(sangrados, recuadros o aplicaciones especiales), criterios compositivos. En fin, todos los
detalles que componen una publicación.
El diagramador resuelve la organización de las imágenes, de acuerdo con ciertas normas

ya establecidas.
p. 18
En ocasiones, es posible que el mismo diseñador también pueda encargarse de la
diagramación, pero las responsabilidades son distintas. Un buen diagramador es el que
respeta esas normas; precisamente su creatividad radica en la capacidad de ofrecer
múltiples posibilidades de presentación bajo una norma establecida. 9
6. La transmisión atractiva de mensajes animados
Los mensajes animados permiten transmitir imágenes de forma dinámica, divertida y

atractiva para el público.
Es una gran estrategia de comunicación y de marketing visual ya que potencian nuestros

mensajes, pudiendo así comunicar ideas, emociones e información con más fuerza.
Se indica que el 90% de la información que se transmite a nuestro cerebro es a través de

lo que vemos, por ello los mensajes animados están sumamente indicados si se desea:
● Llegar mejor a la audiencia.

● Hacer una campaña más impactante.
● Generar contenidos exclusivos e innovadores.
7. Programas online que permiten realizar la comunicación gráfica
9 http://www.abc.com.py/articulos/el-diseno-grafico-y-la-diagramacion-700639.html
p. 19
Para trabajar con imágenes, ya sean estáticas o dinámicas, y que el proyecto resultante
sea exitoso, solo hace falta ser creativos y por sobre todas las cosas...tener mucha
paciencia.
Entonces y resumiendo, la fase creativa del proyecto con imágenes cumplimenta las
siguientes etapas:
● Análisis y Síntesis de los datos iniciales con que se cuenta para preparar
propuestas de diseño.
● Bocetaje inicial o preliminar. En esta fase se contemplan la mayor cantidad
de soluciones de diseño posibles. Es una etapa de total expansión creativa
que puede realizarse por los métodos tradicionales, o en el caso de las
imágenes digitales, utilizando computadoras.
● Preselección de ideas. Una vez explorados todos los caminos posibles, se
evalúan las propuestas iniciales y se seleccionan las que se consideran mas
adecuadas.
● Evolución de bocetos. Las alternativas se refinan o depuran en base a los
criterios definidos en un inicio.
● Elaboración de presentación. En esta fase se evalúan nuevamente las
alternativas de diseño que fueron depuradas y se escogen el mismo número
de alternativas (no más de cinco) para ser presentadas al cliente (en caso de
estar trabajando marketing digital). Previo a esa presentación se desarrollan
prototipos de las alternativas escogidas que representan de la manera más
exacta posible lo que será el diseño final.
● Selección de alternativas. El cliente, después de estudiar detenidamente las
propuestas, elige una de las alternativas.
● Refinado. Generalmente, una vez que ha sido escogida la alternativa de
diseño, pasa por pequeñas afinaciones en concordancia con las opiniones del
cliente.
p. 20
He aquí un listado de algunos softwares y páginas Web que permiten realizar imágenes
estáticas/dinámicas digitales online:
Software de dibujo libre
● Inkscape: Es un editor de gráficos vectoriales gratuito y de código libre.

Permite crear y editar diagramas, líneas, gráficos, logotipos, e ilustraciones
complejas.
https://inkscape.org/es/
● Gimp: Es un programa de edición de imágenes digitales en forma de mapa

de bits. Es un programa libre y gratuito. Forma parte del proyecto GNU y está
disponible bajo la Licencia pública general de GNU y GNU Lesser General
Public License.
https://www.gimp.org/
● Alchemy: Es un proyecto abierto de dibujo cuyo objetivo es explorar cómo

podemos dibujar y crear en computadoras de forma novedosa.
http://al.chemy.org/
Software para gifs animados
● Imgflip: Es un creador de memes, imágenes, generador de gifs animados y

un sitio para hacer gráficos circulares.
https://imgflip.com/
p. 21
● Makeagif: Es una aplicación web que permite en pocos minutos crear un gif
animado sin necesidad de complejos editores gráficos. Basta incluir las
imágenes que compondrán la secuencia de la animación y dejar que
makeagif.com haga el trabajo.
https://makeagif.com/
● Picasion: Permite crear GIF animado en línea de forma inmediata.

http://picasion.com/
● GIFMaker.me: permite crear gifs animados, presentaciones de diapositivas y

animaciones de video con música en línea de forma gratuita y fácil, no es
necesario registrarse.
http://gifmaker.me/
Software para tiras animadas
● Pixton: Es un generador de tiras cómicas muy completo y versátil. Permite,

entre otras cosas, personalizar los fondos y los personajes, añadirles
expresiones y posturas, y acercar o alejar los elementos que conforman cada
escena. El resultado se puede enviar por correo o insertarse en una web.
Requiere registración.
https://www.pixton.com/mx/
● Vyond: Es una herramienta que permite la creación de animaciones tipo

dibujos animados en las que entre otras cosas, podemos elegir los escenarios
y los personajes, utilizar imágenes propias o añadir sonidos y texto.
https://www.vyond.com/
p. 22
● Toondoo: Es una herramienta muy fácil de usar para crear cómics. Se
pueden usar los personajes que se muestran en ella o crear personajes
nuevos. Se pueden añadir escenarios pre-creados, objetos, etc. o crearlos
http://www.toondoo.com/Home.toon
● Powtoon: Crea videos profesionales de manera fácil y rápida.

https://www.powtoon.com/home/g/es/
Importante: Nosotros trabajaremos con imágenes fijas, dinámicas y

animaciones utilizando software libre. Es importante asegurarse antes de la
elección del software a utilizar, que el mismo permita poder colocar el archivo
producido en un blog o página Web.
p. 23
BIBLIOGRAFÍA
● Alberdi, M. A. (c2017). La imagen digital. ¿Nuevos interrogantes para la semiótica?

22/12/17, de “La Trama de la Comunicación” Vol. 9, Anuario del Departamento de
Ciencias de la Comunicación. Facultad de Ciencia Política y Relaciones
Internacionales, Universidad Nacional de Rosario. Rosario. Argentina. UNR Editora
Sitio web: http://rephip.unr.edu.ar/bitstream/handle/2133/501/Alberdi-
ImagenDigital_A1a.pdf?sequence=1
● Bartolomé, Grané, A, M. (c2016). Herramientas Digitales En Una Web ampliada.
[en línea]. 23/12/17. Disponible en:
http://www.lmi.ub.es/eroo/docs/abp_mgo_2008.pdf
● Garza Mireles, D.. (2014). Curiosidad - Animación Digital y Realidad Virtual.
22/12/2017, de Ciencia UANL - Universidad Autónoma de Nuevo León Sitio web:
http://cienciauanl.uanl.mx/wp-content/uploads/2014/07/animaciondigital1767.pdf
● Renobell, Víctor. (c2017) Hipervisualidad. La imagen fotográfica en la sociedad del
conocimiento y de la comunicación digital. UOC Papers. Revista sobre la sociedad
del conocimiento [en línea] 23/12/17 Disponible en:
http://www.redalyc.org/articulo.oa?id=79000105
● Rodríguez Illera, JL (c2016). Las alfabetizaciones digitales. [en línea]. 23/12/17.
Disponible en:
http://portafoli.ub.edu/portfolios/jlrodriguez/4571/last/media/rodriguez.pdf
● Wells, P.. (c2017). Fundamentos de la Animación. Barcelona: Parragón Ediciones
S. A.
p. 24

Dibujo y animación digital con software libre

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Dibujo y animación digital con software libre

Cargado por

Copyright:

Formatos disponibles

LICENCIATURA EN

En esta unidad trabajaremos la forma de pensar visualmente la sociedad y la cultura. A

Identificar y comprender la importancia de la información gráfica, sus diferentes tipos y los

● Conocer las características principales de la comunicación gráfica.

1. Definición de comunicación gráfica.

Podemos definir a la comunicación como el

1.2. La comunicación como proceso

La comunicación es un proceso en el que intervienen diferentes actores:

• Fuente: Por fuente entendemos el origen primario de la información de la cual el

• Mensaje: La información total que el emisor ha codificado con el objeto de ser

• Canal: El medio formal de comunicación entre un emisor y un receptor.

a) El emisor y el receptor manifiestan intereses diferentes.

c) Cuando se presenta el proceso de comunicación generalmente existen factores emotivos

d) En muchas ocasiones no se consigue estructurar el mensaje de la manera que se desea.

1.3. La comunicación como herramienta

• Habilidad: Un conjunto de actividades o conocimientos que un sujeto puede realizar

• Capacidad: Entendemos por capacidad a todo un conjunto de posibilidades o de

• Actitud: Son determinadas posiciones que toma un emisor con un receptor

• Código: Es un conjunto de signos gráficos, auditivos, táctiles, etc., que tienen un

• Tratamiento: Es la estructura o la forma en que se relacionan los códigos y los

• Denotativo: Se refiere al significado exacto de los términos, figuras, señales,

• Connotativo: Es la interpretación que un sujeto da a las diversas señales, términos,

1.4. La comunicación gráfica

La comunicación gráfica es el “proceso de

Actualmente la comunicación gráfica es un elemento fundamental de la existencia

2. Importancia de la imagen digital y su aplicación a diversas áreas.

Para definir la imagen digital debemos referirnos a su

que indica “relativo a”.

utiliza en el ámbito de la tecnología en referencia a la representación de información de

modo binario (en dos estados).

bidimensional construida a partir de una matriz binaria (compuesta de unos y ceros).

Es posible obtener estas imágenes de distintas maneras. Una posibilidad es utilizar un

dispositivo que se encargue de la conversión analógica-digital. Ese el caso de una cámara

impresa en una revista) y transformarla en una imagen digital.

por supuesto, de la saturación o del brillo.6

De acuerdo a su resolución, la imagen digital puede clasificarse de diferentes formas. Es

posible hablar, en este sentido, de imagen matricial o de imagen vectorial. La preferencia

uso de la imagen. Trabajaremos este tema más adelante.

por la calle o por la televisión, o por internet.

3. Tipos de imágenes: Mapas de bits y Vectoriales.

Las imágenes bitmap no permiten el

3.2. Imágenes vectoriales

Las imágenes vectoriales están compuestas por entidades

Al estar compuestas por entidades geométricas simples, las imágenes vectoriales se

Por ejemplo la imagen de la izquierda, obtenida haciendo zoom

Esta es su gran ventaja, porque proporcionan siempre imágenes

3.3. Compresión de archivos

Formato BMP: Es un formato de compresión sin pérdidas. Admite cualquier tipo de

4. ¿Qué es la animación digital?

En el mundo multimedia (audio y vídeo) cuando se habla de "animación", se refiere a lo que

La calidad de este movimiento dependerá de la paciencia, esfuerzo y dedicación que se le

Ejemplo de un flipbook: https://youtu.be/xRnyAClVy2Y

Se denomina animación digital a la técnica de animación que utiliza una computadora.

Existen distintos tipos de animación, entre ellos:

1- Dibujos Animados o Animación Tradicional: Consiste en el dibujo cuadro a cuadro o

4- Rotoscopia: Este tipo de animación consiste en dibujar directamente sobre la referencia,

6- Animación 3D: En la animación en tres dimensiones un programa editor permite realizar

La diagramación es el arte de distribuir la composición en una página. Es la organización

El diagramador es la persona que prepara el esqueleto de lo que posteriormente será la

Si hay dibujos y fotos los introducen a la computadora a través de un escáner, y lo ubican

5.1. Diferencia entre diseño y diagramación

El diseñador establece las pautas de la diagramación: formato, tamaño, estilo, formateo de

El diagramador resuelve la organización de las imágenes, de acuerdo con ciertas normas