Tutorial Illustrator CS4

Gua de aprendizaje
Illustrator CS4: gua de maquetacin

ndice de tutoriales
0. Introduccin
1. Creacin de un fondo de pantalla
2. Creacin de un estampado geomtrico
3. Creacin de un banner de pgina web
4. Creacin de un icono para un dispositivo mvil
5. Cartel/pster vectorial
6. Creacin de una grfica vectorial
7. Creacin de arte para imprimir en una camiseta (y preparacin de impresin)
8. Crear una animacin Flash dentro de Illustrator
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

Introduccin
Bienvenidos a la Gua de aprendizaje de Adobe Illustrator CS4.
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:
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
Illustrator CS4
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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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

exactas.
Cuando el men se despliega, podemos elegir

la herramienta deseada (en este caso la
Si queremos cambiar el nmero de puntas de
Estrella) y si soltamos el ratn, podemos
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.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 estrella
panel) desde el men Ventana > Color
herramientas, y para seleccionar una parte
no es preciso elegir un trazo. Para
especfica de los objetos, pulsaremos en la
ello haremos clic en Trazo y
fecha blanca, llamada herramienta de
elegiremos la opcin de Ninguno.
Seleccin directa.
Podemos acceder y cambiar los

trazos y rellenos de cualquier
Vamos a hacer clic en el relleno de nuestro
objeto seleccionado:
objeto y seleccionaremos un color, por ejemplo

un amarillo.
- Desde el Panel de control:

- Desde la barra de herramientas:
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 >
Guas inteligentes (Control + U)
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.
Haremos clic en ok y despus haremos clic en

Objeto > Fusin > Crear.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 8 de 11
Siguiendo el mismo mtodo usado
Copiaremos y pegaremos una
Una vez realizada la fusin
antes, ahora vamos a crear una
estrella igual en frente de la
haremos doble clic en la estrella
estrella de muchas puntas (100
primera: Ctrl + C y Ctrl + F y
pequea para moverla. El resto de
puntas) y esta vez aadiremos un
haremos esta ltima ms pequea
la ilustracin la seguir como si
trazo de 2 pt desde el men
presionando Maysculas y Alt
colgaran todas de un hilo, esto nos
puede ayudar a crear perspectivas
desplegable de Trazo en el Panel

de control.
Fusionamos estas dos y..
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.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 traer
otras formas geomtricas y otros
modo fusin de la ltima estrella.
el objeto por encima de todos los dems; Hacia delante,
colores de relleno o incluso usar
Sabremos que est en este estado
para subir un nivel; Hacia atrs, para bajar un nivel y
trazo de diferentes tamaos para
si el resto de la ilustracin aparece
Enviar detrs para mandar la ilustracin debajo de todas
crear una composicin que nos
menos iluminado, como en la
las dems.
guste.
siguiente ilustracin (donde la

estrella azul est en modo fusin).
Se pueden variar tambin las

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.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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
un lugar donde guardar la
dispositivos y la opcin Exportar
composicin que nos servir de
nos ofrecen un abanico un poco
fondo de pantalla).
ms amplio. La siguiente es una

captura de pantalla a la que
Es bueno guardar una versin en
podemos acceder desde: Archivo
modo Ai, (Illustrator) por si
> Guardar para web y
queremos modificarla ms tarde,
dispositivos (Alt+Mayus+Ctrl+S)
pero para nuestro fin queremos

guardarlo como JPEG, por
ejemplo.
Una vez en esta pantalla, podemos hacer clic en diferentes opciones.
Si intentamos Archivo > Guardar
En nuestro caso haremos clic en 4 copias (desde las pestaas de
no nos da la opcin de guardar
arriba) y comparemos los pesos y tamaos, as como el tiempo que
como JPG, como podemos ver en
tarda en cargarse en una pgina web, elegiremos JPEG de calidad
la siguiente captura de pantalla:
30.
Gua de aprendizaje
Illustrator CS4
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:
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

Paso 2 de 8
Para empezar, crearemos un
documento nuevo. Crear nuevo >
Documento para Web
de 800 x 600 pxeles y con
orientacin horizontal.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 3 de 8
Con la herramienta rectngulo seleccionada
El siguiente paso ser ir a Objeto
El siguiente paso ser hacer clic en cada uno de los
vamos a crear un rectngulo de 20 px de ancho
> Expandir apariencia y despus
rectngulos y darles un color diferente a cada uno.
por 60 px de alto sin trazo y con relleno negro.
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:
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 4 de 8
Una vez ah elegiremos Naturaleza > Playa y
Ahora vamos a reagrupar nuestros rectngulos desde el
La siguiente ilustracin
nos aparecer un nuevo panel del que
botn derecho (Agrupar) y otra vez iremos al men Efecto
muestra el resultado de la
elegiremos los colores que nos gusten. Aqu
> Distorsionar y transformar > Transformar y en este
ltima transformacin.
hemos elegido varios tonos de azul para
caso elegiremos las opciones siguientes: hay que poner
simular agua.
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 5 de 8
ste es el
El siguiente procedimiento ser crear un
resultado
rectngulo sin relleno ni trazo de 80 px de alto y
visual:
120 px de ancho (80 = nmero de rectngulos x

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).
El cuadrado pequeo que est en el

crculo rojo en la ilustracin anterior
indica que la capa est seleccionada
Y por ltima vez volveremos al mismo efecto y
en ese momento.
esta vez haremos una copia a -80 en la vertical.
El crculo indica la apariencia y

haciendo doble clic en l podremos
acceder a ella y cambiarla desde el
panel Apariencia. Haciendo clic la
Las capas nos permiten mostrar, organizar y editar
podremos identificar y la
los objetos de un documento. Por defecto, cada
arrastraremos para moverla.
documento tiene una capa y los objetos que

creamos se van disponiendo en sta, pero
El ojo de la izquierda demuestra la
podemos distribuirlos en capas diferentes para
visibilidad de las capas y si hacemos
poder tener un mejor control sobre ellos.
clic en l, podemos esconderlas.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 podremos
pueden ser bloqueadas. Para ello, haremos clic en el
trazado, haremos clic en la
cambiar de nombre, bloquear y mostrar la capa.
cuadro al lado de los ojos y aparecer un pequeo
capa que dice Trazado y
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 ratn.
desaparecer y podremos modificar nuestra capa otra

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 de
cuando tengamos muchas
las capas. stos indican que hay un submen
capas, podamos encontrar los
al que accederemos haciendo clic en el
objetos mas rpidamente.
tringulo.
Los colores tambin pueden

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

hacemos clic en uno de los grupos, slo entonces se
bloquearn stos individualmente.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 lnea
la tcnica de antes para hacer
que haba entre los trazados se
copias de nuestro estampado
ajuste y no deje ningn pxel
original o copiar y pegar
blanco entre ellos.
seleccionando cada vez un grupo

Por ltimo, con toda la capa
mayor. Al final lo que queremos
seleccionada, la arrastraremos
hacer es agrupar todo para que no
hasta nuestro panel de Muestras
se nos mueva sin querer e incluso
hasta que aparezca un signo
podemos bloquear la capa desde
ms al lado del puntero del
el panel de Capas.
ratn. Dando doble clic en sta,

la cambiaremos de nombre (en
El siguiente paso es exportar
este tutorial la vamos a llamar
nuestro fondo de pantalla a
agua de mar).
formato GIF, por ejemplo, y la

