Diplomado virtual

Diseño Digital

Guía didáctica - Módulo 2

Imagen: color y vectorización de imágenes.

Fuente: autor.
Guía didáctica

Color y vectorización
de imágenes
Se espera que, con los temas abordados
en la guía didáctica del módulo 2: Color y
vectorización de imágenes, el estudiante
logre la siguiente competencia específica:

➢ Comprender la teoría del color y el

manejo de la vectorización para aplicar
color en los trabajos de ilustración e
imágenes vectorizadas.
 Contenidos temáticos
Los contenidos temáticos, para desarrollar en la guía didáctica
del módulo 2: Color y vectorización de imágenes, son:

Herramientas
de Herramientas
Teoría del Aplicación de
degradado y de pluma,
color color
fusión de pincel y trazo
formas
Teoría del color
Fue Isaac Newton (1641-1727) quien tuvo las primeras evidencias (1666)
de que el color no existe. Encerrado en una pieza oscura, Newton dejó
pasar un pequeño haz de luz blanca a través de un orificio.

Interceptó esa luz con un pequeño cristal, un prisma de base triangular, y

vio (percibió) que al pasar por el cristal el rayo de luz se descomponía y
aparecían los seis colores del espectro reflejados en la pared donde incidía
el rayo de luz original: rojo, anaranjado, amarillo, verde, azul, añil y violeta.
Imagen: rayos de luz.
Fuente: De los Santos (2010, p. 1).

El color es pues un hecho de la visión que resulta de las diferencias de percepciones del ojo a distintas longitudes
de onda que componen lo que se denomina el «espectro» de luz blanca reflejada en una hoja de papel. Estas
ondas visibles son aquellas cuya longitud de onda está comprendida entre los 400 y los 700 nanómetros; más allá
de estos límites siguen existiendo radiaciones, pero ya no son percibidos por nuestra vista (De los Santos, 2010).

De los Santos, A. (2010). Fundamentos visuales 2: La teoría del color. Grupo IDAT Diseño
Gráfico. https://belgranotipografia.files.wordpress.com/2010/05/apunte2_
clasificacion_tipografiamb.pdf
Síntesis aditiva y
Los colores se dividen en colores luz y colores
síntesis sustractiva pigmento, cada uno de ellos proporciona diferentes
posibilidades para trabajos gráficos.

Colores aditivos
Red, green y blue (RGB) son, por ejemplo, los de los
focos de un escenario que se usan para conseguir
una iluminación de un color concreto. También los
que usan las pantallas, mirando con una lupa la

Imagen: RGB vs. CMYK. pantalla de un ordenador o de una televisión se

Fuente: Anibaldesigns.
pueden ver puntos de color rojo, verde y azul (RVA o
RGB en inglés). La suma de los tres es el blanco, la
ausencia de todos, el negro (la oscuridad). También
son los que se usan para imágenes digitales.
Síntesis aditiva y
síntesis sustractiva
Colores sustractivos
Cyan, magenta, yellow y key [black] (CMYK) son los que
usa, por ejemplo, un pintor de paredes para mezclar los
colores y son a los que nos referiremos en dibujo. La suma
de los tres es el negro, la ausencia de todos, el blanco (el
papel). También son los que se usan en una imprenta.
Mirando con una lupa una revista en color se pueden ver
puntos de color cian, magenta y amarillo. También se ven Imagen: RGB vs. CMYK.
Fuente: Anibaldesigns.
puntos de color negro. Las imprentas usan el negro además
de los tres colores primarios porque las letras son
habitualmente de ese color (CMAN o CMYK en inglés). Son
los colores que se usan para la impresión.
 Propiedades del color
Las propiedades del color son básicamente,
elementos diferentes que hacen único un
determinado color, le hacen variar su aspecto y
definen su apariencia final. Ellas están
basadas en uno de los modelos de color más
aceptados actualmente, realizado por Albert
Münsell en 1905.

1. Matiz: es la cualidad por la cual

diferenciamos y damos su nombre al color, es
Imagen: matiz.
Fuente: Anibaldesigns.
el estado puro, sin el blanco o el negro
agregados.
 Propiedades del color
2. Valor o luminosidad: es un término que se usa
para describir cuán claro o cuan oscuro parece un
color y se refiere a la cantidad de luz percibida.

