Visión general

Muchas personas usan elementos dinámicos y animados para la marca, para aumentar el atractivo del tráfico y agregar exclusividad a sus sitios web. A menudo, esto se hace usando CSS y otros lenguajes de desarrollo, pero hay muchas maneras de usar imágenes animadas. En este tutorial, aprenderá a usar animaciones en diseño web, obtendrá una introducción a la creación de animaciones en bucle de 24 cuadros en el estudio de clips y obtendrá una habilidad comercializable.

 

Tabla de contenido:

1. Conceptualización

2. Consejos de animación web

3. Dibujar una animación y un marco clave

4. Preparando Clip Studio

5. Finalizando

6. Uso en un sitio web

7. Diviértete!

1. Conceptualización

Antes incluso de comenzar a dibujar, debe considerar cómo se usará su activo, la marca (el estilo general de quién o para qué está produciendo esto) y cualquier otro requisito que usted o su cliente puedan necesitar.

La forma en que se utilizará la animación afectará la forma en que diseñas y animas:

¿Utilizará esto para una pantalla de carga, un logotipo en vivo, un fondo, un elemento pequeño en una página? Estas preguntas lo ayudarán a decidir si la animación debe ser sutil (no queremos un grito animado en un sitio web si queremos que la audiencia lea algo, por ejemplo), emocionante (llamar la atención sobre un logotipo o un botón puede ser muy beneficioso), o simplemente algo para darle un poco más de vida a una página aburrida. Consulte la sección "Consejos" para obtener ideas sobre cómo decidir qué hacer en función del uso de su diseño. También debe investigar "animaciones de sitios web" para encontrar un montón de sitios web creativos que utilizan todo tipo de activos animados para obtener más ideas.

La marca del sitio web también es algo importante a tener en cuenta:

Si está haciendo este proyecto para un cliente, ¿qué tipo de diseño ya utilizan? ¿Qué estilo debe tener su animación para que se vea bien con los otros elementos del sitio web? ¿A qué público se dirige esto (fanáticos del anime, profesionales, socios comerciales, etc.) y qué crees que disfrutarían o se ofendería? ¿El cliente tiene alguna solicitud específica? Estas son discusiones importantes para tener con su cliente.

Si está haciendo esto para un proyecto personal, debe considerar las mismas cosas: ¿quién es su audiencia? ¿Cómo te mantienes constante? ¿Qué quieres decir sobre tu proyecto?

Lea sobre marketing o comunicación visual si desea saber más sobre este tipo de cosas.

Para este tutorial, estoy creando un sitio web de cartera para exhibir mi trabajo. Quiero crear un elemento de título que se mostrará en la primera página. Debe atraer mucha atención para captar el interés del espectador. También quiero que señale la página hacia mi nombre y ayude a indicar a alguien que se desplace hacia abajo. Por lo tanto, quiero que sea una gran animación dramática con un movimiento hacia abajo que también atraiga la atención hacia el centro donde estará mi nombre.

Esto será lo primero que verá el público cuando vea mi sitio web, por lo que esperará que el resto del sitio tenga un estilo o sensación similar. Es probable que mi audiencia sea otros artistas (un aspecto similar a un boceto podría ser beneficioso), posibles empleadores (debe ser lo suficientemente limpio y pulido como para mostrar mi capacidad de producir algo profesional) y, con suerte, un montón de compañeros nerds (algo divertido y hábil probablemente sea disfrutado por esta audiencia). Con base en esta información, sé que quiero hacer algo con un estilo incompleto, muchas líneas y formas limpias, y posiblemente algunos planetas o lunas en órbita. También sé que el sitio web tendrá un esquema de color oscuro para hacer resaltar las piezas de mi cartera, por lo que esta animación debe tener un esquema brillante y saturado para llamar la atención con contraste.

¡¡¡Hay muchas posibilidades!!! Pero al hacer restricciones que tengo que seguir, finalmente mejoraré mi creatividad y el producto final.

2. Consejos de animación web