nica manera de poder elegir
formato GIF es la de Guardar para
Web y dispositivos.
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 pez;
nuestro documento nuevo,
empezaremos eligiendo un color
(Ventana > Capas, o F7 y
azul para web para el relleno y sin
haremos clic en el icono Crear
borde y crearemos un crculo de
nueva capa).
100 x 100 px con la herramienta
Ahora que tenemos trazado el
El inicio y el fin de cada segmento
Elipse y presionando Maysculas
crculo azul, vamos a seleccionar
est sealado por los puntos de
para mantener las proporciones.
la herramienta de Seleccin
ancla. Hay dos tipos de punto de
directa (flecha blanca) para
ancla: puntos de vrtice (conecta
Para cambiar el nombre de una
Alternativamente podremos
arrastrar los puntos de ancla del
rectas o curvas) y puntos de
capa haremos doble clic sobre el
cambiar las proporciones desde el
crculo y deformarlo. Puntos de
suavizado (conecta curvas).
nombre y cambiaremos el nombre.
Panel de control.
ancla: cada trazado (lnea) consta
Comenzaremos trabajando en el
de uno o ms segmentos curvos o
cuerpo del pez.
rectos.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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.
Haremos clic y arrastraremos en el
Con la herramienta Elipse otra vez vamos
punto de ancla que deseamos
a crear unas elipses con color blanco
mover y moveremos hasta que
como las que siguen:
logremos el tamao deseado.

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

parte de nuestra ilustracin
Seleccionando el punto de abajo,
Vamos a seleccionar todos los elementos
haciendo clic sobre sta.
lo encogeremos hacia adentro y
creados hasta ahora y los vamos a
Trazaremos otra elipse perfecta
daremos un color ms claro a este
agrupar desde el men desplegable que
(presionando Maysculas) con
(valo) de encima.
aparece al pulsar el botn derecho del
relleno negro y sin borde de 60
ratn.
x 60 px.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 Alt
activo desde el Men Ventana >
Despus seleccionaremos todo y haremos clic
copiamos la forma y con las maysculas se
Buscatrazos (Mayus.+ Ctrl + F9)
en el segundo icono del panel Buscatrazos
restringen los movimientos).
(menos frente).
Tambin necesitamos tener activadas
las guas inteligentes.
Ahora s, trazaremos un rectngulo
con la misma apariencia (relleno negro
y sin trazo) hasta la mitad del crculo
(las guas inteligentes nos avisarn
cuando lleguemos al centro).
No importa dnde empieza el
rectngulo, pues slo lo queremos
para sustraer esa parte del crculo que
no queremos utilizar.
El siguiente paso ser seleccionar ambas

circunferencias para agrupar los dientes (botn
derecho > agrupar) y colocarlos sobre la boca
como en la siguiente ilustracin:
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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, Ctrl
+ F). Ahora vamos a seleccionar una de las
copias de la boca y los dientes y manteniendo
presionado Alt en el teclado haremos clic en el
icono redondeado en la ilustracin siguiente
(Formar interseccin).
Para la lengua, vamos a dibujar un crculo de

25 x 25 px de color blanco y sin trazo y lo
colocaremos encima de la boca.
Seleccionaremos la boca, los dientes y la
lengua y haremos clic en el icono de centrado
horizontal del panel Alinear.
Hecho esto obtendremos el siguiente resultado:
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 (el

Tambin podemos acceder a los degradados y
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 8 de 12
Tambin se pueden crear degradados
Ahora regularemos la cantidad de color deseada
Para nuestro degradado vamos a cambiar la
transparentes que controlaremos con la
con la manecilla del regulador de las paradas de
orientacin de ste con la herramienta
opacidad:
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 9 de 12
Para los ojos de nuestro pez hemos creado
Puntos de ancla:
tres crculos (seleccionando herramienta de
Cada trazado (lnea) consta de uno o ms
elipse, pulsando maysculas y arrastrando el
segmentos curvos o rectos. El inicio y el fin de
ratn) de diferentes tamaos como se puede
cada segmento viene sealado por los puntos
apreciar en la ilustracin de abajo, les hemos
de ancla. Hay dos tipos de punto de ancla:
dado al primero un borde de color gris de1 px y
puntos de vrtice (conecta rectas o curvas) y
un relleno blanco, para el segundo hemos
puntos de suavizado (conecta curvas).
quitado el borde y le hemos dado un relleno de
La herramienta Pluma nos permite realizar
color negro y para el tercero hemos trazado
lneas rectas y curvas y transformar sus puntos
una circunferencia muy pequea blanca y sin
de ancla.
borde.
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
Una vez tenemos el primer ojo, lo vamos a
empezar nuestro trazo de cola y soltaremos el
colocar sobre la boca y vamos a hacer una
botn del ratn, luego nos situaremos donde
copia del mismo para el ojo derecho.
queremos realizar el siguiente trazo e Illustrator
Para ello vamos a presionar Alt y Maysculas,
crear una lnea desde nuestro primer punto
haremos clic y arrastraremos el ojo hacia la
hasta este ltimo. Repetiremos esto hasta
derecha poniendo atencin en las guas
tener la cola dibujada.
inteligentes.
Si queremos aadir ms puntos de ancla a

una ilustracin, usaremos la herramienta Aadir
punto de ancla. Para eliminar puntos
usaremos la herramienta Eliminar punto de
ancla y para convertir puntos de ancla
usaremos la ltima opcin del men
Herramienta Pluma. Esta ltima cambia
vrtices redondeados a cuadrados y viceversa.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 la
Para hacer la parte de la cola azul oscuro
queremos elegir el mismo color que en la parte
zona que queremos ampliar o usaremos las
vamos a trazar un tringulo con la herramienta
de arriba del cuerpo del pez (azul claro). Con la
teclas: Ctrl + o Ctrl para acercarnos o
Pluma como antes. Elegiremos el color azul y
cola seleccionada haremos clic en la
alejarnos.
mandaremos este objeto hacia atrs haciendo
herramienta Cuentagotas desde la barra de
Una vez ah usaremos la herramienta Mano
clic en el botn derecho del ratn >
herramientas y despus haremos clic sobre el
desde la barra de herramientas (o con la barra
Organizar > Hacia atrs (Ctrl + 9).
color que deseamos copiar, automticamente
espaciadora) y haciendo clic con el ratn y
se copiar el color.
arrastrando hasta donde queramos.
Seleccionaremos la herramienta de Seleccin

directa (flecha blanca) y haremos clic en los
puntos de ancla que queremos mover.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 11 de 12
Para obtener el texto de arriba

hemos utilizado el color azul
oscuro que utilizamos en el pez y
Para finalizar el pez realizaremos
Cuando usamos cualquier
unas elipses de diferentes tamaos
herramienta, el Panel de control se
de color azul oscuro para simular
personaliza para esa herramienta;
gotas de agua.
ahora que hemos trazado texto se
las siguientes caractersticas de

texto:
ha cambiado a Carcter, como

vemos en 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
De momento no nos vamos a
herramienta Texto (T)
complicar con el texto, va a ser
(desde
la barra de herramientas).
algo bastante simple: slo le
Haremos clic y arrastraremos para
pondremos un relleno y un borde
crear un cuadro de texto e
de color ms oscuro.
introduciremos el texto deseado.
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 de
Una vez realizados los cuadrados, los

queremos alinear uno con el otro; para ello
relleno negro.
seleccionaremos ambos e iremos al panel de

Alinear que ya habamos usado antes.
Para ello, seleccionaremos relleno negro
Haremos clic en Centrar y Centrar
desde la barra de herramientas y borde

ninguno y a continuacin seleccionaremos
Ahora lo que hemos de hacer es crear otro
verticalmente (en la ilustracin, iconos de
la herramienta de Rectngulo
rectngulo ms pequeo, para ello vamos a
izquierda a derecha bajo los crculos rojos)
redondeado (situada en la barra de
hacer clic en la mesa y como an tenemos la
herramientas). Presionando Maysculas
herramienta de rectngulo redondeado
mientras arrastramos el ratn crearemos
seleccionada nos aparecer otro igual al
un cuadrado de 30 x 30 pxeles y de
primero, y en la pantalla que nos aparece le
radio: 5 pxeles.
daremos las medidas del nuevo cuadrado:

27 x 27 px (dejaremos 3 pxeles de diferencia
entre los dos). Y de radio dejaremos 5 px.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 4 de 14
El siguiente paso ser dar un
Una vez hecho esto iremos a editar nuestro
Para dar un efecto de realidad y simular que el
degradado a nuestro botn.
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 negro
arrastrando sin soltar el ratn hacia abajo.
radio. Lo centraremos en nuestro cuadrado
para la de la derecha (como en
Si es necesario, utilizaremos los
base con la ayuda de las guas inteligentes.
el tutorial 2 podemos hacer
manejadores para alterar nuestro
doble clic en la muestra y elegir
degradado a nuestro gusto.
color, o podemos hacer clic en

el color deseado desde el panel
La apariencia de nuestro botn en el
de Muestras y arrastrarlo hasta
momento de cambiar la orientacin del
nuestra muestra en la barra de
degradado ser sta:
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
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 Trama,
extremos) con una inclinacin
que multiplica el inverso de los
aproximada a la ilustracin de la
colores base y de fusin.
Para que no se note tanto el contraste,
El efecto obtenido es parecido a
volvemos a seleccionar el rectngulo y le
proyectar varias imgenes
bajamos el degradado hacia la izquierda con el
transparentes unas sobre otras.
manejador de arriba de la barra de degradado.

Llegado aqu vamos a dejar
el recuadro del botn un
poco aparte y vamos a
comenzar dibujando lo que
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).
derecha.
El siguiente paso va a ser hacer un reflejo de este

