Guia de Aprendizaje IllustratorCS5

Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS5: gua de maquetacin
ndice de tutoriales
Introduccin
Creacin de un fondo de pantalla
11.Creacin de un dibujo haciendo uso de los

trazos atractivos
Creacin de un estampado geomtrico
12.Creacin de la ilustracin de un zorro con las
Creacin de un banner de pgina web
innovaciones: pincel de Cerdas y modo de
Creacin de un icono para un dispositivo mvil
dibujo
Cartel/pster vectorial
13.Creacin de una postal vectorial de flechas
Creacin de una grfica vectorial
14.Crear un anuncio web con lneas
Creacin de arte para imprimir en una camiseta (y
discontinuas
preparacin de impresin)
15.Creacin de una tarjeta virtual esttica
Crear una animacin Flash dentro de Illustrator
16.Creacin de un objeto interactivo con
10.Creacin de un edificio vectorial en perspectiva
Illustrator CS5 y Flash Catalyst CS5.
Introduccin
Bienvenidos a la Gua de aprendizaje de Adobe Illustrator CS5.
Illustrator es un programa que os ofrece un rea de trabajo y una interfaz de
usuario muy eficaces para crear y editar ilustraciones. Estas ilustraciones podrn
ser utilizadas en distintos medios, como impresin, web y dispositivos mviles.
Illustrator utiliza grficos vectoriales que pueden ser reproducidos a cualquier
escala sin perder calidad.
Comenzaremos nuestra gua de aprendizaje explicando la estructura general del
programa creando ilustraciones simples y luego iremos aadiendo complejidad a
lo largo de los diferentes tutoriales.
Los tutoriales de esta gua han sido realizados utilizando un PC; las teclas que
corresponden en una Mac sern como siguen:
Gua de aprendizaje
Tutorial 1. Creacin de un fondo de pantalla
Paso 1 de 11
En este tutorial vamos a crear
un fondo de pantalla como el
que vemos.
Al crear este fondo de pantalla,
vamos a aprender sobre el
entorno de Illustrator, sobre la
utilizacin de herramientas
bsicas de ilustracin, como
formas geomtricas, y tambin
sobre aplicacin de efectos
como el de fusin.
Al final del tutorial veremos
cmo optimizar imgenes para
web.
INICIO | CRDITOS
Gua de aprendizaje

Paso 2 de 11
La pantalla de bienvenida de Illustrator (que
aparece al abrir el programa) est dividida en
tres reas principales:
-Abrir un elemento reciente: lista de los
ltimos documentos usados.
Abrir: haremos clic en el icono Carpeta si
nuestro documento no aparece en la lista.
-Crear nuevo: nos da la opcin de crear un
elemento nuevo con las caractersticas
especficas.
Desde plantilla: Illustrator
ofrece plantillas usables de ejemplo.
Empezaremos nuestro tutorial creando un
documento nuevo para web (Crear nuevo >
Documento para web).
-La parte inferior de la pantalla muestra la gua
de usuario, nuevas funciones, recursos y
lugares de Internet donde se comparten
conocimientos acerca del programa.
INICIO | CRDITOS
Paso 3 de 11
La siguiente pantalla que nos aparece nos da la
opcin de nombrar nuestro documento y darle
determinadas caractersticas, desde aqu
podemos volver a cambiar el tipo de documento
(web, impresin...), as como las medidas de
ste y podemos elegir el nmero de mesas de
trabajo.
Las mesas de trabajo sustituyen a la
herramienta de Recorte de versiones pasadas y
son las reas de nuestro espacio de trabajo que
contendrn las ilustraciones imprimibles.
Podremos crear hasta 100 mesas en un mismo
lienzo segn el tamao de stas y guardar,
exportar e imprimirlas de manera conjunta o
separada.
Para empezar, crearemos slo una mesa de
trabajo en un documento web (pues nuestro
fondo est destinado a verse en una pantalla)
que llamaremos Estrella, de 800 x 600 pxeles
con 72 ppp y color RGB y haremos clic en OK.
Paso 4 de 11
Partes principales de la interfaz:
1. Barra de aplicacin: contiene un
conmutador de espacio de trabajo y
mens (en Windows).
2. Barra de herramientas: contiene
herramientas de seleccin,
transformacin y dibujo
principalmente.
3. Panel de control: nos muestra
opciones especficas de la
herramienta seleccionada en el
momento.
4.
Ventana de documento:
muestra la ventana en la que

trabajamos. Los documentos se
pueden
organizar
en
fichas,
agrupar y acoplar.
5. Paneles: ayudan a controlar y
modificar elementos. Es como
una versin ampliada del Panel
de control. Podemos
personalizarlos desde el men
Ventana.
6. Mesa de trabajo: donde dibujaremos nuestras ilustraciones.
Para nuestro tutorial usaremos el espacio de trabajo: aspectos esenciales desde el

men desplegable de la barra de aplicacin.
Paso 5 de 11
Para dibujar nuestra estrella comenzaremos
Podemos dibujar figuras geomtricas de dos
Para conseguir que la estrella sea
seleccionando la herramienta de Rectngulo.
maneras: o bien seleccionando la figura
perpendicular con la horizontal, pulsaremos
Bajo todos los iconos que contienen un
(haciendo clic en el icono deseado), pulsando
Shift o Maysculas al crearla.
pequeo tringulo en la parte inferior derecha
y arrastrando el ratn hasta conseguir la
se encuentra un men desplegable al que
medida deseada, o bien haciendo clic y
podemos acceder manteniendo el botn del
soltando. Al hacer esto aparece una ventana
ratn pulsado sobre el icono.
nueva en la que podemos insertar las medidas
Cuando el men se despliega, podemos elegir
exactas.
la herramienta deseada (en este caso la
Si queremos cambiar el nmero de puntas
Estrella) y si soltamos el ratn, podemos
de nuestra estrella, pulsaremos las flechas del
comenzar a dibujarla. Si queremos que este
teclado arriba (ms) y abajo (menos) segn el
men desplegable est siempre a nuestro
numero de puntas deseado. El mnimo es tres
alcance, podemos hacer clic en el tringulo de
y no tiene mximo de puntas. Para nuestra
la derecha (marcado en la ilustracin
estrella elegiremos 4 puntas.
siguiente).
Si lo deseamos, siempre podremos

cambiarlas desde el Panel de control ms
tarde, y con ello podemos modificar el tamao
de la estrella en cualquier momento.
Paso 6 de 11
Cualquier figura podr tener un
- Desde el panel de Color: si no est visible,
Para seleccionar un objeto en Illustrator basta
relleno (color de dentro) y un trazo
podemos acceder a ste (y a cualquier otro
con hacer clic en la flecha negra de la barra de
(color del borde). Para esta
panel) desde el men Ventana > Color
herramientas, y para seleccionar una parte
estrella no es preciso elegir un
especfica de los objetos, pulsaremos en la
trazo. Para ello haremos clic en
fecha blanca, llamada herramienta de
Trazo y elegiremos la opcin de

Seleccin directa.
Ninguno.
Podemos acceder y cambiar
los trazos y rellenos de
Vamos a hacer clic en el relleno de nuestro
cualquier objeto seleccionado:
objeto y seleccionaremos un color, por ejemplo

un amarillo.
Desde el Panel de control:

- Desde la barra de herramientas:
Paso 7 de 11
Si hacemos doble clic en el cuadrado del
Presionando maysculas (para mantener la
El siguiente paso ser seleccionar ambas
relleno del panel de Color, nos abre un cuadro
proporcin), Alt (para que lo haga desde todos
estrellas (basta con trazar un cuadro con la
de dilogo en el que podemos elegir cualquier
los ngulos a la vez) y arrastrando hacia el
herramienta flecha por encima de las dos) y
color por valores numricos (RGB o CMYK), o
centro crearemos una estrella mas pequea y
elegir Objeto > Fusin > Opciones de fusin.
haciendo clic en la gama de color.
la situaremos en el centro de la original.
Nos aparecer el siguiente cuadro de dialogo:
Si por cualquier razn la estrella no est en el

centro, la acercaremos y mientras nos
acercamos pondremos atencin a las guas
inteligentes (las que nos indican las
intersecciones, el centro, puntos de alineado
entre los objetos que son movidos y otros en
nuestro documento). Si las guas inteligentes
no estn activas, las activaremos desde: Ver >
El siguiente paso es crear otra estrella en el
interior de la primera; para sta elegiremos un
color diferente, por ejemplo un azul.
Dos maneras de hacer la nueva estrella: o bien
pulsando Ctrl + C (para copiarla) y Ctrl + F
(pegarla al frente de la otra) o bien creando una
nueva como la primera vez.
Guas inteligentes (Control + U)
Haremos clic en ok y despus haremos clic en

Objeto > Fusin > Crear.
Paso 8 de 11
Siguiendo el mismo mtodo
usado antes, ahora vamos a crear
una estrella de muchas puntas
(100 puntas) y esta vez
Copiaremos y pegaremos una
Una vez realizada la fusin
estrella igual en frente de la
haremos doble clic en la estrella
primera: Ctrl + C y Ctrl + F y
pequea para moverla. El resto de
haremos esta ltima ms pequea

presionando Maysculas y Alt
la ilustracin la seguir como si
aadiremos un trazo de 2 pt
desde el men desplegable de
colgaran todas de un hilo, esto

nos puede ayudar a crear
Fusionamos estas dos y..
Trazo en el Panel de control.
perspectivas interesantes.
Elegimos colores de relleno

(morado) y trazo (amarillo) y al
trazar la primera estrella ste es
el resultado obtenido:
Una vez tenemos la forma

