Cómo crear efectos dinámicos de interfaz de usuario simples con AE
El GIF dinámico muestra el funcionamiento de la interfaz de usuario y tiene las siguientes ventajas:
1. Muestra el flujo de trabajo real
2. .
3. Conveniente para compartir en red.
Herramientas
After Effects CS6 o CC
Photoshop CS6 o CC
Ciclo de diseño
Aftereffects
p>
1. Crea efectos de transición en tu trabajo.
2. Crea un efecto de visualización en otra composición.
Exportar
Modificar (imagen o foto) con la computadora
4 Optimizar imágenes GIF
Datos originales
Mapa de fondo de Londres
Una plantilla de efecto de perspectiva de teléfono móvil
1 Construcción básica
Creación de una composición de efecto de transición
Paso 1.
p>Abrir AE y sintetizar>; Nueva composición (CmdN), tamaño 640*1136, número de fotograma 29, duración 6s.
El segundo paso.
Importe la imagen de fondo de Londres, suelte la imagen en Composición 1 y cambie el tamaño de la imagen de fondo para que se ajuste al lienzo.
Paso 3
Crea 3 cuadros azules (usando una capa de forma) que caerán desde la parte superior de la pantalla hasta la parte inferior de la pantalla, con anchos de 213, 214 y 213px. . El ancho del cuadro encima de los tres cuadros es 640px, ingrese el texto correspondiente.
Paso 4
Usa un bolígrafo para dibujar un círculo de nube hueca y 6 copos de nieve (el contorno está un poco acuoso, perdóname)
Paso 5
Guárdalo.
Composición de visualización
Paso 1
Crear composición 2
Tamaño 1280 x 720, número de fotograma 29, tiempo 6 s.
El segundo paso. Importa fondos de iPhone y cambia su tamaño.
El tercer paso
Arrastre la composición 1 a la composición 2, para que la composición 2 se vea así: (P.D. Agregué una capa de fondo)
Paso 4.
Seleccione Composición 1, Efecto > Giro > Posición de las esquinas, de modo que las cuatro esquinas del Compuesto 1 estén alineadas con las cuatro esquinas de la pantalla en la plantilla.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
Segundo, producción de efectos dinámicos
A continuación, desglosemos la animación:
1.3 El cuadro azul se hace más largo y cae en diferentes momentos.
2. El marco transparente se mueve hacia arriba desde la parte inferior y el ancho siempre permanece igual.
3. Una vez que los cuatro cuadros llegan a su destino, el texto comienza a aparecer. El texto del cuadro azul se amplía de opaco a transparente y el texto del cuadro transparente se amplía de opaco a transparente.
4. Icono de nube, acompañado de copos de nieve.
5. Aparece el texto del copo de nieve.
En la capa de forma, las propiedades controlables incluyen escala, posición, opacidad, trazo, etc. En los efectos dinámicos de este artículo, aprovechamos al máximo los cambios en estas propiedades a lo largo del tiempo para crear efectos de animación.
Proceso de procesamiento
En primer lugar, recomendamos dos complementos de script, Ease y wizz, y Repostion Anchor Point.
Uno es conveniente para hacer curvas de movimiento y el otro es conveniente para establecer la posición del punto de anclaje.
Tres cuadros azules
Abra el compuesto 1, seleccione los tres cuadros azules y configúrelos de la siguiente manera.
Observaciones:
1. Los puntos de anclaje del cuadro azul situado más a la izquierda y a la derecha están en la parte superior (establecidos por el complemento de anclaje).
2. Escala de 0 a 100
3. Utilice Ease y wizz para seleccionar fotogramas clave para ajustar fácilmente la curva de movimiento.
Marco transparente
El movimiento del marco transparente comienza a una velocidad muy rápida y mueve la mayor parte del desplazamiento, luego se ralentiza y regresa lentamente a la posición original. Estas configuraciones son las siguientes
Nota: el movimiento Quadout en Ease y Wizz es más suave.
Texto inferior
Observaciones:
1. Cuando el cuadro azul toca la parte inferior, el texto aparece rápidamente, la opacidad es de 0->100 y la escala es de 0->100
2. cuadro transparente (la configuración de posición se refiere al cuadro transparente), pero el texto de la izquierda está al frente y el texto de la derecha está -4 grados detrás. Preste atención a la configuración en la línea de tiempo.
Nube
Una nube aparece cuando comienza a aparecer el texto en el cuadro transparente. Primero, la transparencia oscila entre 0 y 100.
La escala comienza con 60. Cuando la transparencia llegue a 100, cambiará de 60-->;
Puntos de copo de nieve
Cuando el efecto de nube sea. Completado, los copos de nieve comenzaron a aparecer uno por uno.
Observaciones:
1. Tenga en cuenta que los puntos se moverán aleatoriamente hacia la derecha y luego rebotarán. Preste atención al ajuste de la secuencia de movimiento.
2. En esta ocasión también se recomienda QuadOut.
3. Tenga en cuenta que los puntos aparecen uno por uno, por lo que los cambios de transparencia deben establecerse secuencialmente en la línea de tiempo.
Efecto de texto de nieve
Aquí, el movimiento de la máscara se utiliza para crear un efecto en el que el texto de nieve aparece gradualmente. Tenga en cuenta que la opacidad de la escena de nieve también cambiará (el cambio de opacidad de la máscara es redundante, no lo imite).
Efecto:
Enfoque del autor original:
Efecto:
Resultado:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
Tercero, exportar
Método 1: AEPS
1 Después de guardar, componer en AE >: Agregar a la cola de renderizado
Después. configuración, haga clic en Renderizar.
2. Abra el renderizado. mov(Archivo>Importar>Fotogramas de vídeo a capas)
3.cmd Transferir o archivo>Guardar como formato disponible en la red
Observaciones:
1. selección de opciones
2. Puede configurar el tamaño de la imagen
3 Preste atención para seleccionar el formato Gif
Método 2: Licecap
Si no lo desea Con PS, primero puede ajustar el tamaño del lienzo en AE y luego usar LiceCap, un pequeño software que graba la pantalla en GIF. Es muy conveniente y puede considerarse el mejor software de grabación de GIF. (Versiones de múltiples plataformas)