27/6/2019 Imagen digital

Imagen digital

Conceptos básicos sobre imagen digital

Sitio: Campus Virtual REDDOLAC

[Link]/mod/book/tool/print/[Link]?id=755 1/13
27/6/2019 Imagen digital

Tabla de contenidos
1. Antes de iniciar

2. Orientaciones iniciales

3. Imagen digital

4. Tipos de imágenes

5. Teoría del color

6. Círculo cromático

7. Herramientas gratuitas

[Link]/mod/book/tool/print/[Link]?id=755 2/13
27/6/2019 Imagen digital

1. Antes de iniciar
.

Navegar por la guía multimedia

Para navegar la presente guía multimedia tienes dos opciones:

1. Utiliza los botones de retroceder o avanzar ubicados a la derecha de cada página, al inicio y final del contenido
2. Utiliza el menú de navegación ubicado en la zona superior derecha de la página. En este menú tendrás acceso a todo el contenido que conforma la presente guía.

En todas las guías multimedia del presente curso encontrarás una estructura similar para navegar los contenidos.

[Link]/mod/book/tool/print/[Link]?id=755 3/13
27/6/2019 Imagen digital

2. Orientaciones iniciales
Presta atención a la siguiente información

El contenido que encontrarás a continuación tiene como propósito que conozcas los aspectos básicos sobre la imagen digital. Para ello realizaremos un paseo por los conceptos
más importantes sobre la imagen digital, tipos y formatos

Para el desarrollo exitoso del presente contenido multimedia es muy importante que prestes mucha atención a los textos y recursos audiovisuales consultados, tomando nota de
los aspectos más relevantes o de aquello que no entiendes para consultarlo con el mediador del curso.

Planifica tu tiempo adecuadamente para cumplir con todas las actividades propuestas en la programación del curso.

No dejes para último minuto el desarrollo de las tareas previstas. No olvides que para desarrollar las actividades previstas debes apoyarte inicialmente en el material de lectura
suministrado.

Adicionalmente puedes investigar en la web y usar otras referencias bien documentadas para profundizar y complementar sobre el tema. En este caso, te invito a socializar la
información que consigas y que consideres de valor para el grupo.

[Link]/mod/book/tool/print/[Link]?id=755 4/13
27/6/2019 Imagen digital

3. Imagen digital

Iniciemos este recorrido conociendo el concepto básico de imagen digital que deberíamos entender y tener siempre presente de ahora en adelante. Algunos expertos definen lo “digital”
como toda información representada por una serie de pulsos eléctricos discretos basados en un sistema binario (ceros y unos).

Esta información digital es interpretada correctamente por cualquier dispositivo electrónico capaz de gestionar información en este formato.

Una de las mayores ventajas es que todas las copias digitales que podamos crear son perfectas y su reproducción, gestión, almacenamiento se logra sin errores

En resumen, podemos decir entonces:

Una imagen digital es una representación bidimensional de una imagen codificada a un lenguaje que puede ser interpretado y modificado por cualquier dispositivo
digital.

[Link]/mod/book/tool/print/[Link]?id=755 5/13
27/6/2019 Imagen digital

4. Tipos de imágenes

En el mundo de las imágenes digitales, contamos con dos tipos de imágenes: Imágenes vectoriales y el mapas de bits. Es muy importante entender la diferencia entre esos dos tipos y
sus mejores aplicaciones.

Imagenes vectoriales

Las imágenes del tipo vectorial se representan con trazos geométricos, controlados por cálculos y fórmulas matemáticas, que toman algunos puntos de la imagen como referencia para
construir el resto.

La principal ventaja de las imágenes vectoriales es su capacidad de almacenar los dibujos en un archivo muy compacto, ya que sólo se requiere la información necesaria para generar cada
uno de los vectores.

Los vectores pueden definir algunas propiedades de los objetos como el grosor de la línea o incluso el color de relleno de los objetos.

Los cambios de tamaño de las imágenes vectoriales no afectan a la calidad de las mismas, pues se actualizan de forma matemática todas las nuevas relaciones y posiciones de los
elementos geométricos que las componen.

Los dibujos se pueden escalar (reducir o aumentar el tamaño de la imagen), sin que se produzca una pérdida de información, puesto que si el dibujo aumenta o disminuye de tamaño el
programa recalcula automáticamente la posición y longitud de cada uno de los vectores que dibuja cada uno de los elementos

