DIALOGA DISEÑO&COMUNICACIÓN - Empresa de diseño web Tudela (Navarra). Diseño gráfico y comunicación. - Programas utilizados en el diseño gráfico de etiquetas

Para diseñar una etiqueta se necesitan habilidades técnicas para convertir los bocetos iniciales en un original que se pueda reproducir con garantías. Estas habilidades consisten en el manejo de programas de diseño gráfico de Adobe: Illustrator, Photoshop e Indesign.

Después de entregar los artes finales de las etiquetas, normalmente el cliente necesita las imágenes de los productos que llevan estas etiquetas. Para este trabajo utilizo programas de modelado 3D para crear las imágenes como Cinema 4D y Adobe Dimension.

Finalmente el cliente también me pide el desarrollo del catálogo, fichas de los productos y webs de presentación. Para los catálogos y fichas utilizo Adobe Indesign y para las webs utilizo Visual Studio Code.

1.- Adobe Illustrator

Con esta aplicación preparo los elementos gráficos por separado como logotipos, pictogramas e ilustraciones.

Diseño de los logotipos de la gama de productos con el programa Adobe Illustrator. A la izquierda de la imagen, pruebas de degradados

2.- Adobe Photoshop

Los elementos fotográficos como los fondos de la etiqueta los preparo en este programa. En la imagen se puede ver el diseño de cada fondo por duplicado: uno es para la parte frontal de la etiqueta y el otro, desenfocado, para la parte trasera donde colocaré los textos legales e información técnica.

Mesas de trabajo con los fondos diseñados para la etiqueta. Parte central de la imagen: paleta de capas con las imágenes que coloco en distintas capas y mezclo con máscaras de capa. También uso filtros para modificar el aspecto de las imágenes.

3.- Adobe Indesign

Cuando tengo todos los elementos preparados, uso esta aplicación de diseño para colocarlos y, junto con los textos, maquetar la composición final. Este programa me permite incluir mucho texto en diferentes idiomas y ser muy preciso con los tamaños de texto exigidos por la normativa de las administraciones públicas.

Cuando el diseño ya está finalizado preparo el arte final para su producción en imprenta. Es un trabajo que los diseñadores gráficos suelen delegar en las imprentas pero que yo siempre realizo por que tengo la ventaja de haber estudiado cuando los artes finales se realizaban sin ordenador y porque también he trabajado en una imprenta desarrollado esta tarea.

Página con el diseño gráfico editable de la etiqueta. A la derecha de la imagen: paleta de capas donde se puede apreciar las miniaturas de todas las páginas con una etiqueta por cada referencia.

4.- Cinema 4D

Con este programa modelo el producto en 3D (tres dimensiones) para colocar mi diseño. Así puedo ver el resultado final de manera muy real y ver mejoras que con el diseño en dos dimensiones es más difícil percibir.

Vista de un modelado 3D de un bote de anclaje químico.

5.- Adobe Dimension

En esta aplicación coloco modelos 3D, les aplico texturas y añado luces para iluminar el bodegón igual que en un estudio de fotografía físico. Por último coloco las etiquetas a los botes y renderizo la imagen para obtener imágenes de pruebas de diseño para enseñar al cliente y los archivos de imagen que usan los departamentos de ventas de los clientes.

Son imágenes similares a una fotografía real perfectamente válidas para utilizar en los los catálogos, newsletters y webs del cliente.

Vista del bodegón 3D de los anclajes químicos con el diseño gráfico de las etiquetas.

6.- Adobe Photoshop

Las imágenes renderizadas las edito en Adobe Photoshop para darles los últimos retoques y asignarles el formato, el modo de color, los perfiles de color, etc. adecuados para cada uso, ya sea impresión o pantalla. Para el uso en diseño web también las optimizo en tamaño y peso.

Una de las funcionalidades que más uso en Adobe Photoshop es la preparación de la imagen en función de las diferentes salidas: impresión, pantalla y pantalla Internet (web y correo-e).

7.- Adobe Indesign

Con las imágenes 3D de los botes y los textos facilitados por el cliente vuelvo a utilizar el programa Indesign para diseñar el catálogo comercial.

Catálogo del cliente en pdf

Vista de dos páginas enfrentadas de un catálogo comercial en inglés, francés y alemán. A la derecha de la imagen: con la funcionalidad de la paleta de capas preparo en el mismo documento el mismo catálogo en español, francés y portugués.

8.- Adobe XD

Siguiendo con la promoción del producto, planteo con el programa Adobe XD el diseño de la página web de lanzamiento y el newsletter para enviar por correo electrónico.

Página web del cliente

Vista de una página web de lanzamiento de producto. A la derecha de la imagen la vista en dispositivo móvil

9.- Visual Studio Code

Una vez está aprobado el borrador de la página web, utilizo este programa para diseñar con código la página web o el correo-e. Para páginas webs de lanzamiento de productos que no necesitan conexión a base de datos, las desarrollo con HTML5, CSS3 y JavaScript. Siempre utilizo el framework Bootstrap para que la página web sea robusta, ligera y con todas las garantías para que visualice correctamente en cualquier dispositivo móvil.

Ver página web del cliente

Vista del programa Visual Studio Code. En el centro de la imagen: archivo HTML de una página de lanzamiento de bridas de Nylon® en alemán con filtro en la parte superior (desarrollado en en JavaScript). A la derecha de la imagen: previsualización de la página en vivo.

También te puede interesar