segmento para que nos quede simtrico. Para ello vamos a
seleccionar el segmento trazado y seleccionando la
herramienta de Reflejo (O) (barra de herramientas)
presionaremos la tecla Alt y haremos clic en el lugar donde
queramos el eje (al pulsar Alt aparecern tres puntos al
lado del puntero del ratn).
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 caso
objeto varias veces. Para ello hay
es el vertical (Y) a 90 grados y haremos clic en Copia.
varios caminos, uno de ellos es ste:

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

los dos extremos de arriba para unirlos (sabremos que
estn seleccionados cuando los puntos de ancla estn
rellenos.
Para unir los trazado iremos al
que va a ser el eje de rotacin

(marcado con un crculo rojo en la
ilustracin de la derecha), lo que
hemos de hacer es presionar Alt,
hacer clic y arrastrar donde
men Objeto > Trazado > Unir
queramos situar el eje, hacia abajo,
(Ctrl + J).Tambin podemos
para que se nos abra la ilustracin
hacerlo haciendo clic derecho >
como si fuese un abanico.
Unir o desde el Panel del control

haciendo clic en el siguiente icono:
Al soltar el ratn nos aparece la

siguiente pantalla. En ella
elegiremos un ngulo de 15
grados y haremos clic en Copiar.
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 7 de 14
Ahora slo hemos de ir a Objeto >
Dependiendo del nmero de lados
El siguiente paso ser unir los dientes de nuestro engranaje; para ello
Transformar > Volver a
deseados elegiremos el nmero
hemos utilizado la misma tcnica usada recientemente (unir trazos) y
transformar (Ctrl + D) y se irn
de grados en la rotacin; en la
adems hemos elegido un gris para el relleno del engranaje.
copiando y disponiendo las piezas
siguiente tabla hay algunos
de nuestro engranaje.
ejemplos:
Recordad que para unir los trazos usamos la herramienta de Seleccin

directa haciendo clic en el primer punto que queremos unir y
Nmero de
ngulo
repeticiones
necesario
presionando Maysculas haremos clic en el otro extremo. Nos quedarn
seleccionamos todas las piezas y
120
los dos puntos de ancla rellenos del color de la capa en lugar de huecos
las reduciremos guardando las
90
como est detallado en la siguiente ilustracin:
proporciones haciendo clic en una
72
esquina de la seleccin y
60
manteniendo pulsado Maysculas
51,4
como de costumbre.
45
40
10
36
11
32,7
12
30
13
27,7
14
25,7
15
24
20
18
30
12
36
10
Si nos ha quedado muy grande,
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 y
cajas y as sucesivamente.
diferentes tonalidades de grises

A partir de ahora va a ser cuestin de jugar con las
para los rellenos.
Esto est representado en la parte

superior de la pantalla, donde se van
combinaciones de rellenos y tamaos que nos gusten ms y

tambin organizaremos los objetos utilizando el modo
A partir de ahora va a ser cuestin
dejando las cajas abiertas como cuando
aislamiento (haciendo doble clic sobre un objeto nos asla
de jugar con las combinaciones de
entramos en una pgina web y se nos va
ste de los dems, sombreando el resto de las ilustraciones
rellenos, tamaos, tamao de los
indicando dnde estamos viendo el
para que sea ms fcil trabajar con la deseada).
trazos, etc. que nos gusten ms y
contenido en ese momento.
tambin organizaremos los

Tambin usaremos el
objetos utilizando el modo
Podremos hacer clic fuera del objeto para
panel de Capas o
aislamiento (haciendo doble clic
salir de las cajas o utilizar la flecha hacia
desde el men
sobre un objeto nos asla ste de
la izquierda como en una pgina web.
desplegable del botn
los dems, sombreando el resto de
derecho para organizar
las ilustraciones para que sea ms
los objetos. Aqu
fcil trabajar con la deseada).
tambin podemos hacer

uso del panel Alinear,
Si seguimos haciendo clic en el
seleccionando los
objeto nos va desmenuzando ms
objetos requeridos y
los trazos de la ilustracin hasta
centrndolos horizontal
llegar a la unidad ms pequea.
y verticalmente.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 engranaje
arco porque es demasiado
medio de: botn derecho del ratn >
a otro. Para esto vamos a usar la
redondeado para nuestras
Transformar > Reflejo (nos
herramienta Arco (men
necesidades.
aseguraremos de hacer clic en Copia

para que nos lo duplique a la vez).
Herramientas).
Para conseguir esto lo que
haremos es seleccionar los
Con la herramienta Arco
seleccionada, hay que pulsar
Maysculas (para mantener la
proporcin), hacer clic y arrastrar
en el lienzo hasta alcanzar la
medida deseada.
puntos de ancla con la

herramienta de Seleccin
directa. De esta manera se nos
mostrarn los manejadores.
Slo hemos de hacer clic y
arrastrar stos hacia atrs y a
la vez girar hacia arriba y abajo
Seleccionando los
(el manejador de abajo) un
segmentos resultantes los
poco hasta que obtengamos un
colocaremos sobre nuestra
segmento parecido al que
ilustracin y los situaremos
mostramos a la derecha. Si
detrs de los crculos de
pulsamos la tecla Maysculas,
las poleas (botn derecho
se restringirn los movimientos
> Organizar > Hacia
de los manejadores.
atrs).
Gua de aprendizaje
INICIO | CRDITOS

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

arrastrar la capa del ltimo
rectngulo de brillo que hicimos
encima de los engranajes para
que parezca que realmente est
dentro del botn cristalino.
Lo que seguira ahora es hacer

un reflejo del botn en el suelo
para que se vea ms real. Para
ello necesitamos hacer una
copia de todo y ponerla al
revs bajo nuestro botn.
Para lograr esto
Lo que queremos ahora es

arrastrar la capa del ltimo
rectngulo de brillo que hicimos
encima de los engranajes para
que parezca que realmente est
dentro del botn cristalino.
seleccionaremos todo,
haremos clic derecho >
Transformar > Reflejo. Nos
aparecer la siguiente pantalla
en la que utilizaremos las
especificaciones marcadas en
rojo.
El resultado obtenido lo
arrastraremos con el ratn
hacia abajo dejando una
pequea abertura (como de un
pxel) entre las dos
ilustraciones.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 11 de 14
El siguiente paso va a ser realizar una
Seleccionaremos la sombra que
Desde este modo vamos a
mscara de opacidad para crear
queremos enmascarar.
deseleccionar la opcin
transparencia sobre el reflejo.
Activaremos el panel
de Recortar y la miniatura
Una mscara de opacidad es la que
Transparencia desde: Ventana
negra se transforma en una
proporciona la forma a travs de la que
> Transparencia (Mayus. +
blanca; ahora podemos ver
se ven otros objetos.
Control + F10).
otra vez la sombra y con la

Illustrator automticamente
herramienta de
Haremos clic en la zona
nos crea una mscara
Rectngulo redondeado
la haremos transparente. Illustrator
marcada con una circunferencia
vaca. Tambin
trazaremos un rectngulo
funciona de la siguiente manera: traduce
roja en la siguiente ilustracin:
desaparece (est oculta)
que la cubra.
Primero realizaremos la mscara y luego
los tonos de una ilustracin a tonalidades
nuestra sombra y adems
grises para interpretar los grados de
ahora nos encontramos en el
Para que la opcin
transparencia, que al ser blancos dejan
modo de edicin de
Recortar mscara est
ver por completo la ilustracin y si son
mscaras (no podremos
permanentemente
negros la ocultan totalmente.
acceder a nuestras capas
deseleccionada iremos al
normales).
men desplegable de arriba

a la derecha (panel
Siguiendo esta lgica, cuando hacemos

una mscara de opacidad que lleve un
degradado habr zonas que se vean y
zonas que no tanto o que incluso
desaparezcan (segn lo drstico que sea
el degradado).
Si queremos salir de este

Al hacer esto, se crea
Transparencia) y
modo basta con hacer clic en
automticamente una mscara
deseleccionaremos la
la miniatura de la izquierda y
de opacidad marcada con una
opcin marcada en la
volveremos a tener acceso a
miniatura negra como la que
captura siguiente:
nuestras capas.
sigue:
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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.
Como tenemos una transparencia que

queremos conservar, vamos a guardar
Agruparemos el botn con la
la ilustracin como GIF porque, al
sombra y haremos una capa nueva
contrario que el formato JPEG, ste s
con relleno blanco de fondo para ver
nos conserva la transparencia.
el efecto de nuestra transparencia.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 13 de 14
Ahora vamos a ir a guardarlo desde Archivo >
Antes de hacer clic en Guardar vamos a
Desde aqu se nos permite hacer
Guardar para web y dispositivos (desde
ver cmo se visualizar nuestro botn en
varias cosas, primero elegir el
aqu podemos ver la ilustracin optimizada y
un mvil, desde Device Central (botn de
tipo de mvil que queremos,
con hasta cuatro formatos distintos a la vez).
abajo a la derecha).
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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.
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
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
fondo imitando los rayos del sol.
Para ello comenzaremos utilizando
la herramienta de Rectngulo.
Trazaremos un rectngulo que
coja todo el fondo de nuestro
documento (pinchar y arrastrar el
ratn).
Tomaremos tres tonalidades de naranja distintas para
Es importante saber que aparte de
nuestro degradado y para ello necesitamos crear ms
los dos degradados ms comunes
muestras en la barra de degradado. Para ello basta
(lineal y radial) tambin hay otras
con pulsar con el ratn cerca de sta y elegir el color
opciones bajo el men desplegable
deseado. Para eliminar uno, haremos clic y
marcado en rojo en la siguiente
arrastraremos fuera de la barra de degradado.
ilustracin:
En un degradado
radial, la muestra de la
Ahora, aplicaremos un degradado
izquierda representa el
radial en ste (si no est activo el
color en el centro y la
panel de Degradado accederemos
derecha el color del
a l desde el men Ventana).
exterior del
degradado.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
Paso 4 de 15
Vamos a crear un rectngulo de
100 x 2000 px. Si no vemos las
medidas, podremos acceder a
ellas y cambiarlas desde el panel
Transformar (Ventana >
Transformar) o desde el Panel de
control cuando tenemos el objeto
seleccionado.
Desde el panel Alinear centraremos el

rectngulo blanco.
El siguiente paso es ir a Efecto >
Distorsionar y Transformar >
Transformacin libre. Aqu se mostrar
nuestro rectngulo con puntos de ancla.
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
Lo siguiente que haremos ser expandir la
seleccionar los puntos de abajo).
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).
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
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 los
engordar. Y le daremos un valor de
elementos que lo componen.
90.
Ahora vamos a expandir la apariencia y
cambiaremos la opacidad al 50%,
despus la colocaremos donde
queramos, la copiaremos y
transformaremos su tamao para
situarlas en diferentes sitios.
Agruparemos los destellos y

