Tema 1 Introducción al diseño digital

 Diseño digital

 

Introducción al diseño digital

 

Definición

El Diseño Digital es aquella forma de Informar, Expresar algo a través de un lenguaje visual. Es decir, que un diseñador en esta categoría posee las habilidades o competencias para poder desempeñarse en el medio profesional de la animación, producción de digitales o incluso combinar el medio fotográfico con el diseño digital.

https://theworldofagraphicdesigner.wordpress.com/2012/06/20/introduccion-al-diseno-digital/

 

 

Tipos de gráficos: Mapa de bits y vectoriales

 

Gráficos vectoriales

Están formados por líneas formadas por ecuaciones matemáticas. Cada línea está delimitada por dos puntos llamados nodos. Las líneas curvas son llamadas curvas Bézier y obtienen su forma gracias a unas pequeñas asas adjuntas a los nodos.

Gráficos de mapas de bits o ráster

Este tipo de gráficos digitales esta formado por una matriz es decir, una cuadrícula, de pixeles. Cada pixel puede almacenar un color diferente. Los gráficos de mapas de bits son muy pesados ya que deben de almacenar el color de cada pixel del cual está formada. Como están formados de pieles, están limitados a formas rectangulares además que al agrandarse los pixeles comienzan a hacerse más visibles. Esto ocasiona que la imagen se pixeleé y pierda definición.

https://pixelemos.com/blog/graficos-digitales/

 

 

Formatos de gráficos

 

Los tipos de formato en diseño gráfico más comunes actualmente nos permiten elegir entre muchas opciones que afectan a su calidad y peso, creando diferentes funcionalidades para suplir cualquier necesidad de tus diseños. Te mostramos unos cuantos:

Joint Photographic Experts Group o JPEG: Con total seguridad has oído hablar de él porque se trata del archivo de mapa de bits más utilizado entre los formatos de imagen. Sus características de compresión lo hacen un archivo muy ligero y que apenas ocupa espacio. Todo esto a costa de su calidad, aunque puede ser elegida al momento de guardar para adaptarse a nuestras necesidades. Muy común en el ámbito de impresión y es el formato indicado para utilizar en internet.

Windows Bitmap o BMP: Formato propio del programa Paint. Un formato de mapa de bits que viene instalado de serie por el sistema operativo. Ofrece buenas calidades de imagen, pero ocupan una significativa cantidad de espacio en el disco. Es poco útil para internet.

Graphics interchange formato o GIF: Otro archivo con formato en mapa de bits y bastante antiguo. Soporta únicamente 256 colores, lo que significa una perdida de calidad en imágenes que posean un mayor número de colores. Lo verdaderamente importante de este formato es que admite animación, o lo que es lo mismo, imágenes en movimiento. Su uso es continuado actualmente porque casi todas las plataformas y navegadores son capaces de mostrar estas animaciones sin ayuda de softwares externos. Posee además un formato de compresión propio, el LZW, lo que le permite comprimirse sin tener perdidas en la calidad.

Portable Network Graphics o PNG: El PNG surgió como respuesta a la poca calidad de las imágenes en formato GIF. Es capaz de utilizar   canales RGB, lo que permite su modificación en programas de edición. Otra característica es que admite fondos transparentes que permiten el uso de siluetas y objetos con transparencias. Posee mucha más calidad que el GIF ya que no tiene la limitación de los 256 colores y se comporta como un JPEG con la diferencia de que el PNG no tiene perdida de calidad por compresión.

 

 RAW: También conocido como “en crudo” o “en bruto”, este formato en mapa de bits se crea del archivo original de la cámara fotográfica que realizó la captura sin ninguna compresión. Su tamaño es enorme pero también lo es su calidad por la gran cantidad de información que posee. Este formato es el ideal para trabajar en programas de edición de imágenes.

Tagged Image File Format o TIFF: Formato bastante habitual en el mundo de la impresión de calidad. Es un archivo en mapa de bits que no pierde calidad por las mismas razones que el GIF: tiene un tipo de compresión basado en el LZW. Con este formato las imágenes no se estropean al guardarlas una y otra vez pero su peso es significativamente mayor.

Encapsuled PostScript o EPS: Archivo de imagen vectorial muy utilizada en programas como Illustrator. Muy utilizada en impresión ya que no tiene problemas de resolución y puede imprimirse en todo tipo de tamaños. Requiere de un software específico para poder abrir los archivos, por lo que un ordenador normal no es capaz de leer este formato. También puede abrirse en programas como Photoshop y convertir los archivos vectoriales en mapas de bits, con sus limitaciones de calidad.

