¿Cómo crear GIF animados de prototipos de maquetas, como los de Dribbble?

Estoy seguro de que has visto a Dribbblers subir maquetas animadas de sus diseños.

Aquí hay un ejemplo:

Puedo crear maquetas en Photoshop e incluso aplicarles animaciones Tween simples, pero nunca puedo hacer que mis GIF se vean como el ejemplo aquí.

¿Qué utilizan los Dribbblers para crear estas animaciones?

Tenga en cuenta que las animaciones también incluyen puntos de contacto y movimiento perfecto. Me gustaría convertir mis maquetas de Photoshop para hacer lo mismo.

¿Cómo puedo crear un ejemplo animado de mis maquetas, similar a las creadas por Dribbblers?

Cosas que debes saber para crear algo como esto en After Effects:

Cómo hacer un proyecto y composiciones

Cuando inicia AE, puede presionar Cmd+Npara crear un nuevo proyecto con una composición dentro.

Si ya tiene un Proyecto abierto, presionar Cmd+Nsolo crea una nueva Composición.

En este proyecto, utilicé 2 composiciones. GUIcomp para mantener la GUI y sus animaciones. iphonecomp para mantener tanto el fondo como la GUIcomp.

La segunda composición con animaciones GUI debe ser del mismo tamaño que la pantalla, o al menos tener la misma relación de aspecto. Más tarde, cuando vaya a colocarlo en la pantalla, podría estirarse para parecer extraño si la relación de aspecto está desactivada.

Importar imágenes a AE

After Effects tiene un sistema bastante bueno para importar archivos .psd, pero no me gusta usarlo porque si extravía, mueve o cambia el nombre del archivo .psd, after effects no puede encontrarlo y debe reemplazar el metraje por cada capa por separado.

Si importa una carpeta de imágenes en los proyectos y usted, por ejemplo. cambie el nombre de la carpeta de imágenes, solo tiene que reemplazar el metraje de una imagen y se restaurarán todas las imágenes faltantes (siempre y cuando existan todas las imágenes faltantes en la misma carpeta). También de esta manera hay menos desorden.

Cómo importar imágenes a un proyecto

Haga clic derecho dentro del panel Proyecto a la izquierda y elija: Import > Multiple files

... o simplemente puedes arrastrar archivos a ese panel

Solía slicy para exportar mis imágenes fuera de Photoshop.

¿Qué objetos debe guardar como archivos de imagen separados?

Esencialmente, querrá guardar todos los objetos en movimiento por separado. También es posible que deba guardar algunos objetos estáticos por separado.

^{En este proyecto, podría haber guardado el encabezado y el pie de página como uno solo, pero el encabezado tenía una sombra que pasa sobre el primer botón, por lo que tuve que guardarlos por separado.}

Aquí hay un desglose de cómo guardé mis archivos de imagen en Photoshop antes de importarlos a AE.

Animando 101

Animación de posición:

1. Animación de posición:
   • Seleccione su objeto en la lista en el lado izquierdo de la línea de tiempo.
   • prensa P
   • Haga clic en el icono del cronómetro que ahora está debajo de la capa seleccionada. Esto agrega automáticamente el primer fotograma clave, donde sea que esté su indicador de tiempo (es la línea roja en la línea de tiempo).
   • 
   • mueva el indicador de tiempo hacia adelante en la línea de tiempo. Arrástrelo o Cmd+{Arrow left or right}oCmd+Shift+{Arrow left or right}
   • en el visor de composición, arrastre su objeto a la posición donde desea que se mueva (también puede usarlo Shift+arrow keys, como en Photoshop o arrastrando los valores numéricos).
   • Aparece otro fotograma clave en la línea de tiempo y ahora tiene una animación.
   • 
   • Puedes reproducir la animación presionando space

Mueva los fotogramas clave más cerca unos de otros para acelerar la animación o más lejos el uno del otro para reducir la velocidad.

Animaciones continuas después de una pausa.

un escenario: has animado algo de A a B y quieres pausar X cantidad de milisegundos y luego pasar de B a C.

Cuando haya animado a B, avance en la línea de tiempo y haga clic en el icono de fotograma clave en el lado izquierdo, aquí:

Debería verse atenuado, así que no te preocupes. Eso solo significa que no hay fotograma clave en esa posición

Dado que el fotograma clave n. ° 2 y la transformación del fotograma clave n. ° 3 recién creado tienen los mismos valores, ahora hay una pausa entre esos dos fotogramas clave. Luego puede continuar animando normalmente, avanzando en la línea de tiempo y cambiando los valores nuevamente.