3. Saturación o brillo: esta propiedad diferencia un

color intenso de uno pálido. Se puede concebir la
Imagen: valor o luminocidad.
Fuente: Anibaldesigns. saturación como si fuera la brillantez de un color.
También puede ser definida por la cantidad de gris
que contiene un color: mientras más gris o más
neutro es, menos brillante o menos saturado es, y,
por lo tanto, menos vivo.

Imagen: saturación o brillo.

Fuente: Anibaldesigns.
Escala de valores
Cuando hacemos mención del término acromático estamos
hablando de los niveles de grises que existen entre el blanco y
el negro. En la escala podemos hablar de 9 niveles que
comenzarán con el blanco y finalizarán en el negro.
En los tres primeros niveles nos encontraremos con la escala
de más alto valor y en los tres siguientes hablaremos de la
escala intermedia o de valor mediano, los últimos tres serán los
que pertenezcan a la escala de menor valor.
Cuando utilizamos o hablamos de la escala monocromática
estamos haciendo referencia a un solo color, y las variaciones

Imagen: escala de valores.

se producirán debido a los niveles de valoración y saturación.
Fuente: Anibaldesigns.
Escala de valores
La escala monocromática de un color, por
ejemplo, el azul, se refiere a todos los
diferentes matices que podemos encontrar
dentro de este color. Los diferentes matices
se consiguen combinando el color con el
blanco en diferentes grados. Cuando
realizamos un diseño este tendrá mayor
unidad cromática si utilizamos para valorarlo
una escala monocromática.
Imagen: monocromático.
Fuente: Anibaldesigns.
Círculo cromático

El círculo cromático, también llamado círculo de

matices, rueda cromática o rueda de color, es el
resultante de distribuir alrededor de un círculo,
los diferentes colores que conforman el
segmento de la luz visible del espectro solar,
descubierto por Newton, y manteniendo el orden
correlativo: rojo, naranja, amarillo, verde, azul
ultramar y violeta.

Imagen: círculo cromático.

Fuente: Anibaldesigns.
Armonía de color
En color, armonizar significa coordinar los diferentes valores que el color
adquiere en una composición, es decir, cuando en una composición todos
los colores poseen una parte común al resto de los colores componentes.
La armonía son las combinaciones en las que se utilizan modulaciones de
un mismo matiz, o también de diferentes matices, pero que mantienen
una cierta relación con los colores elegidos.

1. Armonía en complementarios: se encuentran simétricos respecto del

centro de la rueda. El matiz varía en 180˚ entre uno y otro. Estos colores
se refuerzan mutuamente, de manera que un mismo color parece más
vibrante e intenso cuando se halla asociado a su complementario. Estos
Imagen: armonía en complementarios. contrastes son, pues, idóneos para llamar la atención y para proyectos
Fuente: Anibaldesigns.
donde se quiere un fuerte impacto a través del color.
Armonía de color

2. Armonía en analogía: escala de colores

entre dos siguiendo una gradación uniforme.
Cuando los colores extremos están muy
próximos en el círculo cromático, la gama
originada es conocida también con el nombre de
colores análogos. En razón de su parecido,
armonizan bien entre sí. Este tipo de
combinaciones es frecuente en la naturaleza.

Imagen: armonía en analogía.

Fuente: Anibaldesigns.
Armonía de color

3. Armonía en triadas: tres colores equidistantes tanto

del centro de la rueda como entre sí, es decir formando
120˚ uno del otro. Versiones más complejas incluyen
grupos de cuatro o de cinco colores, igualmente
equidistantes entre sí (situados en los vértices de un
cuadrado o de un pentágono inscrito en el círculo) (De
los Santos, 2010).

Imagen: armonía en triadas.

Fuente: Anibaldesigns.
 Tema 2

Aplicación de color
Algunas de las herramientas más interesantes de
Illustrator son las herramientas que permiten la aplicación
de color, ya que brindar infinidad de posibilidades al
momento de realizar trabajos de ilustración y
vectorización de imágenes, herramientas que abren paso
a trabajos bien elaborados y hasta con un aspecto
realista.
Las herramientas principales de color que brinda
el programa se describen en la siguiente
ilustración:

En el módulo anterior se describieron las acciones

