¿Cómo crear GIF animados de maquetas prototipo, como las de Dribbble?

Rocín

¿Cómo crear GIF animados de maquetas prototipo, como las de Dribbble?

Seguro 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 interpoladas simples, pero nunca puedo hacer que mis GIF se vean como el ejemplo aquí.

¿Qué usan 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?

ckpepper02

Me parece que Creative Dash inició esa tendencia, o al menos la popularizó en Dribbble . La mayoría de sus tomas son Gifs animados para mostrar sus increíbles habilidades de interfaz de usuario.

Joonas

Quería ver lo difícil que sería hacer eso en AE, y debo decir que fue sorprendentemente fácil. Semi lento, pero muy divertido. Esto es lo que hice. Me volví perezoso y dejé la capa de resaltado del teléfono debajo de la interfaz gráfica de usuario :/ ..pero sí, diría que cualquiera podría hacerlo, si soy capaz de hacerlo con mi pequeño conocimiento de AE.

Rocín

@Joonas Eso es genial! ¿Podría publicar algunas instrucciones rápidas sobre cómo logró eso?

Joonas

Sí, estaba planeando hacerlo mañana ya que ya es un poco tarde. Lo bueno de AE ​​es que una vez que aprendes a animar un objeto desde el punto A hasta el punto B, prácticamente sabes cómo animar: opacidad, rotación, escala y punto de anclaje. Porque todos funcionan más o menos de la misma manera.

Rocín

¡Por favor comparte una vez que lo escribas! Tiene sentido, parece bastante simple, pero aun así me gustaría ver cómo lo hacen los expertos.

Rocín

@Joonas ¿Tuviste la oportunidad de escribir sobre cómo lo hiciste? Intenté jugar con AE pero mis animaciones aún no se ven refinadas. Agradecería si pudieras compartir tu proceso.

Joonas

Todavía no. Lo escribiré más tarde cuando salga del trabajo (~6 horas).

Joonas

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

ingrese la descripción de la imagen aquí



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, al presionar Cmd+Nsolo se crea una nueva Composición.

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

La segunda composición con animaciones GUI debe tener el 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, puede estirarse para parecer extraño si la relación de aspecto está desactivada.



Importación de 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 tiene que reemplazar el metraje para 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 un metraje de imagen y todas las imágenes que faltan se restauran (siempre que todas las imágenes que faltan existan en la misma carpeta). También de esta manera hay menos desorden.

Cómo importar imágenes a un proyecto

Haga clic con el botón derecho dentro del panel Proyecto a la izquierda y elija:Import > Multiple files

...o simplemente puede arrastrar archivos a ese panel

Usé slicy para exportar mis imágenes fuera de Photoshop.



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

Esencialmente querrás guardar todos los objetos en movimiento por separado. Es posible que también deba guardar algunos objetos estáticos por separado.

En este proyecto, podría haber guardado potencialmente el encabezado y el pie de página como uno solo, pero el encabezado tenía una sombra que va sobre el primer botón, así 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.

ingrese la descripción de la imagen aquí



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.
    • PrensaP
    • 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).
    • ingrese la descripción de la imagen aquí
    • mover el indicador de tiempo hacia adelante en la línea de tiempo. Arrástralo 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 usar 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.
    • ingrese la descripción de la imagen aquí
    • Puede reproducir la animación presionandospace

Acerque los fotogramas clave para acelerar la animación o aléjelos para ralentizarla.

Continuación de animaciones después de una pausa.

un escenario: ha animado algo de A a B y desea hacer una pausa por X cantidad de milisegundos y luego pasar de B a C.

Cuando haya animado B, avance en la línea de tiempo y haga clic en el ícono de fotograma clave en el lado izquierdo, aquí:ingrese la descripción de la imagen 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.

Animar otras cosas, como Rotación u Opacidad

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

Simplemente use los controles deslizantes numéricos 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 composición.



Cómo esclavizar objetos a otros objetos

En el panel Comp, verá una lista desplegable Principal en cada objeto.

Puede usarlo para definir un padre para un objeto.

ingrese la descripción de la imagen aquí

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

Si animas el objeto Padre para que gire, el Hijo seguirá...



Agregando elasticidad a tu animación

Entonces, tal vez haya notado 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 se puede usar 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.

ingrese la descripción de la imagen aquí

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}


Aliviando....

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.

Utilicé Ease Ease en ese "círculo indicador táctil" para que pareciera 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.

Entonces de la lista:Keyframe assistant > Easy Ease ingrese la descripción de la imagen aquí

A menudo uso Easy Ease, porque soy perezoso...

Fotos o no pasó...

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

ingrese la descripción de la imagen aquí



Colocar borrador/metraje animado en una pantalla

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

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

