Guia Didactica 2-DD

Esta es una vista previa del archivo. Inicie sesión para ver el archivo original

Diseño Digital 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
2 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
GUÍA DIDÁCTICA N°2 
CÓDIGO: M2-DV60-GU02 
MÓDULO 2: COLOR Y VECTORIZACIÓN DE IMÁGENES 
DIPLOMADO EN DISEÑO DIGITAL 
 
© DERECHOS RESERVADOS - POLITÉCNICO DE COLOMBIA, 2019 
Medellín, Colombia 
 
Proceso: Gestión Académica 
Realización del texto: John Byron Cuervo García, Docente Virtual 
Revisión del texto: Jehison Posada, Coordinador Académico Virtual 
Diseño: Cristian Quintero, Diseñador Gráfico 
 
Editado por el Politécnico de Colombia 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
3 
 
 
CONTENIDO 
Presentación............................................................................... 4 
Competencia Específica .............................................................. 5 
Contenidos temáticos ................................................................. 6 
Tema 1 Teoría del Color .............................................................. 7 
Tema 2 Aplicación de Color ....................................................... 13 
Tema 3 Herramientas degradado y fusión de formas ................ 20 
Tema 4 Herramientas pluma, pincel y trazo.............................. 26 
Recursos disponibles para el aprendizaje ................................. 42 
Ejercicio.................................................................................... 42 
Aspectos clave .......................................................................... 43 
Referencias bibliográficas......................................................... 44 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
4 
 
 
Presentación 
 La Guía Didáctica N°2: color y vectorización de imágenes es un 
material que ha sido desarrollado para el apoyo y orientación del 
participante en el Diplomado en Diseño Digital, especialmente, está 
orientada al reconocimiento de la teoría del color y su aplicación en los 
diferentes trabajos gráficos, así mismo identificar la herramienta pluma y 
las opciones que brinda en cuando al dibujo digitar y la vectorización de 
imágenes. 
 Ahora bien, el objetivo central de este módulo es saber en qué 
momentos y de qué manera se manejan los colores, según la intención 
que se tenga con la creación de la pieza gráfica y como realizar un vector 
para dibujo digital. 
Para ello, se ha organizado esta guía en cuatro (4) contenidos temáticos, 
basados en competencias, a saber: (a) teoría del color, (b) herramientas 
para aplicación de color, (c) herramientas degradado y fusión de formas, 
y (d) herramientas: pluma, pincel y trazo. 
 
 
 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
5 
 
 
Competencia Específica 
Se espera que con los temas abordados en la Guía Didáctica Nº2 del 
módulo 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. 
 
Resultados de aprendizaje: 
o Comprende la teoría del color y todas las aplicaciones 
que puede tener en los trabajos gráficos. 
o Identifica cuales son las herramientas que permiten la 
aplicación de color a elementos gráficos y sabe escoger 
el mejor método según la necesidad de ilustración. 
o Comprende que hay herramientas como degradado y 
fusión de formas que permiten crear imágenes 
realistas. 
o Crea imágenes vectoriales con la herramienta pluma y 
además conoce cuales son los ajustes de trazo y pincel 
que dan mayor detalle a la composición. 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
6 
 
 
CONTENIDOS TEMÁTICOS 
 
Ilustración 1: contenidos temáticos 
Fuente: autor 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
7 
 
 
Tema 1 
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. 
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. 
(Santos, s.f.) 
Ilustración 2: rayos de luz. 
Fuente: Anibaldesigns. 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
8 
 
 
Síntesis aditiva y síntesis sustractiva 
Los colores se dividen en colores luz y colores pigmento, cada uno 
de ellos proporciona diferentes posibilidades para trabajos gráficos. 
 
Ilustración 3: rgb vs cmyk. 
Fuente: Anibaldesigns. 
Los Colores aditivos. 
Red, Green, 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 
pantalla de un ordenador o de una televisión se 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. 
Colores sustractivos. 
Cian, Magenta, Yellow, 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 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
9 
 
 
cian, magenta y amarillo. También se ven 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 
el estado puro, sin el 
blanco o el negro 
agregados. 
 Ilustración 4: matiz. 
Fuente: Anibaldesigns. 
 
