CREIX

AMB
INTERNET

ILLUSTRATOR: CREACIN DE
UTILLAJE GRFICO E ILUSTRACIN
ndice:
Introduccin.........................................................................................................pg. 03

1. Creacin de un logotipo
original............................................................................................................pg.04

2. Vectorizar Ilustraciones y colorearlas a partir de un dibujo

escaneado...pg. 13

3. Guardar para Web e importar en

Flash...pg. 17

Enlaces de
inters........................................................................................................................pg. 19

2
Introduccin
Actualmente, Illustrator es el programa ms utilizado para el diseo vectorial,
tanto en papel como en web.

Es un programa muy completo y cuyo aprendizaje profesional requiere tiempo y

prctica. Adems, es recomendable tener conocimientos previos sobre vectores,
para facilitar la comprensin y poder profundizar en el funcionameinto de la
herramienta.

El objetivo de este seminario es realizar ejercicios prcticos profesionales.

Como por ejemplo; disear un logotipo desde cero completamente original,
vectorizar mapas de bits (ilustraciones) y colorearlas vectorialmente y finalmente,
exportar documentos en diversos formatos.

Descripcin del contenido del seminario:

- Disear Logotipos.
- Vectorizar mapas de bits.
- Colorear Ilustraciones.
- Exportar en diversos formatos (Flash, Web, papel)

3
1. Creacin de un logotipo original.
La tarea de crear logotipos puede ser emocionante y difcil al mismo tiempo. Por
un lado, crear logotipos es interesante porque ayudas a las empresas a descubrir y
crear su marca.

Por otro lado, no es nada sencillo. Porque no hay ciencia exacta que se pueda
aplicar al proceso.

El proceso conlleva bastante tiempo de principio a fin. Podemos llegar a 10

conceptos diferentes con un cliente y finalmente puede rechazarlos todos.

O, en algunos casos, pasan semanas verificando o revisando los conceptos y el

cliente finalmente decidir el primero de todos que se le envi hace un mes. Nunca
se sabe y cada situacin puede llegar a ser muy diferente en cada ocasin.

Hay tres errores comunes que los nuevos diseadores hacen al crear un logotipo y
que se debe evitar a toda costa ...

1. El lpiz y el boceto.

Como diseadores, nunca debemos sentarnos delante del ordenador y tratar de

crear un logotipo. Despus de haber hablado con nuestro cliente en profundidad,
intentando clarificar que es lo que necesita y quiere representar su empresa,
nuestro primer paso debe ser trabajar con el lpiz, el cuaderno de dibujo y
sentarnos en una habitacin tranquila y permitir ideas nos lleguen libremente. No
es conveniente forzar las ideas. Esto slo ayudar a que nos frustremos en el
proceso.

Basta con anotar lo que nos viene a la mente cuando pensamos en lo que
queramos representar con el logotipo e informar al cliente del diseo durante el
proceso de creacin. La mejor manera de que un cliente vea los conceptos
plasmados antes de realizar el arte final, son los bocetos.

Una vez que tenemos algunas ideas sobre el papel, hemos de tomar algunos de
los bocetos iniciales y comenzar a plasmarlos.

Una vez que tengamos tres o cuatro buenos conceptos, a continuacin, debemos
sentarnos delante del ordenador y empezar a digitalizar esas ideas.

4
2. El diseo ha de ser original

Nuestro trabajo siempre debe ser 100% hecho a medida. Nunca se debe utilizar
cliparts predeterminados o en el trabajo vectorial creado por otro diseador para
nuestros logotipos.

Como ya he mencionado antes, este es un proceso y no debemos tomar el camino

ms fcil mediante el uso de trabajo que no es el nuestro.

Aunque hacer estudios de otros logotipos creados por prfesionales y estudiar la

manera en la que trabajan puede ayudarnos mucho.

3. Los Logos se disean vectorialmente.

Nunca debemos crear un logotipo que finalmente se va a imprimir en Adobe

