1. Imagen

Imagen quiere decir figura o representación visual de algo o alguien, cuya raíz en latín hace referencia al retrato. En este sentido, la naturaleza de una imagen es ser la representación gráfica de algo más, asemejarse a ello o reflejar su apariencia. Cabe destacar que la persona, objeto o lugar representado a través de una imagen, puede ser real o imaginario.

Con base en lo que menciona Villafañe (2006, p.23), citado por Zorrilla y Frías (2021, inédito). Una imagen es una representación visual que supone tres aspectos esenciales:

1. Una selección de la realidad, que es la forma en que la percepción, sea del ojo humano o de la lente de una cámara, "recorta" aquello que desea representar para presentar un aspecto o ángulo específico.
2. Un repertorio de elementos fácticos (o plásticos). Estos elementos son los que componen la imagen y que constituyen su "alfabeto visual", agrupados a su vez en:
• Elementos morfológicos: punto, línea, plano, textura, color y forma.
• Elementos dinámicos: movimiento, tensión y ritmo.
• Elementos escalares: dimensión, formato, escala y proporción.
3. Una sintaxis. Ordenación de dichos elementos de una manera específica que les da sentido y significado. Con ella se busca claridad y concisión.

1.1. Imagen digital

Desde que socialmente surgió la necesidad de la representación, las imágenes se han plasmado en diferentes soportes, se han hecho con diferentes herramientas y recursos, y se han compartido a través de diversos medios.

Por ejemplo, para la creación de las pinturas rupestres se usaron soportes de roca, al interior de las cavernas, herramientas hechas a mano, o incluso se pintó con las propias partes del cuerpo, como las manos; se usaban recursos extraídos de la naturaleza, como tintes vegetales.

Otro ejemplo puede ser la obra de un artista plástico, que se realiza sobre un lienzo de tela, con pinturas al óleo y con pinceles, y se presenta en un museo.

Al igual que las pinturas rupestres y los cuadros de un artista, las imágenes digitales son aquellas en cuya creación y distribución se usan soportes, recursos, herramientas y medios digitales. En este sentido, para realizar una imagen digital, siempre necesitarás del uso de herramientas y recursos digitales, por ejemplo; una cámara fotográfica como la que tienen los teléfonos inteligentes; una aplicación o programa que contenga funciones específicas para la creación y edición de imágenes; y un dispositivo que sirva tanto para visualizar el proceso de creación de la imagen, como para almacenar sus diferentes versiones.

2. Tipos y formatos de imagen digital

Existen dos tipos de imágenes en los medios digitales: las imágenes de mapa de bits y las imágenes vectoriales.

Las características de cada una están relacionadas con el empleo de diferentes formas de almacenamiento que permiten su reproducción y uso para diferentes propósitos, conocidas como formatos.

2.1. Imágenes de mapa de bits

Las imágenes de mapa de bits son estructuras formadas por pequeños puntos de color llamados pixeles. La información de cada pixel en la imagen será depositada en los bits, que son la unidad mínima de información almacenada en los espacios digitales (Reimers Design, 2011).

Una imagen de mapa de bits estará sujeta a la cantidad de pixeles por centímetro que haya dentro de sí. Al contar con un mayor número de pixeles presentará una mayor nitidez, lo que permitirá que la imagen alcance mayores dimensiones, es decir, que se pueda hacer más grande, sin perder calidad. En contramano, a menor cantidad de pixeles, menor calidad.

Existen formatos de salida que almacenan las imágenes en mapa de bits (bitmap) y según sus características, pueden brindarles atributos específicos.

A continuación, te presentamos un video que explica algunas características de los formatos más comunes para almacenar imágenes en formato de mapa de bits: JPG, PNG, GIF y TIFF:

2.2. Imágenes vectoriales

Los programas con los que se crean las imágenes vectoriales siguen fórmulas matemáticas que indican el trazo de un punto a otro para crear líneas y figuras geométricas. Cada elemento creado puede tener características individuales de color, tamaño, posición, etcétera, y cuando esos elementos individuales se unen en un solo lienzo, pueden producir figuras más complejas.

