GUIA 2. Tema: Trazos y rellenos. Trazos y rellenos. Qué es un gráfico vectorial? Qué es mapa de bits? Objetivo General. Objetivos Específicos

Transcripción

1 GUIA 2 Tema: Trazos y rellenos Objetivo General Lograr que los estudiantes desarrollen su conocimiento en Adobe Flash con el uso de las formas de dibujo básicas del programa: Trazos y rellenos Objetivos Específicos - Que el estudiante sea capaz reconocer las diferencias entre gráficos vectoriales y gráficos de mapas de bits - Que los alumnos reconozcan las diferencias, ventajas y desventajas de los trazos y rellenos Contenidos Gráficos vectoriales vs bitmaps Trazos y rellenos Combinación y dibujo de objetos Degradados de color Materiales y Equipo Guía 2, previamente leída Qué es un gráfico vectorial? Flash puede trabajar con ambos tipos de gráficos: Crea nativamente gráficos vectoriales y puede importar mapas de bits. Sin embargo, siempre hay que tomar en cuenta que los bitmaps añaden peso al archivo y que importar demasiados puede sobrecargar la animación y por ende la capacidad de la computadora para mover esos gráficos o añadirles efectos especiales. Trazos y rellenos Flash nos permite crear formas de dos tipos: Trazos (o líneas) y rellenos. Podríamos considerar los trazos como el contorno de una figura y los rellenos como el color dentro de de ese contorno; sin embargo, como veremos más adelante, esto no es del todo cierto puesto que también podemos utilizar las herramientas de relleno para crear contornos. Lo importante es aprender a usar ambos tipos de formas de acuerdo a qué queramos diseñar y cuál sea nuestro estilo de dibujo. Para poder identificar estas herramientas podemos prestar atención a la figura 1: Un gráfico vectorial es un tipo de gráfico que contiene información matemática de forma, posición, color y tamaño para ser dibujado o representado por la computadora. Como los gráficos vectoriales solo constan de información, suelen ser archivos de poco tamaño que se pueden descargar rápidamente y que pueden escalarse a cualquier tamaño sin pérdida de calidad. Qué es mapa de bits? Un mapa de bits o Bitmap es un gráfico representado por una malla de pixeles cuya cantidad en dicha malla determina la calidad de la imagen. Dependiendo del número de pixeles, estas imágenes pueden ocupar mucho espacio en el archivo y al ser escalados a tamaños superiores -o incluso inferiores- suelen perder calidad. figura 1

2 La herramienta de líneas nos permite precisamente eso: crear líneas rectas que pueden unirse o no con otras. La herramienta de lápiz también puede crear líneas pero nos da más libertad para crear figuras con líneas rectas o curvas. La herramienta de pincel nos permite dibujar con la misma libertad que el lápiz pero haciendo uso de rellenos. También tenemos herramientas que combinan el uso de ambos tipos de dibujo para la creación de figuras geométricas: rectángulo, óvalo y polystar. Finalmente, podemos utilizar el bote de pintura para aplicar o sustituir rellenos en cualquier tipo de figura y el bote de tinta para crear contornos en figuras que no los tengan, así como cambiar el color de contornos en figuras que ya lo tengan. Podemos ver un ejemplo de esto en la figura 2. Dibujo Combinado figura 2 Además de poder elegir entre trazos y rellenos, Flash nos dejará crear cualquiera de estos formas en dos modos diferentes: dibujo combinado y dibujo de objeto. Los dibujos creados en el modo combinado pueden integrarse a otros dibujos para fusionarse entre sí, de tal forma que formen un solo objeto. Si luego de combinarse dos dibujos seleccionamos uno de ellos y lo separamos del otro, notaremos que quedará un área incompleta en cualquiera de los dibujos, justo donde se hizo la separación. Podemos apreciar un ejemplo de lo anterior en la figura 3. figura 3 Dibujo de objeto Por el contrario, si creamos figuras en Flash en el modo de Dibujo de Objeto, notaremos en primer lugar que cada forma parece estar encapsulada dentro de un rectángulo de color azul oscuro, esto mantiene a las figuras separadas de cualquier otra en la que entren en contacto, como se puede ver en la figura 4. Además, los dibujos de objeto mantienen las mismas posibilidades de edición que los dibujos combinados, es decir, podemos cambiar su color y dimensiones, así como alterar su forma misma desde el escenario. figura 4

