Arte digital

Versión para imprimir.

por Gilberto Pacheco Gallegos

Instrucciones de navegación

1. Conceptos básicos

Versión para imprimir.

En esta lección se presentan conceptos básicos del diseño gráfico.

A. Introducción al diseño gráfico

B. Diseño gráfico

C. Funciones

Función comunicativa

El diseño gráfico ordena la información para hacerla más clara y legible a la vista del receptor.

Función publicitaria

Intenta convencer al receptor con un mensaje visualmente atractivo.

Función formativa

El orden del mensaje puede tener a fines educativos y docentes.

Función estética

Forma y funcionalidad son dos elementos propios del diseño gráfico, cuyo producto tiene que servir para mejorar algún aspecto de nuestra vida y también para hacernos más agradable su uso.

D. Aplicaciones

  • Diseño gráfico de identidad visual.

  • Marketing y diseño gráfico publicitario.

  • Diseño gráfico de la interfaz de usuario.

  • Diseño gráfico en publicaciones editoriales.

  • Diseño gráfico de packaging.

  • Diseño gráfico de movimiento.

  • Diseño gráfico ambiental.

  • Diseño gráfico para arte e ilustración.

  • Fuente: https://es.wikipedia.org/wiki/Dise%C3%B1o_gr%C3%A1fico

E. Introducción a la creatividad

F. Creatividad

  • Capacidad de generar nuevas ideas o conceptos, de nuevas asociaciones entre ideas y conceptos conocidos, que habitualmente producen soluciones originales.

G. Functiones de la creatividad

H. Aplicaciones de la creatividad

  • Adoptar un nuevo enfoque al considerar un problema.

  • Diseñar o modificar un proceso o sistema.

  • Inventar un nuevo producto o servicio.

  • Encontrar nuevos usos para cosas existentes.

  • Mejorar las cosas.

  • Inventar o redefinir un concepto.

  • Fuente: https://www.importancia.org/creatividad.php

2. Elementos del diseño gráfico

Versión para imprimir.

En esta lección se introducen los elementos del diseño gráfico.

A. Texto

  • Se puede usar como un elemento gráfico.

  • En ocasiones hay que desarrollar una nueva familia con características y colores propios.

  • Los podemos encontrar en logotipos.

Texto con formato visual

B. Forma

  • Cualquier cosa que está definida por límites.

  • 2 categorías:

    Geométricas

    Geométricas, uniformes, perfectas, como círculos, cuadrados, triángulos.

    Orgánicas

    No tienen reglas.

Texto con formato visual

C. Color

  • Usa colores opuestos o contiguos en el círculo cromático.

  • Considera usar una herramienta en línea gratuita para la elaboración de esquemas como:

Esquemas de colores

D. Imagen

  • Crear imágenes es el objetivo principal del diseño gráfico.

  • También se pueden añadir imágenes ya existentes.

Esquemas de colores

E. Figura

  • Es un elemento que existe en un espacio o campo destacándose en su interrelación con otros elementos.

Figura de zapatos tenis

F. Fondo

  • Todo aquello que no es figura, es la parte del campo que contiene elementos interrelacionados que sostienen a la figura que por su contraste tienden a desaparecer.

Mano sobre fondo borroso

G. Pregnancia

  • Cualidad que poseen las figuras de distinguirse fácilmente.

  • Figuras tales como el cuadrado, el círculo o incluso el triángulo equilátero cuentan con mayor pregnancia.

Rebanadas de círculos formando triángulos

H. Simplicidad

  • Transmitir de una forma clara y concisa.

  • Los buenos diseños no se ven.

  • Los diseños complicados nos obligan a un esfuerzo que nos parece artificial.

Flor simple

I. Proximidad

  • Cuando varios elementos se encuentran próximos, se convierten en una unidad visual única.

Figuras en grupos

J. Semejanza

  • Tenemos la tendencia de agrupar los elementos que son similares entre sí, ya sea por forma, color, tamaño o textura.

  • La semejanza ayuda a nuestro cerebro a percibir imágenes cohesivas.

Figuras relacionadas por color

K. Contraste

  • Convivencia de elementos claramente diferentes entre sí (grande vs. pequeño, luz vs. oscuridad, etc.) para crear un interés visual.

  • Sin contraste, nuestros diseños son apagados, aburridos y difíciles de entender.

Paraguas que contrasta por color

L. Continuidad

  • Es el principio por el que el ojo es atraído por un sendero, línea o curva.

  • Se puede utilizar para apuntar hacia un elemento secundario del diseño.

Aves apuntando

