2. Creación de gráficos y texto

Descripción general de la lección

• Dibujar rectángulos, óvalos y otras formas
• Modificar la forma, el color y el tamaño de los objetos dibujados
• Comprender la configuración de relleno y trazo
• Crear y editar curvas y trazos de ancho variable
• Usar pinceles artísticos y de patrón para dibujos expresivos
• Editar colores rápidamente con muestras etiquetadas
• Aplicar degradados y transparencias
• Crear y editar texto
• Agregar fuentes web en documentos HTML5 Canvas
• Distribuir objetos en el escenario
• Exportar ilustraciones a SVG

Esta lección tardará aproximadamente 120 minutos en completarse. Descargue los archivos del proyecto para esta lección desde la pestaña Productos registrados en la página de su cuenta en www.peachpit.com (haga clic en el enlace Acceder al contenido adicional) y guárdelos en su computadora en una ubicación conveniente, como se describe en la sección Introducción de este libro. La página de su cuenta también es donde encontrará cualquier actualización de las lecciones o de los archivos de las lecciones.

Puede utilizar rectángulos, óvalos, líneas y pinceles artísticos o de patrón personalizados para crear gráficos e ilustraciones interesantes y complejos en Adobe Animate CC. Edite sus formas y combínelas con degradados, transparencias, texto y filtros para obtener posibilidades expresivas aún mayores.

Introducción

Comience viendo la película terminada para ver el proyecto que creará en esta lección.

1. Haga doble clic en el archivo 02End.html en la carpeta Lesson02/02End para ver el proyecto final en un navegador.

Nota:

Si aún no ha descargado los archivos del proyecto para esta lección en su computadora desde la página de su cuenta, asegúrese de hacerlo ahora. Consulte Introducción al principio del libro.

El proyecto es una ilustración estática simple para un anuncio publicitario. Esta ilustración es para Mug's Coffee, una cafetería ficticia que promociona su tienda y café. En esta lección, dibujará las formas, las modificará y aprenderá a combinar elementos simples para crear imágenes más complejas. No creará ninguna animación todavía. ¡Después de todo, debes aprender a caminar antes de poder correr! Y aprender a crear y modificar gráficos es un paso importante antes de realizar cualquier animación con Animate.

2. En Animate, elija Archivo > Nuevo. En el cuadro de diálogo Nuevo documento, elija HTML5 Canvas.
3. En el lado derecho del cuadro de diálogo, haga que el tamaño del escenario sea de 700 píxeles por 200 píxeles y que el color del escenario sea marrón claro haciendo clic en el icono junto a Color de fondo y luego haciendo clic en la muestra de color #CC9966. Haga clic en Aceptar.
4. Elija Archivo > Guardar. Asigne al archivo el nombre 02_workingcopy.fla y guárdelo en la carpeta 02Start. Guardar su archivo de inmediato es un buen hábito de trabajo (incluso si ha habilitado la función de recuperación automática). Garantiza que no perderá su trabajo si la aplicación o su computadora falla.

Comprender los trazos y rellenos

Cada gráfico en Animate comienza con una forma. Una forma consta de dos componentes: el relleno, o el interior de la forma, y el trazo, o los contornos de la forma. Si siempre tiene en cuenta estos dos componentes, estará en camino de crear imágenes hermosas y complicadas.

El relleno y el trazo funcionan independientemente uno del otro, por lo que puede modificar o eliminar cualquiera de ellos sin afectar al otro. Por ejemplo, puede crear un rectángulo con un relleno azul y un trazo rojo, y luego cambiar el relleno a púrpura y eliminar el trazo rojo por completo. Te quedará un rectángulo morado sin contorno. También puede mover el relleno o el trazo de forma independiente, por lo que si desea mover toda la forma, asegúrese de seleccionar tanto su relleno como su trazo.

Creando formas

Animate incluye varias herramientas de dibujo, que funcionan en diferentes modos de dibujo. Muchas de sus creaciones comenzarán con formas simples como rectángulos y óvalos, por lo que es importante que se sienta cómodo dibujándolas, modificando su apariencia y aplicando rellenos y trazos.

Comenzarás dibujando la taza de café.

Nota:

En Animate CC, así como en documentos HTML y en el diseño y desarrollo web en general, los colores a menudo se especifican mediante números hexadecimales. Los seis dígitos después del signo # representan las contribuciones roja, verde y azul al color.

Usando la herramienta Rectángulo

La taza de café es esencialmente un cilindro, que es un rectángulo con un óvalo en la parte superior y un óvalo en la parte inferior. Comenzará dibujando el cuerpo rectangular. Es útil dividir los objetos complicados en sus partes componentes para facilitar su dibujo.

1. En el panel Herramientas, seleccione la herramienta Rectángulo ( ). Asegúrese de que el icono del modo Dibujo de objetos ( ) no esté seleccionado.
2. Elija un color de trazo ( ) y un color de relleno ( ) en la parte inferior del panel Herramientas. Elija #663300 (marrón oscuro) para el trazo y #CC6600 (marrón claro) para el relleno.
3. En el escenario, dibuje un rectángulo que sea un poco más alto que ancho. Especificará el tamaño y la posición exactos del rectángulo en el paso 6.
4. Seleccione la herramienta Selección ( ).
5. Arrastre la herramienta Selección alrededor de todo el rectángulo para seleccionar su trazo y su relleno. Cuando se selecciona una forma, Animate la muestra con puntos blancos. También puede hacer doble clic en una forma y Animate seleccionará tanto el trazo como el relleno de la forma.
6. En el panel Propiedades, sección Posición y tamaño, ingrese 130 para el ancho y 150 para el alto. Presione Entrar (Windows) o Retorno (Mac) para aplicar los valores.

Nota:

Aunque hemos establecido el color del escenario en marrón, muchas figuras en este capítulo están configuradas sobre un fondo blanco para mejorar la visibilidad de la herramienta o técnica que se describe.

Usando la herramienta Óvalo

Ahora creará la abertura en la parte superior y la parte inferior redondeada.

1. En el panel Herramientas, seleccione la herramienta Óvalo.
2. Asegúrese de que el botón Ajustar a objetos ( ) esté presionado. Esta opción fuerza a que las formas que dibuje en el escenario se ajusten entre sí para garantizar que las líneas y las esquinas se conecten entre sí.
3. Haga clic dentro del rectángulo y arrastre a través de él para hacer un óvalo dentro del rectángulo. Ajustar a objetos hace que los lados del óvalo se conecten a los lados del rectángulo.
4. Dibuja otro óvalo cerca de la parte inferior del rectángulo.

Nota:

El último relleno y trazo que usó se aplican a los siguientes objetos que cree, a menos que cambie la configuración antes de dibujar.

Haciendo selecciones

Para modificar un objeto, primero debe poder seleccionar diferentes partes del mismo. En Animate, puede realizar selecciones utilizando la herramienta Selección, Subselección o Lazo. Normalmente, utiliza la herramienta Selección para seleccionar un objeto completo o una sección de un objeto. La herramienta Subselección le permite seleccionar un punto o línea específico en un objeto. Con la herramienta Lazo, puede realizar una selección de forma libre.

Seleccionar trazos y rellenos

Ahora hará que el rectángulo y los óvalos se parezcan más a una taza de café. Utilizará la herramienta Selección para eliminar trazos y rellenos no deseados.

1. En el panel Herramientas, seleccione la herramienta Selección ( ).
2. Haga clic en el relleno sobre el óvalo superior para seleccionarlo. La forma sobre el óvalo superior está resaltada.
3. Presione la tecla Retroceso (Windows)/Eliminar (Mac). El relleno se borra del área seleccionada.
4. Haga clic con la tecla Mayúsculas presionada en cada uno de los tres segmentos de línea sobre el óvalo superior para seleccionarlos todos y presione Retroceso/Eliminar.

Animate elimina los trazos individuales, dejando el óvalo superior conectado al rectángulo.

5. Ahora, seleccione con la tecla Mayúsculas presionada el relleno y los trazos debajo del óvalo inferior, así como el arco superior del óvalo (que representa el interior de la parte inferior de la taza) y presione Retroceso/Eliminar.

La forma restante aparece como un cilindro.

Consejo:

Si presiona la tecla Opción o Alt mientras mueve uno de los puntos de control, Animate escala el objeto seleccionado en relación con su punto de transformación, representado por el icono de círculo. Puede mover el punto de transformación a cualquier lugar, incluso fuera del objeto. Presione Mayús para restringir las proporciones del objeto. Mantenga presionada la tecla Ctrl/Comando para distorsionar el objeto desde un solo punto de control.

3. En el panel Color, seleccione el puntero de color en el extremo izquierdo de la barra de definición de degradado de color (el triángulo sobre él se vuelve negro cuando se selecciona) y luego escriba FFCCCC en el campo de valor hexadecimal para especificar un color tostado claro. Presione Entrar/Retorno para aplicar el color. También puede seleccionar un color del selector de color o hacer doble clic en el puntero de color para seleccionar un color de las muestras de color.
4. Seleccione el puntero de color del extremo derecho y luego ingrese B86241 para un color tostado oscuro. Presione Entrar/Retorno para aplicar el color.

El relleno de degradado para la taza de café cambia gradualmente de tostado claro a tostado oscuro en su superficie.

5. Haga clic debajo de la barra de definición de degradado para crear un nuevo puntero de color.
6. Arrastre el nuevo puntero de color al centro del degradado.
7. Seleccione el nuevo puntero de color y luego escriba FFFFFF en el campo de valor hexadecimal para especificar blanco para el nuevo color. Presione Entrar/Retorno para aplicar el color.

El relleno de degradado para la taza de café cambia gradualmente de tostado claro a blanco a tostado oscuro.

8. Anule la selección del relleno en el Escenario haciendo clic en otra parte del Escenario. Seleccione la herramienta Bote de pintura y asegúrese de que el botón Bloquear relleno ( ) en la parte inferior del panel Herramientas no esté seleccionado.

Consejo:

Si el botón Bloquear relleno no está visible en su panel Herramientas, amplíe el panel arrastrando el borde izquierdo (como se explica en la Lección 1). Esto permite mostrar varias columnas de herramientas.

La opción Bloquear relleno bloquea el degradado actual a la primera forma a la que se aplicó para que las formas posteriores extiendan el degradado. Deseará un nuevo degradado para la superficie posterior de la taza de café, por lo que la opción Bloquear relleno debe estar deseleccionada.

9. Con la herramienta Bote de pintura, seleccione la superficie posterior de la taza de café.

Animate aplica el degradado a la superficie posterior.

Consejo:

Para eliminar un puntero de color de la barra de definición de degradado, simplemente arrástrelo fuera de la barra.

Usando la herramienta Transformación de degradado

Además de elegir colores y colocar los punteros de color para un degradado, puede ajustar el tamaño, la dirección o el centro de un relleno de degradado. Para comprimir el degradado en la superficie frontal e invertir el degradado en la superficie posterior, utilizará la herramienta Transformación de degradado.

1. Seleccione la herramienta Transformación de degradado. (La herramienta Transformación de degradado está agrupada con la herramienta Transformación libre).
2. Haga clic en la superficie frontal de la taza de café. Aparecen controladores de transformación.
3. Arrastre el controlador cuadrado en el lado derecho del cuadro delimitador hacia adentro para comprimir el degradado con más fuerza. Arrastre el círculo central para mover el degradado hacia la izquierda para que el resaltado blanco se coloque ligeramente a la izquierda del centro.
4. Ahora haga clic en la superficie posterior de la taza de café. Aparecen controladores de transformación.
5. Arrastre el controlador redondo en la esquina del cuadro delimitador para rotar el degradado 180 grados para que el degradado se desvanezca de tostado oscuro a la izquierda a blanco a tostado claro a la derecha. Estreche el degradado y muévalo ligeramente hacia la derecha, para que el resaltado caiga en el lado derecho de la superficie interior.

La taza de café ahora se ve más realista porque las sombras y los reflejos hacen que parezca que la superficie frontal es convexa y la superficie posterior es cóncava.

Consejo:

Mueva el círculo central para cambiar el centro del degradado, arrastre el círculo de flecha para rotar el degradado o arrastre la flecha en el cuadrado para estirar o comprimir el degradado.

Agregar un relleno de mapa de bits

Hará que esta taza de café sea un poco más elegante agregando una capa espumosa de crema. Utilizará una imagen JPEG de espuma como relleno de mapa de bits.

1. Seleccione la superficie superior del café con la herramienta Selección.
2. Elija Ventana > Color para abrir el panel Color.
3. Elija Relleno de mapa de bits en el menú Tipo de color.
4. En el cuadro de diálogo Importar a la biblioteca, navegue hasta el archivo coffeecream.jpg en la carpeta Lesson02/02Start.
5. Seleccione el archivo coffeecream.jpg y haga clic en Abrir.

La superficie superior del café se llena con la imagen de espuma.

¡La taza de café está completa! Cambie el nombre de la capa que contiene su dibujo completo de taza de café. Todo lo que queda por hacer es agregar un poco de vapor caliente.

Consejo:

También puede usar la herramienta Transformación de degradado para cambiar el ancho, la orientación, el tamaño o la rotación de un relleno de mapa de bits.

Agrupación de objetos

Ahora que ha terminado de crear su taza de café, puede convertirla en un solo grupo. Un grupo mantiene unida una colección de formas y otros gráficos para preservar su integridad. Cuando los elementos que componen la taza de café se agrupan, puede moverlos como una unidad sin preocuparse de que la taza se fusione con las formas subyacentes. Utilice grupos para organizar su dibujo.

1. Seleccione la herramienta Selección.
2. Seleccione todas las formas que componen la taza de café.
3. Elija Modificar > Agrupar.

La taza de café ahora es un solo grupo. Cuando lo selecciona, un contorno azul indica su cuadro delimitador.

4. Si desea cambiar alguna parte de la taza de café, haga doble clic en el grupo para editarlo. Observe que todos los demás elementos en el Escenario se atenúan y la barra de edición sobre el Escenario muestra Escena 1 Grupo. Esto indica que ahora se encuentra en un grupo en particular y puede editar su contenido.
5. Haga clic en el icono Escena 1 en la barra de edición en la parte superior del Escenario, o haga doble clic en una parte vacía del Escenario y vuelva a la escena principal.

Consejo:

Para volver a convertir un grupo en sus formas componentes, elija Modificar > Desagrupar (Mayús+Ctrl+G/Mayús+Comando+G).

Usar trazos de ancho variable

Puede crear muchos estilos diferentes de líneas para sus trazos. Además de una línea sólida, puede elegir punteada, discontinua o irregular, o incluso personalizar la suya propia. Además, puede crear líneas con anchos variables y editar las variaciones con la herramienta Ancho.

En esta lección, utilizará la herramienta Lápiz para crear líneas de ancho variable para representar el aroma que emana del café. También hará que el aroma sea ligeramente transparente. La transparencia se mide como un porcentaje y se conoce como alfa. Un valor alfa del 100% indica que un color es totalmente opaco, mientras que un valor alfa del 0% indica que un color es totalmente transparente.

Agregar líneas de ancho variable

Ahora agregará algunas líneas caprichosas sobre su ilustración de café para darle algo de personalidad.

1. En la Línea de tiempo, inserte una nueva capa y asígnele el nombre aroma de café. Dibujarás tus líneas en esta capa.
2. En la barra de herramientas, seleccione la herramienta Lápiz ( ). Elija Suave en el menú Modo de lápiz en la parte inferior del panel Herramientas.
3. En el panel Propiedades, seleccione un color de trazo marrón oscuro con un valor alfa del 50%.
4. Para Trazo, ingrese 15 para el tamaño del trazo. En el menú Estilo, elija Sólido y, en el menú Ancho, elija el perfil grueso y delgado, Perfil de ancho 2.
5. Dibuja algunas líneas onduladas sobre el café.

Animate renderiza cada línea con un ancho grueso y delgado. Aunque aparece como una forma complicada, todo el objeto es un solo trazo seleccionable.

Consejo:

Edite líneas de ancho variable como lo haría con cualquier otro trazo. Utilice la herramienta Selección o Subselección para doblar las curvas o mover los puntos de ancla.

Editar el ancho de las líneas

