Conceptos Básicos y Teorías del Color

Objetivos de la Unidad
Al finalizar la presente unidad el participante será capaz de:

a) Diferenciar entre una imagen vectorial y una rasterizada.

b) Conocer los alcances y aplicabilidad de Adobe Ilustrator CS6.
c) Diferenciar y definir el Color y sus Propiedades.
d) Diferenciar, definir y manejar los diferentes modos de color.
e) Identificar y manipular los elementos básicos que componen el
espacio de trabajo de Adobe Ilustrator.

http://www.infop.hn Autor:Swamy Matute

 Conceptos Básicos y Teorías del Color
Definición

Adobe Ilustrator (Ai) es un editor de gráficos vectoriales en forma de taller de arte que trabaja
sobre un tablero de dibujo o mesa de trabajo, y está destinado a la creación artística de dibujo
y pintura para ilustración, fue el primer programa oficial de su tipo comercializado por Abobe
Systems, definiendo en cierta manera el lenguaje grafico contemporáneo del dibujo vectorial,
Adobe Illustrator contiene opciones creativas, un acceso más sencillo a las herramientas y una
gran versatilidad para producir rápidamente gráficos flexibles cuyos usos se dan en
(maquetación-publicación) impresión, vídeo, publicación en la Web y dispositivos móviles.

Actualmente forma parte de la familia Adobe Creative Suite y tiene como función única y
primordial la creación de material gráfico-ilustrativo altamente profesional basándose para ello
en la producción de objetos matemáticos denominados vectores.

INTRODUCCIÓN

El presente curso de Adobe Ilustrador CS6 busca facilitar el aprendizaje de los conocimientos
básicos de este programa, de tal modo que le permita el uso del mismo para crear dibujos
vectoriales, hacer ilustraciones a partir de un objeto, una foto, una idea, en fin utilizar parte del
potencial de este maravilloso y robusto software, formando con ello una base sólida sobre la
cual posteriormente edificar un conocimiento más amplio de Adobe Ilustrador y sus usos.

Imagen Rasterizada

Una imagen rasterizada, también llamada bitmap, imagen matricial o pixmap, es una estructura
o fichero de datos que representa una rejilla rectangular de pixeles o puntos de color,
denominada raster, que se puede visualizar en un monitor de ordenador, papel u otro
dispositivo de representación. A las imágenes rasterizadas se las suele caracterizar
técnicamente por su altura y anchura (en pixeles) y por su profundidad de color (en bits por
pixel), que determina el número de colores distintos que se pueden almacenar en cada pixel, y
por lo tanto, en gran medida, la calidad del color de la imagen.

2
Dibujo Vectorial

Es una imagen digital formada por objetos geométricos independientes (segmentos, polígonos,
arcos, etc.), cada uno de ellos definido por distintos atributos matemáticos de forma, de
posición, de color, etc. Por ejemplo un círculo de color rojo quedaría definido por la posición de
su centro, su radio, el grosor de línea y su color. El interés principal de los gráficos vectoriales
es poder ampliar el tamaño de una imagen a voluntad, editarla (Rotarla, Girarla, Deformarla
etc.) sin sufrir el efecto de escalado que sufren los gráficos rasterizados.

APLICABILIDAD

Adobe Ilustrador CS6 tiene diversas aplicaciones que van desde crear un simple dibujo hasta
una compleja ilustración, gracias a su volubilidad podrá crear de una manera rápida y
profesional cualquier tipo de publicidad escrita, ilustraciones para utilizarlas en programas de
animación como Adobe Flash, o simplemente impórtala a su dispositivo móvil, la plataforma de
diseño que provee Adobe Ilustrador es tan flexible y amigable que sin duda le permitirá explotar
al máximo su potencial como diseñador, en todos los ámbitos visuales en los cuales pueda
representar una imagen.

FORMATOS DE ADOBE ILUSTRADOR

Adobe Illustrator (.ai)

Formato nativo de Illustrator, solo este programa lo puede editar. Se basa en el formato PDF,
pero Acrobat no lo lee correctamente. Cuando se guarda como .ai se puede editar al 100%, se
mantiene la transparencia y guarda una previsualización al estilo PDF 1.4
Este formato es el mejor para trabajarlo en forma personal y es ideal para usarlo en InDesign y
Photoshop.