nombraremos las capas como Rayos y
Destellos para tenerlas bien organizadas.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
Paso 7 de 15
Ahora vamos a crear una capa nueva que
contendr nuestro texto: Helados, ste seguir
un trazado elptico. Para hacerlo trazaremos
primero una elipse sin relleno ni trazo (barra de
herramientas > herramienta Elipse).
Lo seleccionaremos y le
Seleccionando el texto y cambiando con
daremos un color rosa de
las flechas del teclado el tipo de fuente
relleno y podemos eliminar el
desde el panel Carcter o desde el
trazo. Tamao fuente: 300
Panel de control, vamos a cambiar de
puntos.
fuente a Pristina, con 300 puntos de
Cuando seleccionamos el
tamao y sin trazo. Desde el men Texto
texto en el Panel de control
> Fuente podemos ver ejemplos de las
nos aparecen opciones que
fuentes que podemos aplicar.
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
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 Opciones
del texto se nos
la elipse para centrar o tambin
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 del
cuadros pequeos, significa que an
centro aparecer un
hay ms texto pero no est visible
pequeo icono junto
ahora mismo. Haremos doble clic para
al puntero como se
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.
muestra en la
siguiente ilustracin:
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
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 seleccionaremos
helado que va a formar parte del
Galera de efectos y se nos abrir una ventana en la que
nuestro texto, y pulsando Alt lo
nombre de la heladera (Lola),
podremos distinguir dos partes:
arrastraremos hacia arriba y un
ms concretamente de la letra O.
- la mitad de la izquierda nos ofrece una previsualizacin
poco a la derecha. Le damos
Para ello realizaremos una bola de
de nuestro elemento y de cmo los distintos efectos le
relleno blanco para aparentar un
helado de chocolate con chocolate
afectan,
poco de volumen.
negro derretido que caer por
- a la derecha se muestran varias categoras de efectos
encima.
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
copia y dndole un color ms
claro al original o jugando con la
opacidad.
Como vemos en la captura de pantalla anterior, en nuestro