3 Para usar cualquiera de estos modos es necesario prestar atención al modificador Dibujo de objeto de las herramientas de dibujo que estemos utilizando. Tanto para las figuras geométricas como para las herramientas de trazo y relleno, aparecerá el ícono del modificador en el espacio para modificadores de la barra de herramientas. Mientras está inactivo, se verá de color gris claro y podremos crear objetos combinables; si está activo, se verá de color gris oscuro y tendrá un recuadro negro a su alrededor, entonces podremos crear dibujos de objeto. figura 6 Existen otras dos formas de encapsulado de objetos: el dibujo simple (solo para las formas geométricas óvalo y rectángulo) y la agrupación de objetos (para cualquier objeto) Las formas simples las podemos encontrar dentro de las herramientas de óvalo y rectángulo. Funcionan prácticamente igual que los dibujos de objeto, con la diferencia de que nos permiten alterar algunas características del objeto incluso después de haberlo creado. Por ejemplo, si en dibujo de objeto queremos crear un rectángulo cuyas esquinas estén redondeadas, es necesario especificar esta característica en el inspector de propiedades antes de dibujar el rectángulo en el escenario. De otro modo, una vez dibujado el rectángulo, no podremos alterar esta característica en ese objeto. En cambio, si dibujamos el mismo rectángulo con la forma simple, podremos modificar esta característica en el panel de propiedades cada vez que seleccionemos el objeto. Tenemos ejemplos de esto en las figuras 5 y 6. La última opción para encapsular un objeto es agrupándolo. Esto se logra seleccionando el objeto y luego presionando Ctrl+G, o en el menú-->modificar-->agrupar. En este caso, la figura queda restringida por un recuadro de color celeste y no es posible editarla a menos que demos doble click a la figura para acceder al interior del grupo. Luego de hacer doble click en un grupo, podremos saber que nos encontramos dentro del objeto agrupado si observamos la esquina superior izquierda del escenario. Ahí veremos un recuadro que nos indica que estamos en la escena 1 (en este caso), y hacia la derecha veremos la palabra Grupo (figura 7). Una vez aquí, podremos alterar la forma, dimensiones o colores del objeto. Para regresar al escenario principal, simplemente damos click a Escena 1 y Flash nos llevará fuera del objeto agrupado. Si por alguna razón queremos eliminar cualquiera de los encapsulamientos que hemos visto (Dibujo de objeto, dibujo simple, grupos) Basta con presionar Ctrl+B o en menú-->modificar-->separar. figura 5 figura 7