requeridas para abrir herramientas nuevas y que no se
encuentren en la barra de herramientas avanzadas. Las
herramientas principales de la aplicación de color se
encuentran disponibles en la opción ventana de la barra
de menú.

Imagen: aplicación de color.

Fuente: autor.
Color
Despliega la barra de colores en CMYK y es llamado
espectro CMYK, con esta se puede escoger el color
que se desee aplicar seleccionando primero la figura
que se quiere aplicar el color y luego seleccionando el
color que se quiera escoger. En el numeral 1,
encontramos la herramienta que permite seleccionar a
qué parte de la figura ponerle color, el cuadrado
amarillo es para cambiar el color del relleno, el rosado
es para poner color al trazo de la figura, se debe tener Imagen: color.
Fuente: autor.
en cuenta que para cambiar el color tiene que estar
por delante, es decir, si se tiene primero el de trazo a
ese es el que le cambia el color, pero si se tiene
delante el de relleno, cambiamos el color de relleno.
Estilos gráficos

La herramienta de estilos gráficos permite poner

en una figura un patrón, pero a manera de color.
Estos estilos son predeterminados por Illustrator,
pero dan la posibilidad de cambiarle el color
como si fuese una figura normal, es decir, al
rellenar una figura con un estilo gráfico y luego
ponerle otro color, el estilo gráfico cambia de
color.

Imagen: estilos gráficos.

Fuente: autor.
Muestras

Por último, está la herramienta muestras, que es una

de las más útiles ya que permite guardar todos los
colores que se necesitan en un trabajo gráfico.
También guarda los estilos gráficos, los motivos, los
degradados y todos los colores a usar, permite eliminar
relleno (4), o agregar color al relleno y al trazo (2).

Imagen: texto vertical en trazado.

Fuente: autor.
Cuentagotas

El cuentagotas que se encuentra en la barra de

herramientas básicas, o con su comando
abreviado (I), permite seleccionar un color exacto
de todo tipo de imagen o fotografía para tener un
color preciso si es necesario, también permite
copiar el formato completo de una figura a otra
(aplica para formas y textos). Para usarla primero
se debe seleccionar la figura que se desea
colorear, luego seleccionar la herramienta y por
último el color que se quiere aplicar.
Imagen: cuentagotas.
Fuente: autor.
 Tema 3

Herramientas de degradado y
fusión de formas
Degradado

Permite pasar de un color a otro de

manera suave y sin que se vean saltos
entre un color y otro.
1. Muestra el degradado seleccionado en
el relleno o en el trazado.
2. Permite cambiar a colores recientes o
quitar el color.
3. Brinda algunos degradados
predeterminados por Illustrator.
4. Vuelve a mostrar la herramienta del
Imagen: degradado.
numeral 1, como se ve en la imagen. Fuente: autor.
Degradado

5. Permite seleccionar el tipo de degradado,

ya sea de manera lineal de arriba hacia
abajo, de izquierda a derecha o en diagonal.
Para cambiar el sentido en que se ubican los
colores se presiona la herramienta
degradado de la barra de herramientas
básicas. Y haciendo una línea sobre el
degradado realizado para cambiar el sentido
en que se ubican los colores.
6. Se emplea cuando se desea aplicar color
al trazo de la figura.
Imagen: degradado.
7. Permite cambiar el ángulo de dirección del Fuente: autor.

degradado.
Degradado

8. Son los manejadores que dan la

posibilidad de ubicar el lugar para cada
color y son los que permiten cambiar los
colores del degradado, para hacerlo de da
doble clic en el manejador y este abre el
panel de muestras de color. Para eliminar
un manejador se selecciona y con clic
sostenido se saca del área de la
herramienta y para agregar un nuevo
manejador se ubica el cursor debajo de la
línea de degradado hasta que el cursor Imagen: degradado.
Fuente: autor.

tenga un signo (+).