Una característica importante de las imágenes vectoriales es que sin importar que tan grandes se hagan, siempre seguirán viéndose nítidas, por lo que son una excelente opción para desarrollar logos, ilustraciones, carteles, infografías, entre otras composiciones.

Para almacenar las imágenes vectoriales sin perder sus propiedades es necesario utilizar los formatos adecuados. Lo importante de cada uno de ellos, es que todos permiten la modificación de las imágenes a partir de ciertos programas y plataformas web.

El formato Gráficos Vectoriales Escalables, SVG (Scalable Vector Graphics), por sus siglas en inglés, es el estándar cuando se trata de trabajar con imágenes vectoriales que se pretenden reproducir en la web. Este formato tiene una particularidad: es de código abierto. Ello significa que no requiere de un programa específico para trabajar las imágenes de vector, por lo que cualquier software compatible con este tipo de imágenes permitirá su uso.

Para trabajar con este formato te recomendamos el uso de Method Draw https://editor.method.ac, un programa gratuito que te permite realizar imágenes de vector desde cero, así como seguir editando algunas que ya tengas de antemano y que estén guardadas en SVG. Además, aquí puedes ver el siguiente video tutorial de internet, que te muestra cómo comenzar a trazar un vector, es decir, una línea, desde este programa:

Otro programa bastante útil es Vectr https://vectr.com/desig , que, al igual que el anterior, permite acceder a sus herramientas de manera gratuita. Para explorar las funciones con las que cuenta este programa, te recomendamos reproducir el siguiente video:

Existen además otros formatos con la capacidad de almacenar imágenes vectoriales, entre los cuales están: DWG, AI, CDR, FLA, SWF, EPS. Hay que tomar en cuenta que muchos de estos formatos son denominados ‘de autor’, es decir, que fueron creados a partir de un software específico, y por lo tanto, pueden ser utilizados únicamente en el programa al que pertenecen.

Por ejemplo, AI, es un formato desarrollado por el programa especializado para imágenes de vector, Illustrator, sin embargo, al pertenecer a la desarrolladora Adobe, tiene un costo para permitir su uso.

Finalmente, es importante que tomes en cuenta, que las imágenes vectoriales también pueden ser almacenadas en los formatos de salida (opciones que ofrece cada programa para la impresión y visualización de datos), tomando en cuenta que al guardar una imagen vectorial en uno de estos formatos, la imagen perderá todas sus cualidades de vector y se convertirá en una imagen de mapa de bits, por lo que ya no se podrán modificar sus elementos por separado y también estará sujeta a las lógica de la resolución, es decir, a la calidad de la imagen según la cantidad de pixeles que tiene por centímetro o pulgada.

3. Diseño digital

En una imagen, cada elemento ocupa un lugar en el espacio y presenta diversas características como color, dirección o tamaño. Al compartir el área, los componentes de una imagen se relacionan entre sí, formando un todo con características propias de composición, como la escala, la simetría o el ritmo. El diseño es una disciplina que aplica estos principios para crear diferentes productos, como logos, infografías, carteles, folletos, entre otros. Mohly Nagy (citado en Reimers Design, 2011), fotógrafo y pintor húngaro, apunta que el diseño es la “organización de materiales y procesos de la forma más productiva, en un sentido económico, en un equilibrado balance de todos los elementos necesarios para cumplir una función”.

La diferencia entre el diseño y el diseño digital, son los medios a través de los cuales se originan y distribuyen sus productos. Es decir, que mientras que el diseño o diseño gráfico, en el sentido convencional, se encarga de elaborar contenidos para el espacio físico, como volantes, tarjetas de presentación o anuncios impresos (los cuales, dicho sea de paso, pueden ser diseñados con herramientas digitales para después ser impresos), el diseño digital se encarga de realizar piezas gráficas o imágenes que están pensadas para una distribución en espacios digitales a través del internet y sus plataformas, como las redes sociales.

3.1. ¿Qué es un logo?

Un logo es la representación gráfica de una entidad. En él debe estar depositada la identidad de una empresa, organización, campaña, evento, etcétera. En este sentido, un logo es aquello que identifica una entidad en una sola imagen, por ello, es importante que sus elementos lo expresen adecuadamente.