Illustrator EPS (.eps)

Este formato (Encapsulated PostScript) es un estándar gráfico desde hace mucho tiempo. No
soporta transparencias con respecto a otras aplicaciones gráficas, así que si se utiliza una

3
transparencia se aplanará “flatten”, para que se pueda importar en otro programa.
Al guardarlo como .eps la mayoría de los efectos se expanden y el texto se puede separar para
aplanar el documento. Illustrator guarda una copia .ai dentro del documento .eps por si se
desea editar en Illustrator. La mayoría de las personas que trabajan con InDesign y “Smart
Objects” en Photoshop, prefieren el formato .ai en lugar del .eps.

Adobe PDF (.pdf)

Se guarda un PDF con una copia incorporada del formato nativo .ai, sin aplanar, claro que al
momento de salvar se marca la opción de “Preserve Illustrator Editing Capabilities”. Si no se
aplica esto, el documento baja de tamaño, pero la edición es más difícil. El texto en este
formato es difícil de editar, los efectos se aplanan, etc.

SVG Compressed (.svgz) and SVG (.svg)

Scalable Vector Graphics es un lenguaje en forma de XML para describir una gráfica vectorial
en dos dimensiones, puede ser en forma estática o de animación. Se considera un estándar del
World Wide Web Consortium.

El formato SVG puede contener formas y trazos vectoriales, imágenes “rasterizadas” y texto.

Opciones para Exportar

Se puede exportar en forma de .jpg, .png, .swf (Flash), .bmp, .tif, .txt (formato de texto), .wmv
(Windows meta file) y .dxf (AutoCAD Interchange Format).

4
COLOR

Definición de Color

El mundo es de colores, donde hay luz, hay color. La percepción de la forma, profundidad o
claroscuro está estrechamente ligada a lo que se llama color. El color es un atributo que
percibimos de los objetos cuando hay luz. Ya que nuestros ojos solo miran todo aquello que
“Toca” la luz. La luz es constituida por ondas electromagnéticas que se propagan a unos
300,000 kilómetros por segundo. Esto significa que nuestros ojos reaccionan a la incidencia de
la energía y no a la materia en sí. Las ondas forman, según su longitud de onda, distintos tipos
de luz, como infrarroja, visible, ultravioleta ó blanca. Las ondas visibles por nosotros son
aquellas cuya longitud de onda está comprendida entre los 380 y 770 nanómetros, un
nanómetro equivale a la mil millonésima parte de un metro, ósea que es mil veces más
pequeño que un micrómetro.

Los objetos devuelven la luz que no absorben hacia su entorno. Nuestro campo visual
interpreta estas radiaciones electromagnéticas que el entorno emite o refleja, como la palabra
"COLOR".

Propiedades del Color

Se definen como el Tono, la Saturación, el Brillo.

A. Tono
Matiz ó Tonalidad es el atributo que diferencia el color y por el cual designamos los
colores: verde, violeta, anaranjado.

B. Saturación
Es la intensidad cromática o pureza de un color, que se le puede definir como valor; es
la claridad u oscuridad de un color, está determinado por la cantidad de luz que un color
tiene. Valor y luminosidad expresan lo mismo.

C. Brillo
Es la cantidad de luz emitida por una fuente lumínica o reflejada por una superficie.

5
MODELOS DE COLOR

A continuación estudiara los modelos de colores más utilizados, en el mercado Hondureño,

también existen Lab; HSV; CMYKOG entre otros, este último también llamado Hexacromía que
es de amplio uso en la industria del empaque, pero que tiene poca difusión y uso en nuestro
mercado.

Modelo RGB

Tiene como base los colores producidos por luz, (ejemplo el monitor de la computadora, la
Pantalla del Cine, del Televisor etc.) que son el Rojo, Verde y Azul, (por sus siglas en Ingles) al
color Blanco y Negro se les llama colores acromáticos ya que los perciben como “no colores”
(Usted percibe el color Negro cuando un objeto absorbe toda la luz que llega a él, y el color
Blanco cuando la refleja totalmente); este modo de color es el recomendado para presentar
imágenes que serán mostradas en monitores de computadoras, impresas en papel fotográfico,
etc. Este modo solo utiliza los 3 colores que se han descrito para reproducir hasta 16,7 millones
de colores, el modo RGB asigna un valor de intensidad a cada pixel que varía entre 0 (Negro) y
255 (Blanco), por ejemplo un color Rojo Brillante seria:

R: 250, G: 20 B: 10.

El Rojo más brillante que se puede conseguir mediante este modo de color es:

R: 255, G: 0 B: 0.

Si todos los valores son cero el resultado sería color Negro, y si todos los valores son 255 el
resultado sería color blanco puro, es por esto que esta síntesis se le llama aditiva.

Modelo CMYK

También llamado modo de colores sustractivos, son colores basados en la luz reflejada, de los
pigmentos aplicados a las superficies, que está formada por el color Magenta, Cyan y Amarillo,
son los colores básicos de las tintas que se utilizan en la mayoría de los sistemas de impresión,
motivo este del desplazamiento de lo que se conoce como colores primarios, la mezcla de
estos 3 colores da como resultado el color Negro, (de allí el nombre de colores sustractivos)

6
mezcla que da como resultado un color negro poco intenso, por lo que se le agrega el pigmento
Negro puro, formando así el Perfil CMYK (por sus siglas en Ingles la K representa el “Black”),
los procedimientos que utilizan las Imprentas conocidos como tricromía y cuatricromía, se
basan en este modo de color, en este modo de color el blanco puro se genera si los cuatro
componentes tiene un valor de 0, un color naranja se consigue con los valores C:0, M: 50, Y:
100, K: 0,

Escala de Grises

Es una graduación empleada en la que el valor de cada pixel posee un valor equivalente a una
graduación del gris. Las imágenes representadas de este modo de color están compuestas en
porcentajes de gris, que van desde el negro más profundo, variando gradualmente en
intensidad del gris, hasta llegar al blanco puro. Lo que se llama imágenes en blanco y negro.

EL COLOR COMO MEDIO EXPRESIVO

El proceso humano de percepción de los estímulos que recibe del entorno entre ellos, los
mensajes bi-media (imagen-texto) puede ser analizado en tres etapas:

Sensación Percepción Integración

A. Sensación: implica que el ojo es atacado por sénsums lumínicos, en nuestro caso un
sénsum lumínico-cromático: la sensación del Color.

B. Percepción: el ojo funciona como un radar y está programado para reconocer formas, a
fin de poder interactuar con su entorno. Una “forma” es una disposición en el espacio
que a la vez que lo define, lo ocupa, una estructura que se debe aislar, separar de su
contexto para hacerla inteligible (proceso que generalmente se hace inconsciente e
instantáneamente). Dicho proceso cuando la forma no es tan sencilla como la de una
esfera, un huevo o un cubo, puede implicar cierta cantidad de complejidad. Por tanto, el

7
 hecho de focalizar y extraer mentalmente una forma de su contexto, y el de discernirla
(suprimiendo la posible ambigüedad), es un acto del individuo; un acto más complejo
que el de la sensación, de la cual, de hecho, no puede decirse que sea un acto del
individuo, sino una acción externa, por encima de él. La sensación impregna el espíritu:
va de fuera a dentro. La percepción va de dentro a fuera: hay una participación activa
del sujeto. Reconocer una forma quiere decir, indistintamente:

1) Percibirla directamente en el momento dentro del entorno espacio-tiempo al que se

denomina “realidad”

2) Percibirla representada, en una imagen, que es un fragmento congelado sobre el

papel, o cualquier otro soporte de comunicación y que también forma parte de lo
real, aunque por estar encasilladas en los soportes que las representan parecen
oponerse a “la realidad”

C. Integración: en esta etapa el ojo funciona como aparato integrador y supone la

comprensión de una información o de un mensaje. Si la “sensación” es el efecto del
color, y puede llamarse “percepción” a la estructura formal de una imagen, pasos
necesarios e inherentes de la etapa de la “integración” que se denomina como un
desciframiento, y puede ejemplificarse por la lectura secuencial de un texto y la
extracción, el desciframiento de su significado. En este proceso que comporta las tres
etapas mencionadas, hay una progresión de la complejidad y, también, de la
participación activa del individuo.

En la etapa de la sensación óptica recibe una “información” inmediata; la sensación es ella