M. Psicología del color

Paraguas que contrasta por color

3. Fases del proceso de diseño

Versión para imprimir.

En esta lección se presentan las fases del proceso de diseño.

Fuente: https://creatividadymetodologiaeas.blogspot.com/2015/04/fases-del-proyecto-en-diseno-grafico.html#:~:text=Fase%20anal%C3%ADtica&text=Definici%C3%B3n%20del%20problema%20o%20necesidad,existe%20y%20debe%20ser%20redise%C3%B1ado

A. Fases del proceso de diseño gráfico - creativo

  1. 📊 Fase analítica.

  2. 🎨 Fase creativa.

  3. 👩‍🎨 Fase de desarrollo.

B. Fase analítica

C. Definición del problema o necesidad a resolver

  1. 📊 Análisis del estado actual del diseño.

  2. ❌ Si no existe y hay que crearlo.

  3. ✔ Si existe y debe ser rediseñado.

D. Plan de acción detallado

  1. 🎯 Definir objetivos.

  2. 📝 Preparar un programa detallado de actividades.

  3. 👩‍👩‍👦‍👦 Asignar personas encargadas de ejecutar cada actividad.

  4. 📅 Definir los tiempos estimados para cada actividad.

E. Listado de requerimientos

  1. 🔍 Obtener información relevante del cliente.

  2. 🧾 Hacer un listado de requerimientos específicos.

  3. 🚫 Limitaciones.

  4. 📝 Anotaciones especiales.

F. Fase creativa

G. Análisis y síntesis de datos

  1. 📈 Análisis de los datos.

  2. 🔗 Síntesis de los datos.

  3. 👨‍🏫 Preparar propuestas de diseño.

H. Bocetaje inicial o preliminar

  1. 🤔 Se contemplan la mayor cantidad de soluciones de diseño posibles.

  2. 💡 Total expansión creativa.

  3. 🖌 Métodos tradicionales (dibujo con lápiz, pinceles, plumones, etcétera).

  4. 🖥💻 Medios electrónicos (computadoras).

I. Preselección de ideas

  1. 📈 Se evalúan las propuestas iniciales.

  2. 🥇 Se jerarquizan las propuestas.

  3. 🥗 Combinación de ciertos elementos de unas y otras.

J. Evolución de bocetos

  1. 🛠 Las alternativas se refinan o depuran…

  2. 📋 En base a los criterios definidos en un inicio.

K. Elaboración de la presentación

  1. 📈 Se evalúan nuevamente las alternativas de diseño.

  2. 👉 Se escogen no más de cinco alternativas.

  3. 👩‍🎨 Se desarrollan prototipos de las alternativas lo más parecidas al diseño final.

  4. 👨‍🏫 Se presentan y explican claramente las alternativas y prototipos al cliente.

  5. 📃 Las alternativas se pueden justificar en un documento, en base a la información del cliente.

L. Selección de alternativas

  1. 👉 El cliente, después de estudiar detenidamente las propuestas, elige una de las alternativas.

M. Refinado

  1. 🖼 Se afina la alternativa escogida de acuerdo con las opiniones del cliente.

N. Fase de desarrollo

O. Validación del diseño

  1. 🖊 Preparación de estudios de mercado y pruebas que validen el diseño.

  2. 📋 Ejecución de estudios de mercado y pruebas que validen el diseño.

P. Refinado en base a pruebas

  1. 💱 Se realizan ajustes si los estudios de mercado y las pruebas indican que esto es necesario.

Q. Aprobación del diseño final

like

R. Adaptación a diversas presentaciones

presentación 1
presentación 1
presentación 1

S. Preparar documentos para producción

presentación 1

T. Se obtiene la solución final

producto final

4. Composición

5. Derechos de autor

Versión para imprimir.

En esta lección se presentan los derechos de autor.

A. Derechos de autor

Finfografía sobre derechos de autor

  • Esta foto de Autor desconocido está bajo licencia CC BY-SA-NC

B. INDAUTOR

  • El registro y defensa de obras en México está a cargo del Instituto Nacional del Derecho de Autor (INDAUTOR)

  • https://www.indautor.gob.mx/

Logotipo de INDAUTOR

C. Establecer derechos

  • La forma más fácil de establecer derechos en una obra es añadir una leyenda que diga

  • © Año Autor. Todos los derechos reservados.

  • Ejemplo: © 2022 Gilberto Pacheco Gallegos. Todos los derechos reservados.

  • Quien use la obra, necesita una autorización escrita (también llamada licencia) directa del autor, donde se indique a quién se autoriza el uso y con qué derechos (por ejemplo, usar el documento, distribuirlo o hacer cambios).