El principal inconveniente de las imágenes vectoriales es su falta de eficacia para representar imágenes de tipo fotográfico

Las imágenes vectoriales pueden ser encontrados en formatos .ai, .cdr, .eps, .svg, .pdf

Imagen vectorial (superior) Vs Imagen mapa de bits (inferior)

Mapas de bits

Las imágenes bitmap o mapa de bits son las más difundidas en el medio digital, una vez que ellas puedan reproducir fotos con fidelidad.

El nombre de “mapa de bits” se da por el hecho de que las imágenes son formadas por varios puntos minúsculos llamados pixeles con unos valores de color y luminancia propios. El
conjunto de esos pixeles componen la imagen total.

El mapa de bits es, sin duda, el tipo de imagen más utilizado en el medio digital, no obstante, tener un conocimiento sobre sus particularidades es esencial.

Primero, los mapas de bits poseen un dato muy importante llamado resolución. La resolución es la densidad de puntos, o píxeles, que tiene una imagen. Dicho de otra manera: La
resolución nos indica la cantidad de píxeles que hay en una determinada medida de longitud (una pulgada o un centímetro)

[Link]/mod/book/tool/print/[Link]?id=755 6/13
27/6/2019 Imagen digital
Así, si conocemos las dimensiones totales de la imagen, entonces podremos averiguar la cantidad de píxeles de la imagen; esto es la cantidad de unidades que componen, o construyen, la
imagen

La resolución de imagen se suele medir en píxeles por pulgada (ppi del inglés pixels per inch; ppp o píxeles por pulgada) y, raramente, en píxeles por centímetro.

Cuanto más alta sea la resolución, más píxeles hay en una imagen: más grande es su mapa de bits.
Las resoluciones altas permiten un mayor detalle y transiciones de color sutiles en la imagen
La resolución, además de con la densidad de pixels de una imagen, está íntimamente relacionada con su tamaño. Así, para mantener la calidad de reproducción, al variar su tamaño,
tendremos que variar también la resolución.

Siendo así, si excedes la resolución pre estipulada de una imagen de estas, los pixeles comenzarán a “reventarse”, este efecto se conoce comúnmente como pixelación

La resolución es uno de los parámetros fundamentales para predefinir la calidad de reproducción de una determinada imagen.

Profundidad de color

La profundidad de color de una imagen se refiere al número de colores diferentes que puede contener cada uno de los pixeles, que conforman un archivo gráfico.

En otras palabras, la profundidad de color depende de la cantidad de información que puede almacenar un píxel (esto es, del número de bits -o cantidad máxima de datos- que definen al
mismo). Cuanto mayor sea la profundidad de bit en una imagen (esto es, más bits de información por píxel), más colores habrá disponibles y más exacta será la representación del color
en la imagen digital.

En la cantidad de colores utilizados en la imagen influye mucho en el tamaño del archivo que la contiene; cuantos más colores se utilicen, más grande será el tamaño de la imagen

Ejemplo de imagen mapa de bit, donde se puede apreciar los píxeles que la conforman

[Link]/mod/book/tool/print/[Link]?id=755 7/13
27/6/2019 Imagen digital

5. Teoría del color

La teoría del color se refiere a cómo el ojo humano percibe los colores, y a la descripción y gestión de dichos colores en el monitor y en la impresión. La Teoría del Color tiene relación
con todas las áreas del proceso de producción gráfica: fotografía, escaneado, presentación en pantalla, pruebas finales e impresión.

¿Qué es el color?

El color es algo más que sólo una propiedad de las cosas, por muy contrario que esto sea a la forma en la que usamos la idea de color en el lenguaje diario.

Esta asociación del color y las cosas en nuestra forma de hablar, que se ve en frases como "este objeto es rojo", es básicamente errónea, ya que el color que percibimos sólo existe en
nuestros cerebros. Es usual afirmar que la visión en color es consecuencia de la naturaleza del mundo físico, una respuesta fisiológica de la retina al llegar la luz al ojo, y el procesamiento
neurológico de esta respuesta retinal en el cerebro.

La unificación de los tres procesos separados es probablemente artificial y hace muy poco justicia a la naturaleza compleja de la percepción del color. Con todo, la idea es útil y atrayente
ya que, como se puede ver más adelante, el número tres tiene una asociación casi mágica con la visión del color

