Descargar Primer Capitulo Trucos Con Flash Cs3

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.


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


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.


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


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.


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


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.


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


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.


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


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.


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


ATAJOSMAC WIN AMBOS


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.


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


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.


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


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.


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


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.


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


ATAJOSMAC WIN AMBOS

Estilos de diseño

Sombreado 3: Pintar selecciónEstilos de diseño


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.


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.


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.


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.


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?


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.


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

Descargar Primer Capitulo Trucos Con Flash Cs3

Documents

Transcript of Descargar Primer Capitulo Trucos Con Flash Cs3