Photoshop. Si lo hacemos, tendremos un producto de escasa resolucin y
definicin, que finalmente no se podr escalar para adecuarlo a diferentes
superficies.

Todos los diseos de nuestros logos deben ser ilustraciones vectoriales y, por
tanto, no dependeran de la resolucin. Son incontables las veces en las que los
clientes envian una imagen de 72 ppp de su logotipo para colocarla en un
documento para imprimir. Eso significa que tendramos que volver a crear el
logotipo en formato vectorial, redibujndolo.

Es crucial, aparte de mostrarle al cliente pantallazos o jpegs de los logotipos,

que les proporcionemos tambin una versin totalmente vectorial del logotipo.

El Tutorial.

Teniendo en cuenta que esto es un ejercicio. Nuestro cliente tiene un restaurante

americano que se llama Lone Star Steakhouse. Obviamente ficticio.

Vamos a realizar los pasos reales de cmo se trabaja en la creacin de un

logotipo, crearemos una marca en modo logotipo personalizado, para el
restaurante Steak House ficticia denominada "Lone Star Steaks".

Despus de esbozar algunos conceptos, me decido por el que muestro a

continuacin.

5
Como podemos ver, es una representacin bastante rudimentaria de lo que ser
el logotipo final. Pero esto es solo para mostrar la intencin y poder visualizar los
puntos claves para luego plasmar definitivamente la idea.

Vamos a trazar una imagen con la herramienta pluma y las herramientas

buscatrazos y vamos a personalizar un poco la forma de la tipografa libre.
Para trazar el logotipo, tenemos siempre dos opciones. Trazar desde el boceto el
logo o bien trazar recreando el logo desde una fotografa. Optaremos por realizar
la segunda opcin.

Utilizaremos Adobe Illustrator (preferiblemente a partir del CS3).

Paso 1: Configurar el documento

Es una buena opcin trabajar con un gran lienzo al crear un logotipo, as que
vamos a empezar con un documento CMYK de 11 pulgadas de ancho x 8.5
pulgadas de alto. Tambin vamos a arrastrar dos guas, el centro y luego las
bloqueamos. Tambin podemos activar las reglas, pero no ser necesario para
este tutorial.

6
A continuacin, necesitamos una imagen de referencia (Stock Photo o similares).

(Importante: Si este fuese un proyecto para un cliente real, deberamos comprar

los derechos y obtener una copia en alta resolucin de la imagen A mayor
resolucin, ms fcil nos ser trazar el objeto.)

Seleccionamos la capa activa y vamos a (Archivo/Colocar) para importar la

imagen de arriba. La tenemos en la carpeta (U:/Materials/Illustrator) y hacemos
clic en Colocar.

Esto colocar la imagen en el centro de nuestra mesa de trabajo. Seleccionamos

la imagen y el centro de la cabeza de este ganado con las guas.

Hacemos doble clic en la Capa 1 para que aparezca la ventana Opciones de

capa de la paleta y seleccionamos Bloquear y difuminamos o transparentamos
la imagen al 50%, as ser ms fcil trazar el logo. Por ltimo, debemos crear una
nueva capa sobre la capa 1 con nombre de "Logo".

En esta capa es donde vamos a crear el logotipo. El documento debera tener el

siguiente aspecto:

7
Es probable que tengamos que repetir este paso varias veces para hacerlo bien. Si
surge algn problema, slo tiene que deshacer los ltimos pasos y empezar de
nuevo. (CTRL+Z).

Para dominar la herramienta pluma se necesitan muchas horas de prctica, as

que si es la primera vez que utilizamos la herramienta, el logotipo no saldr
demasiado bien. Debemos dominar la tcnica perfectamente para plasmar
grficamente logotipos bien hechos.

Paso 2: Trazar el logo

Tan slo tenemos que trazar la mitad de la cabeza de este ganado. Antes de
comenzar a trazar, debemos seleccionar la herramienta Zoom en la paleta de
herramientas y hacer zoom hasta el final en la imagen. Ahora debemos establecer
el relleno a ninguno y el trazo a Negro con un grosor de 0,25 px.

