¿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?
Cosas que necesita saber para crear algo como esto en After Effects:
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. GUI
comp para contener la GUI y sus animaciones. iphone
comp para contener tanto el fondo como el GUI
borrador.
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.
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.
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.
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.
Acerque los fotogramas clave para acelerar la animación o aléjelos para ralentizarla.
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í:
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.
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.
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.
En el panel Comp, verá una lista desplegable Principal en cada objeto.
Puede usarlo para definir un padre para un objeto.
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á...
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.
Las primeras 3 variables amp, freq, decay
se 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}
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
A menudo uso Easy Ease, porque soy perezoso...
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.
Entonces, después de animar la GUI, es hora de colocarla en la pantalla del dispositivo.
Effects > Distort > Corner pin
AE no tiene un método nativo para hacer esto, pero no te preocupes, hay formas.
Prefiero hacer esto:
Projects panel
Composition > Add to render queue
Cmd+Ctrl+MLa verdad que no es tan malo...
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í:
Projects panel
(si tienes más de una)Composition > Add to adobe media encoder queue
Cmd+Alt+M¿Entonces AE no puede encontrar sus archivos? Hacer esto:
Replace footage > File...
Los archivos del proyecto se pueden encontrar here.
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.
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
Hay dos maneras de hacer esto.
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.
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.
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:
El procesamiento utiliza 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 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.
Si desea apegarse a Keynote y exportarlo como formato Quicktime, creo que no estaría de más intentarlo:
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.
ckpepper02
Joonas
Rocín
Joonas
Rocín
Rocín
Joonas