extracto del libro
Post on 10-Mar-2016
217 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
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.
EEEssstttiiillooosss dddeee dddiiissseeeoo
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.
TTTTTrrruuucccooosss cccooonnn FFFFFlllllaaassshhhhh CCCCCCSSSSSSS555555
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.
EEEssstttiiillooosss dddeee dddiiissseeeoo
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.
TTTTTrrruuucccooosss cccooonnn FFFFFlllllaaassshhhhh CCCCCCSSSSSSS555555
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
top related