Puede ajustar dónde aparecen las protuberancias en sus líneas y cuánto hay una protuberancia. Utilice la herramienta Ancho para realizar esas ediciones.

1. En el panel Herramientas, seleccione la herramienta Ancho ( ).
2. Mueva el puntero del mouse sobre uno de sus trazos de ancho variable.

Aparecen puntos de ancla a lo largo de la línea para mostrarle dónde se encuentran las partes gruesas y delgadas de la línea.

3. Arrastre los controladores en cualquier punto de ancla para cambiar el ancho de la línea. Exagere algunas de las restricciones y protuberancias.
4. Arrastre un punto de ancla a lo largo del trazo para mover su ubicación.
5. Arrastre en cualquier lugar a lo largo del trazo para agregar un nuevo punto de ancla y definir el ancho en esa ubicación. Animate muestra un pequeño signo más junto al puntero para indicar que puede agregar un punto de ancla.

Consejo:

Mantenga presionada la tecla Alt/Opción cuando desee modificar solo un lado de una línea de ancho variable.

Consejo:

Para eliminar un punto de ancla de una línea de ancho variable, haga clic para seleccionar el punto de ancla y presione Retroceso/Eliminar.

Usar muestras y muestras etiquetadas

Las muestras son muestras preestablecidas de color. Acceda a ellos a través del panel Muestras (Ventana > Muestras o Ctrl+F9/Comando+F9). También puede guardar los colores que ha utilizado en sus gráficos como nuevas muestras para que siempre pueda consultarlos.

Las muestras etiquetadas son muestras especialmente marcadas que están vinculadas a los gráficos en su Escenario que las están utilizando. Si cambia una muestra etiquetada en su panel Muestras, todos sus gráficos que usan la muestra etiquetada se actualizarán.

Guardar una muestra

Guardará una muestra para el color marrón que usó para las briznas de vapor de café sobre la taza.

1. Seleccione la herramienta Selección y haga clic en uno de los trazos de ancho variable sobre su taza de café.
2. Abra el panel Muestras (Ctrl+F9/Comando+F9) o haga clic en el icono Muestras.

Se abre el panel Muestras, que muestra los colores predeterminados con degradados en la fila inferior.

Edición de formas

Al dibujar en Animate, a menudo comenzará con las herramientas Rectángulo y Óvalo. Pero para crear gráficos más complejos, utilizará otras herramientas para modificar esas formas base. La herramienta Transformación libre, los comandos Copiar y Pegar y la herramienta Selección pueden ayudar a transformar el cilindro simple en una taza de café.

Usando la herramienta Transformación libre

La taza de café se verá más realista si reduce el borde inferior. Utilizará la herramienta Transformación libre para cambiar su forma general. Con la herramienta Transformación libre, puede cambiar la escala, la rotación o la inclinación de un objeto (la forma en que está inclinado), o distorsionar un objeto arrastrando puntos de control alrededor de un cuadro delimitador.

1. En el panel Herramientas, seleccione la herramienta Transformación libre ( ).
2. Arrastre la herramienta Transformación libre alrededor del cilindro en el Escenario para seleccionarlo. Aparecen controladores de transformación en el cilindro.
3. Mantenga presionada la tecla Mayús+Ctrl/Mayús+Comando mientras arrastra una de las esquinas inferiores hacia adentro. Mantener presionadas estas teclas mientras arrastra le permite mover ambas esquinas a la misma distancia simultáneamente.
4. Haga clic fuera de la forma para anular la selección.

La parte inferior del cilindro es estrecha y la parte superior es ancha. Ahora se parece más a una taza de café.

Usar Copiar y Pegar

Utilice los comandos Copiar y Pegar para duplicar fácilmente formas en el Escenario. Establecerá el nivel de la superficie del café copiando y pegando el borde superior de la taza de café.

1. Seleccione la herramienta Selección. Mantenga presionada la tecla Mayús y seleccione el arco superior y el arco inferior de la abertura de la taza de café.
2. Elija Editar > Copiar (Ctrl+C/Comando+C). Se copian los trazos superiores del óvalo.
3. Elija Editar > Pegar en el lugar (Mayús+Ctrl+V/Mayús+Comando+V).

Aparece un óvalo duplicado en el Escenario, superpuesto exactamente al original que copió. El duplicado permanece seleccionado.

4. En el panel Herramientas, seleccione la herramienta Transformación libre. Aparecen controladores de transformación en el óvalo.
5. Presione la tecla Mayús mientras arrastra una esquina hacia adentro. Haga que el óvalo sea aproximadamente un 10 por ciento más pequeño. Presionar la tecla Mayús le permite cambiar la forma de manera uniforme para que el óvalo mantenga su relación de aspecto.

El borde superior de la taza de café está en su lugar.

6. Elija Editar > Pegar en el lugar (Mayús+Ctrl+V/Mayús+Comando+V) una vez más para agregar otro duplicado del óvalo original al Escenario.
7. Seleccione la herramienta Transformación libre. Mayús+arrastre una esquina hacia adentro para reducir el nuevo óvalo aproximadamente otro 10 por ciento más pequeño.
8. Arrastre el óvalo sobre el borde de la taza de café para que se superponga al borde frontal. También puede presionar la tecla Flecha abajo para empujar el óvalo seleccionado hacia abajo en el Escenario.
9. Haga clic fuera de la selección para anular la selección del óvalo.
10. Seleccione las partes inferiores del óvalo más pequeño y elimínelas.

¡Tu taza de café ahora está llena de café!

Cambiar los contornos de la forma

Con la herramienta Selección, puede empujar y tirar de líneas y esquinas para cambiar los contornos generales de cualquier forma. Es una forma rápida e intuitiva de trabajar con formas.

1. En el panel Herramientas, seleccione la herramienta Selección.
2. Mueva el cursor del mouse cerca de uno de los lados de la taza de café.

Aparece una línea curva cerca del cursor, lo que indica que puede cambiar la curvatura del trazo.

3. Arrastre el trazo hacia afuera.

El lado de la taza de café se dobla, dando a la taza una ligera protuberancia.

4. Arrastre el otro lado de la taza de café ligeramente hacia afuera.

La taza de café ahora tiene un cuerpo más redondeado.

Consejo:

Mantenga presionada la tecla Opción/Alt mientras arrastra los lados de una forma para agregar una nueva esquina.

Cambiar trazos y rellenos

Si desea cambiar las propiedades de cualquier trazo o relleno, puede usar la herramienta Bote de tinta o la herramienta Bote de pintura. La herramienta Bote de tinta cambia los colores de trazo; la herramienta Bote de pintura cambia los colores de relleno.