Animando otras cosas, como Rotación u Opacidad

Solo quería aprovechar este momento para decirles que todos ellos funcionan igual que las animaciones de posición (... menos el arrastre).

Simplemente use los controles deslizantes de números que aparecen cuando presiona las teclas de acceso rápido a continuación.

Teclas de acceso rápido para diferentes métodos de transformación:

• P - Posición
• T - opacidad
• R - Rotación
• S - Escala
• A - Punto de anclaje

Simplemente seleccione los objetos y presione una de estas teclas de acceso rápido y comience a animar. Si no selecciona nada, revela métodos de transformación para cada objeto en la compilación.

Cómo esclavizar objetos a otros objetos

En el panel Comp verás una lista desplegable principal en cada objeto.

Puede usarlo para definir un padre para un objeto.

Si luego mueve el padre, notará que el elemento hijo ahora se mueve con él. Lo mismo ocurre con las animaciones que adjunte al elemento principal.

Si anima el objeto primario para rotar, el niño seguirá ...

Agregando elasticidad a tu animación

Entonces, tal vez notó que la animación del botón no se detiene en una pared, sino que se detiene de una manera muy elástica.

After Effect Expressions puede usarse para lograr esto (también puede hacer mucho más).

Para aplicar la secuencia de comandos de expresión a una animación, Alt+{mouse click}el cronómetro y pegar en la secuencia de comandos.

La expresión que usé en la animación de mi botón

Las primeras 3 variables amp, freq, decayse pueden editar para obtener diferentes resultados.

Puede aplicar este mismo script a animaciones basadas en movimiento. Por ejemplo, la animación de opacidad no se ve afectada.

También se puede encontrar aquí.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}

Alivio ...

Entonces, esta es otra cosa que puede hacer que la animación parezca mucho menos lineal, al igual que el script de Expresión anterior.

Usé Ease Ease en ese "círculo indicador táctil" para hacer que parezca un movimiento un poco más humano.

Puede seleccionar uno o varios fotogramas clave y hacer clic con el botón derecho en uno de ellos.

Luego de la lista: Keyframe assistant > Easy Ease

A menudo uso Easy easy, porque soy vago ...

Fotos o no sucedieron ...

Aquí hay una animación de posición simple que demuestra cómo la relajación y este script de expresión en particular pueden tener un gran impacto en la animación.

Colocación de comp / animaciones animadas en una pantalla

Entonces, después de que la GUI esté animada, es hora de colocarla en la pantalla del dispositivo.

1. Coloque la composición de la GUI dentro de la composición del iPhone, al igual que coloca las imágenes dentro de una composición.
2. Haga doble clic en la compilación de iPhone en el panel Proyecto
3. Seleccionar comp GUI
4. Desde el menú superior Effects > Distort > Corner pin
5. Luego, simplemente arrastre cada esquina para que coincida con las esquinas de la pantalla del dispositivo.

Exportando a .gif

AE no tiene un método nativo para hacer esto, pero no te preocupes, hay formas.

Prefiero hacer esto:

1. Haga clic en una composición en el Projects panel
2. Composition > Add to render queue Cmd+Ctrl+M
3. Luego, en la parte inferior, donde normalmente se encuentra la línea de tiempo, usted elige qué exportar y dónde.
   • Normalmente exporto un .mov sin pérdidas
   • Si hace clic en "Configuración de procesamiento", puede elegir una velocidad de fotogramas; de lo contrario, usará la velocidad de fotogramas Comp
4. Luego, solo presiona render en la esquina superior derecha o ese panel.
5. Encuentra el archivo exportado y ábrelo en Photoshop.
6. Guardar para web Cmd+Shift+Alt+S
   • Guardar como .gif

Sinceramente, no es tan malo ...

Exportar como un archivo de video

Entonces, aunque el método anterior le muestra cómo exportar un archivo sin pérdidas, no es la forma en que debe exportar archivos de video.

Lo haces así:

1. Guarda tu archivo de proyecto.
2. Haga clic en una composición en Projects panel(si tiene más de una)
3. Composition > Add to adobe media encoder queue Cmd+Alt+M
4. Arrastre un preset desde la columna derecha a la columna izquierda
5. Presiona play.
6. Si no elige la carpeta de exportación, por defecto va justo al lado del archivo del proyecto.

Cómo reemplazar metraje

¿Entonces AE no puede encontrar sus archivos? Hacer esto:

• Haga clic derecho en una de las imágenes que faltan en el panel Proyecto
• De la lista Replace footage > File...
• Localiza tu material de archivo y esas cosas