D. Creative Commons

Licencias Creative Commons

E. Licencias Creative Commons

Licencias Creative Commons

6. Herramientas digitales

Versión para imprimir.

En esta lección se presentan herramientas digitales para el diseño gráfico.

A. Hardware

B. Software

Editores de imágenes de bits

Editores de imágenes vectores

C. Herramientas del entorno

  • Paint.

    Paint

  • Fax y Escaner de Windows.

    Fax y Escaner de Windows

  • Herramienta recortes (Recorte y anotación).

    Herramienta recortes

  • Cámara.

    Cámara

  • Fotos.

    Fotos

  • Paint 3D.

    Paint 3D

  • Visor 3D.

    Visor 3D

D. Calibración de colores

  • El proceso de calibrar la pantalla nos sirve para obtener unos colores en el monitor lo más parecido posible a los que podemos ver con nuestros ojos, para ello haremos uso de un software específico que nos permitirá, mediante la regulación de los colores primarios (rojo, verde y azul), el brillo y contraste, modificar los ajustes de color para acercarnos lo máximo posible a la realidad.

  • Para entornos profesionales el proceso de calibración se realiza para obtener unos colores impresos tal y como los estamos viendo en pantalla, en estos casos es más recomendable realizar estos ajustes mediante instrumentos de hardware como un espectrómetro o colorímetro, estos son mucho más precisos, pero también mucho más costosos.

  • Veamos cómo usar la utilidad de Windows 10 para calibrar la pantalla.

  • Antes de realizar estos ajustes, sería muy recomendable tener el monitor encendido el tiempo suficiente para que coja la temperatura ideal de trabajo, además tendremos que restablecer los ajustes del monitor a valores de fábrica para no interferir en la calibración. En Windows, sería ideal no tener habilitado ninguna configuración especial que interfiera en los colores, como Luz nocturna.

Cómo calibrar la pantalla con la herramienta integrada en Windows 10

  1. En primer lugar, tendremos que abrir la utilidad de calibración de pantalla de Windows 10, para ello podemos escribir calibración en la lupa o hacer clic con el botón derecho en cualquier parte de la pantalla y seleccionamos Configuración de pantalla.

    Calibración 1

  2. Un poco más abajo tendremos la opción de Configuración de pantalla avanzada.

    Calibración 2

  3. Ahora hacemos clic en Mostrar las propiedades de adaptador de pantalla 1.

    Calibración 3

  4. Vamos a la pestaña Administración del color y hacemos clic en el botón Administración del color...

    Calibración 4

  5. Se abrirá la ventana Administración del color y vamos a la pestaña Opciones avanzadas.

    Calibración 5

  6. Ahora hacemos clic en Calibrar pantalla para abrir la herramienta de calibración de color de la pantalla de Windows 10. De esta manera dejaremos abierto también la herramenta de Administración del color para poder ver el nuevo perfil una vez finalizado.

    Calibración 6

  7. Se abrirá la herramienta de calibración de color de la pantalla y hacemos clic en siguiente para comenzar, veremos un aviso que nos indicará lo que anteriormente advertimos, será necesario restablecer los ajustes a fábrica de los valores del monitor. Cómo también será necesario tener abiertos el OSD con los ajustes del monitor, sería recomendable ponerlo en una posición que no nos moleste.

    Calibración 7

  8. Comenzaremos ajustando el valor de gamma, tendemos que ajustar la barra de la izquierda para ajustar la imagen como en la muestra central. Si no estamos satisfechos con el resultado, podemos hacer clic en Restablecer si queremos comenzar de nuevo.

    Calibración 8
    Calibración 8.5

  9. Ahora tendremos que ajustar el brillo para que sea lo más parecido a la imagen central, en este caso tendremos que hacer uso de los ajustes del monitor para aumentar o reducir el brillo y conseguir distinguir la camisa, de la chaqueta y de la X del fondo.

    Calibración 9
    Calibración 9.5

  10. Lo siguiente será ajustar el contraste, haciendo uso de los ajustes del monitor tendremos que aumentar el contraste al valor máximo sin que dejemos de ver los botones y arrugas de la camisa. Si no podemos verlos con la configuración actual, tendremos que bajar el contraste hasta conseguirlo.

    Calibración 10
    Calibración 10.5

  11. El siguiente paso nos ayudará a corregir los colores dominantes para obtener una escala de grises neutros, podemos mirar los ejemplos para hacernos una idea de que color bajar o subir según veamos la escala en nuestra pantalla.

    Calibración 11
    Calibración 11.5

  12. Una vez completada la calibración, podemos ver los ajustes anteriores y compararlos con los actuales haciendo clic en el botón Calibración anterior y Calibración actual. Si no nos gusta el resultado, podemos volver a realizar la calibración y establecer otros valores.

    Calibración 12

