Extracto Del Libro

Estilos de diseoLAS TCNICAS descritas en este libro dan por supuesto un nivel razonable de conocimientos en el manejo de Flash. En captulos posteriores, analizaremos diferentes formas de trabajar que conllevan el uso de smbolos, lneas de tiempo y diversas otras tcnicas de animacin. Este prim-er captulo, por su parte, servir como recordatorio de los fundamentos del diseo para la animacin y presentar, de paso, unas cuantas tcnicas novedosas de dibujo.

Ms adelante, se analizarn con ms detalle los smbolos, la interpolacin de formas y movimiento, as como la lnea de tiempo.

3

41Aqu tenemos un dibujo original a lpiz, una vez escaneado y guarda-do en formato JPG. Prefiero comenzar

con lpiz y papel simplemente porque

encuentro que los resultados son siem-

pre ms, digamos, artsticos.

2 Una vez importada la imagen, in-sertamos un fotograma en blanco en el fotograma 2 y activamos la herra-

mienta Onionskin. Esto nos permitir

realizar un trazado de la imagen en un

nuevo fotograma al tiempo que usamos

el original como referencia.

6Para hacer el contorno negro, selec-cionamos la forma, la copiamos con Cc Lc y la pegamos en su lugar con CSv LSv. Mientras est seleccionada, elegimos un color

diferente del mezclador y disminuimos

su tamao hasta el 80% del original.

7La forma original permanecer pre-sente bajo la nueva. El truco con-siste en situar la nueva forma algo

descentrada respecto a la original para

lograr un contorno de distinto grosor.

SI DE NIO JUG con los bloques de construccin de LEGO encontrar este estilo de dibujar, que consiste en utilizar unas

cuantas formas bsicas e ir conectndolas

entre s, bastante familiar, o cuando menos

intuitivo. Dicha tcnica requiere que divida-

mos cada parte del cuerpo de un personaje en

varias partes bsicas mediante las herramien-

tas Rectangle y Oval. De este modo, podremos

simplificar con rapidez y eficiencia cualquier

personaje en secciones ms manejables, al

tiempo que logramos un estilo de dibujos ani-

mados muy profesional.

Vamos a usar unas formas para hacer recor-

tes en otras; lo que constituye una tcnica

muy til para hacer agujeros en los objetos, as

como para modificar los bordes de las formas.

Como parece lgico, esta tcnica se puede

usar tambin con los elementos del fondo.

La idea central es emplear formas simples

para construir imgenes complejas, aptas para

el estilo de animacin Flash, que veremos en

captulos posteriores.

EEEssstttiiillooosss dddeee dddiiissseeeoo

Dibujar con formas bsicas

DO

G C

HA

RA

CTE

R:

CO

PYRIG

HT

MU

DBU

BBLE

LLC

ATAJOS

MAC WIN AMBOS

5

3 Usar las herramientas Oval o y Rectangle r nos permite lograr rpidamente las formas bsicas de

nuestro personaje. La herramienta de

seleccin es magnfica para convertir

estas formas bsicas en un bosquejo de

nuestro personaje.

4 Activamos la opcin Snap (icono en forma de imn) y arrastramos las esquinas de forma que se solapen.

Esto no es un proceso muy diferente a

construir objetos con las piezas de LEGO

como hacamos de pequeos.

5 Seguidamente, pulsamos y arrastramos los bordes de las for-mas para convertirlas en curvas. Este

proceso es muy divertido porque vamos

viendo cmo toma forma nuestro per-

sonaje.

8 En el paracaidista utilizamos una tcnica ligeramente distinta que podemos llamar de recorte. Comenza-

mos con la herramienta Oval para reali-

zar la forma bsica del paracadas.

9 Podemos realizar cortes en esta for-ma con otras formas de diferentes colores, como la elipse azul. La situamos

sobre el rea que deseamos recortar, la

deseleccionamos, la seleccionamos de

nuevo y pulsamos la tecla D.

10 Una vez que hemos logrado la forma deseada, podemos uti-lizar la herramienta Inl Bottle s para aadirle rpidamente un contorno.

TRUCO

A medida que

vayamos termi-

nando las dis-

tintas secciones

de nuestro per-

sonaje, es con-

veniente copiar-

las y pegarlas

en capas nuevas

y, seguidamen-

te, bloquearlas.

Esto evitar que

las editemos

de forma inad-

vertida. Algo

incluso mejor es

convertirlas en

smbolos en ese

momento.

TTTTTrrruuucccooosss cccooonnn FFFFFlllllaaassshhhhh CCCCCCSSSSSSS555555