2. Valor o Luminosidad: Es un término que se usa para describir 
cuan claro o cuan 
oscuro parece un color 
y se refiere a la 
cantidad de luz 
percibida. 
Ilustración 5: valor o luminocidad. 
Fuente: Anibaldesigns. 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
10 
 
 
 
3. Saturación o Brillo: Esta propiedad diferencia un color intenso de 
uno pálido. Se puede concebir la saturación como si fuera la 
brillantez de un color. También ésta 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. 
Ilustración 6: saturación o brillo. 
Fuente: Anibaldesigns. 
 
Escala de valores 
Cuando hacemos mención al 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 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
11 
 
 
referencia a un solo color, y las variaciones se producirán debido a los 
niveles de valoración y saturación. 
Ilustración 7: escala de valores. 
Fuente: Anibaldesigns. 
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. 
Ilustración 8: monocromático. 
Fuente: Anibaldesigns. 
 
Circulo 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. 
Ilustración 9: circulo cromático. 
Fuente: Anibaldesigns. 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
12 
 
 
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. 
Tipos de armonía. 
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 contrastes son, 
pues, idóneos para llamar la atención y 
para proyectos donde se quiere un fuerte 
impacto a través del 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. 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
13 
 
 
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.) 
Ilustración 10, 11, 12: armonía de color. 
Fuente: Anibaldesigns. (Santos, s.f.) 
 
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 e programa son: 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
14 
 
 
 
Ilustración 13: aplicación de color. 
Fuente: autor. 
 
 Como se vio en el módulo anterior para abrir herramientas nuevas que 
no se encuentren en la barra de herramientas avanzadas se debe ir a la 
opción ventana de la barra de menú, aquí se están las herramientas 
principales de la aplicación de color. 
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 que 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 en cuenta que para cambiar el color 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
15 
 
 
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. 
Ilustración 14: color. 
Fuente: autor. 
Guía de color 
También se encuentra la Guía de color, que dispone grupos de color 
ya sea análogos, complementarios, triadas, entre otros. 
El numeral 2, es donde se encuentra el nombre de la herramienta. 
El numeral 3, muestra el grupo de colores que se tiene seleccionado. El 
4, es el que permite cambiar el grupo de 
colores en el circulo cromático y el 5, es 
para guardar ese grupo de color en la 
herramienta de muestras, de ésta 
manera tienen un acceso más sencillo. 
Ilustración 15: color II. 
Fuente: autor. 
La herramienta permite también crear nuevos grupos de color 
dependiendo de la necesidad, es así como los nodos presentes en el 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
16 
 
 
círculo cromático van se pueden girar para obtener los grupos necesarios, 
el programa puede enlazar los colores para que automáticamente 
seleccione los colores que complementan el color ejido por el 
usuario, o también se puede quitar el enlace desde el ícono para 
escoger un grupo específico. 
 
Ilustración 16: color II. 
Fuente: autor. 
 
1. Editar el grupo de colores 
que hay predeterminado. 
2. Permite visualizar el 
circulo cromático de manera 
fluida que permite más 
variedad de colores, la opción a su derecha abre un circulo 
cromático más segmentado, así: 
 
 
 
 
 
Ilustración 17: color IV. 
Fuente: autor. 
 
Y la última opción abre únicamente el grupo de colores seleccionados: 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
17 
 
 
Ilustración 18: color V. 
Fuente: autor. 
 
 
 
3. Son los nodos que giran y 
ayudan a seleccionar colores que 
se complementan entre sí, ya 
sean análogos, 
complementarios, entre otros. 
4. El primer ícono, es para agregar un nuevo nodo al 
círculo, el segundo, para eliminar uno de los nodos 
dando clic sobre él y el tercero es para enlazar los colores y que el 
programa de manera automática escoja sus colores 
complementarios. 
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. 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
18 
 
 
Ilustración 19: 
estilos gráficos. 
Fuente: autor. 
 
 
 
 
 
 
Muestras 
Por
ultimo está la herramienta muestras, que es una de las más 
útiles ya que permite guardar todos lo colores que se necesitan en un 
trabajo gráfico. 
También guarda los estilos 
gráficos, los motivos, los 
degrados y todos los colores 
a usar, permite eliminar 
relleno(4), o agregar color al 
relleno y al trazo(2) 
Ilustración 20: muestras. 
Fuente: autor. 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
19 
 
 
Cuentagotas 
El cuentagotas que se encuetra 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, tambien permite copia 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. 
Ilustración 21: 
cuentagotas. 
Fuente: autor. 
 
 
 
 
 
