Sinopsis

En la era de la imagen, el perfil de diseñador gráfico se ha convertido en uno de los más demandados entre los profesionales generadores de contenidos digitales.

En estos tiempos digitales, el diseñador gráfico debe explorar las posibilidades creativas de cada medio y optimizar la composición gráfica para lograr una mejor comunicación visual. Aunque la mayoría de los proyectos de diseño gráfico se elaboran con herramientas digitales y programas de diseño, ello no implica necesariamente que estén bien preparados para su correcta difusión en pantallas digitales.

A las competencias específicas del diseño gráfico tradicional es preciso añadir la creación de diseños optimizados para su difusión final en los nuevos medios y dispositivos digitales (sitios Web, redes sociales, smartphones, tablets, soportes publicitarios online, canales de marketing, etc.).

Este libro aúna los conocimientos básicos de diseño gráfico tradicional con contenidos específicos para diseñar en la nueva era digital, como el uso de tipografía digital, el tratamiento informático del color, las técnicas de vectorización, la optimización de imágenes para la Web, el cálculo de la resolución más adecuada para cada medio, entre otros temas.

Incluye, además, numerosos ejemplos a toda página de proyectos profesionales de diseño gráfico digital aplicados, con colaboraciones de renombrados diseñadores y de estudios de diseño gráfico de todo el mundo.

El diseño gráfico ha evolucionado, se ha transformado en diseño gráfico digital. La creatividad gráfica ha dado el salto del papel al píxel y al diseño multipantalla, al diseño de auténtico alcance global.

Índice

Introducción

Capítulo 1
Diseño gráfico y comunicación visual

La comunicación visual
¿Qué es el diseño gráfico?
Los orígenes del diseño gráfico
Johannes Gutenberg
El origen del término diseñador gráfico
Diseño gráfico ahora es diseño de comunicación
Consejo Internacional de Asociaciones de Diseño Gráfico
Diseñador gráfico o diseñador de comunicación
El proceso de diseño de productos gráficos digitales
La etapa analítica
El brief para el diseño de contenidos digitales
Recopilación de material e información
La etapa creativa
Técnicas de conceptualización
El boceto analógico o digital
Etapas de desarrollo en proyectos de diseño gráfico digital
Presentación de prototipos en maquetas digitales
El mockup de presentación final

Capítulo 2
Diseño gráfico por ordenador

Diseño gráfico y tecnologías digitales
Orígenes del diseño gráfico digital
La interfaz de usuario GUI
Douglas Engelbart
Desktop Publishing y la autoedición
Pioneros del diseño gráfico digital
El hardware
Software para diseño gráfico
Tipología de imágenes y gráficos digitales
Las imágenes de mapa de bits
Software de diseño vectorial
Software libre para diseño
Elegir el software más adecuado
Mac o PC para diseño gráfico
Estaciones de trabajo o workstations

Capítulo 3
Gráficos vectoriales

Ventajas del formato vectorial
Metodología vectorial básica
Selección de objetos
Mover objetos seleccionados
Transformación de objetos
Organización de objetos
Cambiar el orden en pantalla
Modo de visualización en contornos
Dibujo y edición vectorial
Dibujo de formas básicas
Nodos, segmentos y trayectos
Trayectos abiertos y trayectos cerrados
Edición de nodos
Tipología de los nodos
Componentes de curvas Bézier
Crear diseños con formas básicas
Fusionar para crear
Técnicas de vectorización de imágenes
Vectorización manual
Vectorización automática
Vectorizaciones artísticas
Tipos de formatos gráficos
Gráficos vectoriales en la Web
Optimizar el diseño para exportar a SVG

Capítulo 4
El color digital

Principios básicos del color
Clasificación de los colores
El círculo cromático
Modelos de color aditivos y sustractivos
Modo de color RGB
Espacios de color sRGB y Adobe RGB
Modo de color CMYK
Atributos del color
Colores acromáticos y escala de grises
Modelos de color HSV y HSL
La profundidad de color digital
Combinaciones cromáticas en diseño
Armonías de color
Edición de armonías de color digitales
Esquemas y combinaciones de color online
El lenguaje visual del color
Legibilidad cromática
Texto, color y accesibilidad en la web
Psicología del color
Temperatura de los colores
Simbología del color
Sistemas de codificación del color
Colores directos
El estándar PANTONE
Referencias de color PMS
Convertir referencias RGB a PMS
Códigos de color para Internet
Notaciones de color RGB
Códigos hexadecimales de color
Identificar colores en formato digital
Herramientas de captura de color online
Inspiración en color
Reemplazar colores de forma automática
Degradados de color
Del diseño plano al degradado
Material Design
Esqueumorfismo
Descarga de degradados

Capítulo 5
Tipografía y diseño

Anatomía tipográfica
La caja tipográfica
Partes de la letra
Líneas de referencia estructural
Familia tipográfica y fuente
Estilos o variables visuales
Clasificación tipográfica
Clasificación Vox-ATypI
Enciclopedia e inspiración tipográfica online
Claves para elegir la tipografía adecuada
Tamaño y jerarquía visual
Emparejar fuentes tipográficas
Tipografía digital
Fuentes digitales y licencias de uso
Licencia de uso en fuentes gratuitas
Descarga de fuentes libres
Identificación de fuentes por imagen
Identificación de fuentes web desde el navegador
Formatos tipográficos digitales
Fuentes para impresión y fuentes para pantalla
Formatos de fuentes de escritorio
Fuentes OpenType-SVG o color fonts
Tipografía en la web
Fuentes web seguras o web safe fonts
La regla @font-face
Servicios de alojamiento de fuentes online
Formatos de fuentes web
Gestión de fuentes digitales
Instalación de fuentes
El mapa de caracteres
Pangrama
Fuentes de símbolos o dingbats
Ejercicios tipográficos
Combinación de peso y tamaño
Texto multicolor
Combinaciones tipográficas mixtas
Tipografía circular o en trazado
Herramientas de edición de textos
Software de autoedición
Tipos de objetos de texto
Visibilidad y legibilidad tipográfica
Ajuste de kerning y tracking
Interlineado o leading
Estilos de composición o alineación
Lorem ipsum
Trazado de fuentes tipográficas

Capítulo 6
Diseño de la identidad gráfica digital

Elementos básicos de identidad visual
La marca
El logotipo
Variantes de la marca gráfica
Recursos y galerías de logotipos
Marcas e identidades dinámicas
El diseño de logotipos
Autodiseño del logotipo
Recomendaciones para diseñar logotipos
El logotipo para medios digitales
Variantes y articulaciones del logo digital
Unidades de composición
Versión primaria y secundaria del logo
Diseño responsive o adaptativo
Diseño de logotipos responsive
Técnicas para crear el logo adaptativo
Versiones recomendadas del logo responsive
Logos responsive en formato vectorial
El manual de identidad digital
Presentación y construcción del logotipo
Variantes compositivas y tamaños autorizados
Área de protección del logotipo
Color corporativo y aplicaciones cromáticas
La tipografía corporativa
Usos incorrectos del logotipo
Recursos de la marca digital
El manual de identidad interactivo

Capítulo 7
Fotografía e imagen digital

Recursos fotográficos online
Fotografía de stock
Apropiación de imágenes y propiedad intelectual
Licencias Creative Commons
Licencia de reconocimiento CC BY
Licencia de dominio público
Bancos de imágenes con licencia CC0
Formatos de imagen de mapa de bits
Técnicas para integrar fotografías en un diseño
Recorte y encuadre
Fotografías a sangre
Fotografías silueteadas
Insertar fotografías dentro de objetos vectoriales
Máscara de recorte o Powerclip
Fotografía dentro de tipografía
Fotografía dentro de varios de objetos
Fotografías en collage
Técnicas para integrar fotografías y textos
Lavado de imágenes
Bocadillos gráficos o masas de color plano
Integración cromática
Efecto duotono con capa de ajuste
Convertir imágenes a duotono online

Capítulo 8
Diseño gráfico optimizado para Internet

El diseño gráfico multipantalla
Resolución adecuada para imágenes en pantalla
Formatos de archivo de imagen para Internet
Optimización de imágenes para la Web
Compresión con y sin pérdida
Herramientas de optimización de imágenes online
Imagen y relación de aspecto
Ajuste del formato de imagen de acuerdo con el ratio de aspecto
Elementos gráficos comunes en el diseño web
Configuraciones recomendadas para un diseño gráfico optimizado
Publicidad de tipo display para marketing digital
El banner publicitario
Herramientas para la creación de banners animados
Kit de gráficos para social media
Redimensionar imágenes para redes sociales