Otras teclas de acceso rápido útiles

• U- Revela todos los fotogramas clave usados ​​en la composición (si no tiene nada seleccionado). Realmente útil cuando necesita mover varios fotogramas clave a la vez, por ejemplo.
• U( Doble toque ): revela todo lo que se cambió.
• E( Doble toque ): revela todas las expresiones usadas.
• J - Se mueve al fotograma clave anterior.
• K - Se mueve al siguiente fotograma clave.
• space - Reproduce comp
• IhomeTecla o : mueve el indicador de tiempo actual al comienzo de la línea de tiempo.
• Cmd+K - Configuración de composición actual.
• Cmd+I - Importar archivos.
• Alt+{Arrow keys left and right} - Seleccione fotogramas clave y presione las teclas de acceso rápido para moverlos.
• Alt+Shift+{Arrow keys left and right} - Seleccione fotogramas clave y presione las teclas de acceso rápido para moverlos.

Los archivos del proyecto se pueden encontrar here.

ESTE ES UN ARCHIVO ANIMADO GRATUITO .PSD de un desplazamiento de página web y una animación de menú completamente editada y animada en Photoshop ridículamente fácil de editar y jugar, puedes descargar el archivo gratis aquí , también tengo un video tutorial de cómo es Fácil de editar este regalo de promoción.

Si miras en los comentarios sobre esa publicación en particular, el chico dice que usó Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html

Hay dos maneras de hacer esto.

1. Recree / simule las animaciones deseadas en un programa de animación (de las cuales After Effects es uno) y luego expórtelas como un gif animado. Obviamente (como te has dado cuenta) esto implicará también crear toques "falsos" y otras interacciones para demostrar lo que está sucediendo.

2. Cree un prototipo funcional y luego grabe la salida de su dispositivo a través de AppleTV o similar a través de la salida HDMI a medida que se pasa a su televisor.

Ambos consumen mucho tiempo y el viaje es por derecho propio.

Pero la opción 2 tiene ENORMES ventajas sobre la opción 1. Una de las cuales es que aprenderá algo de programación básica.

Sin embargo, mucho más que eso es que, con una capacidad de programación interactiva muy básica, podrás iterar a través de variaciones y enfoques alternativos mucho más rápido que alguien que usa el software de animación.

Y tendrá algo realmente interactivo para demostrar su diseño. Además, la obra de arte ha sido probada en un entorno interactivo en el dispositivo, por lo que seguramente será perfecta para píxeles y colores.

Pero espera, lo sé. Estás asustado. Va a ser difícil, ¿verdad?

No si tienes un iPad.

Codea es la forma más barata y rápida de crear animaciones e interactividad triviales (y MUY complejas) en el lenguaje de scripting más simple y limpio del mundo ... Lau.

http://codea.io

Si no tienes un iPad, obtén uno.

Hasta entonces, continúe con learning processing.org, ya que podrá hacer maquetas igualmente interesantes dentro de eso:

http://processing.org/

Processing usa otro lenguaje de script llamado Javascript. Es igualmente simple, pero no tan elegante como Lua.

También puede crear la animación de la interfaz de usuario utilizando Keynote. Es bastante simple y perfecto para crear animaciones de interfaz de usuario. Luego usé After Effects para colocar el video en el teléfono.

Paso 1: Primero creé la animación de la interfaz de usuario en keynote e hice esto: http://vimeo.com/108991829

Paso 2: luego coloqué el video en un iPhone después de la maqueta de efectos que encontré en línea y guardé el archivo .mov. Siguiendo las instrucciones de este video: http://youtu.be/VeZGwjVwDrc

Paso 3: Con la ayuda de Photoshop y siguiendo las instrucciones, hice esto.

Si desea apegarse a Keynote y exportarlo como formato Quicktime, creo que no estaría de más intentarlo:

GIF Brewery

GIF Brewery le permite convertir breves clips de sus archivos de video en GIF. Ya sea que desee crear el GIF de gato más nuevo o proporcionar una vista previa de un video más largo, GIF Brewery es para usted.

Ya no debes extraer cuadros de tus películas y jugar con capas en Adobe® Photoshop®. En cambio, deja que GIF Brewery haga todo el trabajo tedioso por ti.

Además, GIF Brewery contiene muchas otras características para expresar tu creatividad. Puede agregar subtítulos para recrear el diálogo o agregar múltiples filtros de imagen.

Aunque realmente amo todas las instrucciones dadas por @Joonas.