Te presentamos brevemente cuatro tipos de logos que puedes utilizar según el perfil del proyecto que estés desarrollando.

Logotipo: El logotipo es el nombre de tu marca, compañía o cualquier emprendimiento que estés realizando, dispuesto de manera escrita. (Reimers Designs, 2011). Este tipo de logo incluye únicamente estilos de letra, conocidos como tipografía.

Isotipo: Un isotipo es un símbolo gráfico independiente al nombre del proyecto (Reimers Design, 2011); es un elemento meramente ilustrativo, pero que con el paso del tiempo logra remitir al emprendimiento que estás realizando. Un claro ejemplo de este tipo de logo es la manzana de la empresa tecnológica Apple.

Imagotipo: El imagotipo es la unión del logotipo e isotipo (Reimers Design, 2011). En este rubro, es importante poner especial atención a la armonía entre ambos elementos. Nike, es una marca de zapatos deportivos que ha utilizado este tipo de logo para darse a conocer, y destaca la manera en que constantemente separa los dos elementos de su imagotipo, sin perder el sentido de su identidad.

Isologo: Aunque el isologo también une logotipo e isotipo, la diferencia radica en que, al separar el uno del otro, el diseño del logo pierde sentido. Un ejemplo es el logo de Burger King, donde sin el texto que enuncia el nombre de la cadena de alimentos, la hamburguesa carece de sentido y da la sensación de que le hace falta un elemento.

3.2. Tipografía

Existe una clasificación de las diferentes familias tipográficas que te puede ayudar a seleccionar el estilo perfecto según tus intereses de comunicación. A continuación, te presentamos un video muy útil que te ayudará a entender de manera general las funciones de los distintos estilos de tipografías, para que puedas integrarlas en tus contenidos digitales.

3.3. Color

De acuerdo con Wong (1998), el color es el resultado del reflejo de luz en las superficies y la manera en que este fenómeno físico es interpretado en nuestro cerebro. En el diseño, existen dos grandes clasificaciones del color: por un lado está la agrupación de los colores neutros o acromáticos, es decir, el blanco, el negro y los grises, y por el otro se encuentran los colores cromáticos, aquellos que pueden percibirse en el arcoíris y varían en tono, brillo y saturación.

El tono es el atributo que permite clasificar a los colores por su nombre, como rojo, amarillo y azul, considerados tonos primarios; o verde, naranja y púrpura, tonos secundarios que se obtienen a partir de la mezcla de los primarios. Esto es importante ya que estos tonos se convertirán en la base del conocido círculo cromático (Wong, 1998).

Actualmente la descripción de los tonos puede ser más precisa en cuanto se agregan coordenadas en letras y números que ubican el punto del tono deseado. Además, una vez que tienes un tono, puedes agregar también variaciones según su brillo y saturación. Tomando en cuenta que el brillo hace referencia a la claridad u oscuridad de un tono, y la saturación destaca la pureza o intensidad del tono (Wong, 1998).

3.3.1. Teoría del color

Como cada disciplina, el diseño gráfico ya se ha encargado de teorizar acerca de sus elementos más importantes. Gracias a ello, hoy existen herramientas como las fórmulas cromáticas, que sirven como guía para encontrar la armonía en el color o paleta de colores ideales para aplicar a tus diseños o composiciones en una imagen (GFCGlobal, 2022). A continuación, te presentamos la descripción de algunas de ellas, acompañadas de un ejemplo visual recuperado de la herramienta Adobe Color, misma que te recomendamos utilizar a la hora de determinar los colores de tus contenidos.

Fórmula monocromática: Consiste en el uso de un solo tono, permitiendo variaciones sobre su brillo y saturación.

Fórmula análoga: Elige colores que sean colindantes, es decir, que estén uno junto a otro de manera consecutiva en el círculo cromático.

Colores complementarios: Propone el uso de tonos opuestos en la rueda cromática. Se aconseja acompañar de variaciones en brillo e intensidad para dar mayor profundidad a la paleta de colores seleccionada.

