descargar primer capitulo trucos con flash cs3
TRANSCRIPT
Estilos de diseñoEstilos de diseño
3
Estilos de diseño
ATAJOSMAC WIN AMBOS
Estilos de diseño Trucos con Flash CS3
1Estilos de diseñolas técnicas descritas en este libro asumen que usted
tiene un conocimiento considerable sobre cómo trabajar
con Flash. En capítulos posteriores, discutiremos
maneras de trabajar que incluyen símbolos, líneas
temporales y varias técnicas de animación. Este primer
capítulo servirá como cursillo de perfeccionamiento
de los fundamentos del diseño de animación e irá
introduciendo algunas interesantes técnicas de dibujo.
Después, entraremos con más detalle en cómo trabajar
con los símbolos, interpolación de trazo y forma, y
líneas de tiempo.
Trucos con Flash CS3
3
01.indd 3 10/08/2007 17:15:29
4
Estilos de diseño1IM
AGE
CRED
IT H
ERE
Dibujar con formas básicasEstilos de diseños
S
I USTED JUGÓ CON los bloques de construcción de Lego de niño, encon-
trará familiar este estilo de dibujo (o por lo menos intuitivo).
Se utilizarán varias formas básicas y después las conectará una con otra. Esta técnica requiere la subdivisión de cada parte del cuerpo del personaje en bloques de construcción básicos usando las her-ramientas de Rectángulo y de Óvalo. Es un modo rápido y eficaz de simplificar el per-sonaje en secciones manejables mientras que se alcanza un estilo muy profesional en el dibujo animado.
Aquí, utilizaremos formas para recortar dentro de otras formas. Esta es una técnica muy útil para recortar los agujeros en objetos así como para corregir los bordes de formas. Por supuesto estas técnicas también se pueden aplicar a los elementos del fondo.
La clave aquí está en usar formas simples para construir imágenes más complejas adecuadas para la animación en el estilo de Flash, que veremos en capítulos posteriores.
1Aquí está mi bosquejo original
a lápiz que he escaneado
y guardado como archivo JPG.
Prefiero comenzar a lápiz sobre
papel porque tengo preferencia
simplemente por la sensación que
ofrece este medio y los resultados
son siempre un poco más, digamos,
artísticos.
2 Después de importar la
imagen escaneada, inserte
un fotograma clave en blanco
en el fotograma 2 y active la
herramienta Papel de Cebolla. Esto
permite calcar la imagen en un
nuevo fotograma usando la imagen
original como referencia.
6 Para crear el contorno negro,
seleccione la forma, cópiela
Cc Lc y péguela en su lugar
usando CSv LSv.
Mientras está seleccionado, elija
otro color del panel del mezclador y
redúzcalo cerca del 80%
7 La forma original está todavía
presente por debajo de la
nueva forma. El truco es colocar
la nueva forma excéntrica de la
original para conseguir un perfil
con un peso diferente.
01.indd 4 10/08/2007 17:15:30
5
ATAJOSMAC WIN AMBOS
Trucos con Flash CS3Estilos de diseño
Dibujar con formas básicas
TRUCOAl terminar cada sección individual de su persona-je, córtela y péguela en nuevas capas y bloquéelas. Esto evita-rá que sean modificadas inadvertida-mente. Mejor todavía, con-viértalas en símbolos mien-tras lo hace.
5 Después, haga clic y arrastre
los lados de sus formas para
curvarlas. Es un proceso divertido
pues su personaje comienza
realmente a tomar forma.
8 El paracaídas utiliza una
técnica levemente diferente a
la que llamo “recorte”. Comencemos
con la herramienta Oval para la
forma básica del paracaídas.
9 Se puede recortar sobre esta
forma usando diversas formas
coloreadas como este óvalo azul,
colocándolo sobre el área que se
quiere eliminar, deseleccionándolo,
después seleccionándolo y
pulsando la tecla Borrar D.
10 Una vez que su dibujo
tiene la forma deseada,
se puede utilizar la herramienta de
Bote de tinta s para agregarle
rápidamente un contorno.
3 Usar las herramientas Óvalo
o y Rectángulo r permite
crear rápidamente las formas
básicas de nuestro personaje. La
herramienta de selección es genial
para empujar y tirar de estas
formas básicas hasta las formas de
referencia en nuestro bosquejo.
4 Active la opción Imán (icono
del imán), y arrastre las
esquinas hasta que coincidan las
unas con las otras. Este proceso es
parecido al de los bloques de Lego
con los que usted jugó cuando era
pequeño.
Trucos con Flash CS3
01.indd 5 10/08/2007 17:15:31
6
Estilos de diseño1 La herramienta PincelEstilos de diseño
1Lo primero que deberá hacer cuando use la herramienta de Pincel
b será ajustar el nivel de precisión. Esta opción aparece en un
menú desplegable en el panel de propiedades cuando se selecciona la
herramienta de Pincel. La cantidad correcta de smoothing a utilizar
depende de la preferencia personal. Cuanto más alto es el porcentaje,
más pulida será la línea (y viceversa). Para este personaje, elegiremos una
cantidad baja de alisamiento para mantener una calidad orgánica de la
línea de trabajo.
3 Para mantener el estilo informal del dibujo, usted puede agregar
un color que salga un poco de los márgenes. Hay varias maneras
de conseguirlo, como pintando en una nueva capa debajo de la línea de
contorno o seleccionando la opción “Pintar detrás” y pintándolo en la
misma capa.
L
A HERRAMIENTA de PINCEL es probablemente la más versátil
de todas las herramientas de dibujo, especialmente cuando está combinada
con una tableta sensible a la presión. El dibujo con la he-rramienta de Pincel consiste
esencialmente en dibujar con formas. Es la herramienta que resulta más natural debido a la sensibilidad de presión y las propieda-des del ángulo.
Wacom tiene una serie de famosas tabletas que funcionan estupendamente con Flash. Estas tabletas pueden trabajar conjuntamente con su ratón, o sustituirlo totalmente. Muchos diseñadores digitales utilizan una tableta con cualquier tipo de programa de edición de gráficos incluyendo Adobe Photoshop y Adobe Illustrator.
Cuándo utilizar la herramienta de Pincel es realmente una cuestión de estilo y de preferencia. Para este personaje, quería algo más impreciso, como hecho a mano, así que el pincel era la opción perfecta.
01.indd 6 10/08/2007 17:15:32
7
ATAJOSMAC WIN AMBOS
Trucos con Flash CS3
7
How to Cheat in Flash
ATAJOSMAC WIN AMBOS
Estilos de diseño
La herramienta PincelEstilos de diseño
TRUCOExperimente con diversas ampliaciones del escenario al dibujar.Yo prefiero dibujar en una escala más grande y con la pantalla magnificada cerca del 400%.El resultado es típicamente una calidad de línea más fina.
2 Siempre diseñe sus personajes con el propósito
previsto en mente: la animación. La forma sigue
la función y el estilo de la animación puede dictar a
menudo cómo se diseña un personaje. Si usted es un
perfeccionista como yo, le gustará que el pelo sea lo
más parecido posible a unos tirabuzones. Para hacer
esto, evite diseñar el pelo como un objeto plano
grande. En lugar de eso, dibuje secciones individuales
de los tirabuzones para guardarlos como objetos
4 El resultado final representa el estilo impreciso
que queríamos. La calidad de la línea resulta
natural y refleja las imperfecciones propias de la mano
humana. No estamos intentando alcanzar un estilo
pulido del diseño aquí, sino una línea más imprecisa
propia de la calidad de las ilustraciones a mano. Este
estilo se presta bien a un personaje
infantil pues la integridad de la
línea es similar a la que dibujaría
realmente un niño.
separados, así se podrán mover independientemente.
Active el modo Dibujo del Objeto (subselección de la
herramienta del pincel). El modo Dibujo del Objeto
permite dibujar formas como objetos separados. Estos
objetos se pueden dibujar uno sobre otro sin que se
combinen entre ellos. Puede seleccionar cada dibujo
del objeto con la herramienta de Selección v y
después convertir cada uno en símbolo.
Trucos con Flash CS3
01.indd 7 10/08/2007 17:15:32
8
Estilos de diseño1 Mezclar coloresEstilos de diseño
E
L COLOR ES PODEROSO. Puede ser utilizado de múltiples maneras para
sugerir el tono de su diseño gráfico o el humor de una escena animada entera. Echemos una ojeada a cómo ajustar valores del color usando los controles deslizantes
de HSB del mezclador del color. Usando el menú desplegable, cambie el modo del color de RGB a HSB.
Ahora los controles deslizantes al lado de cada muestra se pueden utilizar para ajustar sus colores a partir de su tonalidad, saturación y brillo.
2 Cambie la tonalidad de
sus colores ajustando la
cantidad de tonalidad con el
deslizador. Puede también escribir
el valor directamente en el campo
del porcentaje si lo prefiere. Si
tiene varios colores a ajustar,
seleccione el valor numérico y
cópielo a su portapapeles. Para
ajustar los colores adicionales
todo lo que usted necesita hacer
es seleccionarlos y copiarlos en el
valor del color.
1Usted puede convertir sus
colores a escala de grises
escogiendo los colores con la
herramienta Cuentagotas y
después deslizando el control de la
saturación hasta el 0%. Esto bajará
la saturación pero mantendrá su
tonalidad y brillo.
vECT
OR
ILLU
STRA
TIO
N: C
HRI
S G
EORG
ENES
01.indd 8 10/08/2007 17:15:34
Estilos de diseñoEstilos de diseño
9
ATAJOSMAC WIN AMBOS
3 Aquí hay otro ejemplo donde
la tonalidad para cada color
se ha ajustado fácilmente usando
el valor del color de la tonalidad.
Esta técnica puede ser muy
eficaz para proporcionar un tono
uniforme al diseño de su página
Web o armonizar un esquema de
color ya existente.
4 Se puede experimentar
ajustando dos o más valores
para crear contrastes únicos
de color. Cuanto más baja es la
saturación, menor será el contraste
entre los colores. Puede conseguir
este hermoso tono pastel ajustando
estos valores.
5 Ajuste el valor de saturación
para crear un contraste
fuerte entre los colores. La
saturación determina la intensidad
de una tonalidad específica.
TRUCORecuerde cam-biar su mez-clador de color de HSB al RGB y comprobar que la gama de cada color está entre 16 y 235. Si no está planean-do la exporta-ción al vídeo, no necesitará preocuparse por la gama de sus valores de color.Hay también programas de edición de vídeo como Adobe After Effects y Adobe Pre-miere que requieren los colores PAL a los archivos de video expor-tados. Pero es posible que se quiera conser-var el control creando sus propias paletas de color en Flash en vez de permitir que sean con-vertidas en la fase de post-producción.
Trucos con Flash CS3
01.indd 9 10/08/2007 17:15:35
4 Para que la oreja parezca cóncava, mezcle otro degradado radial
que vaya de lo más oscuro en el centro a un valor más claro en
el borde externo. Rellene la forma con este degradado y colóquela
descentrada para mostrar sólo la mitad del degradado. Puesto que los
colores más oscuros se verán más alejados y los más claros parecerán
más cercanos, esta forma antes plana ahora parece cóncava.
10
Estilos de diseño1IM
AGE
CRED
IT H
ERE
Trabajar con degradadosEstilos de diseño
7 Para crear los clásicos ojos de dibujos animados tipo “ping-pong”,
use de la misma manera un degradado radial mezclando los colores
blancos y grises. La teoría del color nos enseña que para mostrar la luz,
se debe mostrar oscuridad. Aplique esta técnica a los ojos colocándolos
delante de una forma más oscura. Esto ayudará a agregar un cierto
contraste, haciendo resaltar los globos oculares, y a su vez añade
profundidad.
1 Se utiliza un degradado radial simple para llenar la mayor parte de
las formas que componen el mono. El truco está en proporcionar
la ilusión de un objeto 3D a un entorno 2D. Se utilizan cuatro colores
para este degradado. El color crítico para esta ilusión es el cuarto color
(extremo derecho). Representa una fuente de luz que viene de detrás de
la esfera, sugiriendo que la esfera es realmente redonda.
L
OS DEGRADADOS PUEDEN SER MUY eficaces cuando usted quiere alejarse
de los tonos mates de los rellenos de color sólido. Pueden ser utilizados para agregar una sensación de profundidad y de di-mensionalidad a sus personajes, fondos y gráficos en general.
Los degradados pueden también traba-jar contra usted debido a su facilidad de empleo, dando por resultado imágenes genéricas y a menudo deslustradas. En bue-nas manos, tanto los degradados lineales como los radiales pueden contribuir a un diseño muy eficaz y a veces más realista.
01.indd 10 10/08/2007 17:15:36
Estilos de diseñoEstilos de diseño
11
ATAJOSMAC WIN AMBOS
3 Pulse y arrastre la herramienta del punto focal
para colocar la iluminación entre el centro de la
forma y su borde. Haciendo esto usted está sugirien-
do que la fuente de luz está en más de un ángulo.
Fíjese en que el cuarto color de nuestro degradado se
aprecia a lo largo del borde inferior y derecho. Esto
implica que la esfera se ve envuelta de luz por detrás.
2 Corrija el degradado para que se ajuste a la forma
usando la herramienta Transformar Degradado
f. Rote, escale o incline el degradado de manera que
sea levemente más grande que la forma. Seleccione el
punto de control de centro, arrastre todo el degradado
y colóquelo un poco descentrado de la forma.
8 La nariz es una combinación de esferas rellenas con
degradados radiales y lineales. Para crear sus ventanas,
use uno lineal y corríjalo hasta que el color más oscuro esté
sobre el más claro. Solas, las esferas son simples formas;
colocadas junto a la esfera radial, se convierten en agujeros.
5 El pelo es una forma rellenada de otro
degradado radial. La mayor parte de ésta estará
oculta detrás de otros gráficos, así que usted sólo
necesita preocuparse del aspecto del borde externo
cuando el personaje está montado completamente.
6 Las manos no son realmente manos en absoluto.
Para simularlas se utilizan algunas esferas
estratégicamente colocadas con el mismo degradado
radial que la cara y el cuerpo.
9 Los buenos diseños consisten en técnica.
Cuando cada elemento se constituye del mismo
estilo gráfico, el resultado total será normalmente
constante y fluido. No se desvíe de su plan, elija una
técnica y manténgase en ella.
Trucos con Flash CS3
01.indd 11 10/08/2007 17:15:37
12
Estilos de diseño1 Añadir texturaEstilos de diseño
1La primera tarea es diseñar las texturas. Las cámaras digitales son un
dispositivo muy práctico para este fin. Dése un paseo por su barrio y
encontrará rápidamente una fuente ilimitada de interesantes texturas que
puede utilizar para sus diseños. Utilice Photoshop para ajustar el color,
agregar los filtros y recopilar sus imágenes. Recuerde mantener la imagen
lo bastante pequeña para la publicación en la Web.
4 Puede utilizar la herramienta de Cubo
para rellenar sus formas con los diversos
mapas de bits que usted importó, que separó
y que escogió con el Cuentagotas.
L
OS MAPAS DE BITS PUEDEN SER un eficaz modo de agregar textura a
sus diseños. Puesto que cualquier imagen podría ser una textura potencial, las posi-bilidades son ilimitadas. Para el personaje de la rana, quise un aspecto un poco más sofisticado sin que perdiera el toque de dibujo animado. En vez de usar campos de color sólido y un cierto sombreado, el uso de texturas importadas en mapas de bits agregó esa sensación extra de profundidad y de riqueza.
ED T
HE
FRO
G: C
OPY
RIG
HT
LEAP
FRO
G IN
NO
vATI
ON
S
01.indd 12 10/08/2007 17:15:38
Estilos de diseñoEstilos de diseño
13
ATAJOSMAC WIN AMBOS
2 Seleccione el mapa de bits importado y
sepárelo Cb Lb. Haga clic en él con
la herramienta Cuentagotas. Ahora se agregará al
mezclador del color como muestra.
5 El mapa de bits necesitará
probablemente ser escalado,
girado o colocado de nuevo.
Seleccione la herramienta de
Transformación Libre f, y corrija
su relleno con ella.
3 Usando la herramienta de Pincel,
dibuje sus formas usando el
mapa de bits como el color de relleno.
6 El último paso es convertir todas las piezas en símbolos y
agregar una pequeña cantidad del tinte oscuro a las instancias
de detrás del personaje. Esto ayuda a separar mapas de bits similares
los unos de los otros y agrega un toque de profundidad.
TRUCOProbablemente deseará tam-bién ajustar las propiedades del mapa de bits importado (para ello haga doble clic en el icono de mapa de bits en la biblioteca del documento y seleccione “alisar”. ) Esto aplicará anti aliasing a su imagen y hará que parez-ca más lisa. Opcionalmen-te, se puede fijar la calidad de su película a “MEJOR” agregando una línea de código en el foto-grama 1 de la línea de tiempo principal. Sus mapas de bits se verán mejor pero exigirán más de su pro-cesador duran-te la reproduc-ción. El usuario debe estar al corriente.
Trucos con Flash CS3
01.indd 13 10/08/2007 17:15:39
14
Estilos de diseño1 Añadir textura (cont.)Estilos de diseño
1Lo primero es crear su textura en Adobe Photoshop, la importa a
Flash, la separa y la selecciona con la herramienta Cuentagotas
i. Cree la forma para el cuerpo de Grotto con el pincel de pintura y la
muestra del mapa de bits como relleno. Seleccione la forma del cuerpo y
conviértala en un símbolo gráfico.
4 A veces el diablo está en los detalles, lo que es evidente aquí
al añadir algunas sutiles iluminaciones al labio. En una nueva
capa use la herramienta de Pincel para pintar algunas formas y
después rellénelas con un degradado lineal que contenga del 30% al
0 % en blanco. Utilice la herramienta Transformación de Relleno f
para corregir el degradado cuanto sea necesario.
L
OS MAPAS DE BITS NO TIENEN QUE parecer siempre planos. Les presento
a “Grotto” un personaje hecho casi enteramente con mapas de bits y algunos degradados de Flash cuidadosamente puestos para proporcionar la sensación de forma, volumen y, sobre todo, textura. Aquí veremos cómo dar a texturas de mapas de bits planas un poco más de profundidad usando ciertos degradados y alfa básicos.
“GRO
TTO
” CO
PYRI
GH
T M
UDB
UBB
LE A
NIM
ATIO
N
01.indd 14 10/08/2007 17:15:40
Estilos de diseñoEstilos de diseño
15
ATAJOSMAC WIN AMBOS
2 Edite el símbolo añadiendo otra capa sobre la de la
forma. Copie Cc Lc y pegue CSv
LSv la forma del cuerpo en esta nueva capa.
Rellénela con un degradado radial con dos colores;
negro con un 30% alpha y negro con un 0% alpha.
5 La ventana de la nariz es otro ejemplo de añadir
en otra capa varios degradados sobre la forma
original que contiene el relleno del mapa de bits. Aquí
utilicé uno lineal para la forma interna de la ventana
de la nariz y uno radial para proporcionar un cierto
sombreado para un efecto más realista.
3 El símbolo de la boca/labio fue hecho de la misma
manera añadiendo una capa con degradado radial
sobre la forma del mapa de bits. Use la herramienta de
Transformación de Relleno para colocar el degradado
para que forme una sombra a lo largo de la mitad
inferior de la forma.
6 Cuando se combinan todos estos detalles sutiles,
se puede conseguir una imagen muy sofisticada.
Las simples formas de Grotto son ahora de lo más
convincentes superponiendo tan solo algunas capas
con degradados sobre las texturas.
Trucos con Flash CS3
01.indd 15 10/08/2007 17:15:42
16
Estilos de diseño1 La herramienta PlumaEstilos de diseño
1Empiece con un bosquejo o dibuje directamente en Flash. Cree un
fotograma clave en blanco en el fotograma 2 y active la propiedad
Papel Cebolla. Usando el bosquejo como referencia, trace el pelo usando
la herramienta de Pluma, clicando y arrastrando cada punto a medida que
se mueve. Esto creará automáticamente curvas con puntos Bezier que le
permiten manipular cada trazo cada vez que se crea un punto.
5 Un degradado lineal es perfecto para el sombreado de los ojos. Elija
el color que quiera para el color inicial, y para el segundo color en
el degradado puede utilizar el mismo color usado para el tono de piel.
Después mezcle el sombreado de ojos en el resto de la cara para un
efecto suave y sutil. Puede experimentar con varios colores para producir
diversos estilos de sombreado.
H
ASTA AHORA EN ESTE CAPÍTULO hemos visto diversos estilos de
dibujo. Desde lo más básico, como encajar una simple forma con otra más grande, formas más complejas, a usar mapas de bits como texturas de relleno. La mayor parte del tiempo el proceso de diseño exige una combinación de herramientas y de técnicas para conseguir hacer el trabajo. Para el diseño de este personaje pasé de un simple bosquejo a lápiz a un dibujo vectorial completamente renderizado usando la her-ramienta de Pluma y las formas básicas. La herramienta de Pluma, conjuntamente con la herramienta de Selección, ofrece flexi-bilidad infinita cuando se trata de trazos y de formas de manipulación.
vECT
OR
ILLU
STRA
TIO
N: C
HRI
S G
EORG
ENES
01.indd 16 10/08/2007 17:15:43
17
How to Cheat in Flash
ATAJOSMAC WIN AMBOS
Estilos de diseñoEstilos de diseño
2 Usando la herramienta de
Subselección a, modifique
los contornos del pelo clicando en
un punto de anclaje y ajustando
sus manijas de Bezier.
4 Con sólo un color de relleno
seleccionado en la muestra
de la caja de herramientas, dibuje
formas irregulares para representar
un sombrero camuflado.
3 Dibuje la forma de la cara con
las herramientas Rectángulo
r u Óvalo o. Use la herramienta
de Selección para refinar la forma
empujando y tirando de sus bordes.
6 Una vez el personaje está completo, desbloquee
todas las capas y selecciónelo todo Ca
La. Copie la imagen entera a su Portapapeles
usando Cc Lc y cree una nueva capa.
Póngala debajo del resto de capas. Pegue en el sitio
CSv LSv en la nueva capa. Convierta
cualquier línea en relleno y rellene la forma entera de
negro. Modificar > Forma > Expandir relleno ampliará
el borde externo de la forma. Utilice la herramienta
Bote de tinta s con un color diferente para el trazo y
clique en la forma para agregar un toque agradable de
color. Actíve la visibilidad de todas sus capas.
TRUCOVaya a Editar >Preferencias > Dibujar y cerciórese de que la opción “Mostrar Pre-vio Pluma” está marcada. Esto le permitirá ver un previo de cómo serán sus líneas mientras dibuja con la herramienta de Pluma. Man-tenga pulsada la tecla de mayúsculas para encajar las líneas a los ángulos de 90 y 45 grados al dibujar.
Trucos con Flash CS3
01.indd 17 10/08/2007 17:15:45
18
Estilos de diseño1 Trazar un mapa de bitsEstilos de diseño
3 Importe el GIF optimizado a Flash Cr Lr. Cerciórese de que
esté seleccionado y vaya a Modificar > Mapa de Bits > Trazar mapa
de bits. En el panel de diálogo de Trazar mapa de bits, puede configurar
los ajustes individuales que dictarán en última instancia el nivel de
complejidad que su imagen tendrá cuando esté convertida a vectores.
El ajuste apropiado variará dependiendo de su imagen y preferencia
personal.
L
AS IMÁGENES FOTOGRÁFICAS se pue-den utilizar para agregar una nota de
realismo a cualquier proyecto Flash. Pueden ser importadas y utilizadas en su estado original, o pueden simplificarse para una mirada única, estilizada. El acercamiento obvio a la vectorización de fotografºías es importar la imagen en Flash y utilizar las herramientas de dibujo para trazarlo a mano. Pero eso puede ser una pérdida de tiempo dependiendo de la complejidad de la imagen.
El truco aquí es hacer un promedio de la cantidad de colores que la imagen contiene, y Adobe Photoshop hace de esto una tarea muy fácil. ¡Combine esto con el ingenio del Trazo de Mapa de Bits en Flash, y no tendrá que seleccionar ni una sola herramienta de dibujo!
1Empiece con una imagen de buena calidad con suficiente contraste
de color. Ábrala en Adobe Photoshop y guárdela como un archivo de
PSD. Ahora necesitará un buen rato para ajustar el contraste, saturación,
colores o cualquier otra cosa que usted quiera corregir.
“PU
Ck”,
OFF
ICIA
L LA
FLA
SH M
ASCO
T
01.indd 18 10/08/2007 17:15:46
Estilos de diseñoEstilos de diseño
19
ATAJOSMAC WIN AMBOS
2 Guárdela para Web usando CSOs LSAs y seleccione el
formato de archivo GIF. Seleccione la escala de grises del menú desplegable y
limite el número de colores a dos o tres dependiendo de la imagen y de la cantidad de
colores que quiera mantener. Pulse Guardar y renombre su nueva imagen GIF.
4 Una vez completado el trazo, su imagen estará toda
vectorizada y completamente escalable. La imagen
resultante de este perro ahora es de sólo 12k pero
podemos hacerlo incluso más pequeño usando el plug-in
del Flash Optimizar. Seleccione toda la imagen y vaya a
Modificar > Forma > Optimizar. Utilice el deslizador para
ajustar la cantidad de Alisamiento y seleccione “Usar
múltiples pasadas”.
5 El resultado final es una imagen muy pequeña
para la web, de solo seis kilobytes. Es también
fácil cambiar su esquema de color usando la
herramienta Cubo de pintura k y el mezclador del
color.
TRUCOAl optimizar curvas use la propiedad de optimizar de Flash, ampliar el escenario a 100% o menos. La optimización total puede variar dependiendo de la ampliación del escenario. La optimización tiende a tener un mayor efecto con objetos más pequeños y menos con los más grandes. Deberá experimentar para descubrir la proporción preferida entre la optimización y la calidad de la imagen.
Trucos con Flash CS3
01.indd 19 10/08/2007 17:15:48
20
Estilos de diseño1 Sombreado 1: Truco linealEstilos de diseño
1Empiece con una forma básica
que contenga un relleno y un
contorno. Esta técnica trabajará del
mismo modo que con las formas
que no tienen ningún contorno.
2 Seleccione la herramienta
Línea n y cerciórese de
que la herramienta Imán también
esté seleccionada en la caja de
herramientas.
6 Una manera alternativa para mezclar colores en Flash es clicar el
botón de la rueda de color en la esquina derecha superior. Esto
abrirá el mezclador de la gama de colores de color que es originario en su
sistema operativo. Mezcle su nuevo color y clique ”Ok”
H
AY SIEMPRE vARIAS MANERAS de alcanzar un mismo resultado en
Flash. Con tantas herramientas diferentes a nuestra disposición, encuentro constante-mente maneras diferentes de usarlas para conseguir varios efectos.
Este sombreado se llama comúnmente “Sombreado de animación”. Este estilo de sombreado es típico del estilo de los cómics o de clásicos de Disney. He descubierto cuatro maneras diferentes de crear el som-breado entre las que usted puede escoger.
“MU
DBU
BBLE
BOY
” CH
ARAC
TER
- CO
PYRI
GH
T M
UDB
UBB
LE A
NIM
ATIO
N
01.indd 20 10/08/2007 17:15:49
21
How to Cheat in Flash
ATAJOSMAC WIN AMBOS
Estilos de diseño
Sombreado 1: Truco linealEstilos de diseño
3 Dibuje una línea diagonal
dentro del relleno de su
forma. Utilice la herramienta s
de Selección para arrastrar cada
punto final de la línea y que se
acoplen así al borde del relleno.
8 Seleccione la línea y suprímala. ¿Fácil, no?
Si todavía no es perfecta, puede continuar
utilizando la herramienta de Selección para corregir el
borde del nuevo relleno que usted creó.
4 Use la herramienta de
Selección para curvar la línea
de modo que su arco refleje la
forma del óvalo.
7 Use la herramienta k de Cubo para rellenar la
forma que usted creó con la herramienta de la
Línea.
5 Con el color de relleno
seleccionado, mezcle un color
levemente más oscuro usando el
mezclador del panel del color.
TRUCOEste estilo de sombreado puede ser difícil de dominar. Debe imaginarse que sus formas en dos dimensiones tienen una tercera dimensión y son afectadas por la luz y la sombra. Elija una fuente de luz y manténgala constante a través de su diseño al agregar el sombreado.
Trucos con Flash CS3
01.indd 21 10/08/2007 17:15:50
22
Estilos de diseño1 Sombreado 2: ModelaciónEstilos de diseño
1 Usando la herramienta de
Rectángulo r, dibuje una
caja dentro de su forma que
contenga un color más oscuro que
el del relleno (sin contorno).
2 Use la herramienta Selección
s para tirar de las esquinas
hasta que se acoplen a los bordes
de la forma (cerciórese de que la
opción Imán está activada).
5 Llevemos esta técnica un
paso más allá agregando más
sombreado para un efecto más
realista. Repita el procedimiento
anterior usando un color más
oscuro dentro del área sombreada.
6 Use la herramientaSelección
para tirar de las esquinas
hasta que se acoplen a los bordes
de la forma sombreada.
O
TRA vARIACIÓN en el sombreado en Flash. Esta técnica incluye la
herramienta de Rectángulo y permite un sombreado más complejo. Esto puede ser preferible si sus formas requieren sombras más complejas.
01.indd 22 10/08/2007 17:15:51
23
How to Cheat in Flash
ATAJOSMAC WIN AMBOS
Estilos de diseño
Sombreado 2: ModelaciónEstilos de diseño
3 Rellene el área del hueco
creada después de acoplar las
esquinas al borde de la forma.
8 Use la herramienta Selección
para doblar el borde del color
más oscuro del relleno de modo
que su arco refleje el contorno de
la forma.
4 Use la herramienta Selección para doblar el borde del color más
oscuro del relleno de modo que su arco refleje la forma del óvalo.
Utilizando la herramienta de Rectángulo, usted tiene una esquina
adicional para jugar. Esto puede ser útil para crear un sombreado más
complejo, por ejemplo para la forma del oído.
7 Rellene el área del hueco
creada después de acoplar las
esquinas con el borde de la forma.
9 Se puede repetir este
procedimiento tantas veces
como se quiera. Cuantas más
escalas de color se añadan, más
realista será la imagen.
TRUCOSi quiere descubrir una manera inte-resante y fácil de crear varias tonalidades basadas en su color ori-ginal, vsite la web Kuler de Adobe (kuler.adobe.com). En ella se pueden mez-clar matices de color muy fácilmente y después guar-darlos y des-cargarlos como ASE (archivo Adobe Swatch Exchange). Abra los archi-vos transfe-ridos de ASE en Illustrator, guarde su nuevo panel de muestra como archivo AI e impórte-los a Flash. Un modo más fácil sería copiar a mano el valor HEX de la página Kuler y copiarlo en el panel de Flash del mezclador del color.
Trucos con Flash CS3
01.indd 23 10/08/2007 17:15:52
24
Estilos de diseño1 Sombreado 3: Pintar selecciónEstilos de diseño
1 Empiece con una forma. 2 Seleccione la herramienta
Pincel b y, del menú de
selección del modo de pincel, elija
Pintar Selección. Esto restringirá
cualquier pintura sólo a los rellenos
seleccionados.
6 A continuación, rellene
simplemente el espacio
creado por el nuevo relleno que
acaba de pintar.
7 ¡voilà! Ahora usted tiene un
convincente sombreado de la
pierna.
T ODOS SOMOS DIFERENTES y tende-mos a encontrar maneras diferentes
de usar las mismas herramientas. Nos acos-tumbramos a ciertas técnicas porque llegan a ser familiares en nuestro ritmo de trabajo y estamos más cómodos con nuestros propios hábitos individuales. Aquí está otra técnica más para crear el sombreado que le puede gustar más que las versiones previas. Se presta bien al diseñador que tiene prefe-rencia por dibujos de estilo más manual.
HU
LA G
IRL
- CO
PYRI
GH
T M
UDB
UBB
LE A
NIM
ATIO
N
01.indd 24 10/08/2007 17:15:55
25
How to Cheat in Flash
ATAJOSMAC WIN AMBOS
Estilos de diseño
Sombreado 3: Pintar selecciónEstilos de diseño
3 Use la herramienta de
Selección para seleccionar el
color del relleno que agregará al
color de la sombra. Ahora utilice
la herramienta de Pincel y ajuste el
alisamiento deseado para la forma
que usted pintará. Después, pinte
dentro del relleno seleccionado.
9 Rellene el espacio creado por
el nuevo relleno y estará listo.
4 No se preocupe si es un
poco descuidado. Una vez
que usted deje el pincel, el relleno
pintado permanecerá solamente en
el interior del área seleccionada.
8 El sombreado de la cara se
puede dibujar de la misma
manera. Recuerde la dirección de
donde proviene la fuente de luz y
pinte un relleno creciente.
5 A veces el área puede ser
demasiado grande para
pintarla enteramente a mano. En
esta situación, dibuje simplemente
el contorno del borde para el área
sombreada.
TRUCOLa coherencia es importante cuando se trata de la fuente de luz. Ayuda limitarse a una sola fuente de luz si es posible y crear su sombreado basándose en el ángulo en el que viene la fuente de luz.
10 Este tipo de sombreado
agrega una dimensión
adicional a sus diseños, dándoles
profundidad y realismo.
Trucos con Flash CS3
01.indd 25 10/08/2007 17:15:57
26
Estilos de diseño1 Sombreado 4: ContornosEstilos de diseño
1 Empiece con la herramienta Bote de tinta i y un color de trazo
que no exista en ninguna parte de su diseño. Fije el grosor del trazo
alrededor de 3 o 4 puntos. Clique dondequiera dentro del relleno para
contornearlo con un trazo en el color que usted eligió. No se preocupe
de cómo se ve porque usted suprimirá esta línea enteramente una vez
termine.
4 Para la indumentaria de
este personaje, aplique un
contorno en trazo también al peto.
5 El trazo está seleccionado
y se coloca de nuevo en la
misma fuente de luz que en el
ejemplo anterior.
E
STA vARIACIÓN funciona bien tanto con formas simples como con formas
muy complejas. Si usted tiene un estilo relajado y parecido al dibujo a mano, ésta puede ser la técnica para usted. Se usará el Bote de tinta para crear una línea alrededor de su relleno. Después, usted puede colocar esta línea de nuevo descentrada y llenar el espacio creado con un matiz de color más oscuro.
BADG
ER C
HAR
ACTE
R: M
UDB
UBB
LE
01.indd 26 10/08/2007 17:15:59
Estilos de diseño
Sombreado 4: ContornosEstilos de diseño
27
ATAJOSMAC WIN AMBOS
2 Seleccione la línea haciendo doble clic con
la herramienta de Selección. Después, utilice
la flecha para apartarla lejos de la forma original
en la dirección de su fuente de luz. Llene este área
creada entre el trazo y el borde original de su forma
sombreada.
7 Con el trazo todavía
seleccionado, suprímalo. En
algunos casos, la forma resultante
creada puede necesitar ciertos
retoques.
3 Elimine el trazo entero pulsando la tecla D.
Si se ha deseleccionado su trazo, haga doble
clic en él con la herramienta de Selección. Un doble
clic seleccionará el trazo entero mientras que un solo
clic en él seleccionará un segmento si éste contiene
puntos múltiples.
6 Se mezcla y rellena una
sombra más oscura para crear
la ilusión de la forma y realismo.
8 Utilice la herramienta de
Selección para refinar un
poco más su sombreado según sus
necesidades y estilo.
TRUCOConfigure un grosor del trazo bastante elevado para poder trabajar mejor. Un valor más grande permitirá que se seleccione más fácilmente. Eligiendo un color brillante que contraste con su diseño original lo hará visualmente más fácil para usted.
Trucos con Flash CS3
01.indd 27 10/08/2007 17:16:01
28
Estilos de diseño1 Realismo con degradadosEstilos de diseño
1 Lo primero es contornear la
forma básica del pétalo de
la flor con un color del trazo que
contraste con la imagen original.
Sea tan preciso como quiera, pero
recomiendo usar la imagen original
como guía, simplificando donde
sea necesario.
6 El degradado inicial
proporcionará la tonalidad
total y la gama tonal del pétalo
de la flor. Flash permite aplicar
hasta 15 transiciones del color a un
Degradado.
7 Rellene su forma con su
degradado radial y use la
herramienta Transformación de
Relleno f para corregir su tamaño,
posición y rotación. Puede suprimir
el trazo, pues ya no se necesita más.
2 La herramienta de Pluma p
es perfecta para esta tarea,
simplemente porque es rápido
y fácil reseguir manualmente el
contorno del pétalo clicando y
arrastrando a lo largo del contorno
de la imagen.
F
LASH ES MUCHO MÁS que una herramienta para diseñar personajes
de dibujos animados. Su arsenal completo de herramientas de dibujo vectorial es útil para muchos estilos de ilustración. Aquí vamos a crear paso a paso una ilustración realista de una flor. Las flores siempre son un dibujo atractivo y al mismo tiempo desafiante debido a las sutiles variaciones de color que a menudo contienen.
Las herramientas principales que se usarán para este ejemplo son la Pluma y los Degra-dados. La primera se ha mejorado enor-memente en Flash CS3 y si usted ya está familiarizado con la herramienta Pluma de Illustrator, notará algunas semejanzas. Flash ha adoptado la funcionalidad de esa herra-mienta de Illustrator incluyendo abreviacio-nes de teclado idénticas -sin mencionar los también idénticos cursores de la Pluma.
Un truco muy interesante de la Pluma es mantener pulsada la barra espaciadora para volver a dirigir el punto actual mientras se dibuja. Otra característica en CS3 es que se ha eliminado el auto relleno cuando una forma está terminada por motivos de coherencia.
Creo que cuanto más experimente con la nueva herramienta Pluma, más le gustará. PH
OTO
: CH
RIS
GEO
RGEN
ES
01.indd 28 10/08/2007 17:16:03
Estilos de diseño
Realismo con degradadosEstilos de diseño
29
ATAJOSMAC WIN AMBOS
3 Para cerrar la trayectoria,
coloque la herramienta
de Pluma sobre el primer punto
de anclaje. Un pequeño círculo
aparece al lado del indicador de la
herramienta de Pluma cuando está
colocado correctamente. Teclee o
arrastre para cerrar la trayectoria.
9 Rellene la forma duplicada
con su nuevo degradado y use
la herramienta Transformar Relleno
para simular sutiles ondulaciones
dentro de la forma. Repita el
proceso de copiar y de pegar en
el lugar esta forma en las nuevas
capas para cada nuevo degradado.
4 Use la herramienta de
Subselección a para
refinar su trayectoria si lo desea.
Para ajustar la forma de la curva
de cualquier lado de un punto
de anclaje, arrastre el punto de
anclaje, o arrastre el nodo de
la tangente. También se puede
mover un punto de anclaje
arrastrándolo con la herramienta
de Subselección.
8 Copie Cc Lc y Pegue en
Sitio CSv LSv
esta forma en una nueva capa (se
pondrán varios degradados en capas
superpuestas para crear un efecto
realista). Los degradados siguientes
contienen cantidades variadas de alfa
para crear transiciones sutiles de color.
TRUCOPara mantener la curva en múltiplos de 45º, Mayúscu-las-arrastrar. Para arrastrar los nodos de la tangente indi-vidualmente, Alt-arrastrar (Windows) u Opción-arras-trar (Macin-tosh).
5 Ahora necesitamos mezclar
algunos degradados radiales.
El Seleccionador de color de Flash
puede coger colores en cualquier
punto de su pantalla si usted clica
en cualquiera de las muestras de
color encontradas en el panel del
mezclador, en las propiedades de
color o en la caja de herramientas
y arrastra al área que contiene su
color deseado.
10 Puede manipular cada
nuevo degradado usando
la herramienta Transformación libre
para crear sombras suaves y puntos
de luz. En casi todos los casos,
usted utilizará sólo degradados
parciales para crear transiciones
sutiles entre luz y sombra.
Trucos con Flash CS3
01.indd 29 10/08/2007 17:16:05
30
Estilos de diseño1 Realismo con degradados (cont.)Estilos de diseño
11 Es siempre convincente colocar las sombras
suaves donde el borde de la forma contiene una
imperfección. La combinación de colores del degradado
y de contornos irregulares parece una imperfección muy
real.
12 Éste es el resultado final al usar varias
variaciones de degradados radiales
superpuestos, produciendo variaciones hermosas y
convincentes del color.
15 Para conseguir el efecto de profundidad en el
centro del estigma, arrastre la pequeña flecha
blanca en el centro del degradado radial para mover el
punto focal hacia el borde.
16 Así es como se ve la imagen de la flor una
vez ilustrados todos los pétalos y el estigma.
Pero usted no tiene por qué parar aquí. Divirtámonos
un poco con los filtros del Flash. Convierta la flor
entera en símbolo del clip de la película.
01.indd 30 10/08/2007 17:16:06
Estilos de diseño
Realismo con degradados (cont.)Estilos de diseño
31
ATAJOSMAC WIN AMBOS
TRUCOFije su altura del movimiento bastante grande para trabajar más fácilmente. Un valor más grande permitirá que usted lo seleccione más fácilmente. Elija un color brillante que sea alto en contraste con su diseño original para que sea más fácil para usted visualmente.
13 Repita el mismo procedimiento para cada
pétalo de la imagen de la flor. Para limitar
las capas de la línea de tiempo, convierta cada capa
en un grupo o en un dibujo del objeto y convierta
cada pétalo en símbolo.
14 El centro de la flor, técnicamente llamada
estigma, fue creado con un relleno en forma
de anillo que contenía un degradado radial.
17 Del panel de filtros, añada una sombra
inferior. Configure el nivel de desenfoque, el
alfa y la distancia como desee. También puede agregar
un filtro de desenfoque para suavizar la imagen total
de la flor.
18 Duplique la instancia del Clip de película
de la flor. Escálelos y rótelos para crear un
arreglo floral atractivo. Es sorprendente imaginarse
que este tipo de ilustración se puede hacer
enteramente en Flash, ¿verdad?
Trucos con Flash CS3
01.indd 31 10/08/2007 17:16:07
32
1I N T E R M E D I O
La nueva interfaz de FlashFLASH ESTÁ CRECIENDO. Comenzó hace mucho tiempo como una simple herramienta para la animación de webs y, a todos los efectos, se ha convertido en su propia plataforma de desarrollo. Especialmente, la interfaz de Flash ha progresado drásticamente desde su encarnación más temprana. En una inspección inicial usted ya notará que se ha puesto en armonía con el juego de herramientas de Adobe. Los iconos ahora se comparten a través de programas y se ha puesto en práctica la integración.
Una de las nuevas características más obvias del UI es cómo se pueden acoplar, agrupar y reducir los paneles al mínimo. Si elige acoplarlos a la barra lateral, entonces se pueden redu-cir al mínimo hasta que se conviertan en iconos. Al hacer clic en un icono se abrirá el panel o el grupo respectivo de paneles. Hay también una preferencia para activar el conectado/desconectado del auto-despliegue de los iconos cuando usted trabaja en otra parte en el espacio de trabajo.
01.indd 32 10/08/2007 17:16:09
33
I N T E R M E D I O
La nueva interfaz de FlashLa caja de herramientas ahora se puede modificar para requisitos particulares como alinear todas las herramientas en una sola columna en vez de en dos columnas. Como siempre, us-ted puede personalizar el espacio de trabajo y guardar sus disposiciones. Debajo está mi dis-posición típica, que maximiza el área del escenario para el trabajo del diseño. Prefiero tener tanto espacio como sea posible para el dibujo y la animación. De hecho, prefiero configurar la resolución de mi visualización tan alta como sea posible, lo que significa que trabajo con un ordenador portátil de 17” con una resolución a 1920 x 1200. Esto permite que trabaje en un formato más grande con el escenario de Flash magnificado cerca del 400%. Lo hago así para tener más control al dibujar con las herramientas de Pincel y Línea.
Se pueden grabar tantos diseños como se quiera, lo que resulta muy útil si su plan de tra-bajo implica varias tareas. Como ya verá en los capítulos siguientes, usted aprenderá mucho más sobre la nueva interfaz y las características de dibujo y de integración que Adobe CS3 ofrece.
Trucos con Flash CS3
01.indd 33 10/08/2007 17:16:11
Transformación y distorsión
n El más básico de los objetos, el cubo, se puede crear usando tan solo la herramienta Transformación Libre. Con solo girarlo y torcerlo un poco, usted puede dar fácilmente cierta vida y personalidad a una animación antes aburrida. Las mismas técnicas se pueden aplicar a casi cualquier objeto -incluyendo personajes.
2Trucos con Flash CS3
34
02.indd 34 10/08/2007 17:18:26