misma instantaneidad. En la etapa de la percepción se inicia la intervención de la atención por
parte del individuo. La atención tiene diversos grados de intensidad, y se puede hablar de
atención distraída, atención pasiva, atención interesada, atención activa: ejemplo la exploración
de la imagen o la lectura de un texto. En la etapa de la integración se reconoce, además de la
atención, cierto esfuerzo intelectual para comprender y asimilar. Este triple proceso sintetiza,
por tanto, la colaboración progresiva del sujeto a partir de la sensación recibida. Esta
participación creciente implica un esfuerzo de atención, un esfuerzo intelectual y una inversión
de tiempo. La inversión de tiempo es más considerable en la tercer etapa (la lentitud que
requiere el desciframiento semántico de un texto) que en la segunda etapa (percepción de una
imagen), y es prácticamente nula en la primera etapa (sensación cromática), que en realidad
desencadena el interés para llevar a cabo el triple proceso que se ha estudiado.

8
Por ello es que la etapa de la sensación es tan importante en el mundo del Diseño Gráfico, ya
que el color tiene capacidad de expresión, significado y provoca una reacción o emoción.
Cuanto más intensa o saturada es la coloración, más cargado está de expresión y emoción.
Todo color posee un significado propio, capaz de comunicar una idea. El color no sólo tiene un
significado universalmente compartido a través de la experiencia, sino que tiene también un
valor independiente informativo a través de los significados que se le adscriben simbólicamente.
No obstante esto, “el lenguaje de los colores”, es decir, sus funciones y variables, es tan rico y
complejo que imposibilita fijarlo en una clasificación; al mismo tiempo que es difícil, siempre es
peligroso intentar delimitar con demasiada rigidez cada una de las categorías. El Color y su
fenomenología constituyen un mundo de sutilezas aún poco conocido. Lo que nos permite
categorizar los colores surge de una actitud pragmática del visualista, ya que diseñar lleva
implícito utilizar colores y, por tanto, aplicar intenciones comunicativas. Estos usos e
intenciones no siempre están relacionados con “la realidad de los colores en la percepción del
mundo visible”, sino con una voluntad plástica. (Es necesario comprender la diferencia que hay
entre la percepción del mundo y la percepción icónica). Esto significa que el color, ahora, ya no
está considerado como una sustancia lumínica, sino como materia. De esta forma se convierte
en un elemento de la plástica y la gráfica, en el mismo sentido que lo son las Formas, las
Imágenes y el Texto. Elementos todos estos que serán objeto de combinatorias y
manipulaciones expresivas, que viene hacer la función propia del diseñador.

Para facilitar su estudio dividiremos a los colores en dos grupos.

A. Cálidos
Se llaman colores cálidos aquellos que van del rojo al amarillo.

B. Fríos
Se llaman colores fríos los que van del azul al verde.

9
Esta división de los colores en cálidos y fríos radica simplemente en la sensación y experiencia
humana. La calidez y la frialdad atienden a sensaciones térmicas subjetivas.
Los colores, de alguna manera, nos pueden llegar a transmitir estas sensaciones. Un color frío
y uno cálido se complementan, tal como ocurre con un color primario y uno compuesto.

ESPACIO DE TRABAJO

Al terminar de Cargar la Aplicación Abobe Ilustrador, se habilitara el “Espacio ó Mesa de

Trabajo” el cual se carga por defecto. Cualquier disposición de Paneles, Barras y Ventanas se
le denomina Espacio o Meza de Trabajo, aprenderá como personalizar el espacio de trabajo,
para un manejo más rápido y amigable del programa.

10
 A. Ventanas de documento en forma de fichas. B. Barra de aplicaciones. C. Conmutador de
espacios de trabajo. D. Cuadro de color de fondo. E. Panel de control F. Panel Herramientas
G. Botón Contraer en iconos H. Cuatro grupos de paneles acoplados verticalmente

Elementos del Espacio de Trabajo

A. Barra de Menús

En la parte superior organiza los comandos debajo de los menús.

11
B. Paneles

En Abobe Ilustrador CS6 hay dos Paneles principales.

1. Panel de Control

Aparece debajo de la Barra de Menús y muestra las distintas opciones para la

herramienta que se utiliza en ese momento.

Información general del panel de control

El panel de control ofrece un rápido acceso a opciones relacionadas con

los objetos seleccionados. Por defecto, el panel de control está acoplado
en la parte superior del área de trabajo.