Ahora que sabe cómo y qué debe hacer su animación desde una perspectiva práctica y de marketing, use estos consejos para generar la mejor idea para su animación.

1. Las animaciones son cerdos de atención: las animaciones suelen ser las únicas cosas que se mueven en una página web y atraerán MUCHA atención. Use esto para su ventaja, pero tenga en cuenta que puede desviar la atención de información más importante.

2. No seas predecible: los humanos son muy buenos para reconocer patrones y una animación que se repite de una manera simple puede volverse aburrida muy rápidamente. Agregue varios objetos a la animación que se muevan de manera diferente en la animación, tengan una duración diferente o incluso comiencen en un momento diferente para hacer un bucle mucho más dinámico y atractivo.

3. Evite los bucles de tartamudeo: una buena forma de comenzar a diseñar una animación de bucles es hacer que el primer y el último fotograma sean los mismos. Sin embargo, si lo mantienes de esta manera, ¡parecerá que la animación se detiene por un momento una vez que se reinicia porque el mismo cuadro se reproducirá dos veces! El último marco debería ser un marco de transición (esto se discute en la parte 3.) para un bucle continuo. Me gusta planificar mis animaciones para tener un cuadro más que el producto final (25 en lugar de 24), para poder eliminar el último cuadro y evitar este problema.

4. Los elementos animados pueden agregar VIDA: nunca tenga miedo de adoptar un enfoque sutil, los bucles pequeños y simples pueden ser una maravillosa adición a una página web y ayudar a dar vida a la información aburrida. El ojo puede ver más de lo que se está enfocando, por lo que un pequeño movimiento al costado de un párrafo puede desviar la atención de él. Sin embargo, si es sutil, pequeño o lo suficientemente lento, ¡puede hacer que el espectador sienta que la página web está realmente viva, ya que podrá sentir el movimiento mientras se enfoca en las palabras de la página!

5. Dirija el ojo con movimiento real: uno de los principios del arte es la idea del movimiento: al usar líneas, ritmo y múltiples puntos focales, puede controlar esencialmente cómo el espectador verá la imagen dirigiendo sus ojos (mirar hacia arriba Teoría de diseño de Gestalt para más información sobre esto). Sin embargo, digitalmente, puede hacer lo mismo con el movimiento real. Las personas tienden a seguir automáticamente los objetos en movimiento, por lo que ayudar a que sus ojos vayan a donde quieras puede ser tan simple como hacer que algo se mueva en esa dirección.

6. ¡Pero no los atrape !: Con la animación en bucle, existe el riesgo de que el espectador quede atrapado, así que trate de dejarlos escapar con movimientos que lleven su ojo a otro punto focal y luego haga la transición rápidamente para que puedan son esencialmente dejados.

7. Contraste: El contraste entre elementos móviles y no móviles puede ser una herramienta increíble (¡mira cómo se usa en la película!). Use el movimiento para resaltar un objeto estático, comunique una emoción o, como se mencionó anteriormente, agregue interés adicional al hacer que diferentes objetos se muevan a diferentes velocidades.

¡¡¡UF!!! Probablemente hay muchas otras formas creativas de hacer uso de animaciones, si USTED tiene alguna idea, ¡póngala en los comentarios!

3. Dibujar una animación y un marco clave

Los bocetos son, por supuesto, estáticos, por lo que puede ser difícil determinar cómo se verá una animación antes de hacerlo. A continuación, repaso cómo planifico animaciones en papel (o en una capa plana en Clip Studio).

Las animaciones generalmente se planifican con "cuadros clave": estos son los cuadros que muestran las fases más importantes del movimiento de un objeto. Para un salto, por ejemplo, estaría de pie, en medio del salto, y de pie nuevamente. Cada fotograma entre dos fotogramas clave se llama "fotograma de transición": muestra cómo un objeto pasa de un fotograma clave a otro y da vida a la animación. El siguiente boceto muestra cómo planeo diferentes tipos de movimiento antes de animar una ilustración y los siguientes consejos deberían ayudarlo a comprender (la escritura en la imagen fue en realidad para mis propias notas, así que no sienta que se está perdiendo algo si puede No los lea).