Vamos a trazar por etapas, y al final utilizaremos la herramienta de Buscatrazos

para crear la forma deseada.

1. Solo vamos a realizar un seguimiento de la mitad de la cabeza. Con la

herramienta pluma seleccionada, trazamos el lado derecho de la cabeza y
terminamos el trazado en la gua central. Nos quedar la mitad del dibujo.

2. Para el odo derecho, seleccionamos la herramienta Elipse y dibujamos un

valo en la oreja. Es posible que debamos cambiar la posicin del valo para
encajar bien la oreja de la imagen.

8
3. Seleccionamos las dos formas. Desde la paleta Buscatrazos , seleccionamos
Agregar a rea de forma (sumando los objetos) y, a continuacin clicamos en
Expandir. Ya hemos creado la mitad de la cabeza.

4. Seleccionamos de nuevo la forma y hacemos clic en la herramienta Reflejar

de la paleta de herramientas. Debemos hacer un punto de referencia en el centro
de las guas. Reflejamos horizontalmente y creamos una copia.
Finalmente, seleccionamos las dos formas y hacemos clic en Agregar a rea de
forma, y despus Expandir. La cabeza se ha completado.

5. Desbloqueamos la capa 1 y eliminamos la foto. Ya no la necesitamos.

Paso 3: Aadir tipografa.

Es aconsejable utilizar fuentes libres para trabajar logotipos.

Antes de empezar, hemos de asegrarnos de bloquear la forma de la cabeza para

que no se mueve alrededor de texto y as mantenemos la marca insignia
perfectamente centrada.

1. Seleccionamos la herramienta texto de la paleta de herramientas y hacemos

clic en cualquier parte de la mesa de trabajo.

2. Seleccionamos la tipografa que quede ms coherente con el concepto inicial

de creacin del logo. Vamos al men de caracteres en ventana y configuramos el
tamao de la fuente.

9
 3. Seleccionamos el texto recin escrito con la herramienta de seleccin y lo
alineamos con el centro de la mesa de trabajo. Desplazamos el texto para que se
siente debajo de la marca insignia. Hemos de asegrernos de dejar suficiente
espacio entre la marca y el texto. Anulamos la seleccin del texto.

4. Una vez que estemos satisfecho con la colocacin del texto, seleccionamos las
dos lneas de los textos y vamos al men: Texto/Crear contornos. (Esto va a
cambiar la tipografa convirtindola en vector y dejar de ser un texto editable.)

5. Seleccionamos las dos lneas de texto y, agrupamos. Botn derecho (agrupar).

6. Ahora el logotipo est empezando a tomar forma. Vamos a aadir una

"estrella" en el centro de la cabeza.

7. Seleccionamos la herramienta estrella de la paleta de herramientas y ponemos

el color de relleno a blanco y el trazo a ninguno.

8. Una vez que estemos satisfecho con la colocacin de la estrella, la

seleccionamos y la cabeza tambin y las agrupamos. Finalmente seleccionamos
todo el logotipo (cabeza y texto) y lo agrupamos tambin.

(Nota: He creado un destacado opcional para los odos que no es necesario para
este tutorial.)

Finalmente, ya tenemos nuestro logotipo creado.

10
Debemos jugar bastante con esta tcnica y ver las infinitas posibilidades a las que
se puede llegar en la creacin de siluetas con la pluma y la herramientas del
Buscatrazos.

2. Vectorizar Ilustraciones y colorearlas

a partir de un dibujo escaneado a tinta.
Illustrator nos permite colocar imgenes ya escaneadas (TIF o JPEG) y
convertirlas en trazados vectoriales a travs de la herramienta Calco interactivo.

Lo primero que debemos tener en cuenta es que esta herramienta funciona

adecuadamente cuando el dibujo escaneado est entintado previamente y la
resolucin (300ppp) y calidad del dibujo es alta.