men de efectos hemos elegido el efecto de Esponja
para dar un poco de textura a la bola y con valores de 10,
5 y 15 para las opciones de editado del mismo efecto.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
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
Deformar (barra de herramientas),
que nos va a ayudar a dar una
apariencia ms suave a las gotas
de chocolate que van cayendo.
Ahora vamos a hacer
el chocolate derretido
de encima, para lo
que usaremos un
color ms oscuro.
Una vez seleccionada la

herramienta, haremos clic
y arrastraremos sobre las zonas
que queramos suavizar.
Para dar una sensacin
de volumen ms realista
le daremos un degradado lineal
como los que ya hemos realizado
antes.
Resplandor interior o bien >

Resplandor exterior (bajo el
mismo men).
Este efecto, como su nombre
indica, proporciona un efecto de
brillo interior que podremos
regular a nuestro gusto.
Por ejemplo podremos editar el
modo de fusin de este brillo
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
Paso 11 de 15
Ahora vamos a aplicar el mismo efecto
Nuestro chocolate cuando va cayendo podra
pero en la bola de helado. Para ste
parecerse a la cera de una vela
elegiremos Modo: Normal, Opacidad
consumindose, y sta podra parecer como si
de 63%, Desenfocar 6,7 mm y
fuera de plstico.
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:
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
Paso 12 de 15
El siguiente efecto que vamos a
Al pinchar en el cubo de 3D se puede controlar la
Cuando estemos contentos
aplicar no est en la galera de
perspectiva muy fcil y rpidamente y mientras
con la forma obtenida para
efectos, sino que est en la barra
hacemos esto, nuestro triangulo tomar un aspecto
nuestro cono, haremos clic
de mens, dentro del men
parecido al siguiente en modo de previsualizacin.
en OK.
Efecto > 3D > Extrusin y

biselado.
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 3D
nuestro tringulo y pinchando
> Extrusin y biselado y le
y arrastrando en las esquinas
pondremos los siguientes datos
o lados de nuestro cono.
marcados en la ilustracin:
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
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:
atencin a las
guas inteligentes.
Por ltimo, daremos un efecto

plastificado a nuestra cucharilla.
Para la L de Lola vamos a crear
Usando otra vez la herramienta
Como antes, desde la galera de
unas cucharillas de plstico con la
de Rectngulo redondeado
efectos elegiremos el siguiente
herramienta Rectngulo
trazaremos uno en el interior
icono con las siguientes
redondeado de la barra de
del primero.
caractersticas: Intensidad: 6,
herramientas.
Para crear un poco de
Detalle: 1, Suavizado: 6.
profundidad le aplicaremos un
Vamos a utilizar la herramienta

Pincel para la segunda l de
Lola. Para esto simplemente
haremos clic en la herramienta
Pincel desde la barra de
herramientas y con un trazo
verde y de 9 pt de grosor la
trazaremos.
Una vez trazada la lnea
degradado que vaya de un azul
podremos transformar sus
oscuro a transparente.
Trazaremos un rectngulo
Agruparemos los elementos de la
redondeado pulsando la tecla
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 cucharilla,
para rotarla y cambiar el color.
pero esta vez lo alargaremos
As ya tendremos formada
hacia abajo.
nuestra L de cucharillas.
puntos de ancla.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
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 de
letra a. Para sta vamos a elegir un tipo de
aplicar perspectiva a esta letra a. Para ello
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 es
Una vez hecho esto el resultado de la
muy normal puede ocurrir con algunos tipos de
letra es el de la siguiente ilustracin.
letra.
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

Paso 2 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 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:
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 el
ilustracin anterior (gatos y gallinas).
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.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 el
podemos suprimir la grfica de una de
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 darle
ellos y pulsando Suprimir desde el
perspectiva y profundidad.
teclado). El resultado ser el siguiente:
Una vez realizada la grfica, si nos

hubisemos olvidado de insertar algn
Vamos pues a desagrupar los dos elementos
dato o quisiramos introducir algn
desde Objeto > Desagrupar y nos aparecer la
otro cambio, lo haramos desde el
siguiente ventana de advertencia:
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.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Tutorial 6. Creacin de una grafica vectorial
Paso 5 de 12
Para el texto del eje Y, vamos a ver cmo alinearlo con el eje
y cambiaremos la fuente como indicamos en la anterior
captura de pantalla (del Panel de control).
El resultado es el que se muestra a la derecha.
Para el texto del eje X utilizaremos las mismas
caractersticas, pero en lugar de alinear los nmeros a la
derecha, los centraremos y, despus, desde el men
Carcter, los alinearemos en la vertical como se indica en
la siguiente ilustracin (con un valor de -10).
Vamos a dejar aqu de

momento los datos de la
grfica y vamos a editarla.
Ahora desde el men
Efecto > 3D > Extrusin
y biselado daremos a
nuestra grfica la
perspectiva y profundidad
deseadas.
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:
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 6 de 12
Una vez hecho esto, queremos
eliminar esos pequeos puntos
que ayudan a visualizar los puntos
que insertamos en nuestra tabla
porque no quedan muy bien con 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:
Haciendo clic derecho vamos a elegir Seleccionar >

Primer objeto encima (se nos seleccionarn dichos
puntos) y haremos clic en Suprimir desde el teclado.
Vamos a dar color a la grfica. Para ello queremos
desagruparla como anteriormente.
Aplicaremos color desde el Panel de control; hemos
elegido un rosa para los datos de gato y hemos dejado
Para dar un poco ms de iluminacin al
el gris un poco ms claro para las gallinas.
grfico vamos a utilizar un efecto que ya

usamos en la bola de chocolate del
tutorial anterior (Helados Lola). Efecto >
Resplandor interior y elegiremos
centrar con una opacidad de 61% y
Tambin vamos a cambiar el grosor de nuestro

trazo de las lneas (desde el Panel de control) a
un valor de 10 puntos y dejamos el estilo en
Como ya dijimos, no podemos
volver al men de diseo, as que
vamos a hacer una pequea
trampa para eliminarlos.
Bsico (como estaba).
desenfoque de 5 px.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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
Con la herramienta Pluma (de la barra de
herramientas) seleccionada y a la altura de
las medidas de nuestro eje vamos a trazar
lneas.
Ahora vamos a juntar las dos partes
Haremos clic en el punto donde queramos
de nuestra grfica intentando alinear
que empiece la lnea y luego a la vez que
los trazos con las medidas de los ejes
pulsamos la tecla Maysculas (para que las
y las vamos a agrupar de nuevo.
lneas sean rectas) pulsaremos donde

queramos que acabe.
El ltimo paso que vamos a dar con

esta grfica va a ser dibujar unos
Repetiremos este paso o copiaremos y
trazados discontinuos que vayan por
pegaremos las lneas tantas veces como
encima de nuestros trazados a la
puntos hay en el eje Y.
altura de las medidas del eje Y.
dems hasta tenerlas todas