La mezcla de colores

Una fotografía en color generalmente está compuesta por miles de colores diferentes. Pero cuando se imprime una fotografía en color no pueden utilizarse miles de tintas, ni tampoco se
puede presentar una imagen en un monitor utilizando miles de fuentes luminosas. En lugar de ello, debe encontrarse una aproximación a los miles de colores de la foto mezclando los tres
colores primarios. En impresión estos colores son: cyan, magenta y amarillo. En pantalla los tres colores primarios son: rojo, verde y azul.

EN PANTALLA LOS TRES COLORES PRIMARIOS SON: ROJO, VERDE Y AZUL.

En los monitores, las tres fuentes luminosas -roja, azul y verde- se combinan conjuntamente para producir todos los demás colores. La mezcla de diferentes fuentes luminosas coloreadas
se denomina “mezcla aditiva de colores”. Este método se utiliza en todos los dispositivos que crean colores a partir de fuentes luminosas, como los monitores, el televisor, etc. En
impresión se utilizan tres tintas de diferente color -cyan, magenta y amarillo, además del negro-, para obtener todos los colores. Este proceso de mezcla de tintas se denomina “mezcla
sustractiva de colores”.

Mezcla aditiva de colores

La mezcla aditiva se explica cómo la combinación de determinadas cantidades de luz roja, verde y azul (RGB), con objeto de crear nuevos colores.

Si se mezclan las tres fuentes de luz en su máxima intensidad, el ojo humano percibirá el color blanco como resultado. La mezcla de los mismos tres colores primarios con menor
intensidad se percibirá como un gris neutro. Si se apagan las tres fuentes se logra el negro. Si sólo una de las tres fuentes de luz está apagada y las otras dos emiten con su intensidad
máxima, se obtendrán los siguientes resultados: rojo + verde = amarillo; azul + verde = cyan; rojo + azul = magenta.

LAS DISTINTAS COMBINACIONES DE DOS O TRES COLORES PRIMARIOS DE FUENTES LUMINOSAS, EN SUS DIFERENTES INTENSIDADES, PERMITEN REPRODUCIR EN

La mezcla aditiva de los colores se utiliza en los monitores de los ordenadores, los televisores y en los proyectores de vídeo. La pantalla de un monitor está compuesta por un cierto
número de píxels, y cada pixel contiene tres pequeñas fuentes luminosas: una roja, una verde y otra azul. La mezcla de los colores de estas tres fuentes luminosas le dan al pixel su color
específico.

[Link]/mod/book/tool/print/[Link]?id=755 8/13
27/6/2019 Imagen digital

Mezcla sustractiva de colores

En impresión se crean los colores mezclando tintas de los tres colores primarios, cyan, magenta y amarillo (CMY). Este método es conocido como “mezcla sustractiva del color”, debido a
que las tintas filtran la luz blanca que incide sobre la superficie, sustrayendo o absorbiendo todos los colores del espectro excepto el tono mezclado que se desea reflejar. Es decir, que una
parte del espectro de colores de la luz que incide sobre la superficie es sustraída o absorbida.

¿Quieres aprender algo mas acerca de este tema tan curioso? Por aquí un vídeo, muy interesante!!!

Fuentes consultadas:

Introducción a la teoría del color. Sitio web. URL: [Link]

Westland, S.(2001) Qué es el color. Imagen digital. Tomado de URL: [Link]

[Link]/mod/book/tool/print/[Link]?id=755 9/13
27/6/2019 Imagen digital

6. Círculo cromático

Definición del Círculo Cromático

El círculo cromático es una representación visual de los colores primarios, rojo, amarillo y azul, y su combinación para crear todos los demás colores visibles. Ayuda a las personas a
comprender las relaciones entre los colores para el arte y la planificación del diseño, por ejemplo las combinaciones de colores.

En nuestro caso, entender como funciona el circulo cromático nos puede ayudar en una mejor elección de colores para la creación de nuestras infografías, en especial si usaremos una
herramienta de diseño gráfico instalada en nuestro computador, en donde debemos empezar de cero con el proceso de creación.

En el caso de usar una herramienta online, más adelante, veremos que podemos elegir alguna plantilla predeterminada que nos libra de la necesidad de elegir colores para fondos, fuentes y
elementos iconográficos.