61Para dar forma a un rbol con una frondosa copa llena de hojas, no tenemos que dibujarlas todas. Por el

contrario, como el diseo est orienta-

do a nios de corta edad, mantenemos

el nivel de detalle al mnimo. Primero,

seleccionamos la herramienta Oval o y un color que nos guste y dibujamos una

3 Vamos a disear el tronco del rbol de una forma similar a lo hecho con la copa. Primero, creamos un rectn-

gulo con la herramienta Rectangle ry usamos la herramienta Selection vpara alterar los lados y los vrtices del

mismo, de forma que quede ligeramente

curvado y afilado en su parte superior.

DISEAR USANDO LAS FORMAS bsicas no est limitado a la creacin de personajes. En la mayora

de proyectos de Flash es aconsejable

empezar con formas primitivas sin que

tenga mucha importancia qu obje-

to estemos diseando, lo que incluye

accesorios y fondos. En su nivel ms

bsico, comenzaremos los diseos sim-

plemente con elipses y rectngulos y,

a partir de ah, construiremos poco a

poco imgenes ms complejas. Esta es

una de las mejores caractersticas del

trabajo con vectores: la capacidad de

deformarlos hasta conseguir cualquier

cosa que se desee; es casi como si fue-

ran de arcilla.


Formas geomtricas y

elipse. Despus, la giramos para que

adopte una posicin inclinada.

Luego, copindola y pegndola repe-

tidas veces, creamos el resto de

hojas, de distinto tamao. En este

punto no hay error posible, somos

nosotros quienes decidimos la apa-

riencia que tendr nuestro rbol.

VECTO

R I

LLU

STR

ATI

ON

: CH

RIS

GEO

RG

EN

ES

Cada rama es un duplicado de la forma

bsica del tronco que haremos pulsan-

do OA al tiempo que hacemos clic sobre el tronco y lo arrastramos a su

lugar correspondiente. Luego, basta con

modificar su orientacin y tamao para

dar forma a las ramas.

5 Activamos Snap to objects y arras-tramos un vrtice sobre otro hasta que encajen. Esta opcin faci-

lita la tarea de unir cuidadosamente

dos formas distintas. Para completar la

fachada de la pajarera, debemos crear

otro cuadrado y arrastrar, con la herra-

mienta Selection v, sus dos vrtices superiores hasta que encajen con los

dos vrtices inferiores del tringulo.

Para dar una impresin de perspectiva,

podemos inclinar un poco la forma con

la herramienta Distort, que es una sub-

seccin de Free Transform q.

ATAJOS

MAC WIN AMBOS

7

2 Repetimos el paso 1, copiando y pegando la elipse de forma que sugiera un follaje abundante. Como vemos, es necesario escalar, torcer y rotar las formas y situarlas en

posiciones diferentes a la original. Debemos crear una forma

orgnica no simtrica que ofrezca las imperfecciones que

aparecen en la naturaleza. Recordemos que no hay nada en

la naturaleza que sea perfectamente horizontal, vertical,

circular o cuadrado. Por este motivo, no es posible cometer

TRUCO

Es fcil com-

probar que cada

forma dispo-

ne de una caja

a su alrede-

dor. Esto es as

ya que tena-

mos activado

el modo Object

Drawing j en el momento

de su creacin.

De este modo,

podemos super-

poner objetos sin

fusionarlos unos

con otros.


orgnicas

errores, de hecho, los errores en las formas son bienveni-

dos. En la imagen se puede ver cmo hemos utilizado cuatro

elipses en total para dar forma a la copa del rbol. Podran

haber sido cinco, o tres, pero el resultado con cuatro es

satisfactorio. Lo cierto es que nada nos impide experimentar

con el nmero de elipses que deseemos. En este punto,

aadimos un pequeo matiz de textura mediante la

herramienta Brush b con un ligero matiz amarillo.

4 La pajarera est formada a partir de formas bsicas. En este caso, debemos activar la opcin Snap to objects, representada por el icono del imn en la barra de herramien-

tas, en el momento de seleccionar la herramienta Rectangle

r. Para crear un cuadrado perfecto, pulsamos la tecla Smientras arrastramos con la herramienta Rectangle. Con la

herramienta Subselection a, seleccionamos uno de los vr-tices y pulsamos D para borrarlo. El cuadrado es ahora un tringulo que giramos con la herramienta Free Transform

q mientras pulsamos la tecla S para restringir la rota-cin a ngulos de 45. Giramos el tringulo hasta que el lado

inferior sea plano y el superior, en punta.