Estas son algunas de las cosas que uso para hacer bocetos como el anterior:

1. Presente varios bocetos antes de planificar y use esta etapa para centrarse en la composición y el diseño general como lo haría para una ilustración fija (vea mis bocetos en la parte 1).

2. Separe los objetos individuales y planifíquelos por separado para que las animaciones complejas sean más fáciles de administrar.

3. Dibuje cada cuadro clave para un objeto utilizando las siguientes sugerencias:

  I. Para un objeto que solo cambia de apariencia, dibuje cada cuadro clave para mostrar los cambios más grandes.

  II Para un objeto que cambia de posición y apariencia, es útil dibujar cada cuadro clave en la posición en la que estará en relación con los otros cuadros clave. Esto le permite realizar un seguimiento de ambos tipos de cambio.

  III. Para un objeto que solo cambia de posición, puede ser útil dibujar un solo cuadro clave e indicar dónde estará el objeto en relación con un objeto estático en el diseño (la línea central de un círculo, por ejemplo).

4. Siempre tome nota de cómo desea que los cuadros de transición den forma a la animación, pero no dibuje cada uno (¡lo hará más tarde!).

5. Cada cuadro de transición está separado por la misma cantidad de tiempo, por lo que cuanto más tenga entre cuadros clave, más lenta será la acción (y viceversa). Yo personalmente uso líneas para hacer un seguimiento de cuántos cuadros quiero y dónde o cuándo quiero que sean.

6. Haga que cada objeto termine su ciclo en el mismo número de cuadros (25 en este caso para que podamos cortar el cuadro clave repetido). Numere sus fotogramas clave para realizar un seguimiento de esto (el fotograma clave 1 será el fotograma 1, el fotograma clave 2, 3, etc. estará en algún lugar entre los fotogramas 2 y 24, y luego el fotograma final final que debería ser el mismo y el fotograma clave 1 será a los 25). Esto asegura que no accidentalmente haga que un objeto tarde más que los demás y lo obligue a rehacer la animación.

7. Si desea que un objeto recorra un movimiento varias veces, pero no puede dividir el número total de fotogramas fácilmente (25 no se puede dividir entre 2 o 3, por ejemplo), puede planificar que el objeto tenga Dos ciclos similares. Por ejemplo, planeé que el planeta pasara por un ciclo que tenía 12 cuadros de largo y luego otro que era casi idéntico que tenía 13 cuadros de largo.

8. Haz una línea de tiempo como la de abajo. Dibuje una línea para toda la animación y dibuje una línea al lado que muestre la longitud relativa, el punto de partida y la posición de cada cuadro clave para cada objeto separado en su animación. Esto puede ayudarlo a comparar las velocidades de los objetos (los fotogramas clave más cercanos significan una acción más rápida por lo general), verificar que todos los ciclos se suman y hacer ajustes para agregar más interés.

9. Use símbolos para realizar un seguimiento de las cosas que son difíciles de describir o dibujar (por ejemplo, uso una flecha que apunta en ambas direcciones para recordar cuándo quiero que una animación se repita en la dirección inversa).

10. Cuando intente hacer que un objeto se vea en 3D, bloquee los bocetos con formas básicas (¡los cubos son especialmente útiles!).

4. Clip de animación de estudio!

Hay muchos tutoriales sobre cómo optimizar su espacio de trabajo en Clip Studio, por lo que simplemente repasaré las cosas básicas que necesita y cómo comenzar. Tenga en cuenta que estoy usando Clip Studio EX, por lo que puede haber algunas diferencias en Pro. Sin embargo, me limitaré a usar solo 24 cuadros.

¿Adivina qué? ¡Ya has hecho mucho trabajo en papel! Crea una nueva ilustración. Estoy haciendo esto para un sitio web, por lo que, por ahora, 1920 * 1400 píxeles a 72ppi es un buen punto de partida. ¡No hagas de esto una animación todavía!

