COMUNIDAD
ENTRARGUARDADOS
¡Bienvenido a esta guía detallada sobre cómo comenzar a usar Jitter para crear animaciones 2D increíbles! A continuación, encontrarás una guía paso a paso para navegar por la plataforma, usar las herramientas esenciales y aprender a crear animaciones básicas y avanzadas con esta intuitiva herramienta. Esta lección está diseñada especialmente para principiantes.
1. Paso 1: Ve al sitio oficial de Jitter: https://jitter.video
2. Paso 2: Regístrate con tu correo electrónico o usando tu cuenta de Google.
3. Paso 3: Después de iniciar sesión, serás dirigido al panel principal de Jitter, donde puedes crear un nuevo proyecto o utilizar plantillas predefinidas.
Al abrir Jitter, te encontrarás con una interfaz simple e intuitiva. Estos son los elementos clave:
• Panel de Herramientas (Lado izquierdo):
• Move Tool (V): Te permite mover los objetos o elementos seleccionados.
• Add Element: Aquí puedes agregar nuevos elementos como textos, imágenes, formas, íconos y más.
• Templates (Plantillas): Ofrece una biblioteca de plantillas animadas prediseñadas para empezar rápidamente.
• Área de Trabajo (Centro):
• Aquí es donde podrás diseñar y animar tus elementos.
• Puedes ver la previsualización en tiempo real mientras trabajas.
• Panel de Propiedades (Lado derecho):
• Aquí puedes ajustar las propiedades de cada elemento, como la opacidad, el tamaño, el color y los movimientos animados.
• También puedes agregar interacciones y ajustes de animación detallados.
• Línea de Tiempo (Parte inferior):
• La línea de tiempo es donde puedes añadir y controlar las animaciones de cada uno de tus elementos.
• Aquí es donde se añaden los keyframes para controlar la duración y efectos de las animaciones.
• Mover Elementos: Selecciona cualquier elemento en tu área de trabajo y arrástralo con el ratón para moverlo.
• Rotar o Cambiar Tamaño: Haz clic en las esquinas del cuadro delimitador del objeto seleccionado para rotarlo o cambiar su tamaño.
• Zoom en el Área de Trabajo: Usa la rueda del ratón para acercar o alejar la vista.
1. Agregar Texto o Gráficos:
• Haz clic en el botón Add Element en la barra lateral izquierda.
• Puedes elegir entre agregar texto, imágenes, íconos, o formas básicas.
• Por ejemplo, selecciona Text para agregar un cuadro de texto y escribe el contenido que deseas.
2. Usar Plantillas Predefinidas:
• Ve al panel Templates para acceder a una biblioteca de animaciones pre-hechas.
• Elige una plantilla y personalízala cambiando los textos, colores o elementos gráficos.
• Esto es ideal para empezar rápidamente sin crear animaciones desde cero.
1. Añadir Animaciones:
• Selecciona el elemento que deseas animar (puede ser un texto, una imagen o una forma).
• Ve al Panel de Propiedades en el lado derecho y selecciona la pestaña de Animation.
• Aquí puedes elegir entre diferentes tipos de animaciones predefinidas como fade in, bounce, slide, etc.
2. Animación Personalizada con Keyframes:
• Jitter te permite agregar keyframes en la línea de tiempo para personalizar el movimiento de los objetos.
• Haz clic en el objeto que quieres animar, y luego en Add Keyframe para establecer el inicio de la animación.
• Después, mueve la barra de tiempo hacia adelante y cambia las propiedades del objeto (posición, opacidad, etc.). Jitter interpolará automáticamente los cambios entre los keyframes.
• Una vez hayas configurado la animación, presiona el botón Play (parte superior central) para previsualizarla.
• Puedes ajustar la duración de la animación arrastrando los keyframes en la línea de tiempo.
• Color y Opacidad: Selecciona cualquier objeto y ve al Panel de Propiedades. Desde aquí puedes cambiar el color de relleno o bordes, así como ajustar la opacidad.
• Tamaño y Posición: Usa los deslizadores de tamaño o ingresa valores exactos en píxeles para tener un control preciso sobre tus elementos.
• Interacciones: Puedes añadir interactividad a tus elementos, como hacer que se animen cuando el usuario haga clic en ellos o cuando se desplaza por la página.
Aunque Jitter es una plataforma 2D, puedes crear un efecto de profundidad agregando sombras. En el Panel de Propiedades, puedes activar y personalizar las sombras de tus objetos para darles un efecto más realista.
1. Paso 1: Una vez hayas terminado de animar, haz clic en el botón Export (en la esquina superior derecha).
2. Paso 2: Elige el formato que prefieras:
• Video (MP4): Perfecto para compartir en redes sociales o en presentaciones.
• GIF: Ideal para animaciones simples en sitios web o como memes.
• Lottie (JSON): Usado para integrar animaciones interactivas en sitios web y apps.
Si deseas integrar una animación de Jitter en un sitio web, puedes usar la exportación Lottie o JSON. Esto te permitirá tener animaciones ligeras y responsivas que mejorarán la experiencia de usuario sin ralentizar tu página.
• Usa Plantillas: Si eres nuevo en la animación, comienza con las plantillas que te ofrece Jitter. Estas te permiten personalizar animaciones pre-hechas y aprender observando cómo están configuradas.
• Mantén la Animación Fluida: No sobrecargues tu proyecto con demasiadas animaciones a la vez. Asegúrate de que cada elemento tenga un propósito claro en la experiencia del usuario.
• Optimización: Al exportar GIFs o videos, usa las opciones de compresión para que los archivos no sean demasiado pesados y no afecten el rendimiento de tu sitio o app.
• Prueba en Diferentes Dispositivos: Asegúrate de que las animaciones se vean bien en diferentes tamaños de pantalla y dispositivos, especialmente si los vas a usar en un sitio web o una app.
Crea una animación interactiva utilizando Jitter para un sitio web o una presentación digital. El proyecto debe incluir al menos dos interacciones activadas por el usuario y debe estar optimizado para una carga rápida.
1. Diseña tu Animación:
• Elige una plantilla o crea una animación desde cero.
• Añade al menos dos elementos interactivos (por ejemplo, un botón que al hacer clic active una animación).
2. Ajusta y Optimiza:
• Asegúrate de que la animación sea fluida y responsiva.
• Si es necesario, ajusta la duración y la cantidad de frames para optimizar la velocidad de carga.
3. Exporta y Publica:
• Exporta tu animación en formato Lottie o GIF y súbela a tu sitio web o proyecto.
• Comparte el enlace o presenta la animación en clase para obtener retroalimentación.
¡Ya estás listo para crear animaciones increíbles en Jitter! Con esta plataforma, puedes diseñar y animar con facilidad, integrando elementos interactivos que harán que tus proyectos destaquen. Sigue explorando y practicando para dominar todos los trucos que Jitter tiene para ofrecer. 🎨✨
¿CUAL TE PARECIO MMÁS DIFÍCIL O FÁCIL? CUÉNTANOSLO EN LOS COMENTARIOS Y RECIBE PUNTOS EXTRAS