6 Como es fcil suponer, las formas restantes que comple-tan la pajarera son tambin rectngulos y elipses. Debe-remos mantener activada la opcin Snap to objects, arrastrar

los vrtices adecuados, unos sobre otros, para unir formas y,

como dibujos de objeto que son, podremos superponer unas

formas sobre otras para completar la imagen.

81El primer ajuste que debemos realizar cuando usamos la herramienta Brush bes el grado de suavidad que deseamos aplicar. Esta opcin aparece junto a un control deslizante en el panel Properties cuando seleccionamos la herramienta Brush.

La cantidad precisa de suavizado que debemos aplicar depender de nuestras prefe-

rencias personales. Cuanto mayor sea el nmero, ms suave ser la lnea, y viceversa.

Para este personaje en concreto, vamos a seleccionar una cantidad baja de suavizado

porque pretendemos conservar una cierta cualidad orgnica en el trazado.

3Para mantener la coherencia con el estilo de boceto a mano alzada que esta-mos empleando, aadimos colores de relleno que se salgan ligeramente de los contornos de las formas. Esto se puede hacer de varias formas: pintando, por ejem-

plo, sobre una nueva capa bajo los trazos del boceto, o bien configurando el pincel

para que pinte por detrs de los trazos (Paint Behind) en la misma capa.

LA HERRAMIENTA BRUSH es pro-bablemente la ms verstil de todas las que tenemos a nuestra disposicin;

en particular, cuando la combinamos

con una tableta digitalizadora. Usare-

mos esta herramienta esencialmente

para dibujar formas de la manera ms natu-

ral posible, gracias a su soporte de niveles de

presin y grados de inclinacin.

Wacom es el fabricante de una serie de

tabletas digitalizadoras que funcionan

estupendamente en Flash. Las tabletas de

Wacom pueden funcionar junto con nues-

tro ratn, o bien reemplazarlo por completo.

Son muchos los diseadores que utilizan una

tableta con cualquier editor grfico, como

Adobe Photoshop y Adobe Illustrator.

Las circunstancias ms adecuadas para

utilizar la herramienta Brush dependen de

nuestras preferencias y estilo. Para este per-

sonaje en concreto, queremos lograr un esti-

lo gil, de bosquejo a mano, de modo que la

eleccin de Brush era obvia.


La herramienta Brush

AN

DREA

CH

ARA

CTE

R:

CO

PYRIG

HT

MU

DBU

BBLE

LLC

ATAJOS

MAC WIN AMBOS

9

2 Es necesario tener presente el propsito par el que este-mos diseando los personajes, en este caso: la anima-cin. La forma sigue a la funcin y el estilo de animacin

puede dictar a menudo el diseo de un personaje. Los ms

perfeccionistas querrn que cada mechn de pelo sea lo

ms individual posible. Para ello, debemos evitar disear el

cabello como un nico objeto plano y grande. Por el contra-

rio, dibujaremos mltiples mechones y bucles como objetos

4 El resultado final muestra el estilo de boceto que andbamos buscando. Los trazos son bas-tante naturales y reflejan las imperfecciones nor-

males del dibujo a mano alzada. Tengamos presente

que, en este caso, no se trata de lograr un diseo

TRUCO

Es interesante

experimentar

con diferen-

tes niveles de

ampliacin del

escenario mien-

tras dibujamos.

Personalmente,

prefiero dibujar

en una esca-

la ms grande y

con el escena-

rio ampliado en

un 400%. Como

resultado se

obtienen lneas

ms suaves.


independientes que se puedan mover individualmente. Para

ello, activamos el modo Object Drawing, que es una subsec-

cin de la herramienta Brush que nos permite dibujar formas

como objetos diferenciados. Estos objetos tienen la caracte-

rstica de que se pueden dibujar unos sobre otros sin que se

fusionen. Ms tarde, podemos seleccionar cada uno de estos

objetos con la herramienta Selection v y convertirlos en smbolos.

preciso y pulcro, sino que buscamos transmitir

el estilo imperfecto de los trazos a mano alzada.

Dicho estilo se presta para su uso en personajes

infantiles, por cuanto la limpieza del trazado es

similar a la que realizara un nio.

10

El panel Color de Flash se ha remodelado lige-ramente en la versin CS5.

En lugar de tener que decidir

entre HSB y RGB, ahora dis-

ponemos de ambos de forma

simultnea y podemos definir

los valores de color con pre-

cisin gracias a los controles

3 Con el color rosa seleccionado, mezclar la tonalidad ms oscura de rosa slo precisa de un pequeo ajuste en el brillo. La gran casilla con

la muestra de color de la parte inferior del panel

Color se dividir para mostrar el color actual,