Scalable Vector Graphics o SVG: El SVG es el único formato digital en archivo vectorial capaz de ser interpretado por los navegadores. Se trata de una apuesta por el diseño gráfico en páginas web con ilustraciones vectoriales sin pérdida de calidad. Es una gran ventaja frente a las imágenes de mapas de bits ya que podremos usar las imágenes SVG en nuestros proyectos con la libre posibilidad de modificar el tamaño.

http://blog.graficasazorin.es/tipos-de-formato-utilizados-en-diseno-grafico/

 

Modos de color

 

Dentro del diseño gráfico dependiendo del medio en el cual se va a representar la imagen, ya sea digital o impresa la manera de trabajar los colores varía y a continuación te presentaremos los modos de color más utilizados:

Monocromático: El modo monocromático se corresponde con un profundidad de color de 1 bit, es decir que la imagen contiene únicamente un solo bit por pixel, dejando la imagen a dos colores siendo conformada únicamente por pixeles blancos y negros usando la menor información de esta, con esto se logra que el archivo sea de un peso muy bajo pero con una calidad muy limitada.

Escala de grises: Las imágenes en escala de grises contienen 8 bits por pixel, con el valor 0 correspondiendo al negro y el valor 255 al blanco nos permite tener 1-254 tonos de grises, los que nos da un total de 256 niveles de grises, más que aceptables para ver o imprimir una imagen en blanco y negro con calidad suficiente. Es uno de los modos de color más populares para contenido web y principalmente con fines artísticos, siendo muy utilizados en fotografías y dibujos, ya que al trabajar una imagen de esta manera se le puede agregar cierto toque de melancolía, elegancia y minimalismo.

Duotono: En este modo de color se trabaja con imágenes en escala de grises a las que se les agrega tintas planas, con el fin de colorear en distintas gamas de grises. Con este método se pueden lograr fotos en blanco y negro viradas al color que queramos. Se suelen utilizar en impresiones donde se utilizan dos o más planchas para añadir riqueza y profundidad tonal a una imagen en escala de grises.

Color indexado: Se denomina color indexado porque contiene un solo canal de color de 8 bits, por lo que solo se puede obtener con él un máximo de 256 colores al igual que la escala de grises. En este modo, la gama de colores de la imagen se adecua a una paleta con un número restringido de colores, por lo que en muchos casos resulta muy útil para trabajar con formatos que permiten únicamente colores del sistema en que se trabaja al momento de reducir imágenes para su publicación web. Su principal inconveniente es que la mayoría de las imágenes del mundo real se componen de más de 256 colores.

RGB: Es un modo de color basado en la combinación de colores lumínicos primarios (rojo, verde y azul) para obtener el resto de colores. Las imágenes RGB contienen 24 bits por pixel y usan 3 canales de información, uno por cada color. El modo RGB suele usarse para imágenes y trabajos que no van a ser impresos, en otras palabras es de los modos de color óptimo para trabajar en medios digitales, para pantallas y el propio de la luz en base a la síntesis aditiva.

 

modos de color:

HSB: Es un modo de color basado en la percepción humana y cada color surge de los valores de estos tres parámetros: Hue (tono) que es el valor del color; rojo, azul, verde, etc. Saturation (saturación) que se refiere a la pureza del color y va del 0% al 100%. Brightness (brillo) que referencia la intensidad de luz del color, es decir, la cantidad de negro o blanco que contiene la imagen, estando su valor entre 0 (negro) y 100 (blanco).

En Photoshop no se puede elegir este modelo a través del menú, pero si se puede crear un color a partir del tono, saturación y brillo.

CMYK: Este se basa en la sustracción del blanco usando para ello como colores primarios el cian, magenta, amarillo y negro (éste último para aportar el cuerpo, fuerza, acentuar rasgos o dar profundidad a la imagen).

En este modo lo que se hace es combinar los colores sustractivos primarios para dar lugar al resto de colores. Suele usarse para imágenes y trabajos que serán impresos. El modo CMYK contiene 32 bits por píxel utilizando 4 canales de información (uno por cada color).

Pantone: El sistema de color Pantone es un catálogo de códigos unívocos elaborados por la compañía del mismo nombre especializada en tecnología gráfica. La principal importancia del sistema Pantone es que sin importar el sistema operativo o pantalla, programa de edición de imágenes o gráficos vectoriales que se utilice, el color de salida digital o impreso, ya sea en Plotter o en Offset, el color sea siempre el mismo. Esto se logra gracias a que los colores son creados a partir de barnices y no de lo que se ve en pantalla.

LAB: El modelo de color Lab se basa en el modelo propuesto en 1931 por la CIE (Commission Internationale d’Eclairage) como estándar internacional para medir el color. En 1976, este modelo se perfeccionó y se denominó CIE Lab. El CIE Lab es el modelo cromático usado normalmente para describir todos los colores que puede percibir el ojo humano. Los tres parámetros en el modelo representan la luminosidad del color, su posición entre magenta y verde y entre amarillo y azul. Las imágenes Lab suelen tener una profundidad de 24 bits por pixel.

Hexadecimal (HEX): El modelo hexadecimal es muy útil cuando se orientan trabajos a web ya que trabaja en lenguaje html y permite correlacionar los colores RGB a código web. El código HEX representa los colores RGB a través de seis números hexadecimales (aquellos que toman valor del 0 al 9 y de la A a la F) divididos en 3 pares. El primer par corresponde al rojo, el segundo al verde y el tercero al azul (#RRGGBB).

Multicanal: Posee múltiples canales de 256 niveles de grises, descomponiendo la imagen en tantos canales alfa como canales de color tuviera el original (Una imagen RGB quedaría descompuesta en 3 canales, una por color). Se utiliza en impresiones de muy alta calidad ya que cada tinta es un canal que al momento de imprimirse se superpondrá sobre las otras tintas en el orden que se determine.

https://tactic-center.com/diseno-grafico/los-modos-de-color-mas-utilizados/?locale=es

 

Tipos de software de diseño y que ofrecen

 

Vectr es un programa gratuito ideal para principiantes en diseño gráfico y lo mejor de todo es que está disponible para cualquier dispositivo, por lo que podrás terminar tu proyecto artístico desde el lugar en el que te encuentres. Entre sus atributos se encuentra su interfaz intuitiva y fácil de usar, su integración con WordPress y tiene conectividad con cualquier sistema operativo Windows, Chrome OS, Linux y Web.

Krita: Si lo tuyo es más la ilustración digital, este software de código abierto simplemente te encantará. Además, si tienes gusto por la creación de cómics, dentro de sus atributos encontrarás plantillas listas para usar. Entre sus herramientas más destacadas se encuentran la máscara de capas, amplia paleta de colores y motores de pinceles únicos.

Designrr: Si estás en la búsqueda de un programa de diseño gráfico que te ayude a crear libros electrónicos, esta es la mejor opción. Con Designrr podrás transformar tus blogs, videos, archivos de PDF y hasta tus podcast en atractivos ebooks. Su uso es bastante sencillo, pues solo requiere una revisión de contenido generada como borrador, elegir la plantilla que más te guste y personalizar el diseño con imágenes, gráficos o cualquier otro recurso que creas necesario.

Infogram: Las infografías son un recurso ideal para mostrar una idea o explicar un tema de forma resumida, organizada y atractiva. Sin embargo, es importante que los elementos que ocupes sean los indicados para dar a entender sin complicaciones lo que tratas de mostrar. Por ello, no está de más que recurras a un programa de diseño gráfico especializado en infografías. Infogram es una excelente opción en la que podrás importar los datos que necesites y empezar a generar tus propios gráficos. Es muy fácil de usar.

GIMP: Este es un programa disponible para todos los sistemas operativos, con el que puedes editar y retocar fotografías. La herramienta ofrece tutoriales, al tiempo que soporta un gran número de formatos de imagen; como ejemplo, es posible importar proyectos en formato PSD. Algunas de las funciones incluidas son: rotación del lienzo, pinceles, pintura de simetría, edición y visualización de metadatos. Si quieres aprender más sobre la aplicación, GIMP te brinda un curso con tutorías y un certificado por solo 39 €.

Canva: Esta es seguramente la herramienta de diseño favorita de los especialistas que cuentan con un presupuesto limitado. Por su excelente usabilidad, es posible crear imágenes rápidas y de calidad. Además, te ofrece plantillas predeterminadas para la creación de imágenes. Con la versión gratuita puedes elegir entre más de 8.000 plantillas e incluso crear un equipo de trabajo con el cual compartir diseños y carpetas. Regístrate con tu cuenta de Facebook.

https://blog.hubspot.es/marketing/programas-diseno-grafico

 

Inkscape es un software de vectores gráficos de calidad profesional para Windows, Mac OS X y GNU/Linux. Es usado por diseñadores profesionales y aficionados de todo el mundo para crear una gran variedad de gráficos como ilustraciones, iconos, logos, diagramas, mapas y diseños web. Inkscape es un software libre y de código abierto, que utiliza SVG (Scalable Vector Graphic), el estándar abierto de W3C, como formato nativo.

https://inkscape.org/es/acerca-de/