Con la introducción del panel Línea de tiempo en Photoshop CS6, Adobe ha aprovechado gran parte de sus nuevas capacidades de edición de video que le permiten editar, mejorar y renderizar videos directamente en Photoshop. Aunque Adobe lo está promocionando principalmente como una herramienta de edición de video, lo que es realmente interesante para mí es la capacidad de crear picaduras animadas rápidas directamente desde Photoshop sin la necesidad de cambiar los paquetes de software.
Aquí, le mostraré cómo crear rápidamente una pequeña pantalla de presentación animada para el iPad. Para los diseñadores que están acostumbrados a trabajar con Flash o After Effects, estas herramientas pueden parecer bastante básicas, pero para cualquier diseñador que desee incursionar en gráficos en movimiento, brindan una introducción rápida y fácil a la noción de línea de tiempo y fotogramas clave. Por supuesto, el resultado final no tiene por qué ser para una pantalla de presentación de iPad, por lo que solo está limitado por su imaginación en lo que se refiere al uso de su resultado final.
01 Comience configurando un nuevo documento con la resolución de iPad deseada desde el menú desplegable Dispositivos y dispositivos móviles. Llene el fondo con un color de su elección (gris en este caso), cree un cuadrado blanco en el centro en una nueva capa, luego cree dos puntos negros y ajústelos a dos esquinas opuestas, nuevamente en capas separadas. Etiqueta todo de forma adecuada para hacer la vida más fácil más adelante.
02 En el panel Línea de tiempo, presione Crear línea de tiempo de video y todas sus capas aparecerán dentro de la línea de tiempo. Configúrelo en 00:00, seleccione Spot 01 y expanda la capa usando el ícono de triángulo. Ahora presione la pestaña Posición para crear un fotograma clave. Mueva la línea de tiempo a la 01:00 y cree otro fotograma clave de posición. Ahora mueva el lugar hacia la parte inferior izquierda del cuadrado y repita el proceso para el segundo lugar usando exactamente los mismos tiempos. Repita el proceso con los puntos a intervalos de un segundo hasta la marca de tres segundos, creando fotogramas clave a medida que avanza.
03 Regrese a 00:00 y, en una nueva capa justo encima del fondo, cree una selección diagonal y rellénela con un color. Queremos que esta forma se deslice hacia adentro y hacia afuera. Cree un fotograma clave de posición a las 00:00 y, manteniendo presionada la tecla Mayús, mueva la forma fuera del lienzo. A la 01:00 cree otro fotograma clave y mueva la forma a su posición original. Vuelva a reproducirlo y parecerá que se desliza hacia adentro. Puede ver cómo los fotogramas clave coinciden con los de los puntos.
04 Ahora mueva la línea de tiempo a lo largo de otros 10 fotogramas hasta 01:10 y vuelva a mover la forma a una posición justo dentro de los límites del documento. Regrese la línea de tiempo a la 01:00 donde la forma está a la vista completa, seleccione todo y copie la capa. En la capa cuadrada, presione Cmd / Ctrl + A para hacer una selección, y luego vaya a Editar> Pegar en para pegar la forma dentro del cuadrado en una nueva capa. Rellénelo de negro, etiquételo adecuadamente y muévalo por encima de la capa cuadrada original.
05 Ahora queremos que la forma interior negra se deslice hacia adentro con la forma amarilla. Mueva la capa hacia atrás en la línea de tiempo a las 00:00 y repita el proceso desde la forma amarilla anterior, configurando el primer fotograma clave a las 00:00 con la forma completamente fuera del lienzo y a las 01:00 con ella completamente a la vista, pero luego no agregue más fotogramas clave para que parezca deslizarse hacia adentro con la capa amarilla, pero permanezca en su posición.