Ilustración 22: 
cuentagotas II. 
Fuente: autor. 
 
 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
20 
 
 
Tema 3 
Herramientas 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. 
 
Ilustración 23: degradado. 
Fuente: autor. 
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 numeral 1, como se ve en la 
imagen. 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
21 
 
 
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. 
Ilustración 24: degradado II. 
Fuente: autor. 
6. Se emplea cuando se desea aplicar color al trazo de la figura. 
 
Ilustración 25: 
degradado III. 
Fuente: autor. 
 
 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
22 
 
 
 
 
 
7. Permite cambiar el ángulo de dirección del 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 éste 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 tenga un signo (+). 
Fusión de formas 
Ésta herramienta permite fusionar una forma con otra y lograr un 
cambio tanto de una forma a otra como de un color a otro, para emplear 
la herramienta primer se debe seleccionar la primera figura, luego 
seleccionar la herramienta que se encuentra en la barra de herramientas 
básicas y dar clic en la figura seleccionada al principio y luego en la figura 
con la que se desea hacer la fusión. 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
23 
 
 
Ilustración 26 y 27: fusión de formas. 
Fuente: autor. 
 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 en entrando en el mismo y esto se logra haciendo 
doble clic en alguna de la formas, el programa entra en un modo de 
aislamiento donde sólo 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 de hace doble clic en 
cualquier parte que no tenga figuras o fuera de la mesa de trabajo. 
 
Ilustración 28: fusión de formas II. 
Fuente: autor. 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
24 
 
 
Ilustración 29: fusión de 
formas II. 
Fuente: autor. 
 
 
 
 
 
 
 
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. 
Ilustración 30: malla. 
Fuente: autor. 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
25 
 
 
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 debe 
agregar otro punto con 
la herramienta. 
Ilustración 31: malla II. 
Fuente: autor. 
 
Para aplicar los colores se debe seleccionar el punto que al que se 
quiere cambiar el color con la selección directa para que sólo selección un 
punto y luego se le aplica el color nuevo. 
A continuación un ejemplo de lo que se puede lograr con la herramienta 
malla: 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
26 
 
 
 
Ilustración 32: 
manzana malla. 
Fuente: autor. 
 
 
 
 
 
Tema 4 
Herramientas pluma, pincel y trazo 
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. 
Para vectorizar una imagen se pueden utilizar dos métodos, son los 
siguientes: 
Primer método: 
A continuación, se pasa una imagen 
pixelada a una imagen vectorial 
trabajando con pluma. 
1. Para agregar una imagen al 
archivo nos vamos al menú archivo 
en la opción colocar, además desde 
este menú es donde se pueden abrir 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
27 
 
 
archivos nuevos sin cerrar el archivo actual, también guardar y 
exportar los trabajos. 
Ilustración 33: colocar. 
Fuente: autor. 
 
2. Al poner la opción colocar se activa una ventana emergente donde 
encontramos los archivos que se pueden colocar en la mesa de 
trabajo, en la parte inferior encontramos algunas opciones: Enlazar, 
permite poner la imagen sin cargar peso al archivo, por lo que 
cuando se va a enviar el archivo a otro equipo se debe enviar 
también la imagen. 
Plantilla, que permite 
colocar la imagen más 
clara para dibujar sobre 
ella. Cuando no se escoge 
ninguna de estas opciones, 
el peso de la imagen se 
carga al archivo de 
Illustrator. 
Ilustración 34: plantilla. 
Fuente: autor. 
 
3. Empezamos a vectorizar la imagen, seleccionamos la herramienta 
pluma que se encuentra en la barra de herramientas 
básicas, para iniciar damos un clic en la primera 
esquina de la imagen y hacemos otro punto de ancha siguiendo la 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
28 
 
 
figura pero antes de soltarlo, vamos arrastrando hacia abajo o hacia 
los lados para darle la dirección a la curva. 
 
 
Ilustración 35: pluma 
Fuente: autor 
 
 
 
 
 