seleccionadas) e iremos al men
Trazo (desde el panel Apariencia).
Una vez aqu seleccionaremos el
grosor deseado (1pt) y
seleccionaremos Lnea discontinua.
Luego introduciremos valores de 5 pt
de guin y 5 pt de hueco
sucesivamente.
Gua de aprendizaje
Illustrator CS4
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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Tutorial 6. Creacin de una grafica vectorial
Paso 9 de 12
Ahora pues vamos a comenzar nuestra
Con la herramienta Lpiz
Despus de dibujar el
segunda grfica.
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 de este
reduciremos el tamao
tutorial, sino que nos vamos a centrar en cmo
de ste hasta
incluir diseos predefinidos o cmo
acercarnos al tamao
podemos crear nuevos diseos para incluir en
Ahora vamos a dejar la grfica
nuestra grfica.
un poco aparte para crear
Para dibujar con la herramienta
delimitador. Ahora
nuestro diseo de columna.
Lpiz slo hay que
quitaremos el trazo y
seleccionarla, hacer clic y
relleno del rectngulo y
Vamos a comenzar realizando una grfica
del rectngulo
simple como la que hemos realizado al
El primer paso va a ser
arrastrar en la mesa de trabajo.
lo agruparemos con el
comienzo de este tutorial, pero esta vez
seleccionar (con la herramienta
No hay que olvidar cambiar el
nio.
utilizando la herramienta Grfica de barras.
de Seleccin directa: flecha
trazado al color que queramos.
(Como antes, rellenaremos los datos
blanca) y copiar la columna
Podemos utilizar la herramienta
necesarios en la tabla de datos).
ms pequea de nuestra
Suavizar para suavizar trazos o
grfica. (La pegaremos en
la de Borrados de trazados
nuestra mesa de trabajo).
(todas bajo la herramienta Lpiz)

para borrar trazos, como su
Este rectngulo va a
representar el lmite de nuestro
diseo.
nombre indica.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 10 de 12
Ahora vamos a grabar este

diseo en Illustrator para que lo
podamos incluir en la grfica.
Por ltimo vamos a cambiar el nombre

a nuestro diseo.
Despus de hacer esto, iremos al men Objeto > Grfica >
Para hacer esto vamos a
Columna. Y seleccionaremos un tipo de diseo (el nuestro),
Seleccionar el diseo y
luego haremos clic en Escala mvil y deseleccionaremos la
elegimos Objeto > Grfica >

Diseo.
Haciendo clic en Diseo nuevo
aparecer una miniatura del
diseo seleccionado, slo la parte
que entra en el rectngulo pero
finalmente se incluir tambin lo
que est fuera.
opcin Rotar leyenda.

Con la herramienta de Seleccin de grupos
(mostrada en la siguiente captura de pantalla)
vamos a seleccionar las barras y la parte de la
leyenda que queremos que tenga un diseo
distinto.
Para ello haremos clic dos veces en la
leyenda y se seleccionarn todas las columnas
agrupadas o asociadas con sta.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 11 de 12
Importante: aunque en las

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