4 Modificadores de lápiz y pincel El modificador del lápiz de flash sirve para tratar de ayudarnos a corregir un poco las líneas o curvas irregulares que dibujemos en el escenario (El tamaño del lápiz se configura en el pánel de propiedades). Si seleccionamos el lápiz y luego damos click a su modificador veremos tres posibles opciones: Enderezar, suavizar y tinta. Las primeras dos opciones nos proveen de ayuda para convertir trazos irregulares en formas más estables,mientras que la opción tinta deja sin modificaciones cualquier trazo que hayamos creado. figura 8 Esta ayuda, por supuesto, solo corrige irregularidades pequeñas y la mejor forma de entender esto es poniendo a prueba el modificador, como en la figura 8. El pincel, por otro lado, tiene más opciones de modificación, como podemos ver en la figura 9. Además de poder crear dibujos de objeto, tenemos un modificador para trabajar colores en degradados (que veremos más adelante), otro para cambiar tamaño y forma del pincel y uno más para cambiar los modos posibles de pintura. Nos centraremos en este último. figura 9 El primer modo de este modificador es Pintar normal, y como su nombre lo indica, simplemente significa que las figuras hechas con este modo pintan encima de otras ya creadas en el escenario. Pintar rellenos indica que las figuras hechas con este modo solamente afectarán otros rellenos en el escenario, pero respetarán cualquier trazo o línea que encuentren a su paso. Pintar detrás colocará cualquier figura hecha con este modo detrás o debajo de otros dibujos en el escenario, sean rellenos o sean trazos. Pintar selección dejará que las nuevas figuras solamente afecten los rellenos que hayan sido seleccionados previamente (con la herramienta de selección). Los rellenos no seleccionados no sufrirán ninguna alteración. Pintar dentro. Este modo nos permite pintar al interior de un relleno determinado sin seleccionarlo previamente y sin afectar los rellenos a su alrededor; pero para poder aplicarlo es necesario siempre iniciar el dibujo dentro de ese relleno. Podemos ver un ejemplo de cada uno de estos modos en la figura 10. Cerrar huecos El bote de pintura posee también un modificador muy importante que sirve para cerrar algunos espacios que pudieran haber quedado en un diseño determinado. figura 10

5 Esto depende, por supuesto, de qué tan grande sea el espacio que se necesita cerrar con el bote de pintura. En la figura 11 podemos observar las opciones posibles de tamaños de hueco que el modificador puede cerrar. Hay que tomar en cuenta que incluso con la opción cerrar huecos grandes siempre habrá espacios demasiado grandes como para que Flash interprete que ahí debe hacer algún cierre. Degradados de color Además de poder seleccionar colores sólidos para rellenar con el bote de pintura, es posible aplicar colores en degradado. Esta opción se encuentra dentro de las muestras que se presentan al darle click al bote de pintura y luego en el recuadro de selección de color. figura 11 En la parte baja de las muestras normales se pueden apreciar los posibles degradados que ofrece Flash por defecto, tal como se puede ver en la figura 12. El degradado se puede aplicar también con cualquier figura geométrica (óvalo, rectángulo, polystar) que se vaya a crear. Podemos controlar la dirección y extensiones de color de un degradado utilizando la herramienta de trasformación de degradado que se encuentra oculta bajo la herramienta de transformación libre. Seleccionamos el degradado que queremos manipular y veremos los controles que nos proporciona Flash para esa tarea. Por otro lado, también es posible crear degradados personalizados dentro de la pestaña color. Si seleccionamos un degradado, esta pestaña nos mostrará una barra horizontal con los colores que ya posee el degradado y aquí mismo podremos cambiar, eliminar o añadir nuevos colores, así como cambiar sus posiciones y su rango de influencia. Ejemplo de esto lo podemos ver en la figura 13. figura 12 Finalmente, es bueno saber que dentro de esta pestaña también podemos elegir entre dos opciones de degradado: lineal y circular, además de tres modos de flujo: color ampliado, reflejar color y repetir color. Si tenés curiosidad, podés jugar con estas opciones para observar que hacen exactamente. A continuación haremos algunos ejercicios para practicar los conocimientos que hemos estudiado en esta guía. Si tenés preguntas, No las guardés en tu mente! preguntale al instructor, y si tenés algún problema con los ejercicios también consultá tanto como necesités. Si terminás la práctica antes de que acabe el tiempo estipulado, tratá de hacer más cosas en Flash, probá otras herramientas y sus modificadores, o revisá los menús para ver qué más cosas se pueden hacer. Flash es un programa muy extenso y mientras más tiempo le dediqués, mejores creaciones te ayudará a hacer. figura 13