Colores complementarios divididos: Forma un triángulo isósceles en el círculo cromático eligiendo los tonos consecutivos al complementario del primer tono elegido.

Triada: Al formar un triángulo equilátero en el centro, elige los colores de cada esquina, generando paletas de colores bastante llamativas.

Fórmula tetraédrica: Forma un rectángulo en el círculo cromático, permitiendo utilizar cuatro tonos complementarios. Al usarla en tu paleta de colores, se recomienda elegir un color como dominante sobre los otros, este sería el que se muestre en mayor cantidad en un diseño o composición.

3.3.2. Psicología del color

Un consejo extra que te ayudará a realizar un diseño exitoso es aprender a usar el color a favor de tu proyecto. Los colores tienen la capacidad de transmitir emociones, por lo que usarlos adecuadamente puede ayudar a reforzar el mensaje que se busca dar a través de un contenido digital.

La psicología del color se encarga de revisar los usos y significados que puede adquirir el color en las mentes de las personas.

Por ejemplo, existe una clasificación del color que denomina algunos tonos como el azul, verde y violeta como ‘colores fríos’, y al rojo, naranja y amarillo como ‘colores cálidos’, lo que puede darte una idea para aplicarlos en diferentes contextos.

En el caso de esta ilustración, la información visual que obtenemos a través de los colores, nos permite saber que en general hay un ambiente frío; sin embargo, dentro de la cueva el ambiente es mucho más acogedor y cálido, e incluso podría haber fuego.

A continuación, te presentamos una breve descripción de las propiedades que puede incorporar un color a cualquier diseño que realices.

Amarillo. Es un color bastante alegre y dinámico, aunque en algunos casos puede ser utilizado para manifestar emociones de disgusto. Muchas cadenas de comida incorporan este color a sus logos ya que se cree que tonos vivos como este tienen cierta relación con el apetito.

Verde. Al ser un color predominante en la naturaleza, puede brindar tanto tranquilidad y equilibrio, como sentimientos más aventureros. También puede manifestar desorientación y desorden.

Azul. Su relación con el cielo y el agua manifiesta amplitud, libertad y calma. Por otro lado, según el juego con el brillo y la saturación, puede llegar a transmitir melancolía, tristeza o hasta depresión.

Rojo. Por su intensidad suele relacionarse con emociones fuertes o situaciones extremas. Por lo tanto se relaciona con la pasión, el amor y el odio.

Los anteriores son solo algunos ejemplos del color y las emociones o estados de ánimo con los que se le asocia. Sin embargo, es importante recordar que también los colores están ligados a situaciones sociales, culturales e incluso políticas y que estas pueden variar entre épocas y lugares. Por tanto, el color es un elemento esencial en el diseño de imágenes, que no debes dejar al azar o al capricho.

3.4. ¿Qué es un cartel?

Según el Pequeño Diccionario del Diseñador, compilado por Reimers Design (2011), un cartel es una pieza gráfica que sirve para difundir un mensaje específico de manera breve. Al igual que otros recursos de difusión, el cartel se compone de elementos gráficos que incluyen tipografía, formas y color. Algunas características importantes del cartel son las siguientes:

• Permitir la lectura a distancia
  
  

  

  Cartel gráfica sonidera (c) Los que hacen
  
  


• Presentar textos breves
  
  

  

  Portada de revista (c) Hypatia
  
  


• Integrar imágenes a su composición
  
  

  

  YEEZY GAP FW22 (c) riceballkim x syynstudios
  
  


• Persuadir al espectador
  
  

  

  I want you for the U.S. Army (cc) Library of congress
  
  

Otra característica del cartel, es que regularmente se adapta al tamaño tabloide, un formato de 27.9 centímetros de ancho por 43.1 centímetros de alto. En este entendido, la mayoría de las veces, un cartel tendrá una orientación vertical para agrupar y ordenar los elementos que lo constituyen.

Adobe Express https://express.adobe.com/ es una herramienta de uso gratuito, muy útil para diseñar carteles, entre otros productos visuales. Para utilizarla, únicamente necesitas registrarte como usuario y explorar sus funcionalidades.