4. La curva que
realizamos se conserva para la siguiente línea, por lo 
que para iniciar otra línea a nuestro gusto se debe dar otro clic en 
el último punto de ancla y continuar sin ningún problema. Cuando 
deseamos modificar una línea que ya está hecha, damos clic con 
selección directa sobre el 
punto de ancla cercana a la 
curva y se activan los 
manejadores, que son las 
los puntos al final de la línea 
azul que vemos en la 
imagen y ya los podemos 
mover hacía arriba, hacía 
abajo o hacía los lados. 
Ilustración 36: pluma II 
Fuente: autor 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
29 
 
 
5. El siguiente paso es cerrar la figura, para esto damos clic en el 
primer punto de 
ancla que pusimos, 
luego de cerrar la 
figura puedes 
hacerle más 
modificaciones para 
que quede lo más 
parecida posible a la 
plantilla de fondo. 
Ilustración 37: pluma III 
Fuente: autor 
 
6. En algunas ocasiones pueden verse partes de la figura por fuera, 
pero eso se debe a los pixeles de la imagen. 
Ilustración 38: pluma IV 
Fuente: autor 
 
 
 
 
Segundo método 
1. Otra forma de usar la pluma es poniendo solamente los puntos 
específicos donde se hacen vértices en la imagen de muestra. 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
30 
 
 
Ilustración 39: pluma 
V 
Fuente: autor 
 
 
 
 
 
 
 
2. Después seleccionamos la herramienta de la pluma que agrega 
puntos de ancla a las líneas, ésta se encuentra en la barra de 
herramientas básicas y tiene éste ícono lo que permite la 
herramienta agregar puntos de ancla en líneas rectas para 
convertirlas en curvas, como lo vemos en la imagen siguiente: 
 
Ilustración 40: pluma VI 
Fuente: autor 
 
 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
31 
 
 
3. 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. 
Ilustración 41: pluma VII 
Fuente: autor 
 
 
 
 
 
4. Al terminar toda la imagen, vemos el cambio de los pixeles a vector 
y la mejora en cuanto a la calidad. 
Ilustración 42: pluma VIII 
Fuente: autor 
 
 
 
 
 
 
 
(Adobe, 2017) 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
32 
 
 
Herramienta Trazo 
Esta herramienta permite modificar las 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 grueso o un extremo grueso y el otro delgado. 
 
Ilustración 43: trazo 
Fuente: autor 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
33 
 
 
Una de las opciones del trazo permite poner la línea punteada 
(discontinua) y cambiarle el tamaño al espacio entre las líneas o el largo 
de las líneas que hay, como lo vemos a continuación:
 
Ilustración 44: trazo II 
Fuente: autor 
 
De igual forma se puede cambiar el grosor de las líneas para darle 
más estética a los trabajos y no dejar líneas regulares, también se pueden 
convertir en flechas desde las opciones que vemos a continuación: 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
34 
 
 
 
Ilustración 45: trazo III 
Fuente: autor 
1. Cambiar la terminación de las líneas para agregarle flecha, círculos 
u otras terminaciones. 
2. Cambiar el tamaño de la forma completa. 
3. Esta opción enlaza los porcentajes para que sean proporcionales. 
4. Esta herramienta se emplea para definir si la flecha va a estar 
inmediatamente al final del trazo o va a estar un poco más allá del 
final del trazo. 
5. Cambiar la configuración de la línea, para darle una estética 
diferente. 
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 5 pinceles diferentes: 
 Pincel caligráfico 
 Pincel de dispersión 
 Pincel de arte 
 Pincel de cerdas 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
35 
 
 
 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 cuanto 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. 
 
Ilustración 46: pincel caligráfico 
Fuente: autor 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
36 
 
 
 
Ilustración 47: 
pincel caligráfico II 
Fuente: autor 
 
 
 
 
 
Todos los pinceles creados quedan guardados en el panel de pinceles. 
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 configuración 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. 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
37 
 
 
 
Ilustración 48 y 49: 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 dispersion: 
 