Sigamos avanzando en este tema..

Colores primarios

Como ya mencionamos, los colores primarios son el rojo, amarillo y azul. Se denominan primarios porque no se basan en algún otro color. Pueden
combinarse para crear cualquiera de los otros colores del círculo cromático. La mezcla de pigmentos de los tres colores primarios forma el color café.

Colores secundarios

Los colores secundarios son tres. Se crean mediante la mezcla en cantidades iguales de dos colores primarios. Aparecen en el círculo cromático entre
los dos colores primarios que los componen.

Naranja = rojo + amarillo

[Link]/mod/book/tool/print/[Link]?id=755 10/13
27/6/2019 Imagen digital

Colores complementarios

El color primario directamente al frente de un color secundario en el círculo se denomina color “opuesto” o “complementario”. Tienen efectos interesantes entre sí, los que trataremos
después. Recuerde que cada par complementario consiste en un color cálido y uno frío. Los grupos de colores complementarios son:

Rojo y verde
Azul y naranja
Amarillo y morado

Colores terciarios

Terciario se refiere a "tercero". Estos seis colores son el tercer nivel de mezcla de colores RYB. Se forman mediante la mezcla de un color secundario
con uno de los colores primarios adyacentes en el círculo cromático. Todos los colores del rojo al amarillo puro se denominan “cálidos”. Del amarillo-
verde al rojo-morado se denominan “fríos”. Entre los colores terciarios están:

Azul-verde
Rojo-naranja
Amarillo-naranja
Amarillo-verde
Rojo-morado
Azul-morado

Combinar colores por armonía y contraste

Te invito a revisar el siguiente artículo en donde se describen nueve combinaciones de colores que funcionan para nuestros diseños

Revisa el artículo aquí

Referencias

Cromaflo (sf) Círculo cromático. Tomado de la URL: [Link]

[Link]/mod/book/tool/print/[Link]?id=755 11/13
27/6/2019 Imagen digital

7. Herramientas gratuitas

En esta sección de la guía encontrarás varias herramientas gratuitas que estoy seguro te serán de amplia utilidad para la creación y gestión de infografías en tus experiencias
docentes.

Las dos primeras herramientas te ayudaran en el tema del manejo del color y la elección de los colores más adecuados para presentar tus contenidos.

La tercera herramienta que te comparto, te será de utilidad para la edición y gestión de cualquier imagen mapa de bits. Con Irfanview puedes guardar un archivo gráfico en otro
formato, puedes redimensionar la imagen y realizar algunas operaciones de edición, aplicar algunos efectos y modificar aspectos claves como el brillo y contraste. Lo mejor de
todo: es completamente gratuita y solo ocupa 2 Mb en tu disco duro.

Adobe Color CC

Adobe Color CC es un generador de paletas cromáticas, muy fácil e intuitivo de utilizar. También permite explorar las paletas de colores generadas por otros usuarios, comentar, votar,
guardar. Otro recurso muy útil es la posibilidad de crear una paleta de colores a raíz de una fotografía. En resumen, es una excelente aplicación en línea para generar tus paletas cromáticas

URL: [Link]

Material Palette

[Link]/mod/book/tool/print/[Link]?id=755 12/13
27/6/2019 Imagen digital

En esta herramienta podrás crear paletas de colores basadas en los diseños de Material Design de Google. Su funcionamiento es muy fácil: selecciones dos colores y te genera la paleta
cromática. Esta paleta cromática es muy útil ya que te da referencias del uso de estos colores: texto principal, texto secundario, iconografía, color primario ...Dentro de la misma página
web también dispones de un apartado con ejemplos de Material Design, que te puede servir como inspiración para crear nuevos equemas de colores. Como en el resto de páginas también
ofrece la posibilidad de descargar en varios formatos.

URL: [Link]

Irfanview

Es un excelente visor de imágenes, totalmente gratuito. Nos permite visualizar una enorme cantidad de formatos, además de facilitarnos la vida permitiendo convertir y/o guardar las
imágenes en cualquier tipo de archivo. Cuenta con algunos filtros y efectos que podemos aplicar. Su instalador apenas ocupa 2Mb, por lo que su consumo de recursos de nuestro
computador es insignificante.

URL: [Link]/

[Link]/mod/book/tool/print/[Link]?id=755 13/13