Una ventaja de esta plataforma web es que cuenta con medidas predeterminadas según el producto que desees realizar. Además, tiene una aplicación disponible para teléfonos inteligentes, lo cual es muy útil según el equipo con el que cuentes.

Aquí te dejamos un video tutorial que te ofrece un recorrido por la aplicación

Otra herramienta digital muy útil es la plataforma en línea Canva, https://www.canva.com/teams. Al igual que Adobe Express cuenta con una versión instalable en los teléfonos móviles y es útil tanto para crear carteles, como otros tipos de imágenes.

Te recomendamos el siguiente video tutorial que te ayudará a realizar tu propio cartel con ayuda de esta herramienta:

3.5. Composición en diseño

Para el diseño de cualquier recurso de comunicación visual, es importante la manera en la que están dispuestos los elementos de una imagen (Reimers Design, 2011). Te compartimos el siguiente video para adentrarte en el tema:

Referencias de contenido

Del Pozo, S. (3 de enero del 2021). COMO HACER TU PROPIO CARTEL EN CANVA | Tutorial GRATIS [Archivo de video]. Recuperado de https://www.youtube.com/watch?v=dzUdxp0P4vE&t=2s

GCFAprendeLibre (7 de febrero de 2019). Qué es y cómo usar la disposición y composición| Conceptos básicos del diseño gráfico [Archivo de video]. Recuperado de https://www.youtube.com/watch?v=gJhOHTOjGO8&t=174s

GCFAprendeLibre (12 de febrero de 2019). Qué tipos de tipografía existen y cómo usarlas | Conceptos básicos del diseño gráfico [Archivo de video]. Recuperado de https://www.youtube.com/watch?v=aJY0aiYWwLQ

GFCGlobal (2022). GCF Aprende Libre. Recuperado de https://edu.gcfglobal.org/es/

Hernández, K. (2015). ¿Sabías que existen dos tipos de imágenes digitales? Aureavisura Revista de artes y diseño. doi: 04-2012-120414060900-203

Hey Jaime (5 de octubre de 2021). Formatos de imagen para MAPA DE BITS: JPG, GIF, PNG Y TIFF [Archivo de video]. Recuperado de https://www.youtube.com/watch?v=TMQeaHiK5qE&t=3s

Hops, S. (2022). ¿Qué es el diseño digital? La guía definitiva (definición, tipos, herramientas y más). [Mensaje en un blog]. Recuperado de https://marketsplash.com/es/diseno-digital/

Lenis, Alejandro (2021). Tipografías en diseño gráfico: importancia, tipos y fuentes más usadas. [Mensaje en un blog]. Recuperado de https://blog.hubspot.es/marketing/tipografia-diseno-grafico#:~:text=La%20palabra%20tipografía%20proviene%20del,y%20el%20propósito%20del%20material

Llasera, J. (2021). JPG, GIF, PNG o TIFF: Los formatos de imágen digital y cuándo usarlos. Mensaje en un blog]. Recuperado de https://imborrable.com/blog/imagen-digital-formatos/

López Besa, A. (2022). Piktochart. Recuperado de https://piktochart.com/es/blog/que-es-el-diseno-grafico/

Reimers Design (2011). Pequeño diccionario del diseñador. Recuperado de

Toulouse Lautrec (2022). ¿Cuál es la diferencia entre el diseño gráfico digital y el diseño gráfico? Recuperado de de https://www.toulouselautrec.edu.pe/blogs/diferencia-diseno-digital-grafico

Vivantic (22 de diciembre de 2021). Como usar Adobe Creative Express - Tutorial aprender a diseñar | Alternativa a Canva | 2022 [Archivo de video]. Recuperado de https://www.youtube.com/watch?v=EwRVMyP-TwM&t=3s

Wong, W. (1988). Principios del diseño en color. Barcelona, España: Editorial Gustavo Gili

Zorrilla, M.L. y Farías, S. (Coords., 2021, inédito). Guía de Indicadores de Calidad para Recursos Educativos Digitales. GIC-RED. Grupo de trabajo ADE-ANUIES.