Las opciones mostradas en el panel de control pueden variar según el tipo

de objeto seleccionado. Por ejemplo, si selecciona un objeto de texto el
panel de control muestra opciones de formato de texto, además de
opciones para cambiar el color, la posición y las dimensiones del objeto.

Cuando hay una herramienta de selección activa, puede acceder a Ajustar

documento y a Preferencias desde el panel de control.

Panel de Control

A. Opciones ocultas B. Enlace a otro panel C. Menú del panel

12
 2. Panel Herramientas
Contiene todas las herramientas del programa Abobe Ilustrator CS6.

C. Ventanas:

Se utilizan para acceder a distintas opciones en el entorno que brinda el Programa Adobe
Ilustrador, por ejemplo la Ventana Gestión de Color, permite cambiar los colores de
Trazados, Rellenos, Degradados, y otras opciones.

GESTIÓN DE VENTANAS Y PANELES

Puede crear un espacio de trabajo personalizado moviendo y manipulando los paneles y las
ventanas también puede guardar espacios de trabajo y pasar de uno a otro.

13
A. Reorganizar, acoplar y desacoplar ventanas

Un conjunto acoplado es un conjunto de ventanas o grupos de ventanas que se muestran

juntos, generalmente en una orientación vertical. Estos conjuntos se acoplan y
desacoplan moviéndolos dentro y fuera de un conjunto acoplado.

1. Para acoplar una ventana, arrástrela por su ficha al conjunto apilado, a la

parte superior, a la parte inferior o entre otras ventanas.

2. Para acoplar un grupo de paneles, arrástrelo por su barra de título (la

barra vacía sólida que se encuentra encima de las fichas) al conjunto ha
acoplar.

3. Para quitar una ventana o grupo de ventanas, arrástrelas fuera del

conjunto acoplado por su ficha o barra de título. Puede arrastrarla a otro
conjunto acoplado o hacer que flote con libertad.
4.

La zona de colocación azul estrecha

indica que el panel Color se acoplará
por sí mismo encima del grupo de
paneles Capas.

A. Barra de título B. Ficha C. Zona de

colocación.

B. Apilado de paneles flotantes

Cuando arrastra una ventana fuera de su conjunto apilado pero no a una zona de
colocación, esta flota con libertad. Las ventanas flotantes se pueden situar en cualquier
lugar del espacio de trabajo. Puede apilar ventanas flotantes o grupos de manera que se
muevan como una unidad cuando arrastra la barra de título.

Paneles apilados flotantes de

libre movimiento.

14
 1. Para apilar ventanas flotantes, arrastre una ventana por su ficha a la zona
de colocación en la parte inferior de otra ventana.

2. Para cambiar el orden de apilado, arrastre una ventana arriba o abajo por
su ficha.

3. Para quitar una ventana o un grupo de ventanas de la pila, de manera que

flote por sí misma, arrástrela fuera de su ficha o barra de título

C. Introducción de un valor en un panel o cuadro de diálogo

Realice una de las siguientes acciones:

1. Introduzca un valor en el cuadro de texto y pulse Intro (Windows) o

Retorno (Mac OS), usted puede realizar operaciones aritméticas dentro de
estos cuadros.

2. Arrastre el regulador.

3. Arrastre el dial

4. Haga clic en los botones de flecha del panel para aumentar o reducir el
valor.

5. Haga clic en el cuadro y utilice las teclas Flecha arriba y Flecha abajo del
teclado para aumentar o reducir el valor.

6. Seleccione un valor en el menú asociado al cuadro.

15
 Métodos para introducir valores

A. Botones de flecha B. Cuadro de

texto C. Flecha de menú D.
Regulador E. Dial

GUARDAR ESPACIOS DE TRABAJO

Al guardar la posición y el tamaño actuales de los paneles como un espacio de trabajo con
nombre, puede restaurar dicho espacio de trabajo incluso aunque mueva o cierre un panel. Los
nombres de los espacios de trabajo guardados aparecen en el conmutador de espacios de
trabajo de la barra de la aplicación.

1. Elija Ventana > Espacio de trabajo > Nuevo espacio de trabajo.

2. Escriba un nombre para el espacio de trabajo.

CREAR DOCUMENTO NUEVO