Fusión de formas
Además, la herramienta permite mover las formas para
cambiar de posición la fusión y lograr efectos diferentes.
Es importante saber que la fusión de formas crea un grupo
de formas, por lo que, para desagruparlo y que sean
formas individuales para modificar, se debe hacer clic
derecho y seleccionar desagrupar. Otra forma de modificar
el grupo es entrando en el mismo y esto se logra haciendo
Imagen: fusión de formas. doble clic en alguna de las formas, el programa entra en un
Fuente: autor.
modo de aislamiento donde solo están las formas del
grupo, de esta manera se puede modificar el grupo, pero al
salir del modo de aislamiento seguirá agrupado. Para salir
del modo de aislamiento se hace doble clic en cualquier
parte que no tenga figuras o fuera de la mesa de trabajo.
Herramienta: malla
La herramienta malla es una herramienta que permite hacer
degradados de forma más detallada, ya que se le agregan los
puntos específicos donde se desea poner los colores, con esta
herramienta se logran acabados de realismo y detalle muy
buenos.
Para usar la herramienta malla se hace la figura deseada y luego
se le aplica un color sólido, después seleccionamos la
herramienta que está en la barra izquierda y comenzamos a
agregar los puntos que se desean para aplicar los otros colores.
Se debe tener en cuenta que el alcance del color es desde el
punto hasta el final de la línea, para ponerle límite al color se

Imagen: malla. debe agregar otro punto con la herramienta.

Fuente: autor.
Para aplicar los colores se debe seleccionar el punto al que se
quiere cambiar el color con la selección directa, para que solo
seleccione un punto y luego se le aplica el color nuevo.
 Tema 4

Herramientas de pluma, pincel y

trazo
Herramienta: pluma

La herramienta pluma es una herramienta

que permite dibujar en Illustrator lo que se
desee, desde el dibujo más sencillo hasta
retratar rostros y hacer ilustraciones con
alto detalle. La herramienta permite pasar
una imagen de pixeles a una ilustración
vectorial.

Imagen: colocar.
Fuente: autor.
Pluma y curvatura

Para vectorizar una imagen se puede utilizar la

Imagen: herramienta pluma.
Fuente: autor.
herramienta de la pluma que agrega puntos de ancla a
las líneas, esta se encuentra en la barra de
herramientas básicas y se llama «curvatura», lo que
permite la herramienta es agregar puntos de ancla en
Imagen: herramienta curvatura.
Fuente: autor.
líneas rectas para convertirlas en curvas.
Pluma y curvatura

En la siguiente imagen vemos

en color negro la figura
esperada al aplicar la
herramienta curvatura, en azul
vemos la figura inicial. Lo que
queda es aplicar color en la
figura.
Al terminar toda la imagen,
vemos el cambio de los pixeles
a vector y la mejora en cuanto a
la calidad. Imagen: proceso y resultado (pluma + curvatura).
Fuente: autor.
 1. Esta herramienta permite modificar las
Herramienta: trazo
líneas (trazos) que tenemos en el trabajo.
Se encuentra ubicada en el panel de
propiedades en la barra de herramientas
avanzadas.
2. Esta opción es la que deja cambiar el
grosor del trazo, para ponerlo más grueso
o más delgado.
3. De esta se cambia el color del trazo o
se quita el color.
4. Al darle clic en esta opción vemos
herramientas más avanzadas del trazo,
como cambiar un trazo regular en trazos
con puntas delgadas y el centro más
Imagen: trazo.
Fuente: autor. grueso o un extremo grueso y el otro
delgado.
Pinceles

La herramienta de pinceles permite cambiar la forma en que

se ve el trazo para darle un aspecto diferente y más estético,
según la necesidad para el usuario. La herramienta cuenta
con cinco pinceles diferentes:

• Pincel caligráfico

• Pincel de dispersión

• Pincel de arte

• Pincel de cerdas

• Pincel de motivo
Pincel caligráfico

El pincel caligráfico es el que simula más el trazo natural de un

marcador, un lápiz o un bolígrafo. Para manejar estos pinceles
tenemos tres variantes:
1. Ángulo, es cuánto gira el pincel al manejarlo, puede ser fijo
o al azar, cuando está al azar puede tener una variación más
fuerte o más suave.
2. Redondez, esta es la que define si el trazo simula más un
marcador redondo o uno con punta biselada (diagonal) como
se ve en la imagen.
3. Tamaño es cuán grande puede ser el trazo.
Todas las opciones pueden ser variables o fijas.

Imagen: pincel caligráfico.