Seleccin directa
Gua de aprendizaje
Illustrator CS4
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
desde el men desplegable de
abajo elegiremos JPG.
Finalmente, haremos clic en
OK.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 3 de 18
Tambin podremos
cambiar los
contornos
moviendo los
Con la herramienta
manejadores otra
Una vez creemos el
Pluma pincharemos
vez hasta que
documento, haremos
en un punto, soltamos
estemos contentos
zoom en la primera mesa
el ratn y pinchamos
con nuestra mitad
de trabajo. Cuando
en el segundo punto,
de matruska.
estemos en ella vamos a
esta vez sin soltar el
empezar a trazar nuestra
ratn y arrastrando los
primera mueca rusa.
manejadores hasta
Realizaremos esta misma accin dos o
Llegados a este punto, utilizaremos la
Queremos dibujar media
que nos parezca bien
tres veces hasta que tengamos la mitad
herramienta Seleccin directa para mover
mueca para acabarla
la curva.
de la matruska ms o menos lista.
los puntos de ancla donde los queramos.
con el efecto 3D.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 queremos
Illustrator girar un trazo que un relleno (se podra
hacerlo con Photoshop, podemos ir
cambiar fcilmente desde el Panel de control).
directamente desde el botn del
Vamos a cambiar el color negro por un rojo-
Panel de control: Editar original.
granate cambiando el color del trazo (o el 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.
Lista nuestra mitad vamos

a aplicar nuestro efecto 3D.
Seleccionamos la mitad y
despus haremos clic en
Efecto > 3D > Girar, como
se muestra en la anterior
captura de pantalla. El
resultado es el siguiente:
En este caso nuestro smbolo va a ser una foto de

una matruska que vamos a importar desde el
Despus de hacer los cambios
men Archivo > Colocar e iremos a buscar una
requeridos (a nuestra foto le hemos
imagen desde nuestro ordenador.
quitado el fondo), ahora vamos a

usar el botn de Calco interactivo
(a la derecha de Editar original) en
nuestro documento. En las opciones
de calco interactivo vamos a elegir:
Calco simple.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 5 de 18
ste es el resultado:
Al hacer esto, Illustrator abre una pequea
Vamos a seleccionar el objeto 3D, y desde el
ventana como la que sigue para que
panel Apariencia haremos doble clic en Giro
nombremos (Matruska) y determinemos qu
3D. Se nos abrir la ventana del efecto 3D y a
tipo de smbolo va a ser ste.
continuacin haremos clic en mapear
El nuestro va a ser de tipo grfico (si nuestra
ilustracin (entonces se abrir una ventana
intencin fuera la de utilizar este smbolo en
nueva).
Flash ms tarde, elegiramos la otra opcin: Clip

de pelcula).
Ahora convertiremos la
imagen 2D a smbolo
simplemente haciendo clic
sobre ella y arrastrndola
hasta el panel de
Al hacer esto en nuestro panel de Smbolos se
Smbolos (Ventana >
ver una pequea matruska.
Smbolos o desde el
teclado: Mayus. + Ctrl +
F11).
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 6 de 18
Ahora vamos a deformar esta
Haremos clic en Difuminar
imagen para que cubra la mayor
ilustracin para que nos incluya el
parte de nuestro objeto 3D.
mismo difuminado en la ilustracin que

en el objeto 3D y haremos clic en OK.
Para ello jugaremos con la
Esto resultar en la siguiente imagen
imagen movindola alrededor del
vectorial:
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
Con esta imagen damos por terminada la
las partes ocultas donde la imagen no se ver por la posicin del
primera matruska.
objeto.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 7 de 18
Vamos pues a la segunda
Ahora con la herramienta Pincel
Realizaremos dos elipses de
mesa de trabajo (podemos
(desde la barra de herramientas)
color rosa sin trazo para los
movernos fcilmente entre
vamos a dibujar la cara de la
coloretes. Y agruparemos los
ellas con el men situado
matruska, el pauelo de la cabeza
trazos.
en la parte de debajo de
y un delantal con una flor
nuestra pantalla):
(conviene tener al lado la matruska
As obtenemos el resultado de la
rosa para hacernos una idea de las
segunda matruska:
dimensiones).
Vamos a realizar los
mismos pasos para
construir la base de la
segunda matruska, slo que
Usaremos un color negro para
esta vez vamos a darle un
el trazo y el pincel llamado
color rosa y vamos a reducir
ahusado de la lista desplegable
el tamao de sta un poco
de pinceles.
(para que quepa dentro de

la otra).
Colocaremos la ilustracin en el
panel de Smbolos para despus
aadirlo a nuestra matruska 3D.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 8 de 18
Vamos a hacer una copia
Desde este panel elegiremos el
Vamos a crear un pincel nuevo.
Vamos a trazar un tringulo
de la ltima matruska, y a la
siguiente pincel (llamado: imperial) y
Para ver las bibliotecas de
alargado. Se puede elegir la
copia le vamos a quitar el
con las siguientes caractersticas de
pinceles desplegaremos el men
forma de estrella y mientras la
dibujo (desde panel
trazo y relleno:
bajo el crculo rojo en la siguiente
trazamos pulsaremos la flecha del
captura de pantalla:
teclado que seala hacia abajo
Apariencia > Efecto 3D).

Ahora la vamos a reducir de
para quitarle lados hasta llegar a
tamao y le vamos a
tres lados. Soltaremos el ratn y
cambiar el color a azul.
Trazamos un cuadrado con los
estrecharemos el tringulo
bordes redondeados (que va a
obtenido desde un lado para
representar el delantal de la matruska)
obtener la siguiente ilustracin:
y con ste seleccionado vamos a 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:
Ahora, activaremos el panel

Pinceles (Ventana >
Bibliotecas de pinceles >
Decorativo > conjunto de
pinceles florales y de espiral
elegante).
Despus, con ste seleccionado,

desde el men desplegable de
arriba del panel Pinceles
seleccionaremos: Nuevo > Nuevo
pincel de motivo. Haremos clic en
OK.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 9 de 18
La siguiente captura de pantalla
muestra la apariencia que tendr
nuestro pincel, aplicado a una
circunferencia. Segn el tamao de
sta puede tener distintas apariencias.
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.
Si encontramos una que nos gusta y la

queremos utilizar otra vez, ser mejor
arrastrarla al panel de Smbolos para
que no importe si cambiamos el
tamao de sta.
Ahora vamos a poner la
El siguiente paso ser,
ltima en el centro de
como antes, aadir
nuestro delantal usando el
esta imagen 2D a
panel Alinear (objetos
nuestra matruska
seleccionados) o
numero 3, agrupando
siguiendo las indicaciones
estas dos imgenes
de centro de las guas
(Objeto > Agrupar) y
inteligentes.
convirtindolas en
smbolo (arrastrando
al panel de
Smbolos).
Despus, desde el
panel de Apariencia
elegiremos giro 3D >
mapear ilustracin y
Para obtener
con la opcin
esta ltima
previsualizar iremos a
hemos aplastado
la Superficie 5 de 5 y
la circunferencia.
elegiremos nuestro
nuevo smbolo del
men desplegable.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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
cejas; para stas vamos a
Eje vertical y haremos

clic en copiar.
utilizar un smbolo
Para ello, trazamos primero
predeterminado que
la boca y luego
obtenemos desde la
seleccionando la
biblioteca: Pelo y pelaje >
Esta vez vamos a dejar la cara encima de la
herramienta de Pintura
Pelo negro 1.
ilustracin de la matruska sin aadir el efecto 3D
interactiva elegiremos el
y slo la agruparemos.
color deseado con las
Para realizar la cara hemos usado la
flechas del teclado.
Despus lo colocaremos
herramienta Pincel de manchas (barra de
(Elegimos un color rojo).
sobre el otro ojo (hacer
herramientas bajo el pincel normal;
clic y arrastrar con el
Maysculas + B). Normalmente se utiliza para
puntero del ratn).
aadir trazos (slo de relleno) a ilustraciones

existentes, simplemente seleccionando sta y
arrastrando el ratn para dibujar los ojos,
La arrastramos hasta nuestra
pestaas nariz y boca.
ilustracin y la colocamos
sobre el ojo de la derecha.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 11 de 18
Colocaremos la cara que
Vamos a aadir algn elemento
Despus hemos mandado los tres
El hecho de haber creado nuestras
acabamos de dibujar encima
ms desde la biblioteca de
smbolos detrs o adelante segn
matruskas en mesas de trabajo
de nuestra ltima matruska y
smbolos: Paquete de vectores
convenga (botn derecho del
diferentes nos permite imprimirlas
la agruparemos con los
majestuoso. De este paquete
ratn > Organizar > Hacia atrs o
individual o conjuntamente (cuando
dems elementos de sta
hemos elegido los siguientes
Hacia adelante) para que queden
vayamos a imprimir
(Objeto > Agrupar).
smbolos marcados bajo un
detrs de nuestras matruskas.
seleccionaremos: ignorar mesas de
circulo rojo en la siguiente
Finalmente, hay que agrupar las
trabajo para que imprima todo a la
captura de pantalla:
matruskas con estos smbolos
vez o deseleccionaremos la misma
nuevos.
opcin para que imprima en mesas

de trabajo individualmente).
Los hemos cambiado de tamao

para que queden a proporcin de
nuestras matruskas, y las alas de la
primera matruska las hemos girado.
Gua de aprendizaje
INICIO | CRDITOS

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 otra
- Haciendo clic en el icono
herramienta o haremos clic fuera
siguiente (dentro de la barra
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.
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS

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 y
Ahora s, las vamos a incorporar a
lo estiraremos desde una de las
nuestra camiseta y les vamos a
esquinas manteniendo la tecla
cambiar el tamao y la posicin a
Alt presionada (para que se
nuestro gusto.
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 color
Ver > Encajar mesa de trabajo en
del relleno a blanco y el trazo a
ventana.
un gris claro.
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 una
La siguiente pantalla nos
pantalla y cada pantalla significa repetir un
ofrece tres zonas:
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. Nuestro
existentes.
documento en este momento tiene 10

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

tener control sobre los
Seleccionaremos la ilustracin (sin el
cambios que los nuevos
smbolo de la camiseta) e iremos al men:
grupos de colores ejercern
Edicin > Editar colores > Volver a
sobre los ya existentes (si
colorear la ilustracin. O con el siguiente
no hemos seleccionado la
icono (junto al men desplegable de los
ilustracin no tendremos
espacios de trabajo).
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).
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 15 de 18
Para reducir los colores de
Tambin podemos
nuestra ilustracin la
cambiar estas
seleccionaremos e iremos al
sugerencias
panel Editar. Desde el panel
arrastrando nuevos
Editar observaremos la columna
colores, asignndolos
de nuevos. Bajo un rectngulo
desde el panel
rojo en la ilustracin siguiente se
Asignar o eligiendo o
muestran los colores utilizados en
creando nuevos
la ilustracin seleccionada.
grupos de colores.
Sobre la columna de Nuevos hay
En nuestro caso
una lista desplegable en la que
vamos a cambiar el
podemos elegir el nmero de
color rojo que
colores. Haremos clic en 4 e
Illustrator sugiere que
Illustrator realizar una
guardemos por el rosa
sugerencia de los colores que
que tenamos
podramos dejar. A la izquierda
arrastrando el rosa
(columna de colores actuales) nos
desde la columna de
ensea los colores que ha
la izquierda y sobre el
agrupado y a la derecha por qu
rojo soltaremos (en la
color ha cambiado cada uno de
columna de Nuevos).
ellos.
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 16 de 18
El ltimo paso ser imprimir
nuestro documento TIFF.
Para la impresin en
serigrafa hay que separar los
colores, pues como ya
hemos comentado antes,
cada uno va en una pantalla
diferente y luego se acoplan.
Por lo tanto, debemos
Ahora vamos a guardar nuestro documento en
formato TIFF (tambin se recomienda PNG),
por ejemplo. Como en anteriores ocasiones
haremos esto desde el men Archivo >
Exportar y de las opciones que se nos
muestran en la pantalla siguiente elegiremos
CMYK y 300 dpi.
separar los colores de

nuestra ilustracin.
Para hacer esto hay varios
mtodos. El que vamos a
utilizar nosotros aqu es
utilizando el men de
impresin Archivo >
Imprimir (Control + P) y
elegiremos las siguientes
caractersticas:
De momento slo vamos a preparar la impresin y guardar

las separaciones en un PDF para poderlas imprimir en color
negro en una impresora lser (es recomendable).
La ventana de imprimir tiene varias pestaas, en las que
haremos las siguientes elecciones:
- General: elegir PDF y nmero de copias 1. Haremos clic
en la opcin: No cambiar escala.
- Marcas: puede ser til imprimir las marcas de impresora
para ms tarde, por ello vamos a hacer clic en todas.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 17 de 18
- Salida: separaciones en RIP (la
La primera tinta que nos aparece es cian
La segunda tinta que nos aparece es
resolucin depender de nuestra
(la seleccionaremos y mandaremos a
magenta (la seleccionaremos y
impresora).
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:
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 18 de 18
La tercera tinta que seleccionaremos es
Por ltimo tenemos el negro (repetimos el
amarillo (seleccionar y mandar a
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.
Gua de aprendizaje
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Tutorial 8. Creacin de una animacin en Illustrator
Paso 1 de 11
En este tutorial vamos a
aprender a realizar dos
tipos de animaciones
dentro de Illustrator (la
primera abarca los pasos
1 a 5 y la segunda
Insertar documento llamado:
Insertar documento
animacin va del paso
Animacion1.swf
llamado: Animacion2.swf
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).
Gua de aprendizaje

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.
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 3 de 11
Vamos a crear un cartel que diga
El siguiente paso ser alinear el trazo hacia la parte de
OPEN y ste ser animado de
afuera; para ello, desde el panel de Apariencia otra vez
manera que parezca ser de nen y
haremos clic en la palabra Trazo. Ahora nos aparece otro
que se encienda y apague
nuevo mini men en el que haremos clic como tenemos
intermitentemente.
sealado en la siguiente ilustracin: Alinear trazo al exterior.

Con nuestra forma (open)
Vamos a empezar realizando el
seleccionada, haremos clic en el
texto. Para ello vamos a seleccionar
panel Apariencia (para activar el
el Pincel de manchas y vamos a
panel iremos a Ventana >
escribir la palabra OPEN a mano
Apariencia o desde el teclado:
alzada, intentando que todas las
Maysculas + F6) y desde el
letras se toquen.
men desplegable de arriba a la

derecha elegiremos Aadir trazo
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.
nuevo y lo vamos a hacer de
Vamos a realizar otro trazo nuevo, esta vez de 2 pt, repitiendo
grosor: 1pt.
la operacin de Aadir trazo nuevo.
Aplicaremos color verde al trazo y

al relleno de la forma.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 4 de 11
Vamos a repetir este mismo paso
Para hacer este paso ms fcilmente (el de
Pincharemos en los trazos para
sucesivamente con mayores grosores.
elegir color) vamos a abrir el panel Color
ordenarlos como se ordenan en el
Tambin podemos utilizar la opcin panel
(Ventana > Gua de Color o desde el
panel de Capas (haciendo clic y
Apariencia > Men desplegable > Duplicar
teclado pulsando Maysculas + F3).
arrastrando) para que queden como
elemento (bajo la opcin de Aadir trazo

nuevo).
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.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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
Desagruparemos estos
trazos haciendo clic derecho
> Desagrupar (o desde men
Objeto > Desagrupar).
La siguiente ilustracin muestra
la vista de nuestro panel de
Capas despus de hacer esto.
(sealado bajo un crculo rojo en el panel
Vamos a guardar nuestro archivo como tipo
de Capas) y seleccionaremos Soltar a
Flash (swf) desde el men Archivo >
capas (secuencia). Una vez hecho esto,
Exportar y elegiremos Guardar como
veremos cmo se separan nuestros
Flash |(swf) > Guardar.
trazos en capas diferentes (cada una de

ellas marcadas con colores diferentes
tanto en la ilustracin seleccionada como
en el panel de Capas a mano izquierda):
Gua de aprendizaje
Illustrator CS4
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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).
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 la
posicin. Y la rotaremos.
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
Y por ltimo un cuadrado
unas ilustraciones y usaremos la
Despus de hacer la primera
Fusin de stas para crear nuestra
rotacin con copia iremos al men
animacin.
Objeto > Transformar >
Primero vamos a crear nuestras
Transformar otra vez o
ilustraciones.
presionaremos Control + D desde

el teclado.
Seleccionando la herramienta
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:
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 8 de 11
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
Despus de esto iremos al men Objeto > Fusin
pantalla.
> Crear para crear la fusin.

La imagen que vemos en nuestra mesa de trabajo
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
OK.
ahora es la siguiente:
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Paso 9 de 11
Con nuestra ilustracin an
El siguiente paso que hay
Ahora nuestro panel de capas
seleccionada lo que queremos es,
que dar es desagrupar las
contiene una capa que est
como en la primera parte de este
formas: men Objeto >
dividida en otras 28 capas como
tutorial, conseguir que estas formas
Desagrupar.
vemos en la captura de pantalla
estn cada una en una capa.
siguiente:
Desde el men de Capas
Entonces, como anteriormente,
(Ventana > Capas)
iremos al men Objeto > Expandir,
observamos que todas
que nos dejar con la siguiente
estas formas estn
visualizacin de nuestra ilustracin:
separadas en grupos pero

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).
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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 ver
algo as:
De la misma manera que hicimos

en nuestro primer tutorial, vamos
ahora a Exportar nuestro
documento.
En la ventana que aparece nuevamente haremos clic en Exportar: Capas Ai a

fotogramas SWF. Desde la pestaa de Avanzado haremos clic en Formato de
imagen: Sin prdida y en Frecuencia de imagen (12 fps) con repeticin.
Gua de aprendizaje
INICIO | CRDITOS
Illustrator CS4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
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
Insertar documento
ventana del explorador.
llamado: Animacion2.swf
A la derecha podemos ver el

resultado final de nuestra
animacin.
Actividad: realizad una animacin
partiendo de tres dibujos creados
con la tcnica de transformacin y
rotacin variando las formas.
Gua de aprendizaje
Illustrator CS4
INICIO | CRDITOS
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Crditos
Coordinacin
Roser Beneito Montagut
Autora
Ana Azparren Arteaga
Fecha de publicacin
2 de Febrero de 2010
PID_00149180
Estudios de Informtica,
Multimedia y Telecomunicacin

Tutorial Illustrator CS4

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial Illustrator CS4

Enviado por

Direitos autorais:

Formatos disponíveis

Gua de aprendizaje

Illustrator CS4: gua de maquetacin

Illustrator CS4: gua de maquetacin

Illustrator CS4: gua de maquetacin

Illustrator CS4: gua de maquetacin

Illustrator CS4: gua de maquetacin

Tutorial 1. Creacin de un fondo de pantalla

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

Si queremos cambiar el nmero de puntas de

Estrella) y si soltamos el ratn, podemos

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 cambiarlas

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 estrella

panel) desde el men Ventana > Color

herramientas, y para seleccionar una parte

no es preciso elegir un trazo. Para

especfica de los objetos, pulsaremos en la

ello haremos clic en Trazo y

fecha blanca, llamada herramienta de

elegiremos la opcin de Ninguno.

Podemos acceder y cambiar los

Vamos a hacer clic en el relleno de nuestro

objeto y seleccionaremos un color, por ejemplo

- Desde el Panel de control:

Tutorial 1. Creacin de un fondo de pantalla

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