deseada seleccionaremos la
estrella entera con la flecha
negra y giraremos sta desde
una esquina.
Paso 9 de 11
Los siguientes pasos sern
Primero hemos de hacer clic fuera
Ahora s pulsaremos el botn derecho para llegar al men
simplemente experimentar con
de la ilustracin para salir del
de organizar objetos (pulsaremos Traer al frente para
otras formas geomtricas y otros
modo fusin de la ltima estrella.
traer el objeto por encima de todos los dems; Hacia
colores de relleno o incluso usar
Sabremos que est en este
delante, para subir un nivel; Hacia atrs, para bajar un
trazo de diferentes tamaos para
estado si el resto de la ilustracin
nivel y Enviar detrs para mandar la ilustracin debajo de
crear una composicin que nos
aparece menos iluminado, como
todas las dems.
guste.
en la siguiente ilustracin (donde

la estrella azul est en modo
Se pueden variar tambin las
fusin).
posiciones de los objetos que

vamos a fusionar e incluso
fusionar objetos fusionados.
El siguiente paso ser colocar las
estrellas donde queramos. Para
mover objetos unos delante y
otros detrs de estos primeros,
pulsaremos el botn derecho del
ratn para llegar a un men que
En la siguiente pgina se puede ver un fondo de pantalla
nos permite organizar los objetos.
creado con las estrellas que se han mostrado en este

tutorial.
Paso 10 de 11
Una vez creada la composicin
deseada la guardaremos desde
Archivo > Guardar o desde el
atajo de teclado: Ctrl + S. (Si no
lo habamos nombrado todava,
pulsaremos Archivo > Guardar
como y elegiremos un nombre y
Sin embargo, Guardar para web y dispositivos y la opcin Exportar nos
un lugar donde guardar la
ofrecen un abanico un poco ms amplio. La siguiente es una captura de
composicin que nos servir de
pantalla a la que podemos acceder desde: Archivo
fondo de pantalla).
> Guardar para web y dispositivos (Alt+Mayus+Ctrl+S)
Es bueno guardar una versin

en modo Ai, (Illustrator) por si
queremos modificarla ms tarde,
pero para nuestro fin queremos
guardarlo como JPEG, por
ejemplo.
Si intentamos Archivo > Guardar
no nos da la opcin de guardar
como JPG, como podemos ver
en la siguiente captura de
pantalla:
Una vez en esta pantalla, podemos hacer clic en diferentes

opciones. En nuestro caso haremos clic en 4 copias (desde las
pestaas de arriba) y comparemos los pesos y tamaos, as como
el tiempo que tarda en cargarse en una pgina web, elegiremos
JPEG de calidad 30.
Paso 11 de 11
Si tomsemos la decisin de
Exportar la imagen, porque igual
no necesitamos visualizar el
estado final de nuestras imgenes,
podremos ir directamente a
Archivo > Exportar y las opciones
que nos ofrece Illustrator en este
caso son:
En la siguiente pantalla,
elegiremos un sitio adecuado y
un nombre, dejaremos el resto
de las opciones como estn y
haremos clic en OK. Nuestro

resultado:
Tutorial 2. Creacin de un estampado geomtrico
Paso 1 de 8
En este tutorial vamos a ver cmo
hacer un estampado geomtrico
simple para utilizarlo de fondo en
una pgina web, por ejemplo.
Al realizar el estampado que
vemos a la derecha, vamos a
aprender tcnicas de
transformacin, bibliotecas de
muestras y el funcionamiento de
las capas de Illustrator.
Paso 2 de 8
Para empezar, crearemos un
documento nuevo. Crear nuevo >
Documento para Web
de 800 x 600 pxeles y con
orientacin horizontal.
Paso 3 de 8
Con la herramienta rectngulo seleccionada
vamos a crear un rectngulo de 20 px de ancho
por 60 px de alto sin trazo y con relleno negro.
El siguiente paso ser ir a Objeto
El siguiente paso ser hacer clic en cada uno de los
> Expandir apariencia y despus
rectngulos y darles un color diferente a cada uno.
desagruparemos los rectngulos
Para este tutorial vamos a elegir varios tonos de azul con el
desde el men desplegable que
fin de simular los diferentes tonos del agua.
aparece al hacer clic derecho (de

manera que podremos dar un
Para ello nos vamos a ayudar de las bibliotecas de colores
Con el rectngulo negro seleccionado, vamos al
color diferente a cada uno de
que ya hay creadas en Illustrator. Primero nos hemos de
men superior Efecto > Distorsionar y
ellos).
cerciorar de que el panel de Muestras est activo, si no lo
transformar > Transformar y elegiremos las
est, lo encontraremos bajo el men Ventana > Muestras.
caractersticas que se muestran a continuacin:
Despus haremos clic en el icono de abajo, como se

muestra en la imagen siguiente:
Visualmente debera parecerse a

la siguiente imagen:
Paso 4 de 8
Una vez ah elegiremos Naturaleza > Playa y
nos aparecer un nuevo panel del que
elegiremos los colores que nos gusten. Aqu
hemos elegido varios tonos de azul para
simular agua.
Ahora vamos a reagrupar nuestros rectngulos desde el
La siguiente ilustracin
botn derecho (Agrupar) y otra vez iremos al men
muestra el resultado de la
Efecto
ltima transformacin.
> Distorsionar y transformar > Transformar y en este

caso elegiremos las opciones siguientes: hay que poner
especial atencin dnde colocar la nueva copia, como se
seala en la ilustracin bajo un crculo rojo.
Con la herramienta de Seleccin directa

seleccionaremos la parte de la derecha de
nuestros rectngulos y despus presionando
Maysculas haremos clic y arrastraremos
los rectngulos hasta obtener la inclinacin
deseada.
Otra vez vamos a usar el

efecto transformar pero
ahora queremos poner una
copia de nuestros primeros
rectngulos, por lo que los
vamos a mover
verticalmente.
Paso 5 de 8
ste
es
El siguiente procedimiento ser crear un
el
rectngulo sin relleno ni trazo de 80 px de alto y
resultado
120 px de ancho (80 = nmero de rectngulos x
visual:
ancho de cada uno y 120 = 2 x altura de un

rectngulo). Vamos a mandar ste debajo de
nuestros rectngulos desde el panel de Capas
(si no est visible lo activaremos desde el men:
Ventana > Capas o pulsando F7).
Y por ltima vez volveremos al mismo efecto y

esta vez haremos una copia a -80 en la
vertical.
Las capas nos permiten mostrar, organizar y editar

los objetos de un documento. Por defecto, cada
documento tiene una capa y los objetos que
creamos se van disponiendo en sta, pero
podemos distribuirlos en capas diferentes para
poder tener un mejor control sobre ellos.
El cuadrado pequeo que est en el
Haciendo clic la podremos identificar
crculo rojo en la ilustracin anterior indica
y la arrastraremos para moverla.
que la capa est seleccionada en ese

momento.
El ojo de la izquierda demuestra la

visibilidad de las capas y si hacemos
El crculo indica la apariencia y haciendo

doble clic en l podremos acceder a ella y
cambiarla desde el panel Apariencia.
clic en l, podemos esconderlas.
Paso 6 de 8
Para mover la capa donde se
Si hacemos doble clic en el nombre de una capa,
Otro aspecto importante acerca de las capas es que
encuentra el ltimo rectngulo
accederemos al siguiente men, donde
trazado, haremos clic en la
pueden ser bloqueadas. Para ello, haremos clic en el
podremos cambiar de nombre, bloquear y
cuadro al lado de los ojos y aparecer un pequeo
capa que dice Trazado y
mostrar la capa.
candado (nuestra capa estar bloqueada y no se podr
arrastraremos hasta abajo; en
mover). Si hacemos clic otra vez, el candado
este punto soltaremos el
desaparecer y podremos modificar nuestra capa otra
ratn.
vez.
Podemos cambiar los

nombres de las capas por
nombres que se nos hagan
Como vemos, en nuestro panel de Capas hay
ms apropiados y para que
unos tringulos a la izquierda de los iconos
cuando tengamos muchas
de las capas. stos indican que hay un
capas, podamos encontrar los
submen al que accederemos haciendo clic
objetos mas rpidamente.
en el tringulo.
Los colores tambin pueden

ayudarnos a identificar y
localizar las capas ms
Como en nuestro caso slo hay una capa, al
facilmente (la nuestra es azul
bloquearla se bloquean los dems elementos; si
marino).
hacemos clic en uno de los grupos, slo entonces se

bloquearn stos individualmente.
Tutorial 2. Crecin de un estampado geomtrico
Paso 7 de 8
Desde el panel Alinear, al que
El ltimo paso ser arrastrar
accederemos desde el men
nuestra agua de mar varias veces
Ventana > Alinear o con el atajo
hasta la mesa de trabajo e ir
de teclado: Maysculas F7,
situndolas una al lado de la
seleccionaremos todo (Ctrl A) y
siguiente con cuidado de no dejar
elegiremos el alineado a la
espacios. Tambin podemos usar
izquierda. Esto har que la
la tcnica de antes para hacer
lnea que haba entre los
copias de nuestro estampado
trazados se ajuste y no deje
original o copiar y pegar
ningn pxel blanco entre ellos.
Por ltimo, con toda la capa

seleccionada, la arrastraremos
hasta nuestro panel de
Muestras hasta que aparezca
un signo ms al lado del
puntero del ratn. Dando doble
clic en sta, la cambiaremos de
nombre (en este tutorial la
vamos a llamar agua de mar).
seleccionando cada vez un grupo

mayor. Al final lo que queremos
hacer es agrupar todo para que
no se nos mueva sin querer e
incluso podemos bloquear la capa
desde el panel de Capas.
El siguiente paso es exportar
nuestro fondo de pantalla a
formato GIF, por ejemplo, y la
nica manera de poder elegir
formato GIF es la de Guardar
para Web y dispositivos.
Paso 8 de 8
As pues, como en el tutorial 1, elegiremos
la calidad deseada y nos fijaremos en que
las opciones que se nos ofrecen para GIF
son un poco diferentes a las del JPEG. Las
elegiremos como en la siguiente
ilustracin: y pulsaremos Guardar.
En la siguiente pantalla, elegiremos un sitio

adecuado y un nombre y dejaremos el
resto de las opciones como estn.
Finalmente, haremos clic en OK.
El resultado debe ser como en la siguiente
ilustracin.
Como actividad realizaremos un
estampado hecho de rombos.
Tutorial 3. Creacin de un banner
Paso 1 de 12
En este tutorial vamos a ver
cmo hacer un banner de
pgina web.
Al hacer este banner de
pgina web aprenderemos
varias tcnicas de dibujo,
como la utilizacin de la
herramienta Elipse, la
herramienta Cuentagotas, el
uso del panel Buscatrazos,
cmo se hacen los
degradados lineales y cmo
insertar texto en nuestras
ilustraciones, entre otras.
Paso 2 de 12
En este tutorial vamos a ver cmo
hacer un banner de pgina web.
documento nuevo. Crear nuevo >
Documento para web
de 800 x 250 pxeles y con
orientacin horizontal.
Paso 3 de 12
El banner que vamos a crear est
destinado para una pgina web
llamada agua de mar. El banner
va a estar compuesto por dos
elementos: una ilustracin de un
pez y texto para el ttulo de la
pgina web.
Para organizarnos mejor, el primer
paso va a ser crear 3 capas en
Vamos a crear el cuerpo del
nuestro documento nuevo,
pez; empezaremos eligiendo
(Ventana > Capas, o F7 y
un color azul para web para el
haremos clic en el icono Crear
relleno y sin borde y crearemos
nueva capa).
un crculo de 100 x 100 px con
Ahora que tenemos trazado el crculo
la herramienta Elipse y
azul, vamos a seleccionar la herramienta
presionando Maysculas para
de Seleccin directa (flecha blanca) para
mantener las proporciones.
arrastrar los puntos de ancla del crculo
Para cambiar el nombre de una

capa haremos doble clic sobre el
nombre y cambiaremos el
nombre. Comenzaremos
trabajando en el cuerpo del pez.
y deformarlo. Puntos de ancla: cada

Alternativamente podremos
trazado (lnea) consta de uno o ms
cambiar las proporciones desde
segmentos curvos o rectos.
el Panel de control.
El inicio y el fin de cada

segmento est sealado
por los puntos de ancla.
vrtice (conecta rectas o curvas)
Hay dos tipos de punto
y puntos de suavizado (conecta
de ancla: puntos de
curvas).
Paso 4 de 12
Cambiaremos el nombre de este grupo a Cuerpo desde el
panel de Capas y crearemos otra capa llamada Boca, como
hemos hecho anteriormente.
El panel de Capas nos quedar como en la siguiente
ilustracin.
Con la herramienta Elipse otra vez

Haremos clic y arrastraremos en el
vamos a crear unas elipses con color
punto de ancla que deseamos
blanco como las que siguen:
mover y moveremos hasta que

logremos el tamao deseado.
Seleccionando el crculo ovalado
que hemos creado presionaremos
Seleccionaremos la capa de
Ctrl C y Ctrl F para copiar y pegar
boca para realizar la siguiente
en frente del original.

Seleccionando el punto de abajo, lo
encogeremos hacia adentro y
daremos un color ms claro a este
(valo) de encima.
Vamos a seleccionar todos los elementos

creados hasta ahora y los vamos a
agrupar desde el men desplegable que
aparece al pulsar el botn derecho del
ratn.
parte de nuestra ilustracin

haciendo clic sobre sta.
Trazaremos otra elipse
perfecta (presionando
Maysculas) con relleno negro
y sin borde de 60 x 60 px.
Paso 5 de 12
Ahora veremos cmo dividir esta
El siguiente paso ser dibujar los dientes del
circunferencia en su mitad para formar
pez; para ello vamos a crear un crculo negro
una boca sonriente.
de 20 x 20 pxeles, lo vamos a seleccionar
Para ello primero nos aseguraremos
mientras pulsamos Alt + Maysculas y lo
de que el panel Buscatrazos est
arrastramos hacia la derecha (al presionar
activo desde el Men Ventana >
Despus seleccionaremos todo y haremos
Alt copiamos la forma y con las maysculas
Buscatrazos (Mayus.+ Ctrl + F9)
clic en el segundo icono del panel
se restringen los movimientos).
Buscatrazos (menos frente).

Tambin necesitamos tener activadas
las guas inteligentes.
Ahora s, trazaremos un rectngulo
con la misma apariencia (relleno
El siguiente paso ser seleccionar ambas
negro y sin trazo) hasta la mitad del
circunferencias para agrupar los dientes
crculo (las guas inteligentes nos
(botn derecho > agrupar) y colocarlos sobre
avisarn cuando lleguemos al centro).
la boca como en la siguiente ilustracin:
No importa dnde empieza el

rectngulo, pues slo lo queremos
para sustraer esa parte del crculo
que no queremos utilizar.
Paso 6 de 12
Ahora vamos a alinear los dientes con la boca
haciendo clic en el panel Alinear, accesible
desde el men Ventana (Mayus. + F7)
Ahora vamos a hacer lo mismo que hemos
hecho con los dientes pero con la lengua, es
decir, vamos a duplicar la forma de la boca,
vamos a seleccionar esta ltima y la lengua y
Una vez hecho esto, vamos a cambiar a
por ltimo haremos clic en el Buscatrazos para
blanco el color de la forma creada y ya
formar la interseccin entre las dos formas:
podemos visualizar los dientes.
Seleccionaremos la boca otra vez y la

copiaremos-pegaremos enfrente (Ctrl + C,
Para la lengua, vamos a dibujar un crculo de
Ctrl
25 x 25 px de color blanco y sin trazo y lo
+ F). Ahora vamos a seleccionar una de las
colocaremos encima de la boca.
copias de la boca y los dientes y manteniendo
Seleccionaremos la boca, los dientes y la
presionado Alt en el teclado haremos clic en
lengua y haremos clic en el icono de
el icono redondeado en la ilustracin siguiente
centrado horizontal del panel Alinear.
(Formar interseccin).
Hecho esto obtendremos el siguiente resultado:
Paso 7 de 12
Vamos a dar a la lengua un degradado de
Vamos a seleccionar la lengua y vamos a
El rombo que se desplaza por encima de la
color rojo a rosa para darle un poco ms de
aplicar un degradado con un tono rosado para
barra de degradado es para introducir paradas
profundidad.
la lengua desde el panel de Color (Ventana >
en el degradado, que regularn las distancias
Para ello debemos activar el panel de
Color o desde el teclado: F6)
que abarcan los colores del degradado y
Degradado (Ventana > Degradado o desde el
En el panel de Degradado, nos aseguraremos
podremos crear varias de ellas. Cuando
teclado: Ctrl + F9) y el panel de Color
de que Lineal est seleccionado en el men
usamos la herramienta de Degradado este
(Ventana > Color o pulsando F6).
desplegable.
rombo es un cuadrado pequeo.
Haremos clic en la muestra de la izquierda

Tambin podemos acceder a los degradados y
(el cuadro pequeo debajo de la barra de
Vamos a hacer clic en el icono marcado en un
modificarlos utilizando la herramienta de
degradado) y en la paleta de Color elegiremos
crculo rojo en la siguiente ilustracin para
Degradado de la barra de herramientas:
un color rosa oscuro. Para la muestra de la
cambiar la orientacin del degradado
derecha (la que aparece en negro) elegiremos
(Degradado inverso). Tambin en este panel
un color rosa blanquecino. Haciendo clic en la
podemos alterar los grados y la proporcin
herramienta de Degradado nos aparecer otra
(iconos de ngulo y elipse ovalada).
barra de degradado encima del objeto

seleccionado a travs de la cual tambin
podemos acceder a estas paletas y modificar
los colores.
Paso 8 de 12
Tambin se pueden crear degradados
transparentes que controlaremos con la
opacidad:
Ahora
regularemos
la
cantidad
de
color
Para nuestro degradado vamos a cambiar la
deseada con la manecilla del regulador de las
orientacin de ste con la herramienta
paradas de color.
Degradado.
Para ello situaremos el ratn sobre el extremo
derecho de la barra de degradado, donde
aparece un cuadro pequeo (al puntero del
ratn se le aade una forma de flecha curvada)
y la rotaremos 90 grados a la izquierda a la vez
que la encogemos hacia abajo.
Ahora vamos a cambiar la orientacin de ste
El siguiente paso ser agrupar la boca, los
con la herramienta Degradado.
dientes y la lengua y colocar el conjunto

encima del cuerpo que dibujamos antes.
Para ello situaremos el ratn sobre el extremo

derecho que acaba en punta de la barra de
Con todos los elementos seleccionados,
degradado, donde aparece un cuadro pequeo
haremos clic en el icono de centrado desde el
negro y cuando al puntero del ratn se le
panel Alinear.
aada una forma de flecha curvada rotaremos

la barra 90 grados a la izquierda a la vez que
la encogemos hacia abajo.
Paso 9 de 12
Para los ojos de nuestro pez hemos creado
tres crculos (seleccionando herramienta de
elipse, pulsando maysculas y arrastrando el
ratn) de diferentes tamaos como se puede
apreciar en la ilustracin de abajo, les hemos
dado al primero un borde de color gris de1 px
y un relleno blanco, para el segundo hemos
quitado el borde y le hemos dado un relleno
de color negro y para el tercero hemos
trazado una circunferencia muy pequea
blanca y sin
El siguiente paso va a ser dibujar la cola del pez.

Para ello vamos a usar la herramienta Pluma.
Seleccionando sta desde la barra de herramientas
haremos clic donde queramos empezar nuestro trazo
borde.
de cola y soltaremos el botn del ratn, luego nos

situaremos donde queremos realizar el siguiente
Una vez tenemos el primer ojo, lo vamos a
trazo e Illustrator crear una lnea desde nuestro
colocar sobre la boca y vamos a hacer una
primer punto hasta este ltimo. Repetiremos esto
copia del mismo para el ojo derecho.
hasta tener la cola dibujada.
Para ello vamos a presionar Alt y Maysculas,

haremos clic y arrastraremos el ojo hacia la
derecha poniendo atencin en las guas
inteligentes.
Puntos de ancla:
o curvas) y puntos de suavizado
herramienta Aadir punto de ancla. Para
Cada trazado (lnea) consta de uno o ms
(conecta curvas).
eliminar puntos usaremos la herramienta
segmentos curvos o rectos. El inicio y el fin
La herramienta Pluma nos permite
Eliminar punto de ancla y para convertir
de cada segmento viene sealado por los
realizar lneas rectas y curvas y
puntos de ancla usaremos la ltima opcin
puntos de ancla. Hay dos tipos de punto
transformar sus puntos de ancla.
del men Herramienta Pluma. Esta ltima
de ancla: puntos de vrtice (conecta rectas
Si queremos aadir ms puntos de
cambia vrtices redondeados a cuadrados y
ancla a una ilustracin, usaremos la
viceversa.
Paso 10 de 12
Para mover los puntos de ancla que estn ms
cerca del trazado del cuerpo del pez es mejor
hacer un zoom para acercarse y ver mejor los
puntos.
Para ello haremos clic en el icono de la Lupa
Lo siguiente ser dar color a la cola; para ello
(barra de herramientas) y pincharemos sobre
queremos elegir el mismo color que en la parte
la zona que queremos ampliar o usaremos las
de arriba del cuerpo del pez (azul claro). Con
teclas: Ctrl + o Ctrl para acercarnos o
la
alejarnos.
cola seleccionada haremos clic en la

herramienta Cuentagotas desde la barra de
Una vez ah usaremos la herramienta Mano
herramientas y despus haremos clic sobre
espaciadora) y haciendo clic con el ratn y
el
arrastrando hasta donde queramos.
color
que
deseamos
copiar,
desde la barra de herramientas (o con la barra
automticamente se copiar el color.
Seleccionaremos la herramienta de
Seleccin directa (flecha blanca) y haremos
clic en los puntos de ancla que queremos
mover.
Para hacer la parte de la cola azul oscuro

vamos a trazar un tringulo con la
herramienta Pluma como antes. Elegiremos
el color azul y mandaremos este objeto hacia
atrs haciendo clic en el botn derecho del
ratn > Organizar > Hacia atrs (Ctrl + 9).
Paso 11 de 12
Cuando usamos cualquier herramienta, el

Para finalizar el pez realizaremos
Panel de control se personaliza para esa
unas elipses de diferentes tamaos
herramienta; ahora que hemos trazado texto
de color azul oscuro para simular
se ha cambiado a Carcter, como vemos en
gotas de agua.
la siguiente ilustracin:
El siguiente paso ser el texto del

banner.
Para ello activaremos el panel de
Carcter desde Ventana > Texto >
Carcter (Ctrl + T).
Para introducir texto utilizaremos la
herramienta Texto (T)
(desde la barra de herramientas).
Haremos clic y arrastraremos para
crear un cuadro de texto e
introduciremos el texto deseado.
Para obtener el
De momento no nos vamos a
texto de arriba
complicar con el texto, va a ser
hemos utilizado
algo bastante simple: slo le
el color azul
pondremos un relleno y un borde
oscuro que
de color ms oscuro.
utilizamos en el
pez y las
siguientes
caractersticas
de texto:
Paso 12 de 12
El ltimo paso que hemos dado
ha sido poner un degradado de
fondo utilizando el azul oscuro del
texto para la parte de abajo del
degradado y blanco para la parte
de arriba simulando el mar.
Ya slo nos quedara exportar
nuestro documento a un formato
adecuado para web otra vez, pues
es un banner de pgina web.
(Como en el tutorial 2,
guardaremos para web y
dispositivos y elegiremos GIF
con las mismas caractersticas
que en el tutorial 2).
Como actividad podramos
variar los trazados del pez para
hacer una ilustracin de otro
animal, por ejemplo.
Tutorial 4. Creacin de un icono para un dispositivo mvil
Paso 1 de 14
En este tutorial vamos a
aprender a hacer un botn
para un mvil como el que
vemos a mano derecha.
En el transcurso de este
tutorial veremos
herramientas como la del
Rectngulo redondeado.
Tambin veremos efectos
como el de reflejo.
Ms tarde veremos el panel
de Transparencia y cmo
hacer mscaras de recorte,
entre otras cosas.
Paso 2 de 14
Para empezar, crearemos
un documento nuevo y en
el men desplegable del
perfil de documento
elegiremos Mvil y
dispositivos.
Por defecto al elegir este
perfil nos rellena unas
opciones como el rea de
recorte, el modo de color
los efectos de rasterizado y
el modo de presentacin.
Vamos a dejarlos como nos
sugiere Illustrator que
utilicemos y haremos clic en
OK.
Gua de aprendizaje
INICIO | CRDITOS

Paso 3 de 14
ste va a ser el botn de ajustes que
podra aparecer en un mvil. Para
empezar vamos a dibujar el botn en s y
ms tarde dibujaremos lo que sera el
icono que representa los ajustes que irn
dentro del botn.
Comenzaremos dibujando un cuadrado
El botn nos quedar algo as:
perfecto con esquinas redondeadas y
los dos). Y de radio dejaremos 5 px.
de relleno negro.
Para ello, seleccionaremos relleno negro
desde la barra de herramientas y borde
ninguno y a continuacin
seleccionaremos la herramienta de
Rectngulo redondeado (situada en la
barra de herramientas). Presionando
Maysculas mientras arrastramos el
ratn crearemos un cuadrado de 30 x 30
pxeles y de radio: 5 pxeles.
27 x 27 px (dejaremos 3 pxeles de diferencia entre
Ahora lo que hemos de hacer es crear otro

rectngulo ms pequeo, para ello vamos a
hacer clic en la mesa y como an tenemos
la herramienta de rectngulo redondeado
seleccionada nos aparecer otro igual al
primero, y en la pantalla que nos aparece le
daremos las medidas del nuevo cuadrado:
Gua de aprendizaje
INICIO | CRDITOS

Una vez realizados los cuadrados,
ambos e iremos al panel de Alinear
Haremos clic en Centrar y Centrar
los queremos alinear uno con el
que ya habamos usado antes.
verticalmente (en la ilustracin, iconos de
otro; para ello seleccionaremos
izquierda a derecha bajo los crculos rojos)
Gua de aprendizaje
INICIO | CRDITOS

Paso 4 de 14
El siguiente paso ser dar un
Una vez hecho esto iremos a editar
Para dar un efecto de realidad y simular que el
degradado a nuestro botn.
nuestro degradado utilizando para ello la
botn es acristalado, vamos a realizar el tpico
Para ello seleccionaremos el
herramienta Degradado de la barra de
reflejo del botn. Para comenzar el reflejo
cuadrado del interior, iremos al
herramientas.
seleccionaremos la herramienta Rectngulo
panel de Degradado y
Con sta seleccionada haremos clic sobre
de la barra de herramientas y haremos un clic
elegiremos gris oscuro para la
la parte ms alta de nuestro cuadrado
en el lienzo, de medidas 27 x 13 px y 3 px de
muestra de la izquierda y
arrastrando sin soltar el ratn hacia abajo.
radio. Lo centraremos en nuestro cuadrado
negro para la de la derecha
Si es necesario, utilizaremos los
base con la ayuda de las guas inteligentes.
(como en el tutorial 2 podemos
manejadores para alterar nuestro
hacer doble clic en la muestra y
degradado a nuestro gusto.
elegir color, o podemos hacer

clic en el color deseado desde
La apariencia de nuestro botn en el
el panel de Muestras y
momento de cambiar la orientacin del
arrastrarlo hasta nuestra
degradado ser sta:
muestra en la barra de
degradado).
Como el relleno que tenamos era el del

degradado del ltimo cuadrado, lo
cambiaremos de blanco a negro.
Con el ltimo rectngulo seleccionado iremos
al men Ventana para activar el panel de
Transparencia (men Ventana >
Transparencia o Mayus. Ctrl).
Gua de aprendizaje
INICIO | CRDITOS
Gua de aprendizaje
INICIO | CRDITOS

Paso 5 de 14
Con la herramienta Pluma (barra
de herramientas) con un trazo
negro de 1 px y sin relleno,
trazaremos una lnea (hacer clic en
En este men hay varios modos
los dos puntos que seran los
de fusin; elegiremos el de
extremos) con una inclinacin
Trama, que multiplica el inverso

de los colores base y de fusin.
El efecto obtenido es parecido a
proyectar varias imgenes
transparentes unas sobre otras.
aproximada a la ilustracin de la
Para que no se note tanto el contraste,
derecha.
volvemos a seleccionar el rectngulo y le

bajamos el degradado hacia la izquierda con
el manejador de arriba de la barra de
El siguiente paso va a ser hacer un reflejo de este
degradado.
segmento para que nos quede simtrico. Para ello vamos

a seleccionar el segmento trazado y seleccionando la
Llegado aqu vamos a
herramienta de Reflejo (O) (barra de herramientas)
dejar el recuadro del botn
presionaremos la tecla Alt y haremos clic en el lugar
un poco aparte y vamos a
donde queramos el eje (al pulsar Alt aparecern tres
comenzar dibujando lo que
puntos al lado del puntero del ratn).
va a ir en el interior, que
va a ser similar al
mecanismo de un reloj
(ruedas, poleas, etc.) en
una capa nueva (llamada
Poleas).
Gua de aprendizaje
INICIO | CRDITOS

Paso 6 de 14
En la siguiente pantalla podremos elegir el eje en el que
Ahora slo hemos de repetir este
queremos que se refleje el original (X o Y), en nuestro
objeto varias veces. Para ello hay
caso es el vertical (Y) a 90 grados y haremos clic en
varios caminos, uno de ellos es ste:
Copia.
Seleccionamos nuestros tres
trazados y a continuacin
seleccionaremos la herramienta
Rotar (R) (desde la barra de
herramientas).
Al hacer esto nos va a aparecer lo
Con la herramienta de Seleccin directa seleccionaremos
que va a ser el eje de rotacin
los dos extremos de arriba para unirlos (sabremos que
(marcado con un crculo rojo en la
estn seleccionados cuando los puntos de ancla estn
ilustracin de la derecha), lo que
rellenos.
hemos de hacer es presionar Alt,

hacer clic y arrastrar donde
Para unir los trazado iremos al
queramos situar el eje, hacia abajo,
men Objeto > Trazado > Unir
para que se nos abra la ilustracin
(Ctrl + J).Tambin podemos
como si fuese un abanico.
hacerlo haciendo clic derecho >

Unir o desde el Panel del control
haciendo clic en el siguiente icono:
Al soltar el ratn nos aparece

la
siguiente pantalla. En ella
Gua de aprendizaje
INICIO | CRDITOS

elegiremos un ngulo de 15
grados y haremos clic en Copiar.
Gua de aprendizaje
INICIO | CRDITOS

Paso 7 de 14
Ahora slo hemos de ir a Objeto
Dependiendo del nmero de
El siguiente paso ser unir los dientes de nuestro engranaje; para
> Transformar > Volver a
lados deseados elegiremos el
ello hemos utilizado la misma tcnica usada recientemente (unir
transformar (Ctrl + D) y se irn
nmero de grados en la rotacin;
trazos) y adems hemos elegido un gris para el relleno del
copiando y disponiendo las piezas
en la siguiente tabla hay algunos
engranaje.
de nuestro engranaje.
ejemplos:
Nmero de
Si nos ha quedado muy grande,
repeticiones
3
6
Recordad que para unir los trazos usamos la herramienta de Seleccin

ngulo necesario 120
90
seleccionamos todas las piezas y
72
las reduciremos guardando las
60
proporciones haciendo clic en una
51,4
esquina de la seleccin y
45
manteniendo pulsado Maysculas
40
como de costumbre.
36
32,7
10
30
11
27,7
12
25,7
13
24
14
18
15
12
20
10
30
Gua de aprendizaje
INICIO | CRDITOS

directa haciendo clic en el primer
punto que queremos unir y
presionando
Ma
emos clic en el otro extremo. Nos quedarn los dos puntos de ancla
ys
rellenos del color de la capa en lugar de huecos como est detallado
cula
ar
en la siguiente ilustracin:
Paso 8 de 14
Vamos a crear otros engranajes utilizando las mismas
Vamos a crear otros engranajes
Cuando hacemos esto es como si
tcnicas y con diferente nmero de lados y diferentes
utilizando las mismas tcnicas y
estuvisemos abriendo cajas dentro de
tonalidades de grises para los rellenos.
con diferente nmero de lados
cajas y as sucesivamente.
y
A partir de ahora va a ser cuestin de jugar con las
diferentes
tonalidades
de
grises para los rellenos.
combinaciones de rellenos y tamaos que nos gusten ms
Esto est representado en la parte superior

de la pantalla, donde se van dejando las
y tambin organizaremos los objetos utilizando el modo
A partir de ahora va a ser cuestin
cajas abiertas como cuando entramos en
aislamiento (haciendo doble clic sobre un objeto nos asla
de jugar con las combinaciones de
una pgina web y se nos va indicando
ste de los dems, sombreando el resto de las ilustraciones
rellenos, tamaos, tamao de los
dnde estamos viendo el contenido en ese
para que sea ms fcil trabajar con la deseada).
trazos, etc. que nos gusten ms y
momento.
Tambin usaremos el
panel de Capas o
desde el men
desplegable del botn
derecho para organizar
los objetos.
Aqu tambin podemos
hacer uso del panel
Alinear, seleccionando
los objetos requeridos y
centrndolos horizontal
y verticalmente.
tambin organizaremos los

objetos utilizando el modo
Podremos hacer clic fuera del objeto
aislamiento (haciendo doble clic
para salir de las cajas o utilizar la flecha
sobre un objeto nos asla ste de
hacia la izquierda como en una pgina
los dems, sombreando el resto
web.
de las ilustraciones para que sea

ms fcil trabajar con la deseada).
Si seguimos haciendo clic en el
objeto nos va desmenuzando
ms los trazos de la ilustracin
hasta llegar a la unidad ms
pequea.
Paso 9 de 14
Vamos a hacer una especie de
Ahora vamos a deformar ese
Ahora vamos a duplicar este arco por
polea que ir desde un
arco porque es demasiado
medio de: botn derecho del ratn >
engranaje a otro. Para esto
redondeado para nuestras
Transformar > Reflejo (nos
vamos a usar la herramienta
necesidades.
aseguraremos de hacer clic en
Arco (men Herramientas).
Copia para que nos lo duplique a la

Para conseguir esto lo que
vez).
haremos es seleccionar los

Con la herramienta Arco
puntos de ancla con la
seleccionada, hay que pulsar
herramienta de Seleccin
Maysculas (para mantener la
directa. De esta manera se nos
proporcin), hacer clic y arrastrar
mostrarn los manejadores.
en el lienzo hasta alcanzar la

medida deseada.
Slo hemos de hacer clic y

arrastrar stos hacia atrs y a
la vez girar hacia arriba y abajo
(el manejador de abajo) un
Seleccionando los
poco hasta que obtengamos
segmentos resultantes los
un segmento parecido al que
colocaremos sobre
mostramos a la derecha. Si
nuestra ilustracin y los
pulsamos la tecla Maysculas,
situaremos detrs de los
se restringirn los movimientos
crculos de las poleas
de los manejadores.
(botn derecho
>
O
r
ganizar > Hacia atrs).
Paso 10 de 14
Para asegurarnos de que no se
muevan los engranajes por
accidente, seleccionaremos todas
nuestras piezas y las
agruparemos.
Lo que queremos ahora es
Lo que seguira ahora es hacer
arrastrar la capa del ltimo
un reflejo del botn en el suelo
rectngulo de brillo que hicimos
para que se vea ms real. Para
encima de los engranajes para
ello necesitamos hacer una
que parezca que realmente
copia de todo y ponerla al
est dentro del botn cristalino.
revs bajo nuestro botn.

Para lograr esto
seleccionaremos todo,
Lo que queremos ahora es
haremos clic derecho >
arrastrar la capa del ltimo
Transformar > Reflejo. Nos
rectngulo de brillo que hicimos
aparecer la siguiente pantalla
encima de los engranajes para
en la que utilizaremos las
que parezca que realmente
especificaciones marcadas en
est dentro del botn cristalino.
rojo.
El resultado obtenido lo
arrastraremos con el ratn
hacia abajo dejando una
pequea abertura (como de un
pxel) entre las dos
ilustraciones.
Paso 11 de 14
El siguiente paso va a ser realizar
Seleccionaremos la sombra
miniatura negra como la que
una mscara de opacidad para
que queremos enmascarar.
sigue:
crear transparencia sobre el
Activaremos el panel
reflejo.
Transparencia desde: Ventana
Una mscara de opacidad es la que
> Transparencia (Mayus. +
proporciona la forma a travs de la que
Control + F10).
se ven otros objetos.

Haremos clic en la zona
Primero realizaremos la mscara y luego
marcada con una
la haremos transparente. Illustrator
circunferencia roja en la
funciona de la siguiente manera: traduce
siguiente ilustracin:
los tonos de una ilustracin a tonalidades
una mscara vaca. Tambin

desaparece (est oculta) nuestra
sombra y adems ahora nos
encontramos en el modo de edicin
de mscaras (no podremos
acceder a nuestras capas
grises para interpretar los grados de
normales).
transparencia, que al ser blancos dejan

ver por completo la ilustracin y si son
Si queremos salir de este modo
negros la ocultan totalmente.
basta con hacer clic en la miniatura

de la izquierda y volveremos a tener
Siguiendo esta lgica, cuando hacemos
acceso a nuestras capas.
una mscara de opacidad que lleve un

degradado habr zonas que se vean y
Al hacer esto, se crea
zonas que no tanto o que incluso
automticamente una mscara
desaparezcan (segn lo drstico que sea
de opacidad marcada con una
el degradado).
Illustrator automticamente nos crea
Desde este modo vamos a
Rectngulo
Para que la opcin
desplegable de arriba a la
deseleccionar la opcin de
redondeado
Recortar mscara
derecha (panel
Recortar y la miniatura negra
trazaremos un
est
Transparencia) y
se transforma en una blanca;
rectngulo que la
permanentemente
deseleccionaremos la
ahora podemos ver otra vez la
cubra.
deseleccionada
opcin marcada en la
iremos al men
captura siguiente:
sombra y con la herramienta de
Paso 12 de 14
La siguiente ilustracin es bastante
aclarativa en torno a cmo utilizar
esos tonos grises en Illustrator.
Como vemos, el extremo que est
blanco deja ver toda la ilustracin y
conforme vamos descendiendo en el
degradado va desapareciendo.
Ahora con el ltimo rectngulo

seleccionado iremos a Ventana > panel
de Degradado (Control + F9).
Seleccionaremos Lineal y lo giraremos
indicando un grado de -90 grados.
p
Agruparemos el botn con la
sombra y haremos una capa nueva
con relleno blanco de fondo para
ver el efecto de nuestra
Como tenemos una transparencia que queremos conservar, vamos a guardar la

ilustracin como GIF porque, al contrario que el formato JPEG, ste s nos
conserva la transparencia.
Paso 13 de 14
Ahora vamos a ir a guardarlo desde Archivo
> Guardar para web y dispositivos (desde
aqu podemos ver la ilustracin optimizada y
con hasta cuatro formatos distintos a la vez).
Antes de hacer clic en Guardar vamos a
Desde aqu se nos permite
ver cmo se visualizar nuestro botn en
hacer varias cosas, primero
un mvil, desde Device Central (botn
elegir el tipo de mvil que
de abajo a la derecha).
queremos, desde una larga lista

y tambin desde Internet,
podemos elegir el tipo de
contenido que vamos a insertar
en el mvil y, por ltimo, nos
permite ver el icono en un
emulador.
Desde el emulador podremos ver
cmo se vera el icono con
reflexiones del sol en la pantalla,
reflexiones interiores, etc.
El emulador tambin nos permite
realizar presentaciones.
Paso 14 de 14
Volveremos al men anterior para guardar. En la
siguiente ventana elegiremos el lugar y nombre y
elegiremos slo imgenes del men desplegable.
Haremos clic en OK.
Actividad: crear un botn de mvil nuevo para el
men de los contactos.
Tutorial 5. Cartel/pster vectorial
Paso 1 de 15
En este tutorial vamos a crear un
cartel que ser impreso en gran
escala porque es para una tienda
de helados.
Al hacerlo iremos viendo varias
tcnicas, como el modo de crear
los tpicos destellos solares que
se ven tras la ilustracin del
helado en el cartel.
Ms tarde veremos cmo aplicar
texto a trazados y tambin
veremos, casi al final del tutorial,
cmo utilizar la galera de efectos.
Paso 2 de 15
documento nuevo y en el men
desplegable del perfil de
documento elegiremos Imprimir.
Por defecto al elegir este perfil
nos rellena unas opciones como
el rea de recorte, el modo de
color los efectos de rasterizado y
el modo de presentacin.
Vamos a nombrar nuestro
documento Helados Lola y vamos
a cambiar su tamao y orientacin
como se muestra en la siguiente
captura de pantalla. (Al hacer esto
el men donde elegimos
cambiar de Imprimir a [A
medida] pero no importa porque
nos conserva el modo de color y
la resolucin.
Paso 3 de 15
El cartel es para una heladera y
va a tener un fondo y texto
(Helados Lola). Primero haremos
el fondo y luego el texto Helados
y ms tarde haremos el texto
Lola, que contendr unos
elementos de diseo en la letra
O.
Para empezar vamos a crear un
Tomaremos tres tonalidades de naranja distintas
fondo imitando los rayos del sol.
para nuestro degradado y para ello necesitamos
Para ello comenzaremos
crear ms muestras en la barra de degradado.
utilizando la herramienta de
Para ello basta con pulsar con el ratn cerca de
Rectngulo.
sta y elegir el color deseado. Para eliminar uno,
Trazaremos un rectngulo que
haremos clic y arrastraremos fuera de la barra
coja todo el fondo de nuestro
de degradado.
documento (pinchar y arrastrar el

ratn).
Ahora, aplicaremos un degradado
radial en ste (si no est activo el
panel de Degradado accederemos
a l desde el men Ventana).
En un degradado
radial, la muestra
de la izquierda
representa el
color en el centro
y la derecha el
exterior del
Es importante saber que aparte de
ol
degradado.
los dos degradados ms comunes
(lineal y radial) tambin hay otras
opciones bajo el men
desplegable marcado en rojo en la
el
siguiente ilustracin:
Paso 4 de 15
Vamos a crear un rectngulo de
Desde el panel Alinear centraremos el
100 x 2000 px. Si no vemos las
rectngulo blanco.
medidas, podremos acceder a

ellas y cambiarlas desde el panel
El siguiente paso es ir a Efecto >
Transformar (Ventana >
Distorsionar y Transformar >
Transformar) o desde el Panel
Transformacin libre. Aqu se mostrar
de control cuando tenemos el
nuestro rectngulo con puntos de ancla.
objeto seleccionado.
Presionando Maysculas pincharemos y

arrastraremos las esquinas de abajo y las
intercambiaremos de posicin (puede que
tengamos que mover las esquinas un poco
ms hacia afuera para poder acceder y
seleccionar los puntos de abajo).
Lo siguiente que haremos ser expandir la

forma desde Objeto > Expandir apariencia.
Le daremos un relleno blanco y sin borde.
Ahora vamos al men Objeto >
Transformar > Rotar, y all le daremos 20
grados de inclinacin y haremos clic en
Copiar (esto nos la va a duplicar, si no, slo
la girara). Despus volveremos a hacer
esta accin por medio de Objeto >
Transformar
> Volver a transformar (Ctrl + D).
Paso 5 de 15
Seleccionaremos los rectngulos transformados y los
agruparemos (botn derecho > agrupar) y desde el panel
de Apariencia o desde el panel Transparencia (Ventana >
Apariencia o Ventana > Transparencia) les cambiaremos la
opacidad al 50%.
Ahora vamos a crear un crculo

(tamao aproximado 1400 px
cuadrados) en el medio de
nuestros rayos (Alinear:
horizontal y verticalmente). A
ste le vamos a dar otro
degradado radial y nos
aseguraremos de que la
muestra de la izquierda es
blanca y la de la derecha
negra.
Bloqueamos la capa de fondo

desde el panel de Capas haciendo
clic en el cuadrito al lado del ojo
que indica la visibilidad y nos
aparecer un pequeo candado
que indica si la capa est
bloqueada.
Seleccionaremos los rayos y el
crculo desde el panel de Capas o
directamente sobre ellos y
crearemos una mscara de
opacidad desde el panel
Transparencia.
Paso 6 de 15
El siguiente paso ser dibujar unos
destellos. Para ello vamos a dibujar una
pequea circunferencia, como de 80
mm, en una capa nueva y la vamos a
rellenar con blanco y sin borde. Una vez
hecho esto iremos a Efecto >
Distorsionar y transformar > Fruncir y
ste es el aspecto del fondo, ahora vamos a agrupar
engordar. Y le daremos un valor de
los elementos que lo componen.
90.
Agruparemos los destellos y
Ahora vamos a expandir la apariencia y
nombraremos las capas como Rayos y
cambiaremos la opacidad al 50%,
Destellos para tenerlas bien organizadas.
despus la colocaremos donde

queramos, la copiaremos y
transformaremos su tamao para
situarlas en diferentes sitios.
Paso 7 de 15
Ahora vamos a crear una capa nueva que
contendr nuestro texto: Helados, ste seguir
Lo seleccionaremos y le
un trazado elptico. Para hacerlo trazaremos
daremos un color rosa de
primero una elipse sin relleno ni trazo (barra de
relleno y podemos eliminar el
herramientas > herramienta Elipse).
trazo. Tamao fuente: 300

puntos.
Cuando seleccionamos el
texto en el Panel de control
nos aparecen opciones que
pueden ser una ayuda rpida.
A continuacin activaremos el
panel de Carcter desde el
men Ventana > Texto >
Carcter (Ctrl + T).
Acercndonos al
trazado elptico
pincharemos en ste
cuando las guas
inteligentes nos avisen
con el texto trazado e
introduciremos el texto
Helados.
Seleccionando el texto y cambiando con

las flechas del teclado el tipo de fuente
desde el panel Carcter o desde el
Panel de control, vamos a cambiar de
fuente a Pristina, con 300 puntos de
tamao y sin trazo. Desde el men Texto
> Fuente podemos ver ejemplos de las
fuentes que podemos aplicar.
Paso 8 de 15
Hay un men bajo la barra de mens que se llama Texto. En ste
Al seleccionar el
Centraremos el corchete situado en
podemos encontrar varias opciones para editar nuestro texto.
trazado de la elipse
medio con el indicador de la mitad de
Tambin aparece en este men un submen llamado
del texto se nos
la elipse para centrar o tambin
Opciones de trazado. Aqu hemos elegido el efecto Escaln.
muestran tres
podemos llevar los corchetes de los
corchetes: uno
lados hacia abajo del todo y luego
seala el inicio, otro
desde el panel Prrafo: Ventana >
el punto medio y
Texto > Prrafo (Ctrl + Alt + T)
otro el punto final.
centraremos el texto en nuestra elipse.
Colocando el puntero
Si aparece una cruz roja dentro de los
sobre el corchete
cuadros pequeos, significa que an
del centro aparecer
hay ms texto pero no est visible
un pequeo icono
ahora mismo. Haremos doble clic para
junto al puntero
mostrarlo.
En este men podemos elegir tambin opciones como alinear con

el trazado por encima, por debajo, centrado o en la lnea de base
(estos valores tambin pueden ser modificados ms tarde desde
Men > Texto > Texto en trazado > Opciones de texto en
trazado.
como se muestra en
la siguiente
ilustracin:
Paso 9 de 15
Ahora vamos a dar volumen al
Ahora vamos a hacer el diseo del
Con nuestra elipse seleccionada iremos al men Efecto >
texto. Para ello
helado que va a formar parte del
Galera de efectos y se nos abrir una ventana en la que
seleccionaremos nuestro texto,
nombre de la heladera (Lola),
podremos distinguir dos partes:
y pulsando Alt lo
ms concretamente de la letra
arrastraremos hacia arriba y un
O. Para ello realizaremos una
de nuestro elemento y de cmo los distintos efectos le
poco a la derecha. Le damos
bola de helado de chocolate con
afectan,
relleno blanco para aparentar un
chocolate negro derretido que
poco de volumen.
caer por encima.
- la mitad de la izquierda nos ofrece una previsualizacin
- a la derecha se muestran varias categoras de efectos

con mens desplegables y con miniaturas visuales que
podremos elegir y editar. Para aplicar un efecto lo
Crearemos una elipse y le
elegiremos y haremos clic en OK.
haremos un degradado de tipo

lineal que contendr colores
chocolate y una tonalidad ms
clara de un color similar.
De esta manera tambin

podramos hacer sombras
transformando el ngulo de la
Como vemos en la captura de pantalla anterior, en nuestro
copia y dndole un color ms
men de efectos hemos elegido el efecto de Esponja para
claro al original o jugando con
dar un poco de textura a la bola y con valores de 10, 5 y 15
la opacidad.
para las opciones de editado del mismo efecto.
Paso 10 de 15
ste es el
Vamos a crear el chocolate con la
Ahora vamos a experimentar
resultado que
herramienta Pluma y despus
con otros efectos, como son el
hemos obtenido:
elegimos el color de chocolate
efecto de Resplandor interior
negro o viceversa.
y exterior. Para acceder a

estos efectos iremos al men:
Efecto > Estilizar >
Con el chocolate seleccionado

vamos a utilizar la herramienta
Una vez seleccionada la
Resplandor interior o bien >
Deformar (barra de herramientas),
herramienta, haremos clic
Resplandor exterior (bajo el
que nos va a ayudar a dar una
y arrastraremos sobre las zonas
mismo men).
apariencia ms suave a las gotas
que queramos suavizar.
de chocolate que van cayendo.
Este efecto, como su nombre
Ahora vamos a hacer
Para dar una sensacin
indica, proporciona un efecto de
el chocolate derretido
de volumen ms realista
brillo interior que podremos
de encima, para lo
le daremos un degradado lineal
regular a nuestro gusto.
como los que ya hemos realizado
Por ejemplo podremos editar el
antes.
modo de fusin de este brillo
que usaremos un
color ms oscuro.
con las dems capas y

cambiar el tono del brillo. Para
nuestro chocolate elegiremos
un brillo de un marrn claro,
como en la captura de pantalla
en la pgina siguiente.
Paso 11 de 15
Ahora vamos a aplicar el mismo
Nuestro chocolate cuando va cayendo podra
efecto pero en la bola de helado.
parecerse a la cera de una vela
Para ste elegiremos Modo: Normal,
consumindose, y sta podra parecer como si
Opacidad de 63%, Desenfocar 6,7
fuera de plstico.
mm y Centrar.
A continuacin veremos el efecto de plstico en
nuestro chocolate.
Podremos cambiar las opciones del cuadro

anterior y visualizarlas en el momento como
en la galera de efectos.
ste es el resultado que hemos obtenido:
Al aplicar efectos intentaremos buscar las

propiedades de los materiales con los
que trabajamos o intentamos imitar.
ste es un detalle:
Paso 12 de 15
El siguiente efecto que vamos a
aplicar no est en la galera de
efectos, sino que est en la
barra de mens, dentro del
men Efecto > 3D > Extrusin
y biselado.
Al pinchar en el cubo de 3D se puede controlar la
Cuando estemos contentos
perspectiva muy fcil y rpidamente y mientras
con la forma obtenida para
hacemos esto, nuestro triangulo tomar un aspecto
nuestro cono, haremos clic
parecido al siguiente en modo de previsualizacin.
en OK.
Ahora situaremos el cono
bajo la bola de helado,
Este efecto es muy verstil, ya
deformaremos sta un poco
que podemos utilizarlo de varias
para que parezca derretirse
maneras, previsualizarlo en el
sobre el cono utilizando la
momento y aplicarlo a objetos y
herramienta Deformar
texto. Con l realizaremos el
(Maysculas + R) de la barra
cono del helado.
de herramientas (que ya
usamos previamente).
Para nuestro cono, trazaremos

un tringulo de relleno de color
Tambin se puede deformar
caqui y sin borde. Para rotarlo a
despus haciendo clic en
nuestro gusto iremos al men
nuestro tringulo y pinchando
3D
y arrastrando en las esquinas
> Extrusin y biselado y le
o lados de nuestro cono.
pondremos los siguientes datos

marcados en la ilustracin:
Paso 13 de 15
Lo centraremos
ste es el
seleccionando
resultado que
ambas formas y
obtenemos al
utilizando el panel
aplicar el
Alinear o poniendo
degradado:
Vamos a utilizar la herramienta
atencin a las
guas inteligentes.
Por ltimo, daremos un efecto
Pincel para la segunda l de
plastificado a nuestra cucharilla.
Lola. Para esto simplemente
Para la L de Lola vamos a crear
Usando otra vez la
Como antes, desde la galera de
haremos clic en la herramienta
unas cucharillas de plstico con
herramienta de Rectngulo
efectos elegiremos el siguiente
Pincel desde la barra de
la herramienta Rectngulo
redondeado trazaremos uno
icono con las siguientes
herramientas y con un trazo
redondeado de la barra de
en el interior del primero.
caractersticas: Intensidad: 6,
verde y de 9 pt de grosor la
herramientas.
Para crear un poco de
Detalle: 1, Suavizado: 6.
trazaremos.
profundidad le aplicaremos un
Una vez trazada la lnea
degradado que vaya de un
podremos transformar sus
azul oscuro a transparente.
puntos de ancla.
Trazaremos un rectngulo
Agruparemos los elementos de
redondeado pulsando la tecla
la cucharilla mediante el botn
Maysculas para conseguir un
derecho del ratn > Agrupar y
cuadrado perfecto y luego otro
haremos una copia de la cuchara
para el mango de la
para rotarla y cambiar el color.
cucharilla, pero esta vez lo
As ya tendremos formada
alargaremos hacia abajo.
nuestra L de cucharillas.
Tutorial 5. Cartel/poster vectorial
Paso 14 de 15
El ltimo elemento de nuestro cartel ser la
Para practicar un poco mas con 3D vamos a
Antes o despus de aplicar el efecto
letra a. Para sta vamos a elegir un tipo de
aplicar perspectiva a esta letra a. Para ello
de 3D podemos cambiar el color de
fuente: Myriad Pro Regular, con tamao de
seleccionaremos la letra e iremos al men
nuestra letra si lo deseamos. Hemos
500 puntos e Itlica (cursiva).
Efecto > 3D > Extrusin y biselado y
aplicado un prpura y con el efecto 3D
En las siguientes ilustraciones se muestra la
haremos clic en la zona del cubo y
ese color en la parte de la perspectiva
misma letra antes y despus de cambiar a
arrastraremos hasta encontrar la perspectiva
cambia automticamente para dar una
cursiva. Como vemos, sta no cambia
deseada. Tambin podemos ir bajo posicin y
sensacin de perspectiva ms realista.
solamente la inclinacin del trazo, sino que
elegir posiciones predeterminadas.
cambia totalmente su apariencia, aunque no
Una vez hecho esto el resultado de la
es muy normal puede ocurrir con algunos
letra es el de la siguiente ilustracin.
tipos de letra.
Tutorial 5. Cartel/poster vectorial
Paso 15 de 15
Para finalizar, guardaremos la

imagen final desde el men
Archivo > Exportar (elegir lugar
donde se va a guardar y tipo de
documento: TIFF)
Elegimos TIFF porque contamos
con que este pster, al ser de
grandes dimensiones, va a ser
impreso en una impresora de
gran formato y calidad. Este
formato ser ideal para
impresoras con ms de cuatro
tintas.
Actividad: crear un pster para el
circo con un destello de fondo y
texto que diga Circo siguiendo un
trazado circular y en 3D.
Tutorial 6. Creacin de una grfica vectorial
Paso 1 de 12
En este tutorial vamos a realizar
dos grficas, una ms sencilla
(pasos 1 a 7) y otra en la que
vamos a incluir diseos nuevos
(a partir del paso
nmero 8).
Nuestra primera grfica va a ser
una grfica lineal. La segunda
va a ser de barras.
Aprenderemos a realizar
grficas y a editar tanto el texto
como los detalles de stas.
Paso 2 de 12
dos grficas, una ms sencilla
(pasos 1 a 7) y otra en la que
vamos a incluir nuestros propios
diseos (a partir del paso
nmero 8).
Nuestra primera grfica va a ser
una grfica lineal.
Para empezar crearemos un
documento que nombraremos
Grfica.
Vamos a empezar viendo la
herramienta Grfica desde la
barra de herramientas. El
icono cambiar segn el tipo de
grfica seleccionada, pero
inicialmente ser el siguiente:
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS5 gua de maquetacin

Paso 3 de 12
Haciendo clic en este icono se
muestra un men desplegable en
el que podemos hacer una
seleccin rpida del tipo de grfica
que queremos.
Al hacer esto, los valores del eje Y se
dispondrn automticamente para cubrir
nuestros valores. Una vez hecho esto
haremos clic en aplicar.
Una vez hecha nuestra seleccin de opciones de
Para hacer una leyenda pondremos los
grfica, haremos clic en OK y despus haremos
ttulos de sta en la fila mostrada en la
clic y arrastraremos hasta que la grfica alcance
ilustracin anterior (gatos y gallinas).
el tamao deseado.
Para los datos del eje X hay que

ponerlos entre comillas como muestran
Haciendo doble clic en este icono se
Introduciremos los valores de nuestra grfica
muestra una ventana nueva con ms
manualmente. (Tambin podemos importarlos
opciones para elegir nuestra grfica
desde un documento Excel u otros o simplemente
El siguiente sera el resultado inicial de
como se muestra en la ilustracin
copiando y pegando los datos).
nuestra grfica. Ahora vamos a
siguiente.
los aos de la ilustracin.
convertirla en una imagen un poco ms

interesante y llamativa.
Paso 4 de 12
Para los datos de los ejes vamos a dar un
Haremos clic en la opcin S y ahora
nuevo formato a la fuente y cambiaremos
podemos suprimir la grfica de una de
el tamao de stos.
las copias y el texto y los ejes de la

grfica de la otra. (Haciendo clic en
Para el grfico en s (las lneas) vamos a
ellos y pulsando Suprimir desde el
darle perspectiva y profundidad.
teclado). El resultado ser el siguiente:
Una vez realizada la grfica, si nos

hubisemos olvidado de insertar
Vamos pues a desagrupar los dos elementos
algn dato o quisiramos introducir
desde Objeto > Desagrupar y nos aparecer la
algn otro cambio, lo haramos desde
siguiente ventana de advertencia:
el men: Objeto > Grfica.
En esta grfica (y en general en

todas) tenemos por un lado texto y
nmeros y por otra el grfico, las
Hay que tener claro que una vez
lneas que representan esos
desagrupados, los elementos de nuestra
nmeros.
grfica perdern su adaptabilidad, es decir, no
Vamos a editar texto y grficos de
se podr cambiar su estilo, datos o diseos.
manera distinta.
Tutorial 6. Creacin de una grafica vectorial
Paso 5 de 12
Vamos a dejar aqu de

Para el texto del eje Y, vamos a ver cmo alinearlo con el
momento los datos de la
eje y cambiaremos la fuente como indicamos en la anterior
grfica y vamos a editarla.
captura de pantalla (del Panel de control).

Ahora desde el men
El resultado es el que se muestra a la derecha.
Efecto > 3D > Extrusin

y biselado daremos a
Para el texto del eje X utilizaremos las mismas
nuestra grfica la
caractersticas, pero en lugar de alinear los nmeros a la
perspectiva y profundidad
derecha, los centraremos y, despus, desde el men
deseadas.
Carcter, los alinearemos en la vertical como se indica en

la siguiente ilustracin (con un valor de -10).
Hay que tener cuidado

con la leyenda, si nos
pasamos con la
perspectiva puede que se
mezcle con el grfico o
viceversa. Podemos
evitar esto tachando la
casilla de previsualizar.
El resultado es el
siguiente:
Paso 6 de 12
Una vez hecho esto, queremos
eliminar esos pequeos puntos
Haciendo clic derecho vamos a elegir Seleccionar >
que ayudan a visualizar los puntos
Primer objeto encima (se nos seleccionarn dichos
que insertamos en nuestra tabla
puntos) y haremos clic en Suprimir desde el
porque no quedan muy bien con
teclado.
la perspectiva (stos pueden ser

sustituidos por diseos pero no en
nuestro caso).
Se pueden ver algunos de
ellos bajo los crculos rojos de
la siguiente ilustracin:
Vamos a dar color a la grfica. Para ello queremos

desagruparla como anteriormente.
Aplicaremos color desde el Panel de control; hemos
Para dar un poco ms de iluminacin al
elegido un rosa para los datos de gato y hemos dejado
grfico vamos a utilizar un efecto que ya
el gris un poco ms claro para las gallinas.
usamos en la bola de chocolate del

tutorial anterior (Helados Lola). Efecto >
Resplandor interior y elegiremos
centrar con una opacidad de 61% y
desenfoque de 5 px.
Tambin vamos a cambiar el grosor de nuestro

trazo de las lneas (desde el Panel de control) a
Como ya dijimos, no podemos
volver al men de diseo, as que
vamos a hacer una pequea
trampa para eliminarlos.
un valor de 10 puntos y dejamos el estilo en

Bsico (como estaba).
Gua de aprendizaje
INICIO | CRDITOS

Paso 7 de 12
Obtendremos el siguiente resultado:
Vamos a hacer esas lneas trazos

intermitentes. Una vez realizadas las lneas
las vamos a seleccionar (haciendo clic en
una y luego mientras presionamos Ctrl en
las dems hasta tenerlas todas
Con la herramienta Pluma (de la barra de
seleccionadas) e iremos al men Trazo
herramientas) seleccionada y a la altura de
(desde el panel Apariencia).
las medidas de nuestro eje vamos a trazar
Una vez aqu seleccionaremos el grosor
lneas.
deseado (1pt) y seleccionaremos Lnea

discontinua. Luego introduciremos valores
Ahora vamos a juntar las dos partes
Haremos clic en el punto donde queramos
de 5 pt de guin y 5 pt de hueco
que empiece la lnea y luego a la vez que
sucesivamente.
de nuestra grfica intentando alinear
pulsamos la tecla Maysculas (para que
los trazos con las medidas de los
las lneas sean rectas) pulsaremos donde
ejes y las vamos a agrupar de nuevo.
queramos que acabe.
El ltimo paso que vamos a dar con
Repetiremos este paso o copiaremos y
esta grfica va a ser dibujar unos
pegaremos las lneas tantas veces como
trazados discontinuos que vayan por
puntos hay en el eje Y.
encima de nuestros trazados a la

altura de las medidas del eje Y.
Gua de aprendizaje
INICIO | CRDITOS
Paso 8 de 12
Por ltimo, vamos a enviar esas
lneas al frente de la ilustracin
por medio del men
desplegable del botn derecho
del ratn: Organizar > Traer al
frente.
A la derecha se muestra la
grfica obtenida. Slo faltara
guardarla.
Esta vez la vamos a guardar
como PNG, que nos vendr
bien, por ejemplo, para incluirla
en una presentacin de
PowerPoint.
Para ello iremos al men Archivo
> Exportar.
En la nueva ventana elegiremos
el lugar, el nombre y la extensin
deseadas. Despus haremos clic
en Guardar.
Tutorial 6. Creacin de una grafica vectorial
Paso 9 de 12
Ahora pues vamos a comenzar
Con la herramienta Lpiz
nuestra segunda grfica.
Despus de dibujar el
vamos a crear nuestro diseo,
nio, agruparemos los
que va a ser un nio, por
trazos (botn derecho)
ejemplo.
y seleccionndolo todo
Para sta no vamos a explicar todos los

puntos bsicos ya tocados en la primera parte
reduciremos el tamao
de este tutorial, sino que nos vamos a centrar
de ste hasta
en cmo incluir diseos predefinidos o

cmo podemos crear nuevos diseos para
Ahora vamos a dejar la grfica
incluir en nuestra grfica.
un poco aparte para crear

nuestro diseo de columna.
Vamos a comenzar realizando una grfica

simple como la que hemos realizado al
El primer paso va a ser
comienzo de este tutorial, pero esta vez
seleccionar (con la herramienta
utilizando la herramienta Grfica de barras.
de Seleccin directa: flecha
(Como antes, rellenaremos los datos
blanca) y copiar la columna
necesarios en la tabla de datos).
ms pequea de nuestra
grfica. (La pegaremos en
nuestra mesa de trabajo).
Este rectngulo va a
representar el lmite de nuestro
diseo.
acercarnos al tamao
del rectngulo
Para dibujar con la herramienta
delimitador. Ahora
Lpiz slo hay que
quitaremos el trazo y
seleccionarla, hacer clic y
relleno del rectngulo y
arrastrar en la mesa de trabajo.
lo agruparemos con el
No hay que olvidar cambiar el
nio.
trazado al color que queramos.

Podemos utilizar la herramienta
Suavizar para suavizar trazos o
la de Borrados de trazados
(todas bajo la herramienta
Lpiz) para borrar trazos, como
su nombre indica.
Paso 10 de 12
Ahora vamos a grabar este
Por ltimo vamos a cambiar el nombre
diseo en Illustrator para que lo
a nuestro diseo.
podamos incluir en la grfica.
Despus de hacer esto, iremos al men Objeto > Grfica >
Para hacer esto vamos a
Columna. Y seleccionaremos un tipo de diseo (el
Seleccionar el diseo y
nuestro),
elegimos Objeto > Grfica >

Diseo.
luego
haremos
clic
en
Escala
deseleccionaremos la opcin Rotar leyenda.

Con la herramienta de Seleccin de grupos
(mostrada en la siguiente captura de pantalla)
Haciendo clic en Diseo nuevo
vamos a seleccionar las barras y la parte de la
aparecer una miniatura del
leyenda que queremos que tenga un diseo
diseo seleccionado, slo la parte
distinto.
que entra en el rectngulo pero
Para ello haremos clic dos veces en la
finalmente se incluir tambin lo
leyenda y se seleccionarn todas las
que est fuera.
columnas agrupadas o asociadas con sta.
mvil
Paso 11 de 12
Importante: aunque en las

Ahora vamos a incluir un diseo de
miniaturas de muestras
Illustrator. Con la herramienta
slo aparecen colores
Seleccin de grupos
cuando vamos al men:
seleccionaremos la leyenda A (doble
Objeto > Grfica >
clic). Ahora vamos a importar
Columna (o marcador) de
diseos predeterminados desde el
grfica aparecern los
men Ventana > Bibliotecas de
diseos entre los que
muestras > Otra biblioteca.
podremos elegir.
Para obtener estas muestras iremos a
Elegimos Woman marker
la carpeta de Illustrator y dentro de
de la lista desplegable y
esta iremos a Extras interesantes >
como antes: Escala mvil,
Archivos de ejemplo > Diseos de
deseleccionamos la
Grfica > Motivos de columna y
opcin: rotar diseo de
marcador y haremos clic en abrir.
leyenda y OK.
Ahora con la herramienta de

Seleccin directa
seleccionaremos las partes de
este diseo para darles un trazo
y un relleno (naranja y rosa
respectivamente) con pelo marrn
y daremos nuestra grfica por
finalizada.
Paso 12 de 12
Ya tenemos entonces nuestra

segunda grfica formada por un
diseo que hemos creado
nosotros y por un segundo que
hemos importado a nuestra
biblioteca de muestras.
Como actividad se puede
hacer otra grfica con un
diseo creado con otra
herramienta y tambin se le
puede aplicar Efecto 3D de
rotacin.
Esta vez, exportaremos la
grfica como JPG. Archivo >
Exportar, elegiremos el lugar
donde queremos guardarla y
abajo elegiremos JPG.
Finalmente, haremos clic en
OK.
Gua de aprendizaje

Tutorial 7. Creacin de arte para imprimir en una camiseta
Paso 1 de 18
En este tutorial vamos a disear una camiseta
con unas matruskas o muecas rusas.
Aprenderemos no slo cmo dibujarlas, sino
que tambin veremos cmo preparar la
camiseta para impresin en serigrafa.
Adems, en el transcurso de este tutorial vamos
a ver con ms detenimiento el efecto 3D,
recordaremos la herramienta Pluma y
reduciremos los colores de la ilustracin.
INICIO | CRDITOS
Paso 2 de 18
Vamos a crear un
documento llamado
camiseta_ matruskas y ste
va a tener 3 mesas de
trabajo, pues vamos a
hacer 3 de diferentes
tamaos y de este modo
podemos disponerlas
juntas o separadas de una
manera muy fcil.
En principio van a ser
creadas para ser
imprimidas, ya sea en una
camiseta o en otro medio y
por ello vamos a elegir
CMYK y 300 ppp.
Paso 3 de 18
.
acabarla con el
efecto 3D.
Con la herramienta Pluma

Una vez creemos el
documento, haremos
zoom en la primera
mesa de trabajo.
Cuando estemos en ella
vamos a empezar a
trazar nuestra primera
mueca rusa.
Queremos dibujar
media mueca para
pincharemos en un punto, soltamos

el ratn y pinchamos en el segundo
punto, esta vez sin soltar el ratn y
arrastrando los manejadores hasta
que nos parezca bien la curva.
Realizaremos esta misma accin dos o tres veces
hasta que tengamos la mitad de la matruska ms o
menos lista.
mbi
los manejadores
ar
otra vez hasta que
los
estemos contentos
cont
con nuestra mitad
orn
de matruska.
os
mov
iend
Llegados a este punto, utilizaremos la

herramienta Seleccin directa para mover
los puntos de ancla donde los queramos.
Paso 4 de 18
Nuestra ilustracin no es muy complicada y no
Una vez tenemos la imagen, quiz
importa, pero normalmente es ms costoso para
an queremos editarla; si
Illustrator girar un trazo que un relleno (se podra
queremos hacerlo con Photoshop,
cambiar fcilmente desde el Panel de control).
podemos ir directamente desde el
Vamos a cambiar el color negro por un rojo-
botn del Panel de control: Editar
granate cambiando el color del trazo (o el
original.
del relleno si lo hemos cambiado).

Ahora vamos a envolver una imagen 2D en esta
figura 3D. Para ello nuestra imagen debe ser un
smbolo en el panel de Smbolos, as que
primero vamos a crearlo.
En este caso nuestro smbolo va a ser una foto
Lista nuestra mitad vamos
de una matruska que vamos a importar desde el
a aplicar nuestro efecto
men Archivo > Colocar e iremos a buscar una
Despus de hacer los cambios
3D. Seleccionamos la
imagen desde nuestro ordenador.
requeridos (a nuestra foto le hemos
mitad y despus haremos
quitado el fondo), ahora vamos a
clic en Efecto > 3D >
usar el botn de Calco interactivo
Girar, como se muestra
(a la derecha de Editar original) en
en la anterior captura de
nuestro documento. En las
pantalla. El resultado es el
opciones de calco interactivo
siguiente:
vamos a elegir: Calco simple.
Paso 5 de 18
ste es el resultado:
Al hacer esto, Illustrator abre una pequea ventana
Vamos a seleccionar el objeto 3D, y desde el
como la que sigue para que nombremos
panel Apariencia haremos doble clic en Giro
(Matruska).
3D. Se nos abrir la ventana del efecto 3D y a

continuacin haremos clic en mapear
ilustracin (entonces se abrir una ventana
nueva).
Ahora convertiremos la
imagen 2D a smbolo
simplemente haciendo clic
sobre ella y arrastrndola
hasta el panel de
Smbolos (Ventana >
Smbolos o desde el
Al hacer esto en nuestro panel de Smbolos se
teclado: Mayus.
ver una pequea matruska.
+ Ctrl + F11).
Paso 6 de 18
Ahora vamos a deformar esta imagen para que
cubra la mayor parte de nuestro objeto 3D.
Para ello jugaremos con la imagen movindola
alrededor del cuadro y desde las esquinas
agrandaremos o haremos ms pequea
nuestra imagen, pulsaremos previsualizar para
tener una idea de cmo va quedando.
Vamos a elegir el smbolo que hemos creado antes para

aplicarlo a la superficie del objeto 3D desde el men
desplegable de la izquierda de esta nueva ventana.
Hay varias maneras de aplicar la imagen segn la superficie en
la que la queramos. Para la nuestra elegiremos la superficie 5
de 5. En el cuadro de en medio se muestra un mapa de la
imagen y la imagen en s, las partes grises del mapa muestran
las partes ocultas donde la imagen no se ver por la posicin
del objeto.
Haremos clic en Difuminar ilustracin para que nos

incluya el mismo difuminado en la ilustracin que en el
objeto 3D y haremos clic en OK. Esto resultar en la
siguiente imagen vectorial:
Con esta imagen damos por terminada la
primera matruska.
Paso 7 de 18
Vamos pues a la segunda
mesa de trabajo
(podemos movernos
fcilmente entre ellas con
el men situado en la parte
de debajo de nuestra
pantalla):
Ahora con la herramienta Pincel
Realizaremos dos elipses de
(desde la barra de herramientas)
color rosa sin trazo para los
vamos a dibujar la cara de la
coloretes. Y agruparemos
matruska, el pauelo de la cabeza
los trazos.
y un delantal con una flor

(conviene tener al lado la
matruska
rosa para
hacernos una idea de las

dimensiones).
As obtenemos el resultado de
la segunda matruska:
Vamos a realizar los

mismos pasos para
construir la base de la
segunda matruska, slo
que esta vez vamos a darle
un color rosa y vamos a
reducir el tamao de sta
Usaremos un color negro para

el trazo y el pincel llamado
ahusado de la lista desplegable
de pinceles.
un poco (para que quepa

dentro de la otra).
Colocaremos la ilustracin en el
panel de Smbolos para
despus aadirlo a nuestra
matruska 3D.
Paso 8 de 18
Vamos a hacer una copia
de la ltima matruska, y a
la copia le vamos a quitar el
dibujo (desde panel
Apariencia > Efecto 3D).
Desde este panel elegiremos el
Vamos a crear un pincel nuevo.
Vamos a trazar un tringulo
siguiente pincel (llamado: imperial) y
Para ver las bibliotecas de
alargado. Se puede elegir la
con las siguientes caractersticas de
pinceles desplegaremos el
forma de estrella y mientras la
trazo y relleno:
men bajo el crculo rojo en la
trazamos pulsaremos la flecha
siguiente captura de pantalla:
del teclado que seala hacia
Ahora la vamos a reducir
abajo para quitarle lados hasta
de tamao y le vamos a
cambiar el color a azul.
llegar a tres lados. Soltaremos el

Trazamos un cuadrado con los
ratn y estrecharemos el
bordes redondeados (que va a
tringulo obtenido desde un lado
representar el delantal de la matruska)
para obtener la siguiente
y con ste seleccionado vamos a
ilustracin:
elegir el pincel ya mencionado. ste

es el resultado:
Sin embargo, para crear un

pincel nuevo iremos al
men desplegable de arriba
a la derecha:
Despus, con ste seleccionado,
Ahora, activaremos el panel
Pinceles (Ventana >
arriba del panel Pinceles
Bibliotecas de pinceles >
seleccionaremos: Nuevo > Nuevo
Decorativo > conjunto de
pincel de motivo. Haremos clic en
pinceles florales y de espiral
OK.
elegante).
Paso 9 de 18
Esto nos abrir otra ventana en la que

pondremos un nombre a nuestro pincel,
dejaremos el resto de las opciones
como las predeterminadas y haremos
clic en OK.
La siguiente captura de pantalla
Ahora vamos a poner la
El siguiente paso ser,
muestra la apariencia que tendr
ltima en el centro de
como antes, aadir
nuestro pincel, aplicado a una
nuestro delantal usando
esta imagen 2D a
circunferencia. Segn el tamao de
el panel Alinear (objetos
nuestra matruska
sta puede tener distintas apariencias.
seleccionados) o
numero 3, agrupando
siguiendo las indicaciones
estas dos imgenes
Si encontramos una que nos gusta y
de centro de las guas
(Objeto > Agrupar) y
la queremos utilizar otra vez, ser
inteligentes.
convirtindolas en
mejor arrastrarla al panel de Smbolos
smbolo (arrastrando
para que no importe si cambiamos el
al panel de
tamao de sta.
Smbolos).
Despus, desde el
panel de Apariencia
elegiremos giro 3D >
mapear ilustracin y
Para obtener
esta ltima
hemos aplastado
la circunferencia.
con la opcin
previsualizar iremos a
la Superficie 5 de 5 y
elegiremos nuestro
nuevo smbolo del
men desplegable.
Paso 10 de 18
Para pintar la boca hemos
Para la otra ceja
utilizado la herramienta de
haremos clic en el botn
Bote de pintura interactiva
derecho del ratn >
(barra de Herramientas, K).
Transformar > Reflejo >

Ahora slo nos faltan las
Eje vertical y haremos
cejas; para stas vamos a
clic en copiar.
utilizar un smbolo
predeterminado que
obtenemos desde la
biblioteca: Pelo y pelaje >
Pelo negro 1.
Esta vez vamos a dejar la cara encima de la

ilustracin de la matruska sin aadir el efecto 3D
Para ello, trazamos primero
y slo la agruparemos.
la boca y luego
Para realizar la cara hemos usado la
seleccionando la
Despus lo colocaremos
herramienta Pincel de manchas (barra de
herramienta de Pintura
sobre el otro ojo (hacer
herramientas bajo el pincel normal;
interactiva elegiremos el
clic y arrastrar con el
Maysculas + B). Normalmente se utiliza para
color deseado con las
puntero del ratn).
aadir trazos (slo de relleno) a ilustraciones
flechas del teclado.
existentes, simplemente seleccionando sta y
(Elegimos un color rojo).
arrastrando el ratn para dibujar los ojos,

pestaas nariz y boca.
La arrastramos hasta nuestra

ilustracin y la colocamos
sobre el ojo de la derecha.
Paso 11 de 18
Colocaremos la cara que
Vamos a aadir algn elemento
primera matruska las hemos
Despus hemos mandado los tres smbolos
acabamos de dibujar encima
ms desde la biblioteca de
girado.
detrs o adelante segn convenga (botn
de nuestra ltima matruska
smbolos: Paquete de vectores
derecho del ratn > Organizar > Hacia
y la agruparemos con los
majestuoso. De este paquete
atrs o Hacia adelante) para que queden
dems elementos de sta
hemos elegido los siguientes
detrs de nuestras matruskas.
(Objeto > Agrupar).
smbolos marcados bajo un
Finalmente, hay que agrupar las
circulo rojo en la siguiente
matruskas con estos smbolos nuevos.
captura de pantalla:
de trabajo individualmente).
Los hemos cambiado de tamao

para que queden a proporcin de
nuestras matruskas, y las alas de la
El hecho de haber
permite imprimirlas
ignorar mesas de trabajo
misma opcin para que imprima en
creado nuestras
individual o conjuntamente
para que imprima todo a
mesas
matruskas en mesas de
(cuando vayamos a
la vez o
trabajo diferentes nos
imprimir seleccionaremos:
deseleccionaremos la
Paso 12 de 18
De momento vamos a crear
- O haciendo doble clic en el
otra mesa de trabajo nueva
mismo (icono). Esto nos abrir
donde las vamos a copiar y
una nueva ventana en la que
pegar dentro de un dibujo de
tendremos ms control a la hora
una camiseta para ver cmo
de crear nuestra nueva mesa de
quedaran de ser impresas
trabajo. Aqu hemos elegido esta
en una camiseta.
ltima para crear un documento
Para crear una mesa de
de tamao A3.
trabajo nueva podemos

hacerlo de dos maneras.
Para salir del modo de mesa

de trabajo elegiremos cualquier
- Haciendo clic en el icono
otra herramienta o haremos clic
siguiente (dentro de la barra
fuera de sta.
de herramientas
(Maysculas + O) y
Ahora vamos a simular cmo
pinchando y arrastrando en
quedaran nuestras ilustraciones
el lienzo para dibujarla.
impresas en una camiseta.
Paso 13 de 18
Para ello vamos a utilizar un
smbolo que se encuentra en la
biblioteca de Smbolos >
Moda y elegiremos el smbolo:
Camiseta de manga corta.
Al cambiar el tamao de nuestras

matruskas el efecto 3D cambia, por lo
que las vamos a convertir en smbolos
(arrastrando al panel smbolos y
nombrndolas Matruska 1, 2 y 3).
Arrastraremos el smbolo a
nuestra mesa de trabajo nueva
Ahora s, las vamos a incorporar a
y lo estiraremos desde una de
nuestra camiseta y les vamos a
las esquinas manteniendo la
cambiar el tamao y la posicin a
tecla Alt presionada (para que
nuestro gusto.
se conserve la proporcin).
Para ver slo la mesa de trabajo en la
Haciendo doble clic sobre nuestra
que estamos trabajando ahora, iremos a
camiseta vamos a cambiar el
Ver > Encajar mesa de trabajo en
color del relleno a blanco y el
ventana.
trazo a un gris claro.
Paso 14 de 18
Nuestro siguiente objetivo va a ser reducir
el nmero de colores para la impresin.
Para imprimir camisetas en serigrafa es
aconsejable no tener muchos colores.
Esto es porque cada color se imprime en
La siguiente pantalla nos
una pantalla y cada pantalla significa
ofrece tres zonas:
repetir un largo proceso de preparado

para su impresin y lavado posterior.
- Editar: para crear nuevos
Cada pantalla lleva un color que ms tarde
grupos colores y editar los
van a reconstruir la impresin final.
existentes.
Nuestro documento en este momento

tiene 10 colores que vamos a reducir a 4.
-Asignar: permite ver

y tener control sobre
Seleccionaremos la ilustracin (sin el
los cambios que los
smbolo de la camiseta) e iremos al men:
nuevos grupos de
Edicin > Editar colores > Volver a
colores ejercern
colorear la ilustracin. O con el siguiente
sobre los ya existentes
icono (junto al men desplegable de los
(si no hemos
espacios de trabajo).
seleccionado la
ilustracin no
tendremos acceso a
este panel).
- Grupos de colores: aqu se mostrarn todos los grupos de

colores abiertos para nuestra ilustracin (los mismos grupos
aparecen en el panel de Muestras y pueden ser editados).
Paso 15 de 18
Para reducir los colores de
nuestra ilustracin la
seleccionaremos e iremos al
panel Editar. Desde el panel
Editar observaremos la columna
de nuevos. Bajo un rectngulo
rojo en la ilustracin siguiente se
muestran los colores utilizados en
la ilustracin seleccionada.
Sobre la columna de Nuevos hay
una lista desplegable en la que
podemos elegir el nmero de
colores. Haremos clic en 4 e
Illustrator realizar una
sugerencia de los colores que
podramos dejar. A la izquierda
(columna de colores actuales)
nos ensea los colores que ha
agrupado y a la derecha por qu
color ha cambiado cada uno de
ellos.
Tambin podemos
cambiar estas
sugerencias
arrastrando nuevos
colores, asignndolos
desde el panel
Asignar o eligiendo o
creando nuevos
grupos de colores.
En nuestro caso
vamos a cambiar el
color rojo que
Illustrator sugiere que
guardemos por el
rosa que tenamos
arrastrando el rosa
desde la columna de
la izquierda y sobre el
rojo soltaremos (en la
columna de Nuevos).
Haremos clic en la opcin Volver a colorear la ilustracin y podremos ver los

cambios en nuestra ilustracin, despus haremos clic en OK y ya tenemos 4
colores.
Paso 16 de 18
El ltimo paso ser imprimir
De momento slo vamos a preparar la impresin y guardar
nuestro documento TIFF.
las separaciones en un PDF para poderlas imprimir en color

negro en una impresora lser (es recomendable).
Para la impresin en
La ventana de imprimir tiene varias pestaas, en las que
serigrafa hay que separar
haremos las siguientes elecciones:
los colores, pues como ya

hemos comentado antes,
- General: elegir PDF y nmero de copias 1. Haremos clic
cada uno va en una pantalla
en la opcin: No cambiar escala.
diferente y luego se acoplan.
- Marcas: puede ser til imprimir las marcas de impresora

para ms tarde, por ello vamos a hacer clic en todas.
Por lo tanto, debemos

separar los colores de
Ahora vamos a guardar nuestro documento ennuestra ilustracin.
formato TIFF (tambin se recomienda PNG),
por ejemplo. Como en anteriores ocasiones
Para hacer esto hay varios
haremos esto desde el men Archivo >
mtodos. El que vamos a
Exportar y de las opciones que se nos
utilizar nosotros aqu es
muestran en la pantalla siguiente
utilizando el men de
elegiremos CMYK y 300 dpi.
impresin Archivo >

Imprimir (Control + P) y
elegiremos las siguientes
caractersticas:
Paso 17 de 18
-
Salida: separaciones en RIP (la
La primera tinta que nos aparece es
La segunda tinta que nos aparece
resolucin depender de nuestra
cian (la seleccionaremos y mandaremos
es magenta (la seleccionaremos y
impresora).
a imprimir).
mandaremos a imprimir).
PDF resultante:
-Salida: opciones de tinta del documento:
aqu es donde realmente vamos a hacer las
separaciones de color para la impresin.
A la izquierda de cada color vamos a
encontrar un icono de una impresora.
Vamos a ir seleccionando un color cada vez
(y dejamos deseleccionados los dems) y
haremos clic en imprimir (cuatro veces, una
por cada tinta) como sigue:
PDF resultante:
Paso 18 de 18
La tercera tinta que seleccionaremos
Por ltimo tenemos el negro (repetimos
es amarillo (seleccionar y mandar a
el proceso por ultima vez: seleccionarla y
imprimir).
mandar a imprimir).
El resto ser hecho en serigrafa.

Actividad:
Primera parte: crear una botella
de bebida, convertirla en 3D y
envolverla con una etiqueta que
crearemos a partir de un smbolo
y un pincel decorativo.
Segunda parte: como segunda
parte de la actividad vamos a
PDF resultante:
PDF resultante:
cambiar los colores de nuestra

ilustracin a escala de grises.
Tutorial 8. Creacin de una animacin en Illustrator
Paso 1 de 11
aprender a realizar dos
tipos de animaciones
dentro de Illustrator (la
primera abarca los pasos
1 a 5 y la segunda
animacin va del paso
nmero 5 hasta el final).
Como ya hemos
mencionado, nuestras
ilustraciones van a estar
hechas totalmente con
Illustrator y luego podrn
ser visualizadas desde un
explorador de web o desde
Flash, pues sern
guardadas en formato
Flash (SWF).
Insertar documento
llamado:
Animacion1.swf
Insertar documento
llamado: Animacion2.swf
Paso 2 de 11
Para empezar, crearemos
un documento que
nombraremos animacin y
elegiremos el tipo de
documento.
Lo ms probable es que la
finalidad de esta animacin
vaya a ser su vista en
pantalla, posiblemente en
una pgina web, por lo que
optamos por un perfil de
documento web o RGB.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS5
Paso 3 de 11
Vamos a crear un cartel que diga
OPEN y ste ser animado de
manera que parezca ser de nen y
que se encienda y apague
intermitentemente.
Vamos a empezar realizando el
texto. Para ello vamos a
seleccionar el Pincel de manchas
y vamos a escribir la palabra OPEN
a mano alzada, intentando que
todas las letras se toquen.
Como vemos, el Pincel de

manchas no tiene trazo para
empezar, slo relleno (en nuestro
caso de color negro). Vamos a
aadir trazos en la parte exterior
de nuestra forma (texto) para que
simulen la radiacin de la luz.
Con nuestra forma (open) seleccionada, haremos clic en el

panel Apariencia (para activar el panel iremos a Ventana
> Apariencia o desde el teclado: Maysculas + F6) y
desde el men desplegable de arriba a la derecha
elegiremos Aadir trazo nuevo y lo vamos a hacer de
grosor: 1pt.
Aplicaremos color verde al trazo y al relleno de la forma.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS5
El siguiente paso ser alinear
ilustracin: Alinear trazo al
el trazo hacia la parte de
exterior.
afuera; para ello, desde el

panel de Apariencia otra vez
haremos clic en la palabra
Trazo. Ahora nos aparece otro
nuevo mini men en el que
haremos clic como tenemos
sealado en la siguiente
Vamos a realizar otro trazo nuevo, esta vez de 2 pt, repitiendo

la operacin de Aadir trazo nuevo.
Gua de aprendizaje
INICIO | CRDITOS

Paso 4 de 11
Vamos a repetir este mismo paso
sucesivamente con mayores grosores.
Tambin podemos utilizar la opcin panel
Apariencia > Men desplegable > Duplicar
elemento (bajo la opcin de Aadir trazo
nuevo).
Para hacer este paso ms fcilmente (el de
Pincharemos en los trazos para
elegir color) vamos a abrir el panel Color
ordenarlos como se ordenan en el
(Ventana > Gua de Color o desde el
panel de Capas (haciendo clic y
teclado pulsando Maysculas + F3).
arrastrando) para que queden como

en la ilustracin:
Ahora desde el men desplegable

elegiremos la gua de color llamada
Monocromtico y elegiremos los colores
requeridos.
Adems de ir cambiando los grosores,

vamos a ir cambiando los colores de
nuestra ilustracin con la siguiente
En la ilustracin que sigue
proporcin: a trazo ms gordo, color ms
podemos ver el resultado de
claro.
todos nuestros trazos visibles a

la vez.
Paso 5 de 11
Haremos clic en men Objeto

> Expandir apariencia para
expandir y separar los trazos.
Como vemos, ya tenemos separados
los trazos y ahora los queremos tener
en capas diferentes.
Para lograr esto vamos a hacer clic en el
men desplegable de arriba a la derecha
(sealado bajo un crculo rojo en el panel
Vamos a guardar nuestro archivo como tipo
Desagruparemos estos
de Capas) y seleccionaremos Soltar a
Flash (swf) desde el men Archivo >
trazos haciendo clic derecho
capas (secuencia). Una vez hecho esto,
Exportar y elegiremos Guardar como
> Desagrupar (o desde
veremos cmo se separan nuestros
Flash |(swf) > Guardar.
men Objeto > Desagrupar).
trazos en capas diferentes (cada una de
La siguiente ilustracin muestra
ellas marcadas con colores diferentes
la vista de nuestro panel de
tanto en la ilustracin seleccionada como
Capas despus de hacer esto.
en el panel de Capas a mano izquierda):
Paso 6 de 11
En la nueva ventana de Opciones de SWF, elegiremos
elegiremos Exportar como: Capas Ai a fotogramas SWF.
En la siguiente animacin podemos
ver el resultado de nuestra
animacin del cartel de open:
Despus iremos a Avanzado (en la lista a mano derecha de la ventana)

y
una vez en la nueva ventana elegiremos: Sin prdida y
seleccionaremos Repeticin.
Insertar documento llamado:
Para previsualizar nuestra animacin haremos clic en Previsualizacin en
Animacion1.swf
web (tambin se puede guardar como un documento Flash y luego abrirlo

en una ventana de explorador en blanco).
Paso 7 de 11
Ahora vamos a ver una segunda
Una vez realizada la elipse, la
ste es el resultado de nuestra
manera de realizar una animacin
copiaremos y la pegaremos
primera ilustracin. Le hemos
Flash dentro de Illustrator.
mantenindola en la misma
aplicado el color verde desde
posicin. Y la rotaremos.
la opcin Trazo del Panel de
Un tringulo amarillo:
control.
documento nuevo RGB como

hicimos en la primera animacin y
lo llamaremos segunda
animacin.
En esta animacin vamos a hacer
unas ilustraciones y usaremos la
Fusin de stas para crear
nuestra animacin.
Primero vamos a crear nuestras
ilustraciones.
Seleccionando la herramienta
Y por ltimo un cuadrado

Despus de hacer la primera
rotacin con copia iremos al men
Objeto > Transformar >
Transformar otra vez o
presionaremos Control + D desde
el teclado.
Elipse (barra de herramientas o
Repetiremos esta operacin
presionando L) haremos clic y
varias veces hasta conseguir el
arrastraremos para crear una
dibujo de la figura siguiente.
elipse.
Vamos a repetir esta misma

tcnica con diferentes formas,
como por ejemplo una
estrella de color rojizo:
azul:
Paso 8 de 11
OK.
Ahora vamos a agrupar cada ilustracin
El resultado visual es el siguiente:
y a alinearlas todas desde

el panel Alinear (Ventana > Alinear o
Maysculas + F7 desde el teclado):
Desde ste haremos clic en Alinear
vertical y horizontalmente, como se
muestra en la siguiente captura de
pantalla.
Haciendo doble clic en la

herramienta Fusin (desde la
barra de herramientas) abriremos la
ventana de opciones de Fusin.
En esta nueva ventana vamos a

hacer clic en Pasos separados 8
y orientacin: Alinear con
pgina. Despus haremos clic
en
Despus de esto iremos al men Objeto > Fusin

> Crear para crear la fusin.
La imagen que vemos en nuestra mesa de
trabajo ahora es la siguiente:
Paso 9 de 11
Con nuestra ilustracin an
El siguiente paso que hay
seleccionada lo que queremos es,
Ahora nuestro panel de capas
que dar es desagrupar
como en la primera parte de este
contiene una capa que est
las formas: men Objeto
tutorial, conseguir que estas
dividida en otras 28 capas
> Desagrupar.
como vemos en la captura de
formas estn cada una en una

capa.
pantalla siguiente:
Desde el men de Capas
(Ventana > Capas)
Entonces, como anteriormente,
observamos que todas
iremos al men Objeto > Expandir,
estas formas estn
que nos dejar con la siguiente
separadas en grupos pero
visualizacin de nuestra ilustracin:
todava estn contenidas en

una sola capa.
Nuestra siguiente tarea es
separarlas en diferentes
capas. Como en el tutorial
anterior, con la ilustracin
seleccionada y desde el
men desplegable de arriba
a la derecha del panel de
Capas haremos clic en:
Soltar a capas
(secuencia).
Paso 10 de 11
Como se puede apreciar,
Iremos entonces al men Archivo
Illustrator da colores a las
> Exportar, en el que elegiremos
capas para diferenciarlas mejor.
las opciones indicadas en la
stas lgicamente coincidirn
ilustracin de la derecha:
en la ilustracin y en el panel
de capas. Nuestra forma se
En la ventana que aparece nuevamente haremos clic en Exportar: Capas Ai a
ver algo as:
fotogramas SWF. Desde la pestaa de Avanzado haremos clic en Formato de

imagen: Sin prdida y en Frecuencia de imagen (12 fps) con repeticin.
De la misma manera que

hicimos en nuestro primer
tutorial, vamos ahora a Exportar
nuestro documento.
Paso 11 de 11
Podemos hacer una previsualizacin de
cmo va a quedar nuestra animacin,
pues puede que queramos ajustar las
opciones a ms rpido, ms despacio,
etc. Si no, lo guardaremos
directamente para poder verlo ms
tarde en una ventana del explorador.
A la derecha podemos ver el
Insertar documento
resultado final de nuestra animacin.
llamado: Animacion2.swf
Actividad: realizad una animacin

partiendo de tres dibujos creados con
la tcnica de transformacin y
rotacin variando las formas.
A partir del siguiente tutorial de nuestra
gua de aprendizaje (Tutoriales 9 al 15
inclusive) vamos a centrarnos en
explicar las novedades y actualizaciones
de Illustrator CS5.
Gua de aprendizaje

Tutorial 9. Creacin de un edificio vectorial en perspectiva
Paso 1 de14
En este tutorial vamos a crear
un edificio vectorial que de la
sensacin de estar dibujado en
tres dimensiones como el que
se muestra en esta pantalla.
Para crear este edificio en
perspectiva vamos a utilizar una
herramienta nueva de Illustrator
CS5: la Herramienta
Cuadrcula de perspectiva, la
cual nos permitir crear objetos
con perspectiva de uno, dos
tres puntos y adems nos
facilitar el trabajo de mover,
cambiar la escala, hacer
transformaciones y hasta
duplicados de objetos de
manera dinmica. Esto nos ser
muy til a la hora de dibujar, por
ejemplo, las ventanas
directamente en perspectiva.
INICIO | CRDITOS
Paso 2 de14
Hay que tener en cuenta que a
pesar de que podemos lograr un
efecto de perspectiva bastante
realista, no estamos trabajando en
un entorno en 3D y tambin
conviene saber que una vez
trazada la cuadricula y el dibujo,
las posibilidades de manipulacin
de los mismos se vern
reducidas.
Para empezar abriremos Illustrator
CS5 y crearemos un documento
nuevo para Web. Archivo >
Nuevo > Documento, una vez
hecho esto aparecer una nueva
ventana donde daremos el
nombre de Edificio a nuestro
documento y en el men
desplegable que dice: Nuevo
perfil de documento elegiremos:
Imprimir.
Paso 3 de14
Ser conveniente hacer una buena
Lo siguiente que haremos va a ser escanear el boceto (en
Ya con el archivo colocado en
planeacin de la ilustracin antes de
este caso) y colocar el dibujo escaneado en el documento
la mesa de trabajo
comenzar.
para que nos sirva de gua. Para ello haremos clic en el
transformaremos el tamao
men Archivo > Colocar y una vez se abre la nueva
haciendo clic en los pequeos
Para facilitar la creacin de nuestro
ventana hay que buscar y seleccionar el archivo
cuadros (puntos de ancla) que
dibujo es una buena idea el hacer un
escaneado y guardado en nuestro ordenador y haremos
se delimitan las esquinas de el
boceto de lo que queremos realizar o
clic en Colocar.
documento escaneado y
bien podemos utilizar una fotografa en
presionaremos la tecla
la que nos podamos apoyar a la hora
Maysculas/Shift antes de
de realizar la ilustracin vectorial.
arrastrar para mantener las

proporciones originales.
Paso 4 de14
Ahora el documento tiene una capa bloqueada que no
Por ltimo, pincharemos y
podremos mover ni modificar a no ser que hagamos
arrastraremos en la imagen de el
clic en el pequeo candado que aparece en la capa del
documento hasta dejarlo en el
panel de capas.
lugar deseado.
Con sta capa seleccionada haremos
clic en el men desplegable de arriba a
la derecha y elegiremos Plantilla.
Otra opcin para convertir nuestra capa a plantilla es

simplemente hacer doble clic en la capa (desde el panel
de capas) y elegiremos plantilla en la ventana que
aparece. Tambin podemos elegir aqu cmo de tenue
El siguiente paso a dar va a ser crear
una plantilla con la capa del
documento escaneado.
Haciendo clic en el Panel de capas
se nos desplegar el correspondiente
panel que muestra la nica capa
(documento escaneado).
queremos que aparezca la plantilla en porcentaje.
Paso 5 de14
Ahora necesitamos hacer otra capa donde poner
Por defecto se nos muestra una perspectiva de 2 puntos. Tambin se puede
nuestra ilustracin. Desde el Panel de Capas
acceder a la Cuadrcula de perspectiva desde la barra de Mens, en el Men Ver >
haremos clic en el icono de Crear nueva capa
Cuadricula de perspectiva > Mostrar cuadrcula.
para crear la ilustracin en ella.
Otra forma de mostrar la cuadrcula de perspectiva es presionando la tecla Cmd/Ctrl

+ Maysculas + I y para ocultarla volveremos a presionar las mismas teclas.
Ahora vamos a utilizar la Herramienta

Cuadrcula de perspectiva haciendo clic en el
icono de la misma desde el panel de
Herramientas. De inmediato veremos como
aparece en la pantalla la cuadrcula de
perspectiva sobre ek dibujo escaneado.
Si en lugar de 2 puntos queremos crear una cuadrcula de perspectiva de 1 3

puntos lo podremos hacer desde Men Ver > Cuadrcula de perspectiva >
Perspectiva de uno, dos tres puntos. Debajo de estas opciones tambin
tenemos la opcin de > Guardar cuadrcula como ajuste preestablecido (as no
habr necesidad de empezar de cero cada vez que queramos utilizar esa misma
perspectiva).
Paso 6 de14
Tambin tendremos
la oportunidad de
cambiar los colores
de los planos de la
cuadrcula y otras
opciones
personalizadas en
este caso vamos a
respetar las
opciones que nos
ha sugerido
Illustrator.
Nuestra cuadrcula de perspectiva est formada por varias partes:

(A) Widget de cambio de plano, (B) Lnea horizontal, (C) Punto de fuga izquierdo, (D) Extensin de cuadrcula vertical, (E) Punto de
fuga derecho, (F) Nivel del horizonte, (G) y (H) Extensin de cuadrcula, (I) y (O) Nivel del suelo, (J) Control de plano de cuadrcula
derecha, (K) Tamao de la celda de la cuadrcula, (L) Punto de Origen, (M) Control de plano de cuadrcula horizontal, (N) Control de
plano de cuadrcula izquierda.
Paso 7 de14
Si lo deseamos podemos ayudarnos
Para transformar mover la
Lo siguiente va a ser ajustar la
con la regla de cuadrcula por medio
cuadrcula debemos de tener la
altura haciendo clic y
del men Ver > Cuadrcula de
Herramienta seleccionada.
arrastrando el punto de
perspectiva > mostrar reglas y
extensin vertical (D) hacia
tambin podemos cambiar el tipo de
Ajustaremos primero la horizontal de
abajo hasta encontrar la altura
medidas de la misma.
la cuadrcula con la de el documento
deseada.
escaneado haciendo clic en el punto

Ahora que conocemos las partes de
(I) Nivel del suelo para alinearlo
la cuadrcula, lo que tenemos que
donde comienza el suelo de la
hacer es ajustar la cuadrcula a la
plantilla, a su vez lo alinearemos con
plantilla,
los planos izquierdo y derecho de
Si no vemos los puntos de fuga en
nuestra plantilla.
pantalla (a veces quedan bastante

alejados) nos alejaremos un poco de
nuestra ilustracin haciendo clic en
Cmd/Ctrl + - utilizando la
Herramienta de Zoom desde el
panel de Herramientas y
presionando Alt hasta que aparezca
un signo menos (-) en la lupa que
acompaa a la flecha de ratn.
Utilizaremos los puntos de

fuga: izquierdo (C) y derecho
(E) para conseguir que la
cuadrcula cubra toda la
superficie deseada.
Paso 8 de14
Moveremos la lnea de
horizonte (F) hasta que
los planos derecho e
izquierdo coincidan con la
plantilla (marcados en rojo
en la captura de pantalla
siguiente)
Para que la cuadrcula no
dificulte la creacin de la
ilustracin, le vamos a reducir
la opacidad desde: Ver >
Cuadrcula de Perspectiva
En este caso, como la
> Definir cuadrcula y nos
plantilla fue creada desde

una ilustracin hecha a
mano, la perspectiva no era
totalmente correcta, no
intentaremos seguir esta en
su totalidad pero si nos sirve
como gua general.
aparecer la siguiente
Para ajustar un poco mejor la
pantalla donde haremos clic
cuadrcula vamos a presionar en el
en la seccin de Color y
punto de Tamao de celda de
opacidad de cuadrcula >
cuadrcula (K) y lo arrastraremos
Opacidad: 25% y haremos
hacia arriba o hacia abajo segn
clic en OK.
queramos agrandar o
empequeecer las celdas.
Paso 9 de14
Ahora vamos a comenzar a poner las
ventanas en el edificio. Para ello vamos a
seleccionar la perspectiva en la que quiero
poner las primeras ventanas utilizando plano
(azul por defecto) del Widget de la cuadrcula
de perspectiva, o presionando el nmero 1
del teclado.
Haremos zoom Cmd/Ctrl + + para ver mejor

la ilustracin y elegiremos la herramienta de
rectngulo desde el men de herramientas.
Para que no se mueva nuestra perspectiva sin quererlo, vamos a

bloquearla desde el men Ver > Cuadrcula de perspectiva > Bloquear
cuadrcula.
Paso 10 de14
Adems de las herramientas del men
Una vez trazadas la primera
anterior, tambin podemos utilizar otras
ventana de el plano de la
formas bsicas como se muestra en la
izquierda iremos al men
imagen siguiente, en la perspectiva que
desplegable de Transformar,
encontraremos en el men de
donde podremos controlar la
herramientas menos la herramienta
escala de la misma de una
destello, que no es compatible con la
manera ms exacta.
herramienta de cuadrcula de
Las medidas que se muestran
perspectiva.
aqu son las de nuestro rectngulo

sin perspectiva.
Una vez hecho esto comenzaremos a

dibujar las ventanas con perspectiva.
Podemos hacer que nuestras
Con la herramienta de rectngulo
ventanas se acoplen a la
seleccionada pincharemos y
cuadrcula de perspectiva desde el
arrastraremos hasta que consigamos la
men Ver > cuadrcula de
forma deseada.
perspectiva > ajustar a

cuadrcula.
Ahora vamos a ir al men de herramientas >
presionaremos la tecla Alt/Opcin para hacer un
herramienta de perspectiva > herramienta de
duplicado y las llevaremos hasta donde
seleccin de perspectiva.
queramos, una vez logradas las cuatro primeras
(Tambin utilizaremos esta ltima opcin
Una vez hecho esto
para cuando queramos cambiar de
presionaremos
tamao las ventanas y que conserven la
Maysculas/Shift y
misma perspectiva).
seleccionaremos las ventanas

que queramos duplicar, ahora
podemos hacer clic en Objeto > transformar >

volver a transformar Ctrl/Cmd + D y nos
copiara estas sucesivamente guardando la
distancia que aplicamos la primera vez hasta
completar la segunda hilera de ventanas.
Gua de aprendizaje
INICIO | CRDITOS

Paso 11 de14
Si presionamos 1, 2, 3 4 cuando
Luego proseguiremos con
Ahora crearemos la acera, seleccionando la
arrastramos las ventanas, stas se
trazar el cuadro que
cuadricula horizontal, de color verde en nuestro
adaptarn a la perspectiva de los distintos
delimita las paredes de la
Widget presionando 2. Luego trazaremos un
planos de la cuadricula, sta es una manera
misma manera y por ltimo
rectngulo que cubra toda la base del edificio y un
rpida de trabajar con la herramienta de
trazaremos las ventanas
poco ms.
cuadricula.
del plano de la derecha,

para ello haremos clic en la
herramienta de cuadrcula
y en el Widget de
perspectiva en la parte
derecha, de color naranja
Si presionamos Maysculas/Shift cuando
por defecto, presionando
arrastramos las ventanas conseguiremos
3 en el teclado y
que stas se muevan en lneas rectas.
repetiremos el proceso de
Nos ayudaremos de las Guas inteligentes
dibujar nuestras ventanas
Como ya hemos acabado de dibujar en perspectiva
para alinear las ventanas con facilidad, las
y pared con la
vamos a ocultar la cuadrcula desde: Ver > Cuadrcula
guas aparecern cuando trazando o
herramienta de
de perspectiva > Ocultar cuadrcula.
arrastrando la ventana nos aproximemos a
rectngulo desde el panel
El siguiente paso ser organizar las ventanas, fachadas
los bordes o puntos de ancla de otros
de herramientas.
y acera en el orden adecuado desde el panel de capas.
objetos.
Adems vamos a seleccionar desde el mismo panel

todas las ventanas y puerta para darles un degradado.
Gua de aprendizaje
INICIO | CRDITOS

Paso 12 de14
Podemos cambiar la vista de el documento de
Una vez hecho esto haremos clic en la
Ahora vamos a hacer lo mismo
contornos a previsualizar desde el men Ver
Herramienta de degradado y luego en
con las paredes del edificio y con
> Previsualizar presionando Ctrl/Cmd +
la ilustracin y como ya tenemos
la acera.
Y. Realizaremos esta misma accin cuando
seleccionadas las ventanas nos aplicar
queramos volver a vista de contornos.
el degradado lineal sobre las mismas

obteniendo el siguiente resultado.
Ahora vamos a seleccionar todas las ventanas

desde el panel de capas e iremos al panel de
degradado, donde elegiremos un degradado
lineal y como queremos que sea un degradado
azul elegiremos un color azul claro, uno medio y
otro oscuro haciendo doble clic en los
reguladores de degradado y eligiendo los
colores.
Paso 14 de14
En este tutorial
Para complementar la
hemos puesto en
ilustracin con algunos detalles
prctica entre
aadiremos unos arbustos y
otras, la
unos rboles alrededor de el
innovadora
edificio. Crearemos una capa
herramienta de
nueva donde colocar estos
Illustrator CS5:
detalles, e iremos a
Herramienta de
Bibliotecas de smbolos >
perspectiva.
naturaleza.
Ahora iremos a
men: Archivo >
guardar y lo
guardaremos en
Aqu elegiremos unos detalles para animar
esta ocasin
un poco el edificio. Vamos a ponerlos en
como
nuestra ilustracin sin cuadrcula activa
documento de
usando el Widget presionando el nmero
Illustrator.
4 en nuestro teclado.
Paso 14 de14
Este es el resultado final.
Como actividad de
prctica podemos realizar
una caja de cerillas en
perspectiva en la que
pongamos tambin un
texto en perspectiva: la
marca de las cerillas.
En el siguiente tutorial
veremos la creacin de
un dibujo haciendo uso
de los trazos atractivos.
Tutorial 10. Creacin de un dibujo con trazos atractivos.
Paso 1 de 9
En este tutorial vamos

a crear la siguiente
imagen vectorial.
Al realizarla vamos a
practicar el uso de
trazos atractivos de
diferentes grosores,
que es una de las
mejoras en la
utilizacin de trazos
que Illustrator CS5
nos ofrece en esta
versin del programa.
Paso 2 de 9
Comenzaremos este
tutorial creando un
documento de
Illustrator nuevo
como se muestra en
la figura siguiente.
Vamos a comenzar
el tutorial dibujando
con la herramienta
de dibujo deseada.
En este caso hemos
usado la
herramienta lpiz
desde la barra de
herramientas, para
dibujar una cara
(imitando una
ilustracin de
Leonardo Da Vinci).
Paso 3 de 9
Una vez seleccionada la
herramienta vamos a
proceder a modificar el
primer trazo, hemos
elegido el contorno de la
cara y simplemente
hemos hecho clic sobre
el mismo y lo hemos
arrastrado hasta
obtener el grosor de
trazo deseado como
vemos en la captura de
pantalla siguiente.
A continuacin vamos
a modificar utilizando
la herramienta de
anchura
presionando
Maysculas + W en
el teclado.
Ahora vamos a hacer otro cambio de grosor

del mismo trazo en la parte de la derecha
del rostro realizando la misma operacin.
Paso 4 de 9
A continuacin vemos el proceso de cambio
de grosor de otro tramo del mismo trazo.
Si queremos guardar este perfil de
A continuacin le vamos a dar un
trazo solo tenemos que ir al panel de
nombre, por ejemplo: perfil de rostro
trazo > men desplegable de perfil
y podremos utilizarlo despus tantas
> guardar (haciendo clic en el icono
veces como queramos.
de guardar).
Para la nariz vamos a utilizar uno de los

perfiles preestablecidos, por ejemplo el
llamado Perfil de anchura 2.
Paso 5 de 9
As es como nos quedara la
ilustracin despus de realizar esto.
Utilizando un grosor de trazo de 4 pt, as es
como quedara nuestra ilustracin:
Si cuando pinchamos en el trazo pulsamos la tecla Alt/Opcin, tendremos la posibilidad de cambiar el grosor del trazo de la p
parte inferior del trazo).
Ahora vamos a seleccionar los trazos de todo

Para los ojos
vamos
a agrandar
tamaopara
del estos
trazo en la mitad y lo vamos a hacer ms delgado en los extremos simplemente pinchando y arra
el pelo
y los
vamos a el
agrupar,
anchura seleccionada).
vamos a elegir un trazo de 6 pt y el perfil de
anchura 6.
Paso 6 de 9
Haremos lo mismo con la

otra mitad del trazo y lo
guardaremos como:
perfil de ojo.
A continuacin seleccionaremos el trazo del otro
Para la ceja derecha elegiremos un trazo de 4
ojo para aplicarle este nuevo perfil de ojo que
pt. y el perfil de anchura 1, adems
hemos creado, y le cambiaremos el grosor del
cambiaremos la anchura de la parte izquierda
trazo a
para que sea un poco ms gruesa de lo que es
un 2 pt resultndonos lo siguiente:
ahora obteniendo la siguiente imagen:
Para la ceja derecha elegiremos un trazo de 4 pt y

el perfil de anchura 1.
Paso 7 de 9
Para los labios vamos a comenzar transformando
Ahora vamos a elegir un color rojo para el
el labio de arriba, presionando la tecla Alt/Opcin
trazo de los labios y nos quedarn como
del teclado y elevando los dos picos.
muestra la siguiente imagen:
El perfil de anchura 2, es el perfil que hemos

utilizado para los trazos restantes (cuello y
Luego bajaremos un poco la parte de la mitad
tambin presionando Alt/Opcin para que no
mueva la parte de abajo y por ltimo haremos
el labio de abajo utilizando la misma tcnica.
hombros) de la ilustracin.
Paso 8 de 9
Por ltimo podemos guardar el archivo de Illustrator desde

el men Archivo > Guardar, o bien presionando Ctrl/Cmd
+ S desde el teclado.
En este caso vamos a utilizar un formato de archivo de
EPS, que es un archivo PostScript encapsulado y casi
todos los programas que trabajan con grficos,
maquetacin y procesadores de texto aceptan este tipo de
archivos.
Paso 9 de 9
Este es el resultado que hemos
obtenido.
Como mencionamos al principio,
este tutorial nos ha ayudado
principalmente a practicar con la
nueva herramienta de trazos
atractivos y a crear y guardar
nuevos trazos personalizados.
Como prctica podemos
realizar un carcter de dibujos
animados por ejemplo, ya que
probablemente abundarn en l
trazos de diferentes grosores.
En el siguiente tutorial veremos
principalmente el pincel de
Cerdas y los modos de dibujo
nuevos de esta versin de
Illlustrator CS5.
Tutorial 11. Creacin de una ilustracin con el pincel de cerdas y modos de dibujo.
Paso 1 de 15
Este tutorial va a tratar varias

herramientas de dibujo y una vez
hecho el dibujo veremos como
utilizar los nuevos pinceles de
Illustrator (CS5) llamados: Pincel
de cerdas.
Estos pinceles nos permiten
realizar ilustraciones con semejanza
a lo que podramos crear con
pinceles de arte reales como vemos
en esta representacin de la
ilustracin que vamos a realizar en
este tutorial.
Tambin como novedad, veremos
cmo utilizar el nuevo modo de
dibujo: dibujar en el interior. Pero
antes de ver esto realizaremos el
zorro en si utilizando otras tcnicas.
Paso 2 de 15
Vamos a crear un documento
nuevo de Illustrator con las
siguientes caractersticas:
Documento para imprimir, de
tamao A4, y de resolucin de 300
ppi y un perfil de color: CMYK.
Vamos a realizar una ilustracin de
un zorro. Para ello vamos a
comenzar realizando un boceto
que vamos a escanear e importar
a Illustrator CS5 en modo de
plantilla (como habamos hecho
con el tutorial del edificio en
perspectiva).
Tambin lo podemos crear
directamente con la herramienta
pluma u otra herramienta de
dibujo, pero el boceto nos
facilitar esta tarea.
Paso 3 de 15
Iremos a Archivo >
colocar, y elegiremos el
archivo deseado, luego

haremos clic en colocar
y despus de colocado
aplicaremos otra vez
alrededor de un 25% de
opacidad al realizar una
plantilla que no moleste
demasiado.
Para esto tenemos que
hacer clic en el panel de
capas y desde el men
desplegable de arriba a la
derecha elegiremos
Plantilla y luego haciendo
doble clic en la capa 1 del
panel de capas elegiremos:
Atenuar imgenes hasta
un 25% y haremos clic en
OK para guardar los
haciendo clic en el mismo para que desaparezca

nos permitir hacer los cambios deseados.
Hecho esto volveremos a bloquear la capa para

que no se mueva volviendo a hacer clic donde
Si tambin queremos mover y agrandar el tamao de el zorro, como es el caso, lo
estaba el candado (en el panel de capas, junto a
vamos a desbloquear desde el candado de al lado de la capa 1 del panel de capas,
la capa correspondiente).
Paso 4 de 15
Ahora vamos a comenzar a realizar los
Comenzaremos quitando el relleno y
Esto nos abrir una ventana nueva donde
trazos principales de la ilustracin. Para
haciendo el trazo de 1 pt de grosor y
podemos personalizar la manera en que se
ello vamos a crear una capa nueva
luego haciendo clic en un punto y
van a reducir los puntos del trazado.
(llamada cabeza).
moviendo el ratn hasta el siguiente

hasta completar el contorno de la
En esta ventana tambin podemos elegir
cara de el zorro.
que se muestre el trazado original y el

nuevo a la vez para ver la diferencia y el
nmero de puntos de ancla que se van a
reducir en nuestro caso van a bajar de: 47
a 10 puntos, esto va a ayudar a Illustrator
a trabajar mejor porque es un trazado mas
Comenzaremos a trazar el contorno del
simple.
zorro haciendo uso de la herramienta de

pluma del panel de herramientas o
presionando la letra P en nuestro teclado.
Ahora vamos a reducir el nmero de puntos
de ancla que trazamos con la pluma, es decir,
para simplificar la forma un poco simplemente
haciendo clic en el men: Objeto > trazado >
simplificar.
Paso 5 de 15
Hecho esto podemos modificar de nuevo algunos
Ahora vamos a trazar el
Para ello haremos clic en la herramienta
puntos si los queremos de otra manera, para ello
resto del cuerpo (en una
suavizar desde el panel de herramientas y
usaremos la herramienta de seleccin directa y
nueva capa llamada
pasaremos la misma por encima del trazado del
pinchando en los puntos de ancla deseados
cuerpo) con la herramienta
cuerpo del zorro.
arrastraremos y moveremos los manejadores
pluma y esta vez vamos a
hasta que obtengamos un resultado satisfactorio.
suavizar el trazado para

que nos redondee un poco
los trazos.
Paso 6 de 15
Tambin podemos modificar
Repetiremos esto con el segundo ojo y
esto ms tarde con la
simplificaremos los trazos aqu tambin
herramienta de seleccin
con la herramienta de suavizado como
directa y moviendo los
anteriormente.
manejadores de los puntos

de ancla. Luego soltaremos
el ratn y haremos clic
sucesivamente siguiendo el
contorno del ojo, repitiendo la
operacin de arrastre de un
El siguiente paso va a ser trazar los detalles de
la cara de nuestro zorro, volviendo a la capa de
cabeza.
Comenzaremos con el ojo izquierdo.
Utilizando otra vez la herramienta Pluma la
seleccionaremos y despus haremos clic en
un punto del ojo, soltaremos el ratn y
haremos clic en el siguiente punto arrastrando
el mismo (sin dejar de hacer clic esta vez)
hasta conseguir la curva deseada.
punto de ancla cuando sea

necesario.
Para la nariz vamos a hacer un tringulo

invertido, para ello haremos clic en la
herramienta de estrella y mientras
pinchamos y arrastramos vamos a pulsar la
tecla de flecha hacia abajo del teclado
para reducir el nmero de lados de la
estrella hasta llegar al tringulo y al mismo
tiempo mantendremos pulsada la tecla
Maysculas para que mantenga la
horizontal del tringulo.
Paso 7 de 15
Ahora vamos a redondear un poco los ngulos de la

nariz, desde el men efecto > estilizar > esquinas
redondeadas.
Hecho esto vamos a invertir

el tringulo por medio del
botn derecho >
Vamos a achatar un poco la nariz:
Transformar > Reflejo y una
primero la seleccionaremos y
vez en la ventana que resulta
cuando aparecen los cuadros
de ello haremos clic en
delimitadores estiraremos del de la
previsualizar para ver mejor
mitad de la derecha hacia la
lo que ocurrir antes de
derecha a la vez que presionamos
aceptar y despus haremos
Ctrl/Cmd en el teclado para que
clic en Horizontal y OK para
mantenga la proporcin entre los
Aplicaremos un
aceptar los cambios.
dos lados de la nariz.
radio de 15 pxeles,
despus haremos
clic en OK para
aceptar los
cambios.
Paso 8 de 15
Con la herramienta elipse trazaremos una
Con la herramienta elipse trazaremos
Vamos a utilizar la misma forma
circunferencia mientras mantenemos presionada la
una pequea elipse en la mitad de la
para las pupilas del zorro
tecla Maysculas/Shift para realizar una
nariz y desde el men Alinear, que
entonces vamos a copiar y
circunferencia perfecta. La arrastraremos hasta ms
conseguiremos desde Ventana >
pegar la elipse dos veces una
o menos encima del trazo de la nariz pero un poco
Alinear, seleccionaremos Alinear abajo
para cada ojo.
ms hacia el centro (va a representar un orificio de
y tambin en Distribuir al centro. As
Ahora vamos a hacer los
la nariz) como vemos en la ilustracin siguiente.
mismo, le daremos un color negro de
mofletes del zorro, para ello
Ahora haciendo clic en la misma, la arrastraremos
relleno.
vamos a utilizar la herramienta
hasta el lado opuesto y utilizando el panel de
de arco que se encuentra en la
buscatrazos (Ventana > Buscatrazos
barra de herramientas y vamos
presionando: Maysculas + Ctrl/Opt + F9) haremos
a hacer doble clic en ella.
clic en la opcin: menos frente a la vez que

pulsamos Alt/Opcin y expandiremos la forma.
Paso 9 de 15
Al hacer esto nos aparece la siguiente pantalla, en
Como vemos a continuacin, lo
Repetiremos lo ltimo para
la que seleccionaremos las opciones marcadas en
que hemos hecho a sido reflejar y
conseguir el otro moflete y los
la captura de pantalla siguiente.
duplicar el arco.
alinearemos con la nariz. Ahora

seleccionaremos los mofletes y la
nariz y los vamos a rotar un poco
hacia la izquierda.
Por ltimo aadiremos algn detalle
ms con la herramienta pluma en
Despus
ltima
Luego daremos clic con el botn derecho del ratn
y seleccionaremos Reflejo > Vertical y Copiar.
seleccionaremos
la
parte y la alinearemos
sirvindonos
de
las
guas
inteligentes.
Una vez que tengamos los dos

arcos juntos daremos clic
derecho y elegiremos Unir.
las orejas y dibujaremos la cola

suavizando los trazos de la misma
una vez dibujados.
Paso 10 de 15
Para el color base de
Nombraremos el
relleno del cuerpo y la
grupo de colores
cabeza del zorro hemos
como:
utilizado un color gris que
pelo_zorro y
luego iremos tapando con
haremos clic en
pelo de varios colores.
OK para guardar
el nuevo grupo
de colores.
Ahora vamos a crear un

nuevo grupo de colores que
utilizaremos a la hora de pintar
Luego haremos clic en:
el pelo del zorro. Desde el
muestra nueva para ir
panel Muestras, bajo la barra
aadiendo colores para
de mens, vamos crear una
el grupo: pelo_zorro
nueva muestra o nuevo grupo
hasta que tengamos
de colores haciendo clic en
todos los colores
Nuevo grupo de colores.
deseados.
Paso 11 de 15
Ahora vamos a
Vamos a crear un pincel nuevo desde el panel de Pinceles, para ver este panel iremos
empezar a dibujar el
a: Ventana > Pinceles, presionando F5 accediendo a l desde el panel de control.
pelo del zorro, para
Una vez en el panel de pinceles haremos clic en: Nuevo pincel > pincel de cerdas.
ello vamos a utilizar los

pinceles de cerdas que
mencionamos al
principio del tutorial. Si
tenemos una tableta
podremos controlar
mejor la direccin del
pincel y la presin.
Podemos visualizar los
pinceles desde el
men Ventana >
Bibliotecas de
pinceles > pincel de
cerdas > biblioteca
de pincel de cerdas y
nos aparecer una
biblioteca con varios
pinceles de cerdas.
Se abrir una
nueva
ventana
donde
podremos
personalizar
ste, como
se indica en
la imagen
siguiente.
Paso 12 de 11
Volvemos al zorro y vamos a seleccionar el trazo
visible, lo dems desaparece.
exterior de la cabeza del zorro y vamos a

seleccionar elegir el modo de dibujar en el interior
desde la parte baja de la barra de herramientas,
representada con el icono que mostramos a
continuacin.
Potencialmente, lo que estamos

haciendo al usar este modo de dibujo
(dibujar en el interior) es una mscara
de recorte, una vez hecha esta
podremos volver a modificar la misma
el contenido haciendo clic en uno de
los dos botones que aparecern en el
Luego haremos clic afuera
panel de control cuando tengamos
para que no nos cambie el
seleccionada la mscara.
trazo, sino que podamos pintar

en el interior solamente y con la
herramienta pincel
seleccionada y un color
haremos clic de afuera hacia
adentro, o viceversa, y veremos
cmo solamente el trazo que
Cuando utilizamos este modo de pintura
slo podemos seleccionar un trazado cada

vez. Y para cambiar entre los modos de
conmutacin rpidamente pulsaremos
Maysculas + D (esto cambiar el modo
queda dentro ser el que quede
de dibujo entre: Dibujar normal, dibujar detrs y
Seleccionaremos el color deseado y la
Haremos esto sucesivamente
dibujar en el interior, sucesivamente).
herramienta de pincel y crearemos
hasta que obtengamos el resultado
unos trazos con el pincel de cerdas.
deseado, podremos cambiar entre

tipos de pinceles, colores y todas
Conforme vayamos creando nuevos
las opciones que nos ofrece cada
pinceles nos irn apareciendo en el
pincel.
panel de pinceles junto a un nmero

que es el tamao del mismo.
Paso 13 de 15
Si una vez hemos aplicado un pincel y luego lo vamos a cambiar
> Exportar, y en la ventana que se nos abre elegiremos el lugar donde
de apariencia, grosor, u otras opciones con las que creamos el
queremos que se guarde y documento TIFF, y haremos clic en Save para
mismo en un principio, slo tenemos que hacer doble clic en el
guardar.
pincel desde nuestro panel pinceles y cambiarlo como queramos,

una vez hechos los cambios haremos clic en OK y nos aparecer
la pantalla siguiente, donde Illustrator nos preguntar si queremos
aplicar los cambios a los trazos de pincel existentes o dejarlos
como estn.
Para los ojos de color elegimos un color de relleno verde y para la

nariz de un color marrn rojizo.
Terminado el zorro, slo queda recordar que si presionamos
Cmd/Ctrl + Y veremos que los trazos que hemos realizado son
simplemente trazos vectoriales. Por ltimo vamos a exportar
nuestro zorro como documento TIFF, para ello iremos al men
Documento
tenga ms de 30 trazos hechos con el pincel de cerdas, Illustrator

CS5 nos avisar que el documento puede ser demasiado complejo
para imprimirlo o guardarlo como EPS, PDF o formatos
heredados. Tambin sugiere la posibilidad de rasterizar los trazos
Para guardar el archivo de el zorro vectorial como
de pincel de cerdas para mantener la apariencia y reducir la
documento de Ilustrator (Zorro.ai), usaremos el men:
complejidad del documento.
Archivo > guardar. Existe la posibilidad de que el dibujo
Paso 14 de 15
Como el zorro tiene
ms de 30 trazos de
pincel de cerdas,
vamos a rasterizar
los trazos de la
imagen que tengan
transparencias, es
decir los que tengan
trazos del pincel de
cerdas, los
seleccionaremos
desde el panel de
capas e iremos a
Objeto > Rasterizar.
Las opciones elegidas
en la pantalla de
rasterizado son las
indicadas en la
captura de pantalla
siguiente.
Paso 15 de 15
Podemos guardar dos
copias una sin rasterizar y
otra rasterizada por si
acaso queremos editar el
documento ms adelante.
El resultado que hemos
obtenido es el siguiente.
Como actividad podemos
crear una fruta de un
bodegn como si
estuviera pintada con
pinceles reales.
veremos cmo crear una
postal vectorial formada
fundamentalmente por
flechas.
Tutorial 12. Creacin de una postal vectorial de flechas.
Paso 1 de 10
En este tutorial
crearemos la siguiente
postal vectorial.
En este tutorial
veremos las mejoras
del trazo con puntas
de flecha, as como el
dibujo en el interior
pero esta vez
trabajando con texto.
Tambin
mencionaremos las
mejoras aadidas a las
mesas de trabajo y el
nuevo panel de mesas
de trabajo.
Paso 2 de 10
Comenzaremos
creando un nuevo
documento de
Illustrator con las
siguientes medidas y
caractersticas para
realizar una postal que
ms tarde podamos
imprimir.
Paso 3 de 10
Ahora vamos a escribir unas palabras (podemos elegir
Tambin podemos hacer
Como no nos cabe en el cuadro delimitador
las que queramos) en nuestro caso: Where next?
esto desde el panel de
haremos ms grande el mismo desde los
carcter que podemos
cuadritos que aparecen en los bordes cuando
visualizar desde Ventana >
seleccionamos el texto.
Texto > Carcter,

presionando Ctrl/Cmd + T
aunque en este no se nos
muestra una vista
Con el texto seleccionado iremos a cambiar el tipo de
preliminar de cmo es
fuente desde: Texto > Fuente > Cooper black y
cada tipo de fuente.
haremos clic en la misma.
Ya que estamos en el
panel carcter vamos a
elegir el tamao de la
fuente y le vamos a dar
una medida de 60 pt.
Ahora que ya podemos visualizar todo el

texto vamos a estirarlo para hacerlo un
poco diferente, para ello vamos a
seleccionar el texto y utilizar un valor de
100 en el cuadro de tracking como se
muestra a continuacin.
Paso 4 de 10
El resultado obtenido se muestra en
Puede que necesitemos hacer clic en el men
la siguiente ilustracin.
desplegable para ver las opciones.

Una vez hecho esto elegiremos la opcin del
men desplegable: Alinear con: Mesa de
trabajo. Por ltimo haremos clic en Centrar y
Lo siguiente que vamos a
Ahora vamos a inclinar un poco el ngulo
realizar va a ser alinear el texto
del texto. Para ello usaremos el panel
con la mesa de trabajo, para
Transformar que podemos visualizar
ello tenemos que tener visible el
desde el panel de control, desde
panel Alinear que obtendremos
Ventana
desde: Ventana > Alinear
> Transformar bien, utilizando el atajo
Maysculas + F7.
Centrar verticalmente.
de teclado: Maysculas + F8.

Ahora vamos a
seleccionar el icono de
mesas de trabajo,
desde la barra de
herramientas y vamos
a crear una nueva
como mostramos en la
imagen siguiente.
Paso 5 de 10
Otra de las mejoras de Illustrator CS5 est

precisamente relacionada con las mesas de
trabajo y con el nuevo panel de mesas de trabajo
que encontraremos en Ventana > Mesas de
trabajo.
Queremos hacer un fondo de puntos para
Repetiremos lo anterior presionando
situarlos dentro del texto, tambin
Objeto > Transformar > Volver a
podemos hacer lo mismo con una foto u
transformar con el atajo de
otro grfico. Vamos a situarnos en la nueva
teclado: Ctrl + D. Haremos esto
mesa de trabajo y crearemos una
sucesivamente hasta que
circunferencia perfecta con relleno de
calculemos que cubrimos el texto
color rosa por ejemplo, haciendo clic en la
creado en la primera mesa de
herramienta elipse y presionando
trabajo.
Maysculas/Shift obtendremos la
Luego haremos la misma operacin
primera.
seleccionando todas las anteriores y

copindolas hacia abajo usando
En este panel podemos ver las mesas que hemos
ahora la misma distancia que
creado y podemos modificar el orden de las
utilizamos entre las primeras
mismas, esto es especialmente til cuando
circunferencias (y presionando otra
queremos hacer una presentacin a algn cliente
vez Maysculas y Alt/Opcin).
o incluso para exportar especificas mesas de

trabajo en formato PDF.
De nuevo repetiremos la
Presionando Alt/Opcin y Maysculas/Shift la
transformacin como antes
copiaremos y situaremos a la derecha y
(Ctrl + D).
recordando la distancia que hemos utilizado.
Paso 6 de 10
Ya tenemos el fondo de texto
Seleccionamos el texto y haremos clic
Vamos a crear una tercera mesa de trabajo
ahora hay que agruparlo
en Dibujar dentro (desde la barra de
que reorganizaremos desde el panel de
seleccionando todas las
herramientas).
mesas de trabajo, la mandaremos hacia
circunferencias y desde el
abajo haciendo clic en la flecha hacia abajo.
men: Objeto > Agrupar,

botn derecho > Agrupar,
Ctrl + G.
Ahora vamos a hacer lo siguiente:

Editar > pegar (Ctrl + V) para que nos
pegue el grupo de circunferencias
Con el grupo seleccionado
dentro del texto.
haremos lo siguiente: Editar >

Copiar (Ctrl + C) y cambiaremos
de mesa de trabajo e iremos a la
del texto.
Por ltimo, cambiaremos el modo de

dibujo a normal (atajo de teclado:
Maysculas + D). Una de las cosas ms
tiles que Illustrator CS5 nos permite al
realizar esto es que el texto sigue
editable, lo cual es una gran ventaja.
Paso 7 de 10
Elegiremos las opciones
Cuando estamos en este panel, podemos cambiar las caractersticas de las mesas de
trabajo.
deseadas y haremos clic en OK,

al hacer esto se reorganizarn
las mesas en el documento as
como las dejamos en el panel
de mesas de trabajo.
Tambin podemos nombrar las

mesas de trabajo para que sea
Si necesitramos mover las
ms fcil identificar cada una.
mesas fsicamente en el
Vamos a nombrarlas:
documento, podemos hacerlo
Mesa 1: Postal,
primero en el panel de mesas
Mesa 2: Puntos
Y Mesa 3: Flechas.
Una vez en cada una de ellas
haremos esto desde el panel
de control.
de trabajo y luego desde el

men desplegable del mismo
panel iremos a: Reorganizar
mesas de trabajo.
Paso 8 de 10
Podemos movernos
Otra opcin que nos da Illustrator CS5 cuando trabajamos
Haremos clic en Dibujar normal desde el panel
de mesa en mesa
con mesas de trabajo es la de copiar un objeto y pegarlo
de herramientas (si todava estamos en el modo
fcilmente desde la
en contexto (lo pegar en el mismo lugar de otra mesa de
de dibujo Dibujar detrs).
parte de abajo de la
trabajo) pegarlo en todas las mesas de trabajo. Si
ventana de
quisiramos hacer esto iramos a copiar el objeto (Ctrl + C)
documento.
y luego a Edicin > Pegar en contexto Pegar en todas

las mesas de trabajo respectivamente.
Desde el panel
trazo (Ventana >
Seleccionada la
Trazo desde
Mesa 3: Flechas, y
el teclado: Ctrl
desde el men
+ F10)
desplegable del
seleccionaremos
lado izquierdo
una punta de
iremos a la opcin:
flecha haciendo
Encajar en la
Ahora queremos realizar unas flechas que
clic en el icono
pantalla.
irn detrs del texto, para ello
que se muestra
comenzaremos trazando la primera flecha
en la siguiente
con la herramienta arco, le daremos un
ilustracin.
relleno verde y un trazo de 18 pt.
Paso 9 de 10
Haremos esto sucesivamente con diferentes
Vamos a agrupar todas las flechas
flechas utilizando rectas e incluso trazados
que hemos creado (Ctrl + G). Con
hechos con la herramienta lpiz y utilizando
stas seleccionadas cambiaremos el
diferentes colores y medidas de trazo.
modo de dibujo a: Dibujar detrs,
Tambin podemos elegir que la punta de flecha
podemos copiarlas (Ctrl + C), ir a la
empiece en el otro extremo, simplemente
mesa 1: Postal, y desde el men
haciendo clic en el icono de la izquierda de
editar > Pegar presionando Ctrl +
puntas de flecha (panel de trazo), o en los dos
V en nuestro teclado.
extremos.
Si estamos en el modo de dibujo

normal, copiaremos las flechas e
iremos al Men: Editar > Pegar
detrs Ctrl + B.
Guardaremos nuestra postal como

archivo de PDF por ejemplo, para ello
iremos a el men Archivo > Guardar
Otra posibilidad es modificar el punto donde
como. Una vez en esta ventana
queremos que se site la punta de flecha,
elegiremos PDF y elegiremos donde
podemos hacer esto desde el mismo panel
queremos que sea guardado y el
haciendo clic en los iconos mostrados en las
nombre que queramos y haremos clic
siguientes capturas de pantalla.
en OK.
Paso 10 de 10
El PDF resultante nos mostrar las
ilustraciones que realizamos en mesas
diferentes en pantallas diferentes, que
puede ser muy conveniente cuando
mostremos el trabajo realizado a un
cliente.
Este es el resultado que hemos
obtenido, no es el ms esttico pero nos
ha servido para aprender un par de
cosillas sobre los modos de dibujo, los
trazos con puntas de flecha y el panel
de mesas de trabajo.
Como actividad podemos crear un
pequeo mapa que indique un recorrido
utilizando varias flechas por ejemplo.
En el siguiente tutorial realizaremos un
anuncio para colgarlo en una pgina
web.
Tutorial 13. Crear un anuncio de Web con lneas discontinuas
Paso 1 de 12
un anuncio que podremos colgar
de una pgina Web. El anuncio
es de un curso de reciclaje de
ropa.
Para este tutorial hemos creado
un bolso que tiene un bolsillo y
dentro de ste hay un folleto del
curso como vemos en la
ilustracin siguiente.
Un cambio importante de esta
versin de Illustrator CS5 y a
tener en cuenta cuando
creemos diseos destinados a
la Web o a dispositivos mviles
es la nueva propiedad de
pixelado perfecto.
Paso 2 de 12
Esta es una nueva manera
Si vamos a utilizar otra resolucin en la salida del
en que el programa trabaja
documento, es bastante probable que este mtodo
con este tipo de
para evitar el suavizado de pxeles no funcione pues
documentos, alineando
est dirigido exclusivamente a documentos para web
todos nuestros trazos u
y/o dispositivos mviles.
objetos creados a la
cuadrcula de pxeles.
Este tutorial, por otro lado, nos ayudar a entender un
Tambin podemos trabajar
Puede ser una buena
con ellos como venamos
idea hacer la ilustracin
hacindolo hasta ahora y
sin ninguna restriccin en
luego alinearlos a esta
primer lugar y una vez
cuadrcula.
hecha esta, alinearla a la

cuadrcula de pixel para
Para alinear un objeto
que el programa
existente a la cuadrcula de
encuentre la mejor
pxeles lo seleccionaremos
manera de representar la
e iremos al men Ventana
ilustracin evitando lneas
> Transformar y desde
borrosas al pasar
aqu haremos clic en la
nuestros documentos a
opcin: Alinear con
resolucin Web de 72
cuadrcula de pxeles.
ppp.
poco mejor cmo funcionan los nuevos ajustes de

lneas discontinuas que podemos encontrar en el
panel de Trazo. Estos trazos discontinuos pueden
conservar las medidas especificadas exactas de
guiones y huecos de los trazados, tambin y aqu
est la novedad, ser alineados de forma simtrica
alrededor de las esquinas y al final de trazados
abiertos.
Tambin veremos la utilizacin de otra herramienta
nueva de esta versin de CS5, la llamada
herramienta creador de formas, sta nos facilitar
la creacin de formas como bien indica su nombre
por medio de la unin de objetos.
Paso 3 de 12
Vamos a comenzar el banner abriendo
un documento nuevo que
nombraremos como queramos y
vamos a darle las medidas de: 240
px. de ancho por 400 px. de alto, de
orientacin vertical y en el apartado de
Avanzado elegiremos un tipo de
documento para Web.
Al elegir este tipo de documento, por
defecto nos asignan las
caractersticas tpicas de un
documento Web, como son trabajar
con colores RBG y en resolucin de
72 ppp. Pero tambin nos da la
opcin de alinear nuevos objetos a la
cuadricula de pxeles como ya
hemos comentado antes.
En este caso lo vamos a dejar como
nos sugiere el documento por defecto,
es decir alineado a la cuadrcula de
pxeles y haremos clic en OK.
Paso 4 de 12
Comenzaremos en el
Con la herramienta de
Seleccionaremos las dos formas
documento trazando un
seleccin directa
que hemos creado y haremos clic
rectngulo de esquinas
seleccionada
en la herramienta creador de
redondeadas, para ello
(presionando A en el
formas (Maysculas + M desde
elegiremos la misma
teclado, desde la barra
el panel de herramientas) haremos
herramienta desde el panel
de herramientas)
clic en una de ellas y simplemente
de herramientas.
haremos clic en el punto
arrastraremos el ratn hasta la
de ancla de arriba de la
segunda.
elipse aplastando la
misma un poco.
Ahora vamos a trazar
un asa para el bolso
con la herramienta de
elipse del panel de
Pincharemos y
herramientas, o
arrastraremos hasta
presionando la tecla L
conseguir una forma que
desde el teclado, y
cubra bastante parte del
pinchando y arrastrando
Se podra decir que esta
documento pues va a ser
en el lienzo hasta
herramienta es como
nuestro elemento central,
conseguir una elipse
tener el panel de
como de unos 145 x 190
como la de la captura
Buscatrazos en una
pixeles.
de pantalla siguiente.
herramienta.
Paso 5 de 12
Si hacemos doble clic en el icono accederemos a la
ventana opciones de la herramienta creador de formas
que dejaremos como estaba.
Si queremos sustraer
formas con esta
herramienta, simplemente
haremos clic en Alt/Opcin
mientras arrastramos como
anteriormente haciendo
clic para eliminar trazos.
Pulsando Maysculas/Shift
combinaremos varias
En la ventana que aparece al
formas distintas a la vez.
hacer esto vamos a

seleccionar un ngulo de 180
Ahora vamos a hacer un

bolsillo utilizando la forma
del asa, copindola
(haciendo clic en
Alt/Opcin y arrastrndola
la duplicaremos) y
rotndola (haciendo clic en
el botn derecho del ratn:
Rotar) como se muestra
en las ilustraciones
siguientes.
grados y haremos clic en OK.
Paso 6 de 12
Podemos agrupar ahora los
Vamos a realizar unos trazos
Ahora vamos a cambiar el trazo del cosido a
objetos (botn derecho del
como si fueran cosidos del
trazos discontinuos, para ello vamos a ir al
ratn: Agrupar) para
bolsillo copiando el mismo
panel trazo (Ventana > Trazo pulsando
alinearlos horizontal y
(Cmd/Ctrl + C, Cmd/Ctrl + V) y
Cmd/Ctrl + F10 desde el teclado). Si
verticalmente con la mesa
hacindolo ms pequeo que el
hacemos clic en lneas discontinuas
de trabajo.
primero presionando la tecla
Illustrator pedir las medidas entre guiones y
Maysculas para mantener la
huecos, al hacer esto lo primero que nos
proporcin del mismo.
muestra Illustrator CS5 son las medidas

exactas en el trazo.
Lo colocaremos en la mitad del

Hecho esto los podemos
primero ayudndonos con las
desagrupar de la misma
guas inteligentes tambin
manera (botn derecho:
podemos copiar y pegarlo en
desagrupar) para seguir
frente (Cmd/Ctrl + C, Cmd/Ctrl
trabajando en la ilustracin.
+
F) y reducirlo desde ah (pues
ya est centrado).
Paso 7 de 12
Podemos ir haciendo clics
sucesivamente hasta que llegamos
al objeto requerido. Vamos a hacer
este ejercicio y a la vez vamos a
ordenar (botn derecho del ratn,
La novedad que ofrece esta versin de CS5

es que podemos hacer que estas se alineen
con los ngulos y finales de trazados para
que tenga una apariencia ms esttica en la
ilustracin. As que haremos clic en la
opcin anterior como se muestra en la
siguiente captura de pantalla.
traer al frente) los objetos dejndolos

Vamos a crear un borde de cosido para el
bolso en s, de la misma manera que
hemos hecho el borde del bolsillo, es decir
haciendo una copia del rectngulo y
reducindola un poco. Al hacer esto,
como tenemos todo en la misma capa lo
que creamos con posterioridad va a
aparecer encima de lo anterior.
Una de las novedades de Illustrator CS5
es que podemos seleccionar objetos que
estn por debajo de lo que tenemos en
frente presionando la tecla Cmd/Ctrl y
haciendo clic sobre el objeto que est
ms arriba, permitindonos trabajar con
los que estn debajo.
en un orden lgico.
Paso 8 de12
Realizaremos el borde
Daremos un tono de color
cosido del bolso como
reciclado al relleno del papel del
antes.
folleto.
Insertaremos el texto con la ayuda de la herramienta de Texto.
Elegiremos la fuente y tamao deseados, aqu le hemos aplicado la

que se muestra en la siguiente captura de pantalla y rotaremos el
texto con el mismo ngulo que el papel del folleto.
Ahora vamos a hacer un folleto
que va a estar metido en el
bolsillo, dejando que se lea el
anuncio del curso. Para ello
crearemos un rectngulo con la
herramienta rectngulo del
panel de herramientas (Cmd/Ctrl
+ M) y lo rotaremos haciendo clic
en los cuadros delimitadores
que aparecen cuando esta
seleccionado.
A
h
o
r
a
v
amos a hacer un detalle para el

bolsillo, utilizando la misma tcnica
que usamos para el bolsillo (lneas
discontinuas) y dndoles rellenos de
los colores RGB deseados. Hemos
utilizado la herramienta estrella
desde el panel de herramientas.
Paso 9 de12
Para la nueva base del asa vamos a
En cualquier momento podemos ver los
crear un rectngulo del mismo color y
contornos de nuestra ilustracin haciendo
lo situaremos justo debajo ayudndonos
clic en el men Ver > Contornear desde
de las guas inteligentes.
el teclado: Cmd/Ctrl + Y.
Como queremos aadir una
forma en la base del asa vamos
a expandir la apariencia del asa
desde el men: Objeto >
Expandir, y en la ventana que
Y por ltimo seleccionaremos ambas
aparece haremos clic en relleno
formas y otra vez con la herramienta
y trazo y haremos clic en OK.
de creador de formas haremos clic en

el asa y arrastraremos hasta la base.
Ahora vamos a trabajar con el asa de

nuestro bolso. Para sta vamos a traer al
frente el trazado que creamos al principio
del tutorial y le vamos a dar un trazo de 8
pt. Nos quedar como en la captura de
pantalla siguiente.
Paso 10 de 12
Con la herramienta de texto del panel de
A continuacin haremos clic en la
herramientas ( presionando T en nuestro
herramienta de degradado (desde
teclado) aadiremos el siguiente texto en
el panel de herramientas
la parte baja del bolso: haz clic aqu para
presionando G) y pincharemos y
entrar al curso.
arrastraremos sobre el rectngulo

dndole un degradado de color de
Agruparemos todos los objetos pues ya

slo queda realizar un fondo para el
anuncio.
Realizaremos el fondo con la herramienta
rectngulo (Cmd/Ctrl + M) y haciendo
clic en el icono de dibujar detrs (panel
de herramientas, abajo) trazaremos ste.
blanco a azul claro por ejemplo.
Guardaremos el
documento como
JPG, y como est
destinado para la Web
iremos al men
Archivo > Guardar
para Web y
dispositivos mviles.
Paso 11 de 12
Una vez ah podremos elegir varios tipos de
salidas para el documento, eligiendo en las
pestaas de arriba 4 copias podremos ver la
apariencia que el archivo puede tener en 4
formas diferentes, por ejemplo elegiremos
JPG y distintas calidades de salida, siendo
la primera el original y las otras 3
documentos JPG de diferentes calidades
como en la siguiente captura de pantalla.
Vamos a elegir la de 11.8 Kb y haremos clic
en Guardar, le daremos un nombre en la
siguiente pantalla y elegiremos donde
queremos que sea guardado.
Paso 12 de 12
Este ha sido el resultado.
Este tutorial nos ha servido
para realizar un anuncio para
la Web utilizando varias
novedades de Illustrator CS5.
Como actividad para practicar
algunas de las tcnicas
anteriores podemos realizar
una ilustracin de una casa
recortable, para un anuncio
web.
veremos la creacin de una
tarjeta virtual esttica.
Tutorial 14. Creacin de una tarjeta virtual esttica.
Paso 1 de 8
crear una tarjeta virtual de
cumpleaos, ser una
tarjeta esttica, es decir no
va a tener interactividad y
podr ser enviada va
email por ejemplo.
En la creacin de este
tutorial vamos a ver la
utilizacin de distintas
tcnicas de estiramiento
de objetos, tanto de
pinceles como de
smbolos.
Paso 2 de 8
Vamos a comenzar el
tutorial creando un
documento nuevo,
que va a ser de las
siguientes
dimensiones: 350
pxeles de ancho x
500 pxeles de alto, y
que sea un
documento RGB y de
72 ppp.
Paso 3 de 8
Vamos a trazar una estrella para
el fondo de la tarjeta virtual.
Para ello iremos al panel de
herramientas y elegiremos la
herramienta: Estrella y la
Con la estrella seleccionada, vamos a elegir

un pincel por ejemplo el que se muestra en
la imagen siguiente, (parte baja del panel
pinceles > Men bibliotecas de pinceles >
Decorativo > Decorativo separadores de
texto.
trazaremos con un trazo de 2pt.

mientras presionamos
Maysculas/Shift.
Como vemos al aplicarlo

al trazado de la estrella
las esquinas han
cambiado, por lo que
vamos a editar el pincel
de arte haciendo doble
clic en el mismo y se nos
abrir la pantalla siguiente
en la que podremos
editarlo.
Una vez aqu elegiremos: Estirar entre guas.

Hecho esto pincharemos en las guas y las
arrastraremos hasta que entre ellas slo aparezca lo
que quiero estirar entre ellas. La imagen siguiente
es la resultante de este primer cambio.
Paso 4 de 8
El siguiente paso va a ser convertir la estrella en un
Colocaremos varias estrellas en el
smbolo arrastrndola hasta el panel de smbolos
lienzo y cambiaremos la escala de
(Ventana > Smbolos Maysculas + Ctrl/Cmd +
algunas y las situaremos en distintos
F11) y dndole el nombre: estrella, por ejemplo.
sitios, a nuestro gusto.

Por ltimo reduciremos la opacidad
desde el panel: Apariencia >
Opacidad y elegiremos un 10% de
Ahora, si queremos que las esquinas
opacidad porque va a ser parte del
sean en punta elegiremos la opcin de
fondo.
abajo a la derecha de la misma

pantalla de edicin del pincel
(superponer) y obtendremos la
imagen siguiente.
Una vez convertida en
smbolo eliminaremos
la estrella original y
arrastraremos el nuevo
smbolo de estrella
desde el panel de
smbolos hasta
nuestro lienzo.
Paso 5 de 8
Crearemos una capa nueva donde vamos
a colocar unos smbolos de unos globos.
Para ello vamos a utilizar los smbolos que
se encuentran en la paleta de smbolos >
Biblioteca de smbolos > Celebracin.
Hecho esto nos aparecer una

pequea ventana donde haremos clic
en: Activar guas para escala de 9
sectores y tambin en Alinear con
cuadrcula de pxeles y haremos clic
en OK.
Ahora vamos a elegir los globos,

simplemente haciendo clic en los
deseados y una vez elegidos
aparecern en la paleta de smbolos.
Ahora desde la paleta de smbolos
haremos clic en el icono de Opciones de
smbolo.
Aparentemente no ha pasado nada,

pero si hacemos doble clic en el
smbolo de globo aparecer en el
lienzo con unas guas que dividen el
smbolo en 9 sectores (y adems
aparecer alineado a la cuadrcula
de pxeles.
Ahora, as como lo hicimos

con las guas del pincel,
situaremos entre las guas
la parte que queremos que
se estire y dejaremos fuera
lo que queremos conservar
intacto como se muestra
en la siguiente ilustracin
de pantalla
Paso 6 de 8
En la siguiente captura de pantalla
Ahora vamos a repetir lo
podemos ver lo que pasa con el
anterior varias veces con
globo haciendo la edicin con la
tantos globos como
escala de 9 sectores en la
queramos y los
izquierda y en la derecha sin
situaremos a nuestro
editar el smbolo.
gusto.
Presionando la tecla Esc

saldremos del modo de
edicin del smbolo.
Una vez en el panel

de Bordes Novedad,
Ahora arrastrando el
mismo smbolo desde
el panel de smbolos
hasta el lienzo vamos a
estirar la cuerda hacia
abajo, y slo se estirar
la parte que
especificamos en la
edicin.
elegiremos el pincel
Vamos a crear un recuadro
que tenga un relleno gris
claro y para el borde
haremos clic en el panel:
Pinceles > Men Biblioteca
de pinceles > Bordes >
Bordes_Novedad.
llamado: Cinta
Paso 7 de 8
desde el panel de pinceles y se nos abrir la siguiente
Al hacer clic en
pantalla.
ste se va a
aplicar
directamente al
trazo del recuadro,
y tambin
aparecer en el
panel de pinceles.
Para editar su
apariencia
haremos doble
clic en el mismo
El resultado de esos cambios es el

siguiente.
texto desde el men de herramientas ( presionando T en

Por ltimo
el teclado)
Vamos a guardar el documento como
haremos clic en la
y escribiremos el texto:
JPG, para ello iremos al men: Archivo
herramienta de
Enhorabuena! dentro del recuadro que hemos creado.
> Exportar, y en la nueva ventana

elegiremos donde queremos que sea
guardado y con qu nombre y en el
men desplegable de abajo
elegiremos JPG.
Paso 8 de 8
Ya slo tendremos que abrir nuestro
email, crear uno nuevo y ponerlo en un
archivo adjunto para mandrselo a la
persona que queramos felicitar.
Este es el resultado.
En este tutorial hemos visto la
utilizacin de distintas tcnicas de
estiramiento de pinceles como de
smbolos.
Como actividad podemos crear un
fondo de pantalla que sea un campo de
flores de diferentes larguras por
ejemplo.
En el siguiente tutorial vamos a ver
cmo crear una sencilla aplicacin de
Web utilizando un documento creado en
Illustrator CS5 y dndole interactividad
en Flash Catalyst.
Tutorial 15. Creacin de un objeto interactivo con Illustrator CS5 y Flash Catalyst CS5.
Paso 1 de 14
En este tutorial vamos a aprender a hacer
una aplicacin Web sencilla utilizando
Illustrator CS5 y Flash Catalyst, sin
necesidad de escribir una palabra de cdigo.
Atencin, muy importante: Flash Catalyst
CS5 slo permite agregar hasta 20 pginas
de interaccin. Aunque en este tutorial
intentamos crear una interaccin de ms de
20 pginas, slo fue cuando llegamos al
nmero 20 que descubrimos esto acerca de
Flash Catalyst. As que combinamos las
pginas que tenamos para que
interactuaran entre ellas.
Para evitar este problema, seguiremos el
tutorial reduciendo el nmero de botones
necesitados. Por ejemplo haremos 2
botones que mueven 2 3 pginas de un
pase de diapositivas. Cuando estemos en la
pagina 1 pulsamos un botn que nos llevar
a la pagina 2 y sta a la 3 y viceversa.
Paso 2 de 14
Es conveniente utilizar un formato FXG para trabajar con Flash Catalyst, aunque los archivos de Illustrator y
Photoshop tambin son aceptados. Usando el tipo de archivo FXG hay que considerar las siguientes
recomendaciones:
Usar los perfiles de Flash Catalyst o RGB bsico para crear contenido para FXG.
El uso de pinceles constantemente provoca problemas de rendimiento debido a los trazados ampliados.
El formato FXG slo proporciona asignacin para Sombra paralela, Resplandor interior/exterior y Desenfocar.
No se recomienda usar la escala horizontal o vertical del texto ya que se creen contornos al guardar el archivo .FXG.
En el formato FXG no se admiten fusiones en filtros. Aunque se puede definir al guardar el archivo FXG con
capacidad de edicin de filtros o con la opcin de guardado automtico, definiendo la fusin en Normal cuando se
aplican los filtros (Sombra paralela, Resplandor interior/exterior) en un objeto para conseguir una apariencia ms
real.
Para optimizar el movimiento del contenido entre Illustrator y Flash Catalyst seleccionaremos la opcin Alinear con
cuadricula de pxeles desde Illustrator.
Los objetos con un modo de fusin distinto al normal (los que se fusionan con el fondo por defecto) se representan de
otra manera en Flash Catalyst por lo que siempre debern de tener otro objeto detrs.
No se admiten objetos sesgados ni smbolos ni mapas de bits reflejados ni tintas planas ni cuatricromas y tampoco
texto vertical.
Las cuadriculas de escala de nueve sectores tampoco son compatibles.
Paso 3 de 14
Dicho lo anterior, vamos a
comenzar abriendo un
documento nuevo en
adobe Illustrator CS5
donde vamos a crear los
grficos que utilizaremos
para nuestra web sencilla.
Este nuevo documento va
a tener las medidas de 800
pxeles de ancho por 600
pxeles de alto, modo de
color RGB y efectos de
rasterizado de 72 ppp.
Nos aseguraremos de
seleccionar la opcin de
Alinear nuevos objetos con
cuadricula de pxeles y
haremos clic en OK.
Paso 4 de 14
En este caso usaremos tres
ilustraciones que fueron
escaneadas para este
tutorial. Para facilitar la
interactividad de las
ilustraciones las hemos
dividido en tres (cabeza,
cuerpo y piernas). De esta
manera podemos lograr
combinaciones de cabezas,
cuerpos y piernas diferentes
pero como ya hemos dicho es
conveniente reducir estas
combinaciones.
El siguiente paso es importar
las ilustraciones al documento.
Para ello haremos clic en el
men: Archivo > Colocar y
buscaremos la ubicacin de
las ilustraciones.
Paso 5 de 14
Una vez en el documento tenemos
Como podemos apreciar uno de los
que incrustar cada ilustracin desde
cambios en la versin CS5 es que el
el panel de control y las
origen de las reglas se ubica en la
renombramos bajo una capa
esquina superior izquierda del lienzo.
llamada paneles con los nombres:

cabeza1, cabeza2, cabeza3,
cuerpo1, cuerpo2, cuerpo3,
piernas1, piernas2 y piernas3.
Los orgenes de la mesa de trabajo

se pueden mover a cualquier
ubicacin que sea ms conveniente
para nosotros pulsando (sin soltar) en
Para alinear las nueve ilustraciones
la esquina superior izquierda donde
nos vamos a ayudar con las reglas
se cruzan las reglas y arrastrando
de la mesa de trabajo. Para
hasta el punto deseado. Esta opcin
visualizarlas iremos al men: Ver >
es muy til para establecer
Reglas > Mostrar reglas
mrgenes.
presionando Ctrl/Cmd + R.
Lo siguiente es crear lneas gua que
nos servirn de lmite para el tamao
de las ilustraciones. Pinchando en las
reglas y arrastrando hasta la
ubicacin deseada.
Necesitamos crear botones a los lados de las

ilustraciones.
Estos botones nos servirn para interactuar con las
imgenes. Vamos a crear una capa nueva en donde
colocaremos los botones. Con la herramienta pluma
(ubicada en el panel de herramientas pulsando la
letra P) trazamos el primer botn haciendo una forma
triangular y le asignamos un color gris de relleno.
Renombramos este botn como boton1i.
Paso 6 de 14
Copiaremos y pegaremos este mismo botn dos
Con la herramienta de seleccin
El siguiente paso es eliminar
veces para las partes de los cuerpos y piernas,
movemos el botn al lado derecho
las lneas guas que creamos
tambin renombraremos estos botones como
haciendo uso de las guas
ya que no se usarn ms.
boton2i y boton3i respectivamente.
inteligentes y lo renombramos
Iremos al men: Ver > Guas >
Continuamos ahora con los botones del lado derecho.
como boton1d.
Borrar guas.
Utilizaremos la herramienta rotar (haciendo doble clic
Repetimos el proceso de copiado
La siguiente figura muestra las
en el icono desde el panel de herramientas
como lo hicimos anteriormente con
capas que tenemos creadas
pulsando la letra R).
los botones del lado izquierdo
hasta el momento.
donde
de 180
introduciremos
Aparecer
una ventanael valor
grados para el ngulo de rotacin
y haremos clic en copiar y en
OK.
creando as los botones 2d y 3d

como se muestra en la siguiente
ilustracin.
Paso 7 de 14
Ahora guardaremos ek documento desde men: Archivo >
Guardar como, lo nombraremos y seleccionaremos el tipo de
archivo como Adobe FXG (*.FXG) y posteriormente hacemos
clic en Guardar (Save).
Vamos a abrir el programa Flash Catalyst CS5, en la

pantalla de bienvenida seleccionaremos Crear un nuevo
proyecto desde un archivo FXG como se muestra en
la siguiente figura. Esto nos llevara a una ventana en la
que seleccionaremos el documento que creamos
anteriormente y haremos clic en abrir.
Esto nos lleva a la pantalla de Opciones de FXG donde dejaremos

los valores predeterminados como estn y haremos clic en OK.
Paso 8 de 14
Si nos fijamos en la
Al hacer esto el panel se
Iremos a las Propiedades (Properties) del
ilustracin el botn del
convierte en un panel de edicin
botn en donde podemos cambiar el color
que estamos hablando
de apariencia del botn que
al que queremos que el botn cambie
Automticamente
deber estar
acabamos de crear.
cuando se pase el puntero del ratn por
Flash Catalyst
seleccionado con un
Elegiremos la opcin sobre (over)
encima de l. Cambiaremos el color de
abrir el archivo
recuadro azul, si no lo
del panel de botn (Button).
relleno (Fill) a un rosa (FF00FF) o al color
respetando todas
est haremos doble
las capas hechas
clic sobre l para
en Illustrator CS5.
seleccionarlo.
deseado.
Desde el panel
de capas
Al hacer esto aparecer otro
(layers) haremos
panel llamado Pginas /
clic en el
Estados (Pages / States)
boton1d y desde
donde la opcin: Sobre (Over)
el panel que se
estar seleccionada como se
muestra a
ve en la siguiente figura.
continuacin
elegiremos el
componente de
botn.
Paso 9 de 14
Repetiremos este proceso con
Seleccionaremos
el
los botones a
boton1i,
boton2d,
boton2i, boton3d y boton3i.
deshabilitar y
haremos clic en
componente >
Una vez hecho esto iremos al panel de propiedades de
botn
Botn (Properties > Button > Common) y desde ste
(Component >
bajaremos la opacidad a 0%. As hemos determinado
Button)
que cuando nuestros botones estn en estado

deshabilitado desaparecern.
Vamos a deshabilitar los botones

que no necesitamos cuando no
hay mas imgenes de un lado.
Por ejemplo cuando estamos en
la pagina uno realmente no
necesitamos los botones de la
En el siguiente panel
izquierda pues no hay ms
elegiremos:
imgenes de ese lado.
Deshabilitado (Disabled)
Paso 10 de 14
Ahora haremos clic en duplicar estado para

crear una nueva pgina (tambin se puede
hacer a travs del men: Estado >
Una vez hemos hecho este
Duplicar estado (State > Duplicate state).
estado de botn cuando

hagamos otros botones y les
queramos que estn en
estado deshabilitado slo
tendremos que hacer clic en
el botn y esta vez iremos
otra vez al panel Properties
> Button > Common y esta
vez slo deseleccionaremos
Una vez cambiado el color de los botones
la opcin Habilitado
volveremos al documento principal haciendo
(Enabled) como se muestra
clic en web_sencilla 1 en el panel que se
en la imagen siguiente.
ubica arriba del lienzo como se muestra en

la siguiente imagen.
Paso 11 de 14
Trabajaremos en esta pgina agrupando
Repetiremos este proceso: Estado >
las tres imgenes superiores haciendo clic
Duplicar estado (State > Duplicate
en ellas mientras mantenemos presionado
State) para crear una tercera pgina.
Shift (Maysculas) y haciendo clic en la

opcin Agrupar (Group) desde las
opciones del botn derecho.
Ahora desplazaremos el grupo de
Volveremos a desplazar la imagen que
imgenes hacia la izquierda presionando
agrupamos hacia la izquierda otra vez
Mayusculas / Shift para restringir el
manteniendo pulsada la tecla Shift >
movimiento con la horizontal.
Maysculas desde nuestro teclado.
Paso 12 de 14
Ahora agruparemos las tres
El siguiente paso es
Vamos a elegir al hacer clic (On Click), (Play
imgenes de la parte central y
agregar la interactividad a
transmision to state) y elegiremos la pagina a
repetimos los procesos de creacin
cada botn. Regresamos a
la que queremos que vaya (choose state) de la
de pginas y desplazado de
la pagina 1 y haremos clic
lista, cuando estamos en la pagina (when in
imgenes hacia la izquierda.
en el boton1d.
page).
Por ejemplo si tenemos el boton1d y queremos
Esto no ser necesario en caso de
que al hacer clic en el vaya a la pgina 2 el
que hayamos hecho un simple paso
proceso ser elegir la pagina dos de la primer
de diapositivas para reducir el
lista cuando estemos en la pagina 1.
numero de paginas.
Una vez aqu, desde el

panel de Interacciones
(Interactions) haremos clic
en agregar interaccin
(add interaction).
Posteriormente siguiendo el mismo
mtodo con las imgenes de la
parte inferior las agrupamos y
desplazamos en nuevas pginas.
Paso 13 de 14
Seguiremos este mismo
Para correr el proyecto iremos al
Por ltimo guardaremos nuestro proyecto por medio del
proceso para agregar
men: File > Run Project Ctrl /
interacciones a cada botn de
men Archivo > guardar (File > Save).
Cmd + Intro (Enter) y el proyecto
cada pgina.
se abrir en el navegador
Este es el resultado que vemos desde un navegador
predeterminado.
al correr el proyecto.
Aqu es donde resultan ms de

20 combinaciones/pginas y
por ello se recomienda no
hacer tantas porque el
programa no admite mas de
20 pginas.
Desde el panel inferior de la
lnea del tiempo (Timelines)
es posible modificar los
tiempos de transicin entre
pginas; se pueden hacer
transiciones suaves, rpidas
etc. En el proyecto las hemos
dejado igual.
Tambin mostramos una de las combinaciones posibles en

la pagina siguiente.
Paso 14 de 14
Como actividad
podemos crear un
pase de diapositivas
con 3 pginas y que
cada una de ellas
tenga un panel
explicativo del
contenido de cada
diapositiva.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS5
Crditos
Coordinacin
Roser Beneito Montagut
Autora
Ana Azparren Arteaga
Fecha de publicacin
25 de Febrero de 2011
PID_00149180
Estudios de Informtica,
Multimedia y Telecomunicacin

Guia de Aprendizaje IllustratorCS5

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Guia de Aprendizaje IllustratorCS5

Hochgeladen von

Copyright:

Verfügbare Formate

Gua de aprendizaje

Illustrator CS5: gua de maquetacin

11.Creacin de un dibujo haciendo uso de los

Creacin de un estampado geomtrico

12.Creacin de la ilustracin de un zorro con las

Creacin de un banner de pgina web

innovaciones: pincel de Cerdas y modo de

Creacin de un icono para un dispositivo mvil

13.Creacin de una postal vectorial de flechas

Creacin de una grfica vectorial

14.Crear un anuncio web con lneas

Creacin de arte para imprimir en una camiseta (y

15.Creacin de una tarjeta virtual esttica

Crear una animacin Flash dentro de Illustrator

16.Creacin de un objeto interactivo con

10.Creacin de un edificio vectorial en perspectiva

Illustrator CS5 y Flash Catalyst CS5.

Illustrator CS5: gua de maquetacin

Tutorial 1. Creacin de un fondo de pantalla

Illustrator CS5: gua de maquetacin

Tutorial 1. Creacin de un fondo de pantalla

Tutorial 1. Creacin de un fondo de pantalla

muestra la ventana en la que

6. Mesa de trabajo: donde dibujaremos nuestras ilustraciones.

Para nuestro tutorial usaremos el espacio de trabajo: aspectos esenciales desde el

Tutorial 1. Creacin de un fondo de pantalla

Podemos dibujar figuras geomtricas de dos

Para conseguir que la estrella sea

seleccionando la herramienta de Rectngulo.

maneras: o bien seleccionando la figura

perpendicular con la horizontal, pulsaremos

Bajo todos los iconos que contienen un

(haciendo clic en el icono deseado), pulsando

Shift o Maysculas al crearla.

pequeo tringulo en la parte inferior derecha

y arrastrando el ratn hasta conseguir la

se encuentra un men desplegable al que

medida deseada, o bien haciendo clic y

podemos acceder manteniendo el botn del

soltando. Al hacer esto aparece una ventana

ratn pulsado sobre el icono.

nueva en la que podemos insertar las medidas

Cuando el men se despliega, podemos elegir

la herramienta deseada (en este caso la

Si queremos cambiar el nmero de puntas

Estrella) y si soltamos el ratn, podemos

de nuestra estrella, pulsaremos las flechas del

comenzar a dibujarla. Si queremos que este

teclado arriba (ms) y abajo (menos) segn el

men desplegable est siempre a nuestro

numero de puntas deseado. El mnimo es tres

alcance, podemos hacer clic en el tringulo de

y no tiene mximo de puntas. Para nuestra

la derecha (marcado en la ilustracin

estrella elegiremos 4 puntas.

Si lo deseamos, siempre podremos

Tutorial 1. Creacin de un fondo de pantalla

- Desde el panel de Color: si no est visible,

Para seleccionar un objeto en Illustrator basta

relleno (color de dentro) y un trazo

podemos acceder a ste (y a cualquier otro

con hacer clic en la flecha negra de la barra de

(color del borde). Para esta

panel) desde el men Ventana > Color