Para crear un documento nuevo en Adobe Ilustrador CS6, puede dar clic en Archivo>Nuevo;
también puede utilizar el método abreviado de teclado Ctl+N o Cmd+N según su sistema
operativo, esta acción abrirá la siguiente ventana:

16
 A

C F
E
D

A. Nombre del documento. B. Perfiles por defecto. C. Ancho de Mesa de Trabajo. D.

Alto Mesa de Trabajo E. Unidad de medida F. Orientación Mesa de Trabajo.

MODOS DE PANTALLA

Puede usar las opciones de modo de pantalla para ver las imágenes en toda la pantalla. Puede
mostrar u ocultar la barra de menús, la barra de título y las barras de desplazamiento.

Realice una de las siguientes acciones:

1. Para visualizar el modo por defecto (barra de menú en la parte superior y barras
de desplazamiento en el lateral), seleccione Vista>Modo de pantalla> Modo de
pantalla estándar. O bien haga clic en el botón Modo de pantalla debajo del
Panel Herramientas y seleccione Modo de pantalla estándar en el menú
emergente.
2. Para visualizar una ventana en pantalla entera con una barra de menú, sin barras
de título ni de desplazamiento, seleccione Vista > Modo de pantalla > Modo de
pantalla entera con barra de menús. O bien haga clic en el botón Modo de
pantalla de la barra aplicaciones y seleccione Modo de pantalla entera con barra
de menús en el menú emergente.

17
 3. Para visualizar una ventana en pantalla entera (sin barras de título, de menús ni
de desplazamiento), seleccione Vista > Modo de pantalla > Modo de pantalla
entera. O bien haga clic en el botón Modo de pantalla de la barra aplicaciones y
seleccione Modo de pantalla entera en el menú emergente.

Botón Modo
de Pantalla

Nota: Puede pasar de un modo de pantalla a otro solo presionando la tecla ( f ).

SELECCIÓN DE COLORES USANDO PANEL HERRAMIENTAS

En la parte inferior del panel herramientas aparecen los iconos relleno y trazado del programa
Adobe Ilustrador, en la imagen de abajo el cuadro blanco representa el color de relleno, y el
cuadro negro el color del trazo, para intercambiar ambos pulse la tecla (x).

Cuadros de color Relleno

y Trazo

A. Color Solido. B. Degradado. C. Ninguno.

A. Para cambiar los colores tanto del relleno como del trazo solo de doble clic en el icono
correspondiente, esto abrirá la ventana selector de color de Ilustrador.

18
Selector de Colores

El selector de colores de Ilustrador permite elegir colores de 4 modelos de color distintos,

CMYK, RGB, HSB, Lab, también puede seleccionar colores específicos, utilizando sistemas de
color como ser PANTONE, TOYO, etc.

A. Color seleccionado. B. Color original. C. Color ajustado. D. Icono de alerta de

fuera de gama. E. Icono de alerta de un color no compatible. F. Solo muestra colores
compatibles con Web. G. Campo de color. H. Regulador de color. I. Valores de color.

Nota: Al seleccionar un color del Selector de color, éste muestra los valores numéricos
para HSB, RGB, Lab, CMYK y números hexadecimales simultáneamente. Esto resulta
útil para visualizar la manera en que los distintos modelos de color describen un color.

Para elegir un color, introduzca los valores de los componentes del color en los cuadros de
texto HSB, RGB y Lab también puede utilizar el regulador y del campo de color, Si opta por
seleccionar el color con el regulador y el campo de color, haga clic en el campo de color o
mueva el triángulo del regulador de color, mueva el marcador circular o haga clic en el campo
de color.

19
A. Selección de un color con el modelo RGB

Puede elegir un color especificando sus componentes rojo, verde y azul.

1. En el selector de color, introduzca los valores numéricos adecuados en los cuadros de

texto R, G y B. Especifique valores entre 0 y 255

2. Si desea seleccionar visualmente un color con el regulador y el campo de color, haga

clic en R, G o B y, acto seguido, ajuste el regulador y el campo de color

B. Selección de un color con el modelo CMYK

Puede elegir un color especificando el valor de cada componente como un porcentaje

de cian, magenta, amarillo y negro, también puede utilizar el regulador.

¡Muy bien, ahora que ya ha culminado la lectura de la presente unidad se le sugiere

realizar las actividades de aprendizaje!

20