1. En el panel Herramientas, seleccione la herramienta Bote de pintura ( ).
2. En el panel Propiedades, elija un color de relleno marrón más oscuro (#663333).
3. Haga clic en la superficie superior del café que está dentro de la taza.

El relleno del óvalo superior cambia al color marrón más oscuro.

Consejo:

Si su herramienta Bote de pintura cambia el relleno en las áreas circundantes, puede haber un pequeño espacio en el contorno de la forma que permita que el relleno se derrame. Cierre el espacio manualmente o use el menú Tamaño del espacio en la parte inferior del panel Herramientas para elegir el tamaño del espacio que Animate cerrará automáticamente.

4. En el panel Herramientas, seleccione la herramienta Bote de tinta ( ).
5. En el panel Propiedades, elija un color de trazo marrón más oscuro (#330000).
6. Haga clic en el trazo superior sobre la superficie del café.

El trazo alrededor de la superficie del café cambia a un color marrón más oscuro.

Consejo:

También puede seleccionar un trazo o un relleno y cambiar su color usando el panel Propiedades sin seleccionar la herramienta Bote de pintura o Bote de tinta.

Modos de dibujo de Animate

Animate proporciona tres modos de dibujo que determinan cómo interactúan los objetos entre sí en el escenario y cómo puede editarlos. De forma predeterminada, Animate usa el modo de dibujo Combinar, pero puede habilitar el modo de dibujo de objetos o usar la herramienta Rectángulo primitivo u Óvalo primitivo para usar el modo de dibujo Primitivo.

Modo de dibujo Combinar

En este modo, Animate combina formas dibujadas, como rectángulos y óvalos, donde se superponen, de modo que varias formas parecen ser una sola forma. Si mueve o elimina una forma que se ha combinado con otra, la parte superpuesta se elimina permanentemente.

Modo de dibujo de objetos

En este modo, Animate no combina objetos dibujados; permanecen distintos y separados, incluso cuando se superponen. Para habilitar el modo de dibujo de objetos, seleccione la herramienta de dibujo que desea usar y luego haga clic en el botón Dibujo de objetos en la parte inferior del panel Herramientas.

Para convertir un objeto en formas (modo de dibujo Combinar), selecciónelo y elija Modificar > Separar (Ctrl+B/Comando+B). Para convertir una forma en un objeto (modo de dibujo de objetos), selecciónelo y elija Modificar > Combinar objetos > Unión.

Modo de dibujo Primitivo

Cuando usa la herramienta Rectángulo primitivo o la herramienta Óvalo primitivo, Animate dibuja sus rectángulos u óvalos como objetos independientes que mantienen algunas características editables. A diferencia de los objetos normales, puede modificar el radio de la esquina y el ángulo inicial y final de las primitivas de rectángulo, y ajustar el radio interno de las primitivas de óvalo utilizando el panel Propiedades.

Usar rellenos de degradado y mapa de bits

El relleno es el interior del objeto dibujado. Actualmente, ha seleccionado un color de relleno marrón sólido, pero también puede usar un degradado o una imagen de mapa de bits (como un archivo JPEG) como relleno, o puede especificar que el objeto no tenga relleno.

En un degradado, un color cambia gradualmente a otro. Animate puede crear degradados lineales, que cambian de color horizontal, vertical o diagonalmente, o degradados radiales, que cambian de color moviéndose hacia afuera desde un punto focal central.

Para esta lección, utilizará un relleno de degradado lineal para agregar tridimensionalidad a la taza de café. Para dar la apariencia de una capa superior de crema espumosa, importará una imagen de mapa de bits para usarla como relleno. Puede usar el panel Color para importar un archivo de mapa de bits.

Creación de transiciones de degradado

Utilizará el panel Color para definir los colores que se utilizarán en su degradado. De forma predeterminada, un degradado lineal se mueve de un color a un segundo color, pero puede usar hasta 15 transiciones de color en un degradado en Animate. Un puntero de color determina dónde se define cada color y se producen cambios de color suaves entre cada uno de los punteros. Agregue punteros de color debajo de la barra de definición de degradado en el panel Color para agregar más colores y, por lo tanto, más degradados.

Creará un degradado que va del tostado al blanco y al tostado oscuro en la superficie de la taza de café para darle una apariencia redondeada.

1. Seleccione la herramienta Selección. Seleccione el relleno que representa la superficie frontal de la taza de café.
2. Abra el panel Color (Ventana > Color). En el panel Color, seleccione Color de relleno (el icono del cubo de pintura) y elija Degradado lineal en el menú Tipo de color.

La superficie frontal de la taza de café se rellena con un degradado de color que cambia de izquierda a derecha.

3. Haga clic en Crear una nueva muestra en la parte inferior del panel Muestras.

Aparece una nueva muestra con la información exacta de color y transparencia de la voluta de café que seleccionó.

Crear una muestra etiquetada

Convertirá su muestra guardada en una muestra etiquetada y la usará para todas las volutas de café.

1. Con la muestra de color de vapor de café seleccionada, haga clic en Convertir a una muestra etiquetada en la parte inferior del panel Muestras.

Aparece el cuadro de diálogo Definición de color etiquetado.

2. Ingrese vapor de café en el campo Nombre y haga clic en Aceptar.

El cuadro de diálogo se cierra y aparece una nueva muestra etiquetada en la sección Muestras etiquetadas del panel Muestras.

Usar una muestra etiquetada

Usará su nueva muestra etiquetada para todas sus volutas de café sobre la taza.

1. Seleccione la herramienta Selección y, manteniendo presionada la tecla Mayús, haga clic en cada voluta de café sobre la taza.
2. Abra el panel Muestras.
3. Seleccione la muestra etiquetada de vapor de café.

Los gráficos seleccionados utilizan la muestra etiquetada como su color. En el panel Propiedades, una muestra etiquetada se indica mediante el triángulo blanco en la esquina inferior derecha del color.

Actualización de muestras etiquetadas

El verdadero poder de las muestras etiquetadas se hace evidente cuando tiene que realizar actualizaciones en su proyecto. Suponga que al director de arte o a su cliente no le gusta el color del vapor de café que sube por encima de la taza. Dado que cada voluta utiliza una muestra etiquetada, simplemente puede actualizar el color de la muestra etiquetada y todos los gráficos que utilizan esa muestra etiquetada se actualizarán.

1. Abra el panel Muestras.
2. En la sección Muestras etiquetadas del panel Muestras, haga doble clic en la muestra etiquetada de vapor de café.

Se abre el cuadro de diálogo Definición de color etiquetado con el nombre y la información del color.

3. Cambie el color a un tono diferente de marrón. El nuevo color aparece en la mitad superior de la ventana de vista previa del color. Haga clic en Aceptar para cerrar el cuadro de diálogo.

La nueva información de color se guarda y todos los gráficos que utilizan la muestra etiquetada se actualizan al nuevo color.

Creando curvas

Ha utilizado la herramienta Selección para tirar y empujar los bordes de las formas para crear curvas de forma intuitiva. Para un control más preciso, puede utilizar la herramienta Pluma.

Usando la herramienta Pluma

Ahora creará un gráfico de fondo relajante y ondulado.

1. Elija Insertar > Línea de tiempo > Capa y asigne un nombre a la nueva capa onda marrón oscuro.
2. Arrastre la capa a la parte inferior de la pila de capas.
3. Bloquea todas las demás capas.
4. En el panel Herramientas, seleccione la herramienta Pluma ( ).
5. Establezca el color del trazo en marrón oscuro y Alfa en 100%. Seleccione la opción Línea fina para Estilo y Grosor uniforme para el Ancho.
6. Comience su forma haciendo clic fuera del borde izquierdo del Escenario para establecer el primer punto de ancla.
7. Mueva el puntero del mouse sobre el Escenario y presione, ¡pero no suelte!, el botón del mouse para colocar el siguiente punto de ancla. Mantenga presionado el botón del mouse y arrastre en la dirección en la que desea que continúe la línea. Arrastrará una línea de dirección desde el nuevo punto de ancla, y cuando suelte el botón del mouse, habrá creado una curva suave entre los dos puntos de ancla.

Para obtener más información sobre cómo dibujar con la herramienta Pluma, consulte la barra lateral "Crear trazados con la herramienta Pluma".

8. Continúe moviendo el mouse hacia la derecha a través del Escenario, presionando y arrastrando líneas de dirección para construir el contorno de la onda. Continúe más allá del borde derecho del escenario y haga clic una vez para establecer un punto de esquina.

Ha dibujado el borde superior de su onda; ahora necesita completar la forma dibujando la parte inferior.

9. Haga clic una vez debajo del punto de esquina anterior y luego dibuje una línea ondulada de regreso a la izquierda a través del Escenario, similar (pero no exactamente paralela) a la primera línea curva. Tenga cuidado de no colocar sus puntos de ancla directamente debajo de los puntos de ancla en la línea superior para que la onda tenga un contorno de forma libre.
10. Continúe la línea ondulada inferior más allá del borde izquierdo del Escenario y haga clic debajo del punto de ancla inicial para colocar otro punto de esquina.
11. Cierre su forma haciendo clic en el primer punto de ancla.
12. Seleccione la herramienta Bote de pintura.
13. Establezca el color de relleno en marrón oscuro.
14. Haga clic dentro del contorno que acaba de crear para rellenarlo con color.
15. Seleccione la herramienta Selección y haga clic en el contorno para seleccionarlo. Presione la tecla Eliminar para eliminar el trazo.

Nota:

No se preocupe por hacer que todas las curvas sean perfectas. Se necesita práctica para acostumbrarse a la herramienta Pluma. También tendrá la oportunidad de refinar sus curvas en la siguiente parte de la lección.

Editar curvas con las herramientas Selección y Subselección

Es probable que su primer intento de crear ondas suaves no sea muy bueno. Utilice la herramienta Selección o la herramienta Subselección para refinar sus curvas.

1. Seleccione la herramienta Selección.
2. Desplace el cursor sobre un segmento de línea y observe el segmento de línea arqueado que aparece cerca del puntero. Esto indica que puede editar la curva. Si aparece un segmento de ángulo recto cerca del cursor, esto indica que puede editar el punto de esquina.
3. Arrastre la curva para editar su forma.
4. En el panel Herramientas, seleccione la herramienta Subselección ( ).
5. Haga clic en el contorno de la forma.
6. Arrastre los puntos de ancla a nuevas ubicaciones o mueva los controladores para refinar la forma general.

Eliminar o agregar puntos de ancla

Utilice las herramientas ocultas debajo de la herramienta Pluma para eliminar o agregar puntos de ancla según sea necesario.

1. Mantenga presionada la herramienta Pluma para acceder a las herramientas ocultas debajo de ella.
2. Seleccione la herramienta Eliminar punto de ancla ( ).
3. Haga clic en un punto de ancla en el contorno de la forma para eliminarlo.
4. Seleccione la herramienta Agregar punto de ancla ( ).
5. Haga clic en la curva para agregar un punto de ancla.

Crear trazados con la herramienta Pluma

Puede utilizar la herramienta Pluma para crear trazados rectos o curvos, abiertos o cerrados. Si no está familiarizado con la herramienta Pluma, puede resultar confuso usarla al principio. Comprender los elementos de un trazado y cómo crear esos elementos con la herramienta Pluma hace que los trazados sean mucho más fáciles de dibujar.

Para crear un trazado recto, haga clic en el botón del mouse. La primera vez que hace clic, establece el punto de partida. Cada vez que hace clic a partir de entonces, se dibuja una línea recta entre el punto anterior y el punto actual. Para dibujar trazados complejos de segmentos rectos con la herramienta Pluma, simplemente continúe agregando puntos.

Creando una línea recta

Para crear un trazado curvo, comience presionando el botón del mouse para colocar un punto de ancla, luego arrastre para crear una línea de dirección para ese punto y suelte el botón del mouse. Luego mueva el mouse para colocar el siguiente punto de ancla y arrastre otro conjunto de líneas de dirección. Al final de cada línea de dirección hay un punto de dirección; las posiciones de las líneas y puntos de dirección determinan el tamaño y la forma del segmento curvo. Mover las líneas y puntos de dirección cambia la forma de las curvas en un trazado.

Las curvas suaves están conectadas por puntos de ancla llamados puntos suaves. Los trazados con curvas pronunciadas están conectados por puntos de esquina. Cuando mueve una línea de dirección en un punto suave, los segmentos curvos a ambos lados del punto se ajustan simultáneamente, pero cuando mueve una línea de dirección en un punto de esquina, solo se ajusta la curva en el mismo lado del punto que la línea de dirección.

Creando una línea curva

A. Segmento de línea curva B. Punto de dirección C. Línea de dirección D. Punto de ancla seleccionado E. Punto de ancla no seleccionado

Los segmentos de trazado y los puntos de ancla se pueden mover después de dibujarlos, ya sea individualmente o en grupo. Cuando un trazado contiene más de un segmento, puede arrastrar puntos de ancla individuales para ajustar segmentos individuales del trazado, o seleccionar todos los puntos de ancla en un trazado para editar el trazado completo. Utilice la herramienta Subselección para seleccionar y ajustar un punto de ancla, un segmento de trazado o un trazado completo.

Crear un trazado cerrado

Los trazados cerrados difieren de los trazados abiertos en la forma en que termina cada uno. Para finalizar un trazado abierto, seleccione la herramienta Selección o presione Escape. Para crear un trazado cerrado, coloque el puntero de la herramienta Pluma sobre el punto de partida (aparecerá un pequeño º junto al puntero) y haga clic. Cerrar un trazado finaliza automáticamente el trazado. Después de que se cierra el trazado, el puntero de la herramienta Pluma aparece con un pequeño *, lo que indica que su próximo clic iniciará un nuevo trazado.

Extraído con permiso de Adobe Photoshop CC Classroom in a Book. © 2017 Adobe Systems Incorporated y sus licenciantes. Reservados todos los derechos.

Usar la transparencia para crear profundidad

A continuación, creará una segunda onda para superponer la primera onda. Hará que la segunda onda sea ligeramente transparente para crear un efecto rico en capas. Puede aplicar transparencia al trazo o al relleno.

Modificar el valor alfa de un relleno

1. Seleccione la forma en la capa de onda marrón oscuro.
2. Elija Editar > Copiar.
3. Elija Insertar > Línea de tiempo > Capa y asigne un nombre a la nueva capa onda marrón claro.
4. Elija Editar > Pegar en el lugar (Ctrl+Mayús+V/Comando+Mayús+V).

El comando Pegar en el lugar coloca el elemento copiado en la misma posición desde donde se copió.

5. Seleccione la herramienta Selección y mueva la forma pegada ligeramente hacia la izquierda o hacia la derecha para que las crestas de las ondas estén algo desplazadas.
6. Seleccione el relleno de la forma en la capa de onda marrón claro.
7. Elija Ventana > Color para abrir el panel Color. Establezca el color de relleno en un tono marrón ligeramente diferente (#CC6666) y luego cambie el valor Alfa al 50%.

La muestra de color en el panel Color muestra una vista previa del color recién seleccionado. La transparencia se indica mediante la cuadrícula gris que se puede ver a través de la muestra de color transparente.

Consejo:

También puede cambiar la transparencia de una forma desde el panel Propiedades haciendo clic en el icono Color de relleno y cambiando el valor Alfa en el selector de color emergente.

Los rellenos transparentes son efectivos para crear sombras, que pueden proporcionar una sensación de profundidad a su ilustración. Agregará una sombra para su taza de café y otra sombra decorativa en la parte inferior del escenario.

1. Elija Insertar > Línea de tiempo > Capa y asigne un nombre a la nueva capa sombra.
2. Elija Insertar > Línea de tiempo > Capa nuevamente y asigne un nombre a la segunda nueva capa sombra grande.
3. Arrastre la capa de sombra y la capa de sombra grande a la parte inferior de la pila de capas.
4. Seleccione la herramienta Óvalo.
5. Para el Trazo, seleccione Ninguno, y para el Relleno, seleccione un color marrón oscuro (#663300) con un valor Alfa del 15%.
6. En la capa de sombra, dibuje un óvalo que se encuentre justo debajo de la taza de café.
7. En la capa de sombra grande, dibuje un óvalo mucho más grande cuyo borde superior se extienda justo sobre la parte inferior del escenario desde abajo.

Los óvalos transparentes superpuestos agregan una apariencia rica en capas a la ilustración.

Ser expresivo con el pincel

Aunque la herramienta Pluma sobresale en hacer curvas de precisión como las ondas que creó en el fondo, no es muy buena para crear marcas espontáneas y expresivas.

Para un enfoque más pictórico, use la herramienta Pincel ( ). La herramienta Pincel le permite crear formas que son más orgánicas y de forma libre, así como formas con patrones que se repiten regularmente para bordes y decoraciones. Y, al igual que con otros gráficos creados con Animate, las formas que crea con la herramienta Pincel siguen siendo totalmente vectoriales.

Elija entre docenas de pinceles diferentes, y si no encuentra algo que pueda usar, puede personalizar los pinceles o incluso crear los suyos propios.

Explorando la biblioteca de pinceles

Agregará un poco de dinamismo a este banner publicitario utilizando la herramienta Pincel para el nombre y el logotipo de la cafetería. Escribirá a mano las letras con un pincel que simula tiza áspera para brindar un poco más de atmósfera rústica a la marca de la cafetería.

1. En la línea de tiempo, agregue una nueva capa encima de sus otras capas y cámbiele el nombre a tiza.
2. Seleccione la herramienta Pincel. En el panel Propiedades, elija un buen color de trazo que contraste con los rojos y naranjas en la obra de arte que ya ha creado. En este ejemplo, elegimos un amarillo vibrante.
3. En la sección Relleno y trazo, ingrese 15 para el tamaño del trazo.

Esto le dará un buen grosor para las letras de la cafetería.

4. Ahora, para elegir su estilo de pincel, haga clic en el botón Biblioteca de pinceles (a la derecha del menú Estilo). Se abre el panel Biblioteca de pinceles. Animate organiza todos los pinceles en grandes categorías en la columna izquierda: Flechas, Artístico, Decorativo, Arte lineal, Pinceles de patrón y Paquete vectorial.
5. Seleccione una categoría para ver las subcategorías y seleccione una subcategoría para ver los pinceles individuales. Para esta tarea, seleccione Artístico > Lápiz de carbón de tiza y haga doble clic en el pincel Carbón - Grueso.

El pincel Carbón-Grueso se agrega al menú Estilo y se convierte en el estilo de pincel actualmente activo.

6. Ahora para la diversión. Junto a su taza de café, escriba a mano el nombre de la cafetería, Mug's Coffee.

Las letras de estilo tiza se ven muy complejas, pero están controladas por una simple línea vectorial. Si selecciona la herramienta Selección o Subselección y hace clic en una de sus letras, puede ver el trazo dentro de cada letra. Empuje y tire del trazo, muévalo o edítelo con la herramienta Transformar como lo haría con cualquier otra forma vectorial.

Creando un patrón

Ahora es el momento de agregar un borde decorativo alrededor de su banner publicitario.

1. Cree una nueva capa sobre todas sus otras capas y cámbiele el nombre a borde.
2. Seleccione la herramienta Línea. Haga clic en la muestra de color Trazo en el panel Propiedades y seleccione un color marrón o naranja apagado que armonice bien con el resto de los gráficos de fondo.
3. En el panel Propiedades, haga clic en el botón Biblioteca de pinceles junto a Estilo.

Se abre el panel Biblioteca de pinceles.

4. Seleccione Pinceles de patrón > Discontinuo > Cuadrado discontinuo 1.3. Si encuentra algo más atractivo, no dude en seleccionarlo en su lugar. Haga doble clic en su elección.

El pincel Cuadrado discontinuo 1.3 se agrega al menú Estilo y se convierte en el estilo de pincel actualmente activo.

5. Cree una línea horizontal larga en el borde superior del escenario y otra en la parte inferior del escenario.

Consejo:

Mantenga presionada la tecla Mayús mientras dibuja con la herramienta Línea para restringir la herramienta a líneas horizontales o verticales.

El patrón regular discontinuo en la parte superior e inferior del escenario proporciona un buen contraste con las curvas y las letras de estilo tiza.

Editar y crear su propio pincel artístico o de patrón

Es posible que no encuentre un pincel de su agrado en la Biblioteca de pinceles, o puede que necesite algo muy específico para su proyecto. En cualquier caso, puede editar un pincel existente o puede crear uno completamente nuevo. Los pinceles de patrón repiten una forma a lo largo de un trazo, mientras que los pinceles artísticos estiran el arte base a lo largo del trazo.

Para editar un pincel, haga clic en el botón Editar estilo de pincel junto al menú Estilo en el panel Propiedades. Aparece el cuadro de diálogo Opciones de pincel, con múltiples controles para refinar cómo el pincel aplica las formas base.

Los pinceles artísticos y los pinceles de patrón tienen diferentes opciones. Experimente con diferentes espaciados, cómo se repiten o estiran las formas para que quepan, o cómo se manejan las esquinas y las superposiciones. Cuando esté satisfecho con su nuevo pincel, haga clic en Agregar para agregar su pincel personalizado al menú Estilo.

Para crear un pincel completamente nuevo, primero cree algunas formas en el escenario en las que desea basar su pincel. Por ejemplo, si desea crear una vía de tren, cree el arte base que se repite para un pincel de patrón. Seleccione la ilustración en el escenario; luego haga clic en el botón Crear nuevo pincel de pintura de la selección en el panel Propiedades cerca del menú Estilo.

Aparece el panel Opciones de pincel. En el menú Tipo, puede elegir Pincel artístico o Pincel de patrón y luego refinar las opciones del pincel. La ventana de vista previa le muestra los resultados de las opciones elegidas. Ingrese un nombre para su nuevo pincel y haga clic en Agregar. Su nuevo pincel se agregará a su menú Estilo y estará disponible para que lo use.

Administrar pinceles

Si ha creado un nuevo pincel o ha personalizado uno existente, puede guardarlo en la Biblioteca de pinceles.

1. Haga clic en el botón Administrar pinceles en el panel Propiedades. Se abre el cuadro de diálogo Administrar pinceles de documento, que muestra los pinceles actuales que ha agregado al menú Estilo. Le muestra cuáles están actualmente en uso en el escenario y cuáles no.
2. Seleccione los pinceles que desea eliminar o guardar en su Biblioteca de pinceles. No puede eliminar un pincel que esté actualmente en uso.
3. Si guarda un pincel en su Biblioteca de pinceles, aparecerá en la Biblioteca de pinceles en la categoría llamada Mis pinceles.

Tabletas gráficas sensibles a la presión

Animate admite la entrada de tabletas sensibles a la presión, como las tabletas gráficas Wacom, para controlar trazos de ancho variable o pinceles artísticos o de patrón. Presionar más fuerte con el lápiz crea trazos más gruesos, mientras que presionar ligeramente da como resultado trazos más delgados. Puede ajustar los porcentajes de inclinación o sensibilidad en el cuadro de diálogo Opciones de pincel para modificar el rango de grosores en las formas que crea. Intente dibujar con un lápiz óptico en una tableta con trazos de ancho variable habilitados para una forma natural e intuitiva de crear imágenes vectoriales.

Girar el escenario para facilitar el dibujo

Cuando dibuja en papel normal, a menudo es más fácil girar la página para obtener un mejor ángulo para dibujar o escribir algo. En Animate, puede hacer lo mismo con el escenario utilizando la herramienta Rotación.

La herramienta Rotación está agrupada debajo de la herramienta Mano en el panel Herramientas.

Seleccione la herramienta Rotación y haga clic en el escenario para especificar el punto de pivote, indicado por una cruz. Una vez que se ha establecido el punto de pivote, arrastre el escenario para rotarlo al ángulo deseado.

Haga clic en el botón Centrar escenario en la parte superior del escenario para restablecer el escenario a su orientación normal.

Crear y editar texto

Ahora agreguemos texto para completar esta ilustración. Hay varias opciones disponibles para el texto según el tipo de documento en el que esté trabajando. Para un documento HTML5 Canvas como el de esta lección, puede utilizar texto estático o texto dinámico.

Utilice texto estático para texto de visualización simple que utiliza fuentes disponibles en su computadora (la del diseñador). Cuando crea texto estático en el escenario y lo publica en un proyecto HTML5, Animate convierte automáticamente las fuentes en contornos. Eso significa que no tiene que preocuparse de que su audiencia tenga las fuentes necesarias para ver el texto como usted lo pretendía. La desventaja es que demasiado texto puede aumentar el tamaño de su archivo.

Utilice texto dinámico para aprovechar las fuentes web disponibles a través de Typekit o Google. Miles de fuentes de alta calidad están disponibles para usted a través de Typekit a través de su suscripción a Creative Cloud, y las fuentes están alojadas en Typekit y son accesibles directamente a través del panel Propiedades dentro de Animate. Las fuentes de código abierto de alta calidad están disponibles a través de Google Fonts, que están alojadas en los servidores de Google.

En la siguiente tarea, creará un eslogan para la cafetería y algunas descripciones de sus productos. Elegirá una fuente web adecuada y agregará el texto.

Usar la herramienta Texto para agregar texto dinámico

Creará su texto con la herramienta Texto.

1. Seleccione la capa superior.
2. Elija Insertar > Línea de tiempo > Capa y asigne un nombre a la nueva capa texto.
3. Seleccione la herramienta Texto ( ).
4. Elija Texto dinámico en el menú Tipo de texto en el panel Propiedades.
5. Arrastre un cuadro de texto debajo del nombre de la cafetería comenzando cerca de la taza de café y terminando en el borde derecho del escenario.
6. Empiece a escribir. Ingrese Pruebe la diferencia.

Es posible que el texto no quepa, o que no sea del tamaño o la fuente que desea. No se preocupe, seleccionará una fuente web para su cuadro de texto en la siguiente tarea.

7. Salga de la herramienta Texto eligiendo la herramienta Selección.
8. Agregue tres piezas más de texto más pequeño en el escenario en la misma capa justo debajo de su eslogan: Café, Pasteles y Wi-Fi gratis.

Agregar una fuente web

Ahora vinculará una fuente web a su proyecto. Asegúrese de tener una conexión a Internet porque Animate recupera la lista de fuentes disponibles de la web. Los procesos para agregar una fuente Typekit y una fuente de Google son muy similares. En esta tarea, agregará una fuente Typekit.

1. Seleccione el texto Pruebe la diferencia y haga clic en Agregar fuentes web (su icono es un globo terráqueo) en el panel Propiedades, en la sección Carácter. Elija Typekit en el menú que aparece.

Animate muestra la pantalla de apertura de Typekit Web Fonts.

2. Haga clic en Empezar.

Aparece el cuadro de diálogo Agregar fuentes web. Se enumeran todas las fuentes Typekit disponibles. Puede desplazarse por todas ellas con la barra de desplazamiento de la derecha. También puede buscar fuentes específicas o utilizar el botón Ordenar por o Filtrar para restringir su búsqueda.

3. Por ahora, examine la gama de tipos de letra y elija uno que crea que se adapte a este banner publicitario. Haga clic en el nombre de su fuente preferida debajo del texto de muestra.

Aparecen más detalles sobre la fuente seleccionada, incluidos los diferentes estilos (cursiva, negrita, etc.), su clasificación (serif o sans serif) y el nombre de la fundición.

4. Haga clic en el botón Seleccionar.

El botón Seleccionar se vuelve azul y la etiqueta cambia a Seleccionado.

5. Haga clic en Aceptar.

El cuadro de diálogo se cierra y la fuente web seleccionada se agrega a su proyecto.

6. En el panel Propiedades, sección Carácter, elija la fuente web recién agregada en el menú Familia. Las fuentes web se enumeran en la parte superior del menú.

La fuente web Typekit seleccionada se aplica al cuadro de texto en el escenario. Elija un color que funcione bien con la composición. Ajuste el tamaño de fuente y/o el interlineado (el espacio entre líneas) en el panel Propiedades (el interlineado está en la sección Párrafo) para que todo el texto quepa cómodamente en el espacio.

7. Seleccione las otras tres piezas de texto y use el menú Familia para aplicar la misma fuente web.

Identificar su dominio

Después de agregar su fuente web Typekit, debe identificar el dominio donde se alojará su proyecto HTML5. Para las fuentes de Google, no necesita realizar estos pasos.

1. Elija Archivo > Configuración de publicación.

Aparece el cuadro de diálogo Configuración de publicación.

2. Haga clic en la pestaña Fuentes web en la pestaña del extremo derecho.
3. En el campo vacío, ingrese la URL donde se alojará su banner publicitario. Incluya el protocolo http://. Dado que en realidad no cargará este proyecto de muestra, puede inventar un nombre de dominio o dejarlo en blanco.
4. Haga clic en Aceptar para cerrar el cuadro de diálogo.
5. Elija Control > Probar para probar su proyecto.

Animate le muestra una vista previa del anuncio en su navegador. La salida de la película de prueba que utiliza fuentes web está diseñada solo para vista previa. Utilice la opción Archivo > Publicar para generar los archivos finales para cargar en su servidor.

Eliminar una fuente web

Si cambia de opinión, puede eliminar fácilmente una fuente web Typekit y elegir una diferente.

1. Seleccione el texto que usa la fuente web que desea eliminar.

Buscando la fuente adecuada

El cuadro de diálogo Agregar fuentes web proporciona herramientas que le ayudan a encontrar la fuente adecuada para su proyecto de forma rápida y sencilla. Se muestran vistas previas de las formas mayúsculas y minúsculas para A, B, C y D para cada familia de fuentes. Si desea ver más detalles, haga clic en el nombre de la fuente. Las oraciones de muestra se muestran en todas las diferentes variantes estilísticas disponibles (cursiva, negrita, regular, etc.). Puede utilizar el botón Ordenar para organizar las fuentes, o puede utilizar el botón Filtrar para mostrar solo ciertos tipos de tipos de letra, como los que son serif o sans serif, o los que tienen transiciones gruesas y delgadas.

Saber un poco sobre tipografía es valioso para crear proyectos de Animate elegantes e impactantes. La tipografía, el estudio y la práctica de crear formas de letras, es una parte sutil pero esencial del diseño. La forma de cada letra y su interacción con las letras vecinas y el espacio en blanco que las rodea pueden impulsar el aspecto general, así como la emoción de su proyecto.

Las dos categorías principales de tipos de letra son serif y sans serif.

Las fuentes Serif se distinguen por pequeñas líneas en los extremos de los trazos que componen una forma de letra. Times New Roman es el ejemplo más conocido de un tipo de letra serif. Los tipos de letra Serif se utilizan mejor para pasajes largos de texto porque los serif ayudan a la legibilidad. Las fuentes Sans serif, por otro lado, carecen de adornos en los extremos de los trazos ("sans" es francés para "sin"). Los tipos de letra Sans serif son más limpios, más austeros y generalmente se perciben como más modernos. Helvetica es el ejemplo más conocido de un tipo de letra sans serif. Las fuentes Sans serif se utilizan a menudo para fines de visualización más grandes, como encabezados o títulos.

Otros tipos de tipos de letra incluyen script, que imitan una pluma caligráfica, o decorativos, que son más ilustrativos y muy singulares. Dentro de cada una de estas categorías hay una miríada de variaciones, así que tómese el tiempo para pensar, buscar y decidir qué fuente se adapta mejor a su proyecto.

2. Anule la selección de la fuente eligiendo una diferente.

En este ejemplo, la fuente Merriweather está deseleccionada y la fuente _sans está seleccionada.

3. Haga clic en el botón Agregar fuentes web y elija Typekit para abrir el cuadro de diálogo Agregar fuentes web de Typekit.
4. Haga clic en Fuentes seleccionadas.

Animate muestra todas las fuentes, indicadas por una marca de verificación azul, que se han seleccionado para su proyecto.

Si la fuente tiene una marca de verificación gris, significa que todavía la está utilizando en algún texto en el escenario. Debe anular la selección de una fuente de cada fragmento de texto antes de eliminarla de su proyecto.

5. Anule la selección de la fuente haciendo clic en ella.

Ahora, no se muestran fuentes en el área Fuentes seleccionadas.

6. Haga clic en Aceptar.

Se cierra el cuadro de diálogo Agregar fuentes web. La fuente web se elimina del menú Familia en el panel Propiedades.

Coincidencia del color de un objeto existente

Si desea hacer coincidir un color exactamente, puede usar la herramienta Cuentagotas ( ) para muestrear un relleno o un trazo. Después de hacer clic en un objeto con la herramienta Cuentagotas, Animate cambia automáticamente a la herramienta Bote de pintura o la herramienta Bote de tinta cargada con el color seleccionado y las propiedades asociadas que puede aplicar a otro objeto.

Utilizará la herramienta Cuentagotas para muestrear el color de una de las ondas decorativas de fondo y aplicarla a las tres piezas de texto más pequeñas.

1. Seleccione la herramienta Selección.
2. Mayús+seleccione las tres piezas de texto más pequeñas: Café, Pasteles y Wi-Fi gratis.
3. Seleccione la herramienta Cuentagotas.
4. Haga clic en el relleno de la forma en la capa de onda marrón oscuro.

Los rellenos transparentes son efectivos para crear sombras, que pueden proporcionar una sensación de profundidad a su ilustración. Agregará una sombra para su taza de café y otra sombra decorativa en la parte inferior del escenario.

1. Elija Insertar > Línea de tiempo > Capa y asigne un nombre a la nueva capa sombra.
2. Elija Insertar > Línea de tiempo > Capa nuevamente y asigne un nombre a la segunda nueva capa sombra grande.
3. Arrastre la capa de sombra y la capa de sombra grande a la parte inferior de la pila de capas.
4. Seleccione la herramienta Óvalo.
5. Para el Trazo, seleccione Ninguno, y para el Relleno, seleccione un color marrón oscuro (#663300) con un valor Alfa del 15%.
6. En la capa de sombra, dibuje un óvalo que se encuentre justo debajo de la taza de café.
7. En la capa de sombra grande, dibuje un óvalo mucho más grande cuyo borde superior se extienda justo sobre la parte inferior del escenario desde abajo.

Los óvalos transparentes superpuestos agregan una apariencia rica en capas a la ilustración.

Alinear y distribuir objetos

Finalmente, ordenará el texto para que el diseño esté organizado. Aunque puede usar reglas (Ver > Reglas) y cuadrículas (Ver > Cuadrícula > Mostrar cuadrícula) para ayudar a colocar objetos, aquí usará el panel Alinear, que es más efectivo cuando se trata de varios objetos. También confiará en las guías inteligentes que aparecen cuando mueve objetos por el escenario.

Alineación de objetos

El panel Alinear, como puede adivinar, alinea cualquier número de objetos seleccionados horizontal o verticalmente. También puede distribuir objetos de manera uniforme.

1. Seleccione la herramienta Selección.
2. Seleccione el primer fragmento de texto pequeño, Café.
3. Mueva el cuadro de texto hacia la izquierda o hacia la derecha hasta que aparezcan las guías inteligentes. Alinee el borde izquierdo del texto seleccionado con el borde izquierdo del texto más grande que está encima.
4. Seleccione el tercer fragmento de texto pequeño, Wi-Fi gratis.
5. Mueva el texto hacia la izquierda o hacia la derecha hasta que aparezcan las guías inteligentes. Alinee el borde derecho del texto seleccionado con el borde derecho del texto más grande que está encima.
6. Seleccione los tres fragmentos de texto pequeños.
7. Abra el panel Alinear (Ventana > Alinear).
8. Anule la selección de la opción Alinear con el escenario, si ya está seleccionada. Haga clic en el botón Alinear borde inferior.

Animate alinea los bordes inferiores del texto.

9. Haga clic en el botón Espacio uniformemente horizontalmente.

El texto seleccionado se ajusta para que los espacios entre ellos sean uniformes.

Consejo:

Es posible que deba bloquear las capas inferiores para no seleccionar accidentalmente las formas en las capas inferiores.

Convertir y exportar arte

Ha completado su composición, compuesta por una ilustración simple y elementos de diseño y texto en capas. Sin embargo, es posible que deba seguir pasos adicionales para optimizarlo para su visualización en el entorno de reproducción final publicado.

Convertir arte vectorial a arte de mapa de bits

El arte vectorial, especialmente el arte con curvas complejas y muchas formas y diferentes estilos de línea, puede requerir un uso intensivo del procesador y puede afectar a los dispositivos móviles, donde el rendimiento se resiente. El comando Convertir a mapa de bits proporciona una forma de convertir la ilustración seleccionada en el escenario en un solo mapa de bits, lo que puede ser menos exigente para el procesador.

Una vez que haya convertido el objeto a un mapa de bits, puede moverlo sin preocuparse de que se fusione con las formas subyacentes. Sin embargo, los gráficos ya no se pueden editar con las herramientas de edición de Animate.

1. Seleccione la herramienta Selección.
2. Desbloquea tus capas. Seleccione las líneas onduladas de aroma de café en la capa de aroma de café, así como el grupo de café en la capa de taza de café.
3. Elija Modificar > Convertir a mapa de bits.

Animate convierte la taza de café y las líneas onduladas en un solo mapa de bits y almacena el mapa de bits en el panel Biblioteca. Elija Editar > Deshacer (Ctrl+Z/Comando+Z) para deshacer la conversión a mapa de bits y revertir su taza de café y trazos de aroma a gráficos vectoriales.

Exportar arte como PNG, JPG o GIF

Si desea un archivo de imagen simple en un formato como PNG, JPG o GIF, use el panel Exportar imagen para elegir su formato y ajustar la compresión para un rendimiento óptimo de descarga web.

1. Elija Archivo > Exportar > Exportar imagen.

Se abre el cuadro de diálogo Exportar imagen.

Exportar arte como SVG

Scalable Vector Graphics (SVG) es un formato común basado en XML para mostrar gráficos vectoriales en un navegador. Puede exportar su composición final desde Animate como SVG, incrustando o vinculando cualquier imagen de mapa de bits. El SVG exportado produce una imagen estática de su proyecto. Sin embargo, SVG solo admite texto estático.

Para exportar su obra de arte como SVG, haga lo siguiente:

1. Elija Archivo > Exportar > Exportar imagen (heredado).
2. En el menú Formato de archivo, elija Imagen SVG (*.svg) y haga clic en Guardar.
3. En el cuadro de diálogo Exportar SVG que aparece, seleccione Incrustar para Ubicación de la imagen.

Las opciones de Ubicación de la imagen determinan si sus imágenes de mapa de bits están codificadas en el archivo SVG o se mantienen como archivos separados y vinculados a su SVG. Incrustar imágenes crea archivos SVG más grandes, mientras que la vinculación le permite intercambiar y editar las imágenes fácilmente.

4. Haga clic en Aceptar.

Animate exporta un archivo SVG con cualquier dato de imagen codificado en el archivo de texto. Un documento SVG es un archivo de texto marcado de forma muy parecida a un documento HTML. Toda la información visual, incluidos los puntos de esquina, las curvas, el texto y la información de color, se codifica en una forma compacta.

Cuando abre un archivo SVG en su navegador, renderiza la imagen y se conserva toda la información vectorial. Las curvas permanecen nítidas incluso de cerca, y cualquier texto estático en su composición es seleccionable.

2. Elija el formato de archivo apropiado, seleccione la cantidad de compresión, seleccione una paleta de colores e incluso compare diferentes configuraciones para sopesar la calidad de la imagen y el tamaño del archivo. También puede cambiar el tamaño de la imagen.

Que Animate proporcione un entorno tan robusto para crear gráficos y texto atractivos, ricos y sofisticados junto con tanta flexibilidad en las opciones de salida es realmente notable, y algo que ayudará a impulsar todas sus actividades creativas.

Nota:

Si su documento de Animate contiene varios fotogramas, también puede optar por exportarlo como un GIF animado.

Preguntas de repaso

1. ¿Cuáles son los tres modos de dibujo en Animate y en qué se diferencian?
2. ¿Cuándo usaría cada una de las herramientas de selección en Animate?
3. ¿Qué puedes hacer con la herramienta Ancho?
4. ¿Cuál es la diferencia entre un pincel artístico y un pincel de patrón?
5. ¿Qué son las fuentes web y cómo se utilizan en los documentos HTML5 Canvas?
6. ¿Qué hace el panel Alinear?

Respuestas de repaso

1. Los tres modos de dibujo son el modo de dibujo Combinar, el modo de dibujo de objetos y el modo de dibujo Primitivo.
   • En el modo de dibujo Combinar, las formas dibujadas en el escenario se fusionan para convertirse en una sola forma.
   • En el modo de dibujo de objetos, cada objeto es distinto y permanece separado, incluso cuando se superpone a otro objeto.
   • En el modo de dibujo Primitivo, puede modificar los ángulos, el radio o el radio de la esquina de un objeto.
2. Animate incluye tres herramientas de selección: la herramienta Selección, la herramienta Subselección y la herramienta Lazo.
   • Utilice la herramienta Selección para seleccionar una forma u objeto completo.
   • Utilice la herramienta Subselección para seleccionar un punto o línea específico en un objeto.
   • Utilice la herramienta Lazo para dibujar un área de selección de forma libre.
3. Utilice la herramienta Ancho para editar los anchos variables de un trazo. Puede arrastrar las barras de control de cualquier punto de ancla para expandir o reducir el ancho, agregar o eliminar puntos de ancla o mover puntos de ancla a lo largo del trazo.
4. Un pincel artístico utiliza una forma base y la estira para que se ajuste a un trazo vectorial para simular una marca expresiva, creativa y, a menudo, pictórica. Un pincel de patrón utiliza una forma base que se repite para crear patrones decorativos.
5. Las fuentes web son fuentes creadas específicamente para la visualización en línea que están alojadas en un servidor. Animate ofrece dos tipos de fuentes web para su inclusión en documentos HTML5 Canvas: Typekit y Google Fonts.
6. El panel Alinear alinea cualquier número de elementos seleccionados horizontal o verticalmente y puede distribuir elementos de manera uniforme.