Por ejemplo un dibujo a lpiz no quedara bien e incluso un JPEG conseguido de

Internet a baja resolucin.

A continuacin creamos un documento nuevo en Illustrator, con perfil CMYK para

imprimir y vamos al men: Archivo colocar.

11
Ya tenemos nuestro TIFF colocado en el lienzo de trabajo. A continuacin,
debemos seleccionarlo y en la barra de opciones clicar en calco interactivo para
convertirlo en vector.

Esto se puede hacer con cualquier imagen colocada, pero los resultados no son
siempre fiables.

Es aconsejable elegir unas de las opciones predeterminadas por defecto en el

men de calco interactivo, aunque podemos despus personalizar la conversin
a vector. En este caso concreto en el que trabajamos, la opcin comic es
perfecta.

12
Una vez digitalizado el mapa de bits, pasamos a colorearlo con la herramienta
pintura interactiva.

Tanto Illustrator como Freehand, permitan colorear trazados vectoriales,

nicamente si estaban cerrados y en su modalidad de relleno. Con esta nueva
herramienta de illustrator eso cambia. Hemos de seleccionar el trazado y dar al
boton pintura interactiva, una vez hecho, Illustrator detecta los huecos para
colorear y slo debemos elegir colores e ir rellenando las reas marcadas en
rojo.

13
Seleccionando los colores adecuados y procurando no marcar los rellenes en
negro de la tinta original podemos conseguir un resultado como ste.

Ya solo queda expandir la ilustracin para salir del modo pintura interactiva.
Si se quiere aadir algo, como degradados u otras opciones funcionara como
cualquier grupo de trazados. Se ha de seleccionar el relleno que queramos
cambiar y aadir degradados, motivos, etc.

14
3. Guardar para Web e importar en
Flash.
Aunque es posible guardar la ilustracin como archivos adecuados para Web
mediante el comando Exportar, es mucho ms sencillo usar el comando Guardar
para Web y dispositivos.

Guardar para Web y dispositivos permite elegir formatos de archivo Web, selec-
cionar opciones de compresin y color, y previsualizar la ilustracin optimizada.

En Illustrator, se pueden usar sectores para definir los lmites de los distintos
elementos Web (como texto HTML, imgenes de mapa de bits o grficos vecto-
riales) de la ilustracin.

Por ejemplo, si la ilustracin contiene una imagen de mapa de bits que haya que
optimizar en formato JPEG, mientras que el resto de la imagen se optimiza mejor
como GIF, puede aislar la imagen de mapa de bits usando un sector. Si guarda la
ilustracin como pgina Web mediante el comando Guardar para Web y
dispositivos, tiene la posibilidad de guardar cada sector como un archivo
independiente con su propio formato, ajustes y panel de colores.

Los sectores de un documento de Illustrator corresponden a celdas de tabla en la

pgina Web resultante.

15
Si queremos trabajar los diseos realizados en Illustrator en otra herramienta
como Flash, lo primero es guardar el documento como .AI (Documento genrico
de Adobe Illustrator).

Lanzamos el programa Flash, vamos a Archivo/Importar en escenario o en

biblioteca y seleccionamos el archivo .AI.

A continuacin tendremos importado todo el material realizado en Illustrator

totalmente editable a nivel vectorial en Flash.

16
Gua de Recursos
RECURSOS
Nombre URL Observaciones
Adobe http://www.adobe.es Pgina oficial del fabricante
del programa Adobe
Illustrator.

Descargar http://www.adobe.com/es/products/illustrato Compra o descarga gratuita

programa r/?promoid=BPBIT del programa durante un
mes.

Tutoriales http://www.cristalab.com/tags/illustrator/ Tutoriales de Illustrator

Tutoriales http://www.tutorial-lab.com/tutoriales- Tutoriales de Illustrator

illustrator/

Tutoriales http://www.gusgsm.com/tutoriales_illustrator Tutoriales de Illustrator

Tutoriales http://www.ndesign- Tutoriales de Illustrator

studio.com/resources/tutorials/

17