ingrese la descripción de la imagen aquí



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 elProjects 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, 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, utilizará la velocidad de fotogramas de Comp
  4. Luego simplemente presione renderizar en la esquina superior derecha o en ese panel.
  5. Busque el archivo exportado y ábralo en Photoshop.
  6. Guardar para webCmd+Shift+Alt+S
    • Guardar como .gif

La verdad que 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. Guarde su archivo de proyecto.
  2. Haz clic en una composición en Projects panel(si tienes más de una)
  3. Composition > Add to adobe media encoder queue Cmd+Alt+M
  4. Arrastre un ajuste preestablecido de la columna de la derecha a la columna de la 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 material de archivo

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

  • Haga clic con el botón derecho en una de las imágenes que faltan en el panel Proyecto
  • De la listaReplace footage > File...
  • Ubique su material de archivo y otras 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 fue cambiado.
  • E( Doble toque ) - Revela todas las expresiones utilizadas.
  • J- Se mueve al fotograma clave anterior.
  • K- Pasa al siguiente fotograma clave.
  • space- Juega comp
  • ITecla o home: mueve el indicador de tiempo actual al principio de la línea de tiempo.
  • Cmd+K- Ajustes de composición actuales.
  • Cmd+I- Importar archivos.
  • Alt+{Arrow keys left and right}- Seleccione los fotogramas clave y presione las teclas de acceso rápido para moverlos.
  • Alt+Shift+{Arrow keys left and right}- Seleccione los fotogramas clave y presione las teclas de acceso rápido para moverlos.


Los archivos del proyecto se pueden encontrar here.

Joonas

@Nagarjun Si encuentra algo que no está cubierto aquí, hágamelo saber.

Rocín

¡Por supuesto! ¡Gracias una vez más! ¿Tienes una cuenta de Twitter en la que pueda mencionarte junto con esta respuesta? Estoy seguro de que a mucha gente le encantaría leer esto.

Joonas

@Nagarjun Bueno, no, pero puede vincular directamente a esta respuesta , si lo desea.

LCarvalho

@Joonas Esta respuesta debería tener muchas más puntuaciones... extremadamente profesional...

marcelo

ESTA ES UNA Maqueta ANIMADA GRATUITA. ARCHIVO PSD de un sitio web que se desplaza hacia abajo y una animación de menú completamente editada y animada en Photoshop ridículamente fácil de editar y jugar, puede descargar el archivo gratis aquí , también tengo un video tutorial de cómo es fácil de editar este regalo de promoción.ingrese la descripción de la imagen aquí

ciencia

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

Rocín

¿Cómo pueden imitar a la perfección los gestos del diseño móvil? Entiendo que After Effects no está diseñado específicamente para tales necesidades, sino que es una herramienta genérica de gráficos en movimiento.

ciencia

Si busca en Google, hay muchos recursos disponibles sobre la animación de la interfaz de usuario en Aftereffects. Aquí hay algunos recursos para comenzar: news.layervault.com/stories/…

Confundido

Hay dos maneras de hacer esto.

  1. Vuelva a crear/simular las animaciones deseadas en un programa de animación (de los cuales After Effects es uno) y luego exportarlo como un gif animado. Obviamente (como te habrás dado cuenta) esto implicará también crear toques "falsos" y otras interacciones para demostrar lo que está pasando.

  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 son increíblemente lentos y el viaje es por derecho propio.

Pero la opción 2 tiene ENORMES ventajas sobre la opción 1. No menos importante es que aprenderá algo de programación básica.

Mucho mejor que eso, sin embargo, es que con una habilidad de programación interactiva muy básica, podrá 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 verdaderamente interactivo para demostrar su diseño. Además, la obra de arte se ha probado en un entorno interactivo en el dispositivo, por lo que es seguro que tendrá píxeles y colores perfectos.

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

No si tienes un iPad.

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

http://codea.io

Si no tienes un iPad, consigue uno.

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

http://procesamiento.org/

El procesamiento utiliza otro lenguaje de script llamado Javascript. Es igualmente simple, pero no tan elegante como Lua.

Sandeep Gajula

También puede crear la animación de la interfaz de usuario usando Keynote. Es bastante simple y perfecto para crear animaciones de interfaz de usuario. Luego usé After Effects para simplemente 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 una maqueta de efectos posteriores de iPhone 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.

ingrese la descripción de la imagen aquí

David

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

GIF Brewery ingrese la descripción de la imagen aquí

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 tiene que extraer fotogramas de sus películas y jugar con las capas en Adobe® Photoshop®. En cambio, deje que GIF Brewery haga todo el trabajo tedioso por usted.

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

Sin embargo, realmente amo todas las instrucciones dadas por @Joonas.