resultado de la mezcla, encima del color original.

De este modo, contamos con una referencia visual

del contraste entre ambos.

1 Un procedimiento de trabajo tpico a la hora de mezclar colores consiste en hacer pulsar y arrastrar en la ventana del degrada-

do para seleccionar un color aproximado al que

buscamos. Con el color seleccionado, podemos

afinar los matices con los controles deslizantes.

Tanto el brillo como la saturacin tienen un papel

VECTO

R I

LLU

STR

ATI

ON

: CH

RIS

GEO

RG

EN

ES F

OR B

IG P

INK

EEEssstttiiilllooosss dddee dddiiissseeeooo

Mezclar colores

importante en todo proceso de diseo, y en nuestra

imagen de fondo, sirven para mantener los colores

apagados para que no tengamos que sobresatu-

rar los personajes que aadiremos despus. Como

observamos, el color principal de la casa tiene un

nivel bastante bajo de saturacin, pero el suficiente

brillo para conservar la claridad adecuada.

deslizantes. Nunca fue tan

sencillo ni preciso el proceso

de mezclar colores en Flash.

Los creativos de la agencia Big

Pink me encargaron una ani-

macin adecuada para nios

de entre 2 y 5 aos. Desde

el principio, fue obvio que,

dada la audiencia a la que se

destinaba la animacin, sta

debera mostrar una paleta de

colores suaves y atractivos al

mismo tiempo.

11

2 De nuevo, los colores de esta casa se apagan fcilmente slo bajando el nivel de saturacin mientras mante-

nemos el nivel de brillo relativamente

alto. El color verde del rbol est ligera-

mente ms saturado que el resto, pero

bastante atenuado en conjunto.

TRUCO

Es posible uti-

lizar el panel

Color de Flash

para seleccio-

nar cualquier

color en cual-

quier parte de

nuestra panta-

lla, fuera incluso

del propio Flash.

Para ello, basta

con pulsar sobre

la muestra de

color de relle-

no para activar

el selector de

color y, despus,

pulsar sobre la

zona del monitor

que contenga

el color que nos

interesa.

TTTTTrrrrruuuuucccccooooosssss cccccooooonnnnn FFFFFlllllaaaaassssshhhhh CCCCCCSSSSSSS555555

12

Los efectos de color avanzados nos permi-ten ajustar los canales rojo, verde y azul por separado, as como el canal alfa, de cual-

quier instancia de un smbolo. Podemos usar

esta opcin de diversas formas para sugerir

el tono de un diseo, por ejemplo. Veremos

cmo ajustar los valores de color de un sm-

bolo mediante los controles deslizantes RGB.

En la seccin Color Effect del panel Properties,

cambiamos el estilo a Advanced.

1Seleccionamos, en primer lugar, el smbolo que contiene nuestro dibu-jo. Luego, mediante los controles des-

lizantes, cambiamos el valor de rojo a

100% y a 0% el azul y el verde. De este

modo, se aplica un tono rojo a todo el

smbolo. Si repetimos esta operacin

VECTO

R I

LLU

STR

ATI

ON

: CH

RIS

GEO

RG

EN

ES

EEEssstttiiilllooosss dddee dddiiissseeeooo

Efectos de color avanzados

elevando el valor de verde mientras

bajamos los de rojo y azul, obtenemos

un tono global de color verde. Anlo-

gamente, si elevamos el valor de azul

mientras bajamos los de rojo y verde,

obtenemos un tono global de color azul.

13

2 Es obvio que slo con el rojo, el verde y el azul no tenemos suficiente. Sin embargo, mezclndolos adecuadamente podemos obtener una cantidad ilimitada

de tonalidades para nuestros diseos. En este caso, apa-

recen mezclados rojo y verde casi a partes iguales, mien-

tras que el azul est ausente por completo.

3 Si no tenemos suficiente con los porcentajes de rojo, verde y azul, podemos obtener ms colores mediante el ajuste de los valores de la columna derecha, que se

suman a los valores porcentuales de la columna izquierda.

Si, por ejemplo, el valor de rojo es del 100% y situamos el

de la izquierda en 50%, y, luego, el de la columna en 100%,

obtenemos un valor de 150%, resultado de (100 0,5) + 100.

TRUCO

Los valores

avanzados de

color tambin se

pueden animar,

modificndolos

a lo largo del

tiempo mediante

interpolaciones

de movimiento.

TTTTTrrrrruuuuucccccooooosssss cccccooooonnnnn FFFFFlllllaaaaassssshhhhh CCCCCCSSSSSSS555555

Documents

Extracto Del Libro