Ilustración 50: pincel de arte 
Fuente: autor 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
38 
 
 
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 cuanto cambia al ampliarlo o al disminuirlo. 
4. Este define hacía que 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. 
 
Ilustración 51 y 52: pincel de arte II 
Fuente: autor 
Pincel de cerdas. 
Este pincel es que 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. 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
39 
 
 
 
Ilustración 53 y 54: pincel de cerdas 
Fuente: autor 
 
El pincel de cerdas entre sus opciones permite cambiar cuan fuerte 
es el color del trazo, cuan cerca están las cerdas, si el trazo va a ser más 
rígido o más suave, entre otras opciones que van adaptando a la 
necesidad del usuario, además permite ver las modificaciones que se 
hacen al pincel. 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
40 
 
 
Ilustración 55: pincel 
de cerdas II 
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. 
Ilustración 56: pincel de 
motivo 
Fuente: autor 
 
 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
41 
 
 
 
1. Nombramos el pincel. 
2. Escogemos entre un cambio fijo o variable a lo largo del trazo. 
3. Estos definen que 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 hacen. 
 
 
 
 
Ilustración 57 y 58: pincel de motivo II 
Fuente: autor (Adobe, 2018) 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
42 
 
 
Recursos disponibles para el aprendizaje 
Para que puedas desarrollar las habilidades y destrezas necesarias 
en la competencia específica propuesta en el módulo de formación, es 
importante que revices los recursos de apoyo que te ayudarán a 
profundizar los contenidos temáticos trabajados. 
Por lo tanto, realiza la lectura del documento de apoyo: teoría del 
color, disponible en 
https://adelossantos.files.wordpress.com/2010/10/teroria-del-color.pdf 
 
Ejercicio 
Ahora que has revisado algunos conceptos sobre color y 
vectorización de imágenes, puedes realizar unos ejercicios prácticos en 
donde puedes afianzar conociemintos y además volverte más agil en el 
manejo del programa, recuerda que todo es cuestión de práctica y el 
software de Illustrator sólo se domina usandolo. 
Ejercicio 1: La imagen de referencia la vas a incrustar en Illustrator, la 
vas 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! 
 
 
https://adelossantos.files.wordpress.com/2010/10/teroria-del-color.pdf
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
43 
 
 
Aspectos clave 
Recuerda algunos aspectos abordados en el módulo: 
 El color en el diseño gráfico SIEMPRE debe tener la intención de 
comunicar algo, los colores no se deben poner al azar sólo porque 
combinan bien o se ven bonitos juntos, debe haber algo más allá al 
decidirse por un color u otro. 
 La herramienta pluma, sirve tanto para hacer dibujos propios como 
para calcar imágenes, pero recuerda que la imagen incrustada debe 
tener chuleada la opción “plantilla” para que se vea más clara y no 
te confundas. 
 Los pinceles sirven para modificar cualquier trazado existente o 
para crear un trazado nuevo. En el caso del pincel de arte y pincel 
de motivo se debe tener un patrón. 
 
 
 
 
 
 
 
 
 
 
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
44 
 
 
REFERENCIAS BIBLIOGRÁFICAS 
Santos, A. d. (s.f.). Adelossantos. Obtenido de 
https://adelossantos.files.wordpress.com/2010/10/teroria-del-
color.pdf 
Adobe. (5 de Enero de 2017). Dibujo con la herramienta Pluma. 
Obtenido de 
https://helpx.adobe.com/es/illustrator/using/drawing-pen-pencil-
or-flare.html 
Adobe. (13 de Marzo de 2018). Pinceles. Obtenido de 
https://helpx.adobe.com/es/illustrator/using/brushes.html 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
https://adelossantos.files.wordpress.com/2010/10/teroria-del-color.pdf
https://adelossantos.files.wordpress.com/2010/10/teroria-del-color.pdf
 
 
DIPLOMADO EN DISEÑO DIGITAL 
| GUÍA DIDÁCTICA 2-COLOR Y VECTORIZACIÓN DE IMÁGENES 
45 
 
 
 
 
 
 
 
 
 
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. 
 
Derechos reservados 
POLITÉCNICO DE COLOMBIA, 2019 
Medellín, Colombia