DISEÑO

GRÁFICO
DIGITAL
UNIDAD 1:
Introducción al Diseño Vectorial

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 1. Introducción al diseño vectorial

Los Gráficos Digitales, forman parte de

una llamada “Composición Gráfica”, que,
constituida con elementos textuales, tra-
bajan conjuntamente para dar un men-
saje a los espectadores o usuarios finales.

Las imágenes se presentan en una

gran variedad de formas: ilustraciones,
fotografías, diagramas, iconos, etc.Cada
una de ellas con su propia personalidad y
funcionalidades, pero todas ellas con un
factor en común: su naturaleza digital.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 Ilustración
de Malika Favre

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires
Universidad Tecnológica Nacional | Facultad Regional Buenos Aires
Existen dos tipos principales de
imágenes digitales:

• Los mapas de bits, en los que la ima-

gen se crea mediante una rejilla de pun-
tos de diferentes colores y tonalidades;

• Los gráficos vectoriales, en los que la

imagen se define por medio de diferen-
tes funciones matemáticas. En esta uni-
dad nos ocuparemos de saber que son las
imágenes vectoriales, qué características
tienen y cuáles son los diferentes tipos.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 2. ¿Qué es una imagen vectorial?

Se definen matemáticamente como

una serie de puntos unidos por líneas.

Las imágenes vectoriales, también

conocidas como gráficos orientados a
objetos, son el segundo gran grupo de
gráficos digitales. Son más simples que
los gráficos de mapas de bits, ya que en
ellos las imágenes se almacenan y repre-
sentan por medio de trazos geométricos
controlados por cálculos y fórmulas ma-
temáticas, tomando algunos puntos de
la imagen como referencia para construir
el resto.
Universidad Tecnológica Nacional | Facultad Regional Buenos Aires
 Las imágenes se forman a partir de
vectores, objetos formados por una se-
rie de puntos y líneas rectas o curvas.
Por eso, las imágenes vectoriales son la
representación de uno o varios objetos
geométricos, como líneas, polígonos, cír-
culos, estrellas, espirales, etc. Cada objeto
es una entidad completa con propieda-
des tales como color, forma, contorno,
tamaño y posición en la pantalla, que es-
tán incluidas en su definición

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 Por ejemplo, una línea se define en
un gráfico de mapa de bits median-
te las propiedades de cada uno de los
píxeles que la forman, mientras que
en un gráfico vectorial se hace por la
posición de sus puntos inicial y final y
por una función que describe el cami-
no entre ellos.

Considerando que cada objeto es

una entidad completa, se puede mo-
ver, cambiar sus propiedades una y
otra vez manteniendo su claridad y
nitidez originales, sin afectar a los res-
tantes objetos de la ilustración.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 La principal aplicación de los vectores
es el diseño gráfico, en los programas
de dibujo técnico, o modelamiento de
objetos tridimensionales.

Su introducción en las páginas web

supuso un considerable avance, ya que
permiten incluir gráficos de tamaño
modificable sin pérdida de calidad,
muy útiles en logotipos, planos, dia-
gramas, etc.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires
 PRINCIPALES APLICACIONES

1 Diseño animación e ilustración

En la actualidad, muchos ambientes

de tercera dimensión son compuestos
por gráficos vectoriales que confor-
man distintos tipos de aplicaciones.
También son ampliamente utilizados
para animaciones 2D en diseño web
por su facilidad de uso y su bajo peso.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

2 Documentos digitales
Permiten la descripción grafica de un
documento digital, sin la pérdida de
calidad de la imagen por aplicaciones
o transformaciones de forma.

3 Videojuegos
Utilizados generalmente en la pro-
ducción de ambientes virtuales de tres
dimensiones.

4 Tipografía
Las fuentes son archivos tipográficos
que utilizan en la mayoría de las oca-
siones imágenes vectoriales. Algunos
de los formatos más conocidos son
TrueType, OpenType y PostScript.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 PRINCIPALES FORMATOS DE LOS GRÁFICOS
VECTORIALES:
1 • SWF Adobe flash: utilizado para gráfi-
cos y animaciones 2D para internet.

2 • AI Adobe Illustrator: Para gráficos e

ilustración para web e impresión.

3 • CDR Corel Draw: Utilizado generalmen-

te para diseño y autoedición para impresos.

4 • PDF Adobe Acrobat: Para intercambio

de documentos y flujos de trabajo.

5 • Post Script: Generalmente se utiliza en

impresión e intercambio de archivos.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 3. Características

Cada vector en un gráfico vectorial tiene una línea de contorno, con

un color y un grosor determinados, y está relleno de un color a elegir.

Las imágenes vectoriales se almacenan como una lista que describe

cada uno de sus vectores componentes, su posición y sus propiedades.

Los gráficos vectoriales son independientes de la resolución, ya que

no dependen de una retícula de píxeles dada. Por lo tanto, tienen la
máxima resolución que permite el formato en que se almacena.

Almacenan las imágenes en archivos muy compactos, ya que sólo se

requiere la información (fórmulas matemáticas) necesaria para gene-
rar cada uno de los vectores.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 Cada objeto viene definido por sus propias fórmulas matemáti-
cas y se maneja independientemente del resto, pudiendo escalarse,
distorsionarse y cambiarse de forma o de posición sin afectar para
nada los otros elementos del dibujo.

Se puede controlar con gran precisión la forma, orientación y or-

denación de los elementos.

Cualquier efecto que se aplique a los objetos puede rectificarse

en cualquier momento, ya que el dibujo es siempre editable. Esto
no ocurre en las imágenes de mapas de bits, en las que una vez pin-
tado un elemento ya no es posible modificarlo.

Es fácil reutilizar un dibujo o una parte del mismo en otros pro-

yectos. Basta copiarlo y pegarlo en un nuevo fichero o en uno ya
existente.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 Los objetos del gráfico pueden fusionarse fácilmente entre sí,
creando una serie de formas intermedias. También Se puede re-
lacionar de diferentes formas con el resto de objetos del gráfico
(agrupar, separar, recortar, intersectar, etc.).

Se puede ordenar las formas de cualquier manera si está en su-

perposición unas con otras.

Permiten un manejo de textos muy avanzado, ya que admiten

fuentes TrueType, que también son objetos vectoriales. Además, las
letras se pueden convertir en contornos editables, descomponien-
do un texto en los objetos vectoriales que lo constituyen. Una vez
convertidas las letras en objetos, ya no hará falta tener instalada la
fuente para seguir editando los contornos, porque ya no serán le-
tras, sino objetos dentro del gráfico vectorial, pudiendo ser modifi-
cadas como tales.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 Se pueden incluir bitmaps (imágenes en mapa de bits, ejemplo:
una imagen de textura) en un dibujo vectorial.

Un vector puede exportarse a un formato de mapa de bits están-

dar, como GIF o JPG.

El principal inconveniente de las imágenes vectoriales es que

tiene un aspecto más frío que los gráficos de mapa de bits, con su
contorno demasiado perfecto, que los hace a veces poco naturales,.

Otros inconvenientes de este tipo de gráficos son su falta de efi-

cacia para representar imágenes de tipo fotográfico, la dificultad
que presenta para tratar algunas efectos (sombras, luces, etc...) y
que cuando son muy grandes o muy complejas pueden volverse
extremadamente difíciles de manejar por los programas gráficos y
por los medios de impresión.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 4. Tipos

Existen diferentes tipos de vectores o, expresándolo de otro

modo, diferentes métodos matemáticos de describir una imagen.

Si es necesario describir la trayectoria de una curva se pueden

utilizar uno de estos métodos matemáticos: Las CURVAS BÉZIER.

Este tipo de curvas fue desarrollado por Pierre Bézier por encargo
de la empresa de automóviles Renault™ que buscaba una represen-
tación matemática para definir las transiciones suaves en la curva-
tura de las líneas de sus automóviles.

Estas líneas o curvas bézier son muy manejables ya que permiten

muchas posibilidades por su plasticidad.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 La versatilidad de las mismas las convierten en una manera muy
útil para trabajar también con textos ya que se pueden modificar y
deformar sin límite, a cada letra se le pueden asignar contornos edi-
tables además de poder descomponer la misma en varios objetos.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 La curva queda definida por los nodos o puntos de anclaje y por
manejadores o manecillas (invisibles en el gráfico final) que defi-
nen y modelan su forma. Para modificarlas simplemente hay que
mover los manejadores hasta que consigamos la curva deseada.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

 Los trazados pueden tener dos tipos de puntos de ancla:

Puntos de vértice: un trazado cambia de dirección repentinamente.

Puntos de suavizado: los segmentos del trazado se conectan
como una curva continua.

Puede dibujar un trazado utilizando cualquier combinación de

puntos de vértice y de suavizado. Si dibuja el tipo de punto equivo-
cado, podrá modificarlo.

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires
 Bibliografía utilizada y sugerida

• Alan Swann, “Bases del Diseño

Gráfico”. Editorial GG 1995

• Maggie Gordon, Manuel del Diseño

Gráfico Digital. Editorial Rústica 2007

• Pablo Katcheroff, Diseño Gráfico,

Manuales Users 2005

• Anna María López, Curso Diseño

Gráfico. Fundamentos y Técnicas. Ed.
ANAYA 2013

Universidad Tecnológica Nacional | Facultad Regional Buenos Aires