6 Ejercicio 1: Diseño Cambiá el tamaño del escenario Procedimiento Leé bien todas las indicaciones antes de empezar 1. Abrí Flash y creá un nuevo documento. En el panel de propiedades dale click a las dimensiones que aparezcan en tamaño y cambialas a 640 x 420 px. Una vez hecho esto, da Ctrl+S (o menú-->archivo-->guardar) y ponele un nombre al archivo para guardarlo (no vaya a ser!). 2. Con la figura 15 de referencia, usá la herramienta de lápiz y tratá de dibujar el mismo paisaje (no coloreés todavía). El tamaño del trazo debe ser de 2.00 y el color negro. Hacé uso de los modificadores cuando sea necesario para suavizar o estabilizar tus líneas. No es necesario que tu dibujo sea idéntico al de la referencia, pero todos los elementos deben estar presentes y en las mismas posiciones. TIP-1: Cuando tenemos la herramienta de selección activada y acercamos el cursor a la esquina o extremo de un trazo, el cursor mostrará dos líneas en ángulo recto en su parte inferior, esto significa que podemos alargar o deformar el trazo al arrastrar el cursor. De igual modo, si nos posicionamos en la parte media de un trazo, el cursor mostrará una pequeña curva, esto significa que podemos convertir una línea recta en curva o modificar una curva ya creada. Ejemplo de esto podés verlo en la figura 14. figura 14 figura 15

7 TIP-2: Si tenemos muchos elementos en pantalla, unos sobre otros, es útil separarlos en capas para poder tener un mejor control y visión sobre ellos. Aunque también podemos darles un color temporal para diferenciarlos más fácilmente, hay que recordar que podemos utilizar la opción capas como contornos para distinguirlos más rápidamente. Para esto, hay que darle un click al ícono de las capas que parece un pequeño rectángulo de color, esto cambiará la vista de cualquier objeto al interior de la capa automáticamente a una figura como de alambre. También podemos dar doble click al ícono y cambiar el color del contorno en la ventana emergente que aparece, como podemos ver en la figura 16. Otra opción es agrupar aquellos dibujos que ya hayamos terminado antes de iniciar los siguientes. Dado que estaremos creando muchas líneas individuales, no es conveniente usar el dibujo de objeto. TIP-3: A veces los objetos quedan torcidos o necesitamos cambiarlos de tamaño. Para hacer esto podemos usar la herramienta de transformación libre. Primero, seleccionamos el objeto (un click en una línea selecciona la línea hasta el primer punto de unión con otra, dos clicks seleccionan todas las líneas unidas) y luego activamos la herramienta de transformación libre de la barra de herramientas, notaremos un contorno negro alrededor del objeto. Ahora, acercamos el cursor a un lado del objeto si queremos sesgar la figura o hacia una de las esquinas si queremos escalar o rotar, el cambio de imagen en el cursor nos indicará lo uno o lo otro, figura 17. figura 16 figura 17 TIP-4 Cuando se dibuja con el lápiz o con la herramienta de línea, es más sencillo crear un objeto encima de otro y luego borrar las líneas que sobren. Para esto, basta con seleccionar aquellas líneas que no formen parte del diseño y luego presionar la tecla Suprimir (o Delete) en el teclado, tal como se aprecia en la figura Ejercicio 2: Colorear! figura 18 Procedimiento Leé bien todas las indicaciones antes de empezar 1. Una vez finalizado el diseño del paisaje ((y si todavía queda tiempo)), hay que darle color a cada una de las partes de la selva. Podés usar de referencia la figura19 para los colores o utilizar los que más te gusten a vos. Sin embargo, lo que sí tenés que tener en cuenta es que el cielo debe tener un degradado radial de tres colores, las montañas un degradado lineal de dos colores y el suelo también un degradado lineal de dos colores. Tampoco deben quedar espacios sin pintar. Duda: Podrías dar sombras o brillos a los objetos sin que los colores se salgan de las líneas? Si se te ocurre un método fácil, hacelo, anotalo y compartilo en la próxima clase. Nos vemos!

8 figura 19

9

10