1

Conceptos Básicos y Teorías del Color

2014

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

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.

2

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.

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.

INTRODUCCIÓN

Conceptos Básicos y Teorías del Color

3

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.

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.

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

APLICABILIDAD

FORMATOS DE ADOBE ILUSTRADOR

4

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).

5

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.

COLOR

6

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)

MODELOS DE COLOR

7

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 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:

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

EL COLOR COMO MEDIO EXPRESIVO

Sensación Percepción Integración

8

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.

9

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.

10

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.

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.

ESPACIO DE TRABAJO

11

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.

12

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

13

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.

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.

GESTIÓN DE VENTANAS Y PANELES

14

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.

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.

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.

Paneles apilados flotantes de

libre movimiento.

15

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.

16

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.

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:

GUARDAR ESPACIOS DE TRABAJO

CREAR DOCUMENTO NUEVO

Métodos para introducir valores

A. Botones de flecha B. Cuadro de

texto C. Flecha de menú D.

Regulador E. Dial

17

A

B

C

D E

F

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.

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.

MODOS DE PANTALLA

18

Cuadros de color Relleno

y Trazo

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.

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

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).

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.

Botón Modo

de Pantalla

SELECCIÓN DE COLORES USANDO PANEL HERRAMIENTAS

19

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.

20

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!