Haga un boceto del diseño general o importe una imagen de su boceto en papel.

Ahora, cree la ilustración como lo haría normalmente, pero use capas para separar los objetos.

Dependiendo de su animación, puede usar capas vectoriales para simplificar el proceso de animación como el video a continuación. Piense en este y otros métodos que puede usar al ilustrar y superponer su diseño, esto lo ayudará mucho.

Una vez que haya terminado, coloque todas las capas (excepto el boceto) en una carpeta. Si hay capas que permanecen quietas y están debajo de todas las demás, puede dejarlas fuera de la carpeta (lo mismo con las capas que están quietas y por encima de todas las demás).

¡Finalmente, es hora de animar! Abra la ventana de la línea de tiempo y busque un botón que diga agregar nueva línea de tiempo y configúrelo para 24 cuadros. Puede elegir su propia velocidad de cuadros, pero 15 fps es un buen comienzo dado el bajo número de cuadros en la animación. Vaya al menú de animación en la parte superior y seleccione agregar carpeta de animación. Coloque su carpeta de capas en la nueva carpeta de animación. Ahora, cree 23 duplicados de la carpeta de capas (configuré ctrl + alt + d como acceso directo para esta acción). Puede revisarlos y cambiarles el nombre a números para facilitar las cosas.

Regrese al menú de animación y seleccione editar pista, especifique celdas por lotes. Asegúrese de que la carpeta de la primera capa en la carpeta de animación esté seleccionada y seleccione "especificar el nombre de la celda de animación existente" en el cuadro de diálogo de especificación por lotes, debe enumerar los nombres de la primera y la última carpeta. Esto establecerá cada carpeta como un marco en su animación.

Con este método, puede realizar pequeños cambios sin volver a dibujarlo cada vez, separar sus objetos para hacer que la animación compleja sea más manejable y evitar el desorden de superponer una ilustración una y otra vez. Este método también es útil cuando se usan capas vectoriales, ya que puede cambiar las líneas rápida y fácilmente al pasar por cada cuadro y ajustar los puntos de control. Ahora puede pasar y hacer los fotogramas clave para cada objeto exactamente donde desea que estén y luego comenzar a hacer los fotogramas de transición según lo planeado en sus líneas de tiempo.

Alternativamente, puede separar cada objeto (cada capa) en diferentes carpetas de animación y crear duplicados de cada capa; esto puede ser beneficioso de múltiples maneras.

¡¡¡ADELANTE!!!

5. Finalizando

¡Finalmente puedes probarlo todo! ¡Juega la línea de tiempo para ver tu trabajo cobrar vida!

Si hay algo que se ve mal, asegúrese de intentar entender por qué está actuando de manera extraña y luego regrese y arregle los marcos de transición que están causando el problema.

Una vez que haya terminado de solucionar los problemas, puede revisar y pulir las partes que se vean desordenadas o incompletas.

Personalmente, me di cuenta de que dos de los planetas están accidentalmente frente a los rayos a los lados de la estrella, ¡necesito rehacer la animación para mi nombre, y hay algunas líneas desordenadas!

NOTA: No puede suavizar una animación simplemente agregando más cuadros y aumentando la velocidad de cuadros. Es mucho más importante hacer cuadros de transición bien diseñados utilizando los principios de animación como squash y estiramiento, arco, demora y otros que agregar más cuadros de transición.

6. Usarlo en un sitio web

Exporte su animación como gif, este es el formato más utilizado y la mayoría de los creadores de sitios web como Adobe Portfolio, Squarespace, etc. ya deberían admitir animaciones en bucle para que usted (o un cliente) pueda simplemente colocarlo en su lugar. De lo contrario, me temo que no puedo ayudar (todavía), pero debería haber muchos tutoriales de desarrollo web sobre este tema y otros.

7. Diviértete!

Si quieres saber más sobre los procesos y métodos que uso, ¡házmelo saber y puedo hacer tutoriales más detallados! Todas las preguntas son bienvenidas!

Woohoo! ¡Lo hicimos!