Cómo optimizar el texto con ClearType

  • Una vez finalizada la calibración de pantalla con la herramienta integrada de Windows 10, podemos darle una vuelta de tuerca más haciendo que el texto sea más fácil de leer en pantalla. Desde la herramienta de calibración de pantalla, al terminar, nos ofrece la posibilidad de iniciar esta utilidad llamada Optimizador de texto ClearType, que es muy recomendable usar.

  • Si dejamos marcada la casilla y pulsamos en finalizar, se abrirá automáticamente al cerrar la utilidad de calibración de pantalla, veamos que sencillo es ver el texto más nítido y claro en pantalla.

  1. Pulsamos en siguiente para iniciar el Optimizador de texto ClearType.

    Clear Type 1

  2. Comprobará que estamos en la resolución nativa del monitor para una mejor experiencia.

    Clear Type 2

  3. Ahora simplemente tendremos que seleccionar la muestra que mejor se vea en las 5 ventanas que nos ofrecen con opciones.

    Clear Type 3
    Clear Type 3.5

  4. Al seleccionar estas 5 muestras, nos optimizará el texto para mostrarlo mas suave y mejor de manera automática, solo tenemos que hacer clic en Finalizar para terminar.

    Clear Type 4

Como descargar e instalar perfiles en Windows 10

  • Además podemos descargar pefiles ya configurados y añadirlos para usarlos en situaciones concretas. Todos los fabricantes de monitores tienen a disposición de sus usuarios los perfiles de los monitores que venden, por lo que sería ideal descargar el perfil e instalarlo para disponer de una configuración óptima de color.

  • En ocasiones el resultado de los perfiles del fabricante no es el esperado, por lo que podemos realizar los ajustes de color usando la utilidad de calibración de pantalla de Windows 10 como explicamos anteriormente o podemos usar perfiles ya creados que podemos descargar de internet.

    Perfil 0

  • Para añadir un perfil descargado lo haremos desde la misma ventana de Administración del color, para acceder a ella si la hemos cerrado, podemos escribir color en la lupa de Windows 10 y hacemos clic en Administración del color.

  1. En Dispositivo debemos seleccionar el monitor que queremos aplicar el perfil descargado.

    Perfil 1

  2. Debemos tener marcada la opción Usar mi configuración para este dispositivo.

    Perfil 2

  3. Ahora hacemos clic en el botón Agregar...

    Perfil 3

  4. Si queremos usar un perfil que ya tengamos en nuestro equipo, lo seleccionamos de la lista de perfiles ICC.

    Perfil 4

  5. Si lo que queremos es añadir uno nuevo que hayamos descargado hacemos clic en Examinar... para buscarlo en nuestro equipo y hacemos clic en Agregar.

    Perfil 5

  6. Ahora aparecerá en la lista de perfiles asociados a este monitor, para activarlo debemos hacer clic en el botón Establecer como perfil predeterinado.

    Perfil 6

  • Ahora ya tenemos activo el perfil que hemos descargado para funcionar con él.

Calibrar la pantalla o aplicar perfiles para todos los usuarios

  • Tenemos que recordar que la configuración de estos perfiles se almacena individualmente para cada usuario que tengamos en nuestro PC, si compartimos el ordenador con otras personas y queremos aplicar los cambios para todos los usuarios, tendemos que Cambiar los valores predeterminados del sistema.

    Aplicar 1

  • Para esto, y desde la ventana de Administración del color vamos a la pestaña de Opciones avanzadas, abajo del todo tenemos la opción Cambiar los valores predeterminados del sistema... y si hacemos clic en ella, abriremos la ventana Valores predeterimnados del sistema de administración del color, en la que de manera similar a como lo hemos hecho antes, podemos Agregar un perfil, Establecerlo como predeterminado, o en la pestaña de Opciones avanzadas podemos calibrar la pantalla. No olvides marcar la casilla Usar calibración de pantalla de Windows 10 para realizar la calibración.

    Aplicar 2

  • Realizados estos cambios modificaremos la configuración de Windows y quedarán disponibles para todos los usuarios que tengamos activos, ideal si compartimos el equipo en un entorno de trabajo donde la representación real de los colores supone una ventaja para nuestro día a dia, aunque para entornos profesionales lo ideal es usar un espectrómetro o colorímetro, crear un perfil específico con los colores reales y habilitarlo para todos los usuarios.

E. Paletas de colores

  • Una paleta de colores es un conjunto de colores que combinan bien. Las paletas de colores a menudo se usan para diseñar algo con una apariencia consistente. Las paletas de colores son utilizadas por diseñadores de logotipos, diseñadores gráficos, ilustradores, desarrolladores web y otros artistas. Una buena paleta de colores es fundamental para el diseño visual profesional.

  • Una paleta de colores a menudo se diseña a mano. A menudo depende de un diseñador o artista experimentado elegir colores que combinen bien. A través de años de trabajar con diferentes colores, tienen experiencia para saber qué colores funcionan bien juntos y son estéticamente agradables. Aun así, elegir una gran paleta de colores puede ser difícil. Afortunadamente, los algoritmos informáticos pueden ayudar con eso.

  • En este enlace tenemos un generador de paletas https://mybrandnewlogo.com/es/generador-de-paleta-de-colores

  • Fuente: https://mybrandnewlogo.com/es/generador-de-paleta-de-colores

F. Capas

  • Las herramientas gráficas permiten agregar distintos tipos de elementos gráficos como son:

    • Rectángulos

    • Elipses

    • Polígonos

    • Líneas

    • Trazos

    • Textos

  • A cada elemento gráfico se le conoce como capa y puede tapar a otros elementos.

  • Las capas de nivel superior tapan a las capas de nivel inferior.

  • Las herramientas permieten aplicar efectos a cada capa, así como aumentar o disminuír su nivel.

  • Las capas también se pueden agrupar y separar.

Ejemplo de capas

Videos

G. Formas

  • Las herramientas gráficas permiten agregar distintas formas arbitrarias y textos.

H. Trazos

  • Las herramientas gráficas permiten realizar trazos a mano libre y por segmentos parabólicos.

Creación de trazos

I. Vectores

  • Las herramientas gráficas permiten agregar distintos tipos de formas geométricas que se pueden construir con formulas y facilmente pueden modificar su tamaño, como son:

    • Rectángulos

    • Elipses

    • Polígonos

    • Líneas

J. Filtros

  • Los filtros son fórmulas matemáticas que se agregan a los elementos gráficos y permiten:

    • Reducir cambios bruscos en las imágenes.

    • Resaltar bordes

Creación de filtros

K. Máscaras

  • Las máscaras permiten ocultar partes de un elemento gráfico.

Creación de máscaras

L. Efectos

  • Los efectos pueden ser:

    • Difuminados

    • Brillos

    • Reflejos

Creación de efectos

M. Formatos de salida

  • Aparte de los formatos propietarios de las herremientas, por ejemplo el psd, hay otros formatos que se usan entre muchas más herramientas con ciertas características especiales.

    • jpeg
    jpg

    • Joint Photographic Experts Group

    • Un formato viejo, pero muy extendido que maneja pixeles y se adapta bien a fotografías e imágenes realistas.

    gif

    • Graphic Interchange Format

    • Un formato viejo, pero muy extendido que maneja pixeles y se adapta bien a dibujos creados con herramientas gráficas que manejan transparencias. También permite animaciones.

    png

    • Portable Network Graphics

    • Un formato un poco más moderno y muy extendido que maneja pixeles y se adapta bien a dibujos creados con herramientas gráficas que manejan transparencias. También permite animaciones.

    webp

    • Portable Network Graphics

    • Un formato moderno con pixeles y mucha compresión, muy adecuado para la web.

    svg

    • Scalable Vector Graphics

    • Un dtd de sgml o xml (archivo de texto con etiquetas) que representa figuras geométricas y rutas vectorizadas que facilmente puede adaptarse a distintos tamaños sin perder resolución.

Ejemplo de SVG

Salida

Ejemplo de svg

Código

<svg version="1.2"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 640 480" width="640"
 height="480">
 <title>ejemplo svg</title>
 <style>
  .s0 { fill: #ff0000 }
  .s1 {
   fill: #00ff00;
   stroke: #0000ff;
   stroke-width: 8 }
  .s2 { fill: #ff00ff }
 </style>
 <rect id="Forma 1" class="s0"
  x="57" y="213" width="443"
  height="146" rx="10"></rect>
 <ellipse id="Forma 2" class="s1"
  cx="261" cy="164" rx="104"
  ry="91"/>
 <path id="Capa 1" class="s2"
  d="m456 161.2l-125.1
   74.2l-1.8-145.5z"/>
</svg>