Fuente: autor.
Pincel de dispersión
Este pincel permite crear un patrón para que al hacer
una línea con este pincel reparta el patrón por toda la
línea.
Lo primero que se debe hacer es crear un patrón
pequeño, que es el que se va a repetir.
Luego se selecciona todo y nos vamos al panel de
pinceles y creamos un nuevo pincel de la parte
inferior del panel.
Las configuraciones que se ven a continuación son
para cambiar la forma en que aparezca el patrón en la
línea, ya sea más alejados o más juntos, más
grandes o más pequeños.

Imagen: pincel de dispersión.

Fuente: autor.
Pincel de arte
El pincel de arte es uno de los pinceles que permite más
opciones de transformación de un trazo, para crear un pincel de
arte se siguen pasos similares al pincel de dispersión:
1. Podemos nombrar el pincel.
2. Podemos ponerle una transformación variable o fija a lo largo
del trazo.
3. La escala del trazo es cuánto cambia al ampliarlo o al
disminuirlo.
4. Este define hacia qué dirección va a estar el motivo que se
está definiendo como trazo.
5. Cambio de color.
6. Ajustes adicionales para cambiar la configuración del pincel.

Imagen: pincel de arte.

Fuente: autor.
Pincel de cerdas
Este pincel simula más el trazo de una brocha o pincel
real, ya que permite dar el efecto de pinceladas o cerdas
sueltas en el trazo.
El pincel de cerdas, entre sus opciones, permite cambiar
cuán fuerte es el color del trazo, cuán cerca están las
cerdas, si el trazo va a ser más rígido o más suave, entre
otras opciones que se van adaptando a la necesidad del
usuario, además permite ver las modificaciones que se
hacen al pincel.

Imagen: pincel de cerdas.

Fuente: autor.
Pincel de motivo El pincel de motivo se diferencia del pincel de dispersión
porque este crea un patrón repetido a lo largo de todo el trazo,
mientras que el pincel de dispersión no es tan organizado, sino
que sus patrones se presentan a diferentes distancias y
tamaños siempre.
1. Nombramos el pincel.
2. Escogemos entre un cambio fijo o variable a lo largo del
trazo.
3. Estos definen qué motivo se va a mostrar en cada segmento
del trazo, se pueden modificar las esquinas para que tengan
un diseño diferente a los laterales.
4. Configuraciones adicionales sobre el pincel.
5. Muestra cómo va a quedar el pincel.
6. Previsualizar en la mesa de trabajo los cambios que se
Imagen: pincel de motivo. hacen.
Fuente: autor.
Ahora que has revisado algunos conceptos sobre color y
vectorización de imágenes, realiza unos ejercicios
prácticos en donde puedes afianzar conocimientos y
además volverte más ágil en el manejo del programa,
recuerda que todo es cuestión de práctica y el software
de Illustrator solo se domina usándolo.

Ejercicio 1: la imagen de referencia la vas a incrustar en

Illustrator, la vas a calcar usando la pluma y las
configuraciones de trazado para lograr un buen acabado,
luego con las herramientas de color que aprendimos
(incluida malla) vas a darle color a toda la imagen a tu
gusto.
La imagen estará en el campus virtual.

¡Inténtalo!
Adobe. (2021). Dibujo con la herramienta Pluma.
https://helpx.adobe.com/es/illustrator/using/drawing-pen-
pencil-or-flare.html

Adobe. (2023). Pinceles.

https://helpx.adobe.com/es/illustrator/using/brushes.html

De los Santos, A. (2010). Fundamentos visuales 2: La teoría del

color. Grupo IDAT Diseño Gráfico.
https://belgranotipografia.files.wordpress.com/2010/05/apunte2
_ clasificacion_tipografiamb.pdf
Esta guía fue elaborada para ser utilizada con fines didácticos como
material de consulta de los participantes en el diplomado virtual en
DISEÑO DIGITAL del Politécnico de Colombia, y solo podrá ser
reproducida con esos fines. Por lo tanto, se agradece a los usuarios
referirla en los escritos donde se utilice la información que aquí se
presenta.

GUÍA DIDÁCTICA 2
M2-DV60-GU02
MÓDULO 2: COLOR Y VECTORIZACIÓN DE IMÁGENES

© DERECHOS RESERVADOS - POLITÉCNICO DE COLOMBIA, 2023

Medellín, Colombia

Proceso: Gestión Académica Virtual

Realización del texto: John Cuervo, docente
Revisión del texto: Comité de Revisión
Diseño: Comunicaciones

Editado por el Politécnico de Colombia.