Crear un GIF de interfaz animado en Adobe Photoshop

¿Alguna vez has querido convertir el PSD de la interfaz de una aplicación en una demostración totalmente animada para tus clientes o tu sitio web? Resulta que también puedes usar Photoshop para eso.

En este tutorial, diseñaremos una sencilla aplicación de noticias para el iPhone y, a continuación, la animaremos para tu presentación a los clientes y la exportaremos como archivo GIF. Aprenderás todo lo que necesitas para pasar de la idea a la demo animada, todo dentro de cualquier versión reciente de Photoshop.

Recursos del tutorial

Hemos utilizado Photoshop CC en este tutorial, pero CS5 o 6 también servirían para seguirlo. También necesitarás las siguientes fotos de archivo para completar este tutorial. Por favor, descárgalas antes de empezar, o sustitúyelas por una imagen similar y ajusta los pasos en consecuencia:

• Teléfono móvil - $1+
• Conjunto de fotos de stock de Tuts+ - gratis

1. Diseñar la interfaz gráfica de una aplicación para el iPhone

Paso 1

En primer lugar, vamos a empezar a diseñar la interfaz de la aplicación. Crea un nuevo archivo (Control-N) con un tamaño de lienzo de 640 px por 1136 px, luego haz clic en OK.

Si por el contrario ya tienes una interfaz de la app diseñada, puedes abrirla en Photoshop y luego pasar a la sección de Tap de este tutorial.

Paso 2

Haz clic en Vista > Guía nueva para hacer una nueva guía, que nos ayudará a colocar los elementos de la GUI con precisión. Ajústala a Vertical con posición 15 px.

Paso 3

Agrega otra guía vertical a cada lado del lienzo con una distancia de 15 px entre cada guía.

Paso 4

Dibuja otra guía, esta vez horizontal a 40 px, 128 px y 220 px.

Paso 5

Añade una barra de estado en la parte superior de tu lienzo. Si necesitas instrucciones detalladas al respecto, consulta la sección de la barra de estado de nuestro tutorial anterior Cómo diseñar una aplicación de correo electrónico de iOS 7 en Photoshop.

A continuación, haz una nueva capa y luego selecciona la segunda sección y luego rellena con un color gris, #2c3137.

Paso 6

Añade el texto del título de la aplicación en la parte superior de la interfaz.

Paso 7

Añade un logo al título. Yo solo he dibujado unos simples rectángulos para el logo, pero si tienes un icono de la app ya existente, puedes importarlo en una nueva capa.

Paso 8

Dibuja un icono de lupa utilizando una combinación de dos formas circulares y un rectángulo redondeado, utilizando el mismo color que el logotipo de la aplicación. Colócalo en el lado derecho de la aplicación.

Paso 9

En el otro lado, dibuja cuatro rectángulos redondeados para el icono de las opciones.

Paso 10

Haz una nueva capa con una sección de rectángulos que se ajuste a la barra de título. Rellena la siguiente sección con un color gris, al igual que la sección anterior.

Paso 11

Añade una máscara de capa a la capa, y luego añade un degradado de negro a blanco hasta que el fondo se desvanezca.

Paso 12

Añade un menú con la Herramienta Texto, que contenga las categorías de noticias. Poner el primer menú, en este caso, la opción Todos, en negrita, para indicar que la categoría está activa. Duplícala (Control-J) y luego pon el otro menú, en este caso, Deporte, en negrita, una vez más para indicar qué categoría está seleccionada.

Ahora, desde el panel Capas, establece la Opacidad del menú Deporte a 0% para ocultarlo, ya que queremos que la categoría Todo esté en negrita primero.

Paso 13

Añade una flecha fina para la navegación del menú, hecha de rectángulos redondeados.

Paso 14

Añade otra flecha en el otro lado.

Paso 15

Rellena el resto de la interfaz con el color gris. Asegúrate de poner este fondo debajo de todos los elementos de la GUI (Interfaz gráfica de usuario).

Paso 16

Dibuja un rectángulo gris claro para el fondo de cada sección de noticias.

Paso 17

Aplica las opciones Trazo, Resplandor interior y Resplandor exterior para añadir más contraste al área de noticias. Haz doble clic en la capa y luego utiliza los siguientes ajustes de las capturas de pantalla de abajo:

Paso 18

Dibuja un rectángulo blanco redondeado en la parte superior de la forma anterior. Aquí pondremos la imagen de las noticias.

Paso 19

Aplica el Resplandor interior en la forma blanca con la siguiente configuración:

Paso 20

Selecciona una foto del set de Tuts+ Stock Photo que descargaste previamente, o cualquier otra foto que desees utilizar, y colócala cubriendo la forma del rectángulo blanco redondeado.

Paso 21

Pulsa Control-Alt-G para convertir la capa de la foto seleccionada en una máscara de recorte. La foto pasará automáticamente a la capa que está detrás de ella. Y, esto es lo que ves: una foto perfectamente colocada encima del área de noticias individual.

Paso 22

Añade texto para el contenido de las noticias. Asegúrate de añadir contraste al texto de las noticias para una mejor experiencia de lectura, variando el tipo, el color y el tamaño de la fuente.

Paso 23

Añadiremos iconos en el diseño del elemento de noticias. Dibuja dos pequeños rectángulos redondeados sin Relleno y con un trazo blanco de 1 pt.

Paso 24

Haz doble clic en la capa y añade el estilo de capa Superposición de colores. Utiliza #708196 para tu color.

Paso 25

Repite el proceso anterior, pero esta vez utiliza una combinación de un rectángulo redondeado y un rectángulo.

Paso 26

Añade una pequeña forma de círculo. Ahora, tenemos un icono de etiqueta. ¡Genial!

Hasta aquí, este es el diseño de nuestra app al 100% de aumento.

Paso 27

Añade otros artículos de noticias individuales en la app duplicando las capas de elementos de noticias, personalizándolas adecuadamente.

Paso 28

Añade un área de noticias más grande. Se mostrará cuando se seleccione una noticia individual.

Paso 29

Coloca todos los elementos de las noticias individuales y las noticias grandes en grupos de capas separados. Quieres asegurarte de que cada capa es cuidadosamente colocada en un grupo de capas de acuerdo a su elemento.

Por ejemplo, quieres que cada capa que formó la primera sección de noticias individuales se coloque en un grupo de capas, y los elementos para los artículos de noticias de pantalla completa en otros grupos. Esto te ayudará a trabajar más fácilmente mientras realizas la animación.

Por ahora, no utilizaremos esta sección de noticias grande. Por lo tanto, establece su Opacidad al 0%.

2. Indicador de Tap (pulsación)

Paso 1

Ahora necesitamos diseñar el indicador de tap. Crea un nuevo grupo de capas y nómbralo Tap.  A continuación, dibuja un círculo blanco. Establece su Opacidad al 50%.

Paso 2

Duplica la forma del círculo presionando Control-J. Házlo más grande, establece el trazo en 3 pt con un color blanco, y elimina el color de Relleno.

Paso 3

Añade otra forma de círculo, esta vez más fina. Establece el tamaño del trazo en 2 pt.

Oculta todas las capas dentro del grupo de capas de Tap que acabamos de crear, ya que no querrás que los taps se muestren cuando la interfaz de usuario se cargue por primera vez, sino que solo se mostrarán cuando la animación se fije para la transición a un elemento seleccionado.

3. Aplicación de desplazamiento

Paso 1

Ahora, finalmente estamos listos para empezar a construir nuestra animación de la Interfaz de usuario. Abre el panel Línea de tiempo y crea un nuevo fotograma.

Paso 2

Haz otro marco nuevo.

Paso 3

Ahora es el momento de revelar el grupo de capas de la tap. Al mostrar una escena de desplazamiento, oculta los dos círculos trazados, y vamos a utilizar esta condición para indicar el gesto de desplazamiento. Aparecerá más bien como un trazo continuo, mientras que los círculos trazados exteriores dan una apariencia de ondulación más coherente con un solo toque para seleccionar un elemento.

Paso 4

Cambia la duración a 1 segundo para el primer fotograma y a 0,2 segundos para el segundo fotograma.

Paso 5

Añade otro fotograma.

Paso 6

Activa el grupo de capas Tap y todas las capas de la cuadrícula de noticias. Utiliza la Herramienta Mover para moverlas hacia arriba en tu lista de capas.

Paso 7

Para realizar automáticamente una animación suave entre el fotograma actual y el anterior, haz clic en Intercalar en el menú del panel Línea de tiempo.

Paso 8

Ajusta la interpolación a 5 para el fotograma añadido.

Ahora tenemos una animación de la curadrícula de noticias que se mueve hacia arriba en cada fotograma.

Paso 9

Si crees que la animación es demasiado rápida, puedes hacerla más lenta seleccionando todos los fotogramas y fijando la duración en 0,2 segundos.

Prueba la animación haciendo clic en el icono de reproducción del panel Línea de tiempo. No te olvides de poner la animación en Infinito; de esta forma la animación se repite.

Paso 10

Nuestra animación actual contiene la cuadrícula de noticias moviéndote hacia arriba. En el siguiente fotograma, necesitamos devolverlo a la condición anterior para que continúe sin problemas con el primer fotograma. Para ello, copiamos el segundo fotograma y lo pegamos en la última posición eligiendo Pegar después de la selección en el cuadro de diálogo.

Paso 11

Aplica de nuevo el comando Intercalar para hacer una nueva animación entre el último y el penúltimo fotograma.

Añade un nuevo fotograma y oculta el indicador tap

Hasta aquí, esta es la animación que obtenemos, que nos da una Interfaz de desplazamiento básica.

4. Enlace del Tap

Paso 1

Ahora es el momento de animar la selección de un enlace en el menú. En primer lugar, haz un nuevo fotograma. En este marco, establece la Opacidad del menú de texto con la variante de Todos seleccionada en negrita del menú establecida en 0% y la transparencia de la variante seleccionada de Deporte establecida en 100%.

Paso 2

Active el grupo de capas Tap y revela todas sus capas.  Cambia la duración del cuadro a 0,2 segundos.

Paso 3

Haz un nuevo fotograma con una duración de 0,1 segundos. Esta vez oculta el círculo trazado más fino.

Paso 4

Añade otro fotograma y oculta el siguiente círculo trazado.

Paso 5

Añade un nuevo fotograma y oculta el grupo de capas de tap.

Paso 6

Haz un nuevo fotograma y luego establece la Opacidad de cada historia de noticia en la cuadrícula sin la etiqueta de deporte a 0%.

Paso 7

Todavía en este marco, arrastra las noticias individuales de deportes hacia arriba en la cuadrícula, llenando los espacios vacíos por encima de ellas.

Paso 8

Intercalar entre el fotograma actual y el anterior. Para una animación más rápida, ajusta los fotogramas añadidos a 3.

Paso 9

Establece la duración del último fotograma a 2 segundos.

Para este tap, esta es la animación que tenemos.

6. Tap de Noticias

Paso 1

A continuación, vamos a seleccionar uno de los artículos de noticias y revelarlo en pantalla completa. En primer lugar, haz un nuevo fotograma con una duración de 0,2 segundos y luego revela todas las capas dentro del grupo de capas Tap.

Paso 2

Añade un nuevo marco y establece su duración en 0,1 segundos. Oculta el trazo del círculo más fino.

Paso 3

Añade otro fotograma y luego oculta el siguiente círculo trazado.

Paso 4

Añade otro fotograma con una duración de 0,1 segundos. Oculta el grupo de capas Tap, y haz un nuevo fotograma. Revela la sección de noticias grande que hicimos antes en la Sección 1 Paso 28 estableciendo su Opacidad al 100%. Oculta la retícula de noticias pequeñas estableciendo su Opacidad al 0%.

Paso 5

Añade una animación intercalada entre el fotograma actual y los anteriores.

Esto es lo que tenemos para esta animación.

7. Convertir la animación de las capas en fotogramas

Paso 1

En el panel Línea de tiempo, haz clic en Acoplar cuadros en capas.

Cada fotograma se convertirá en una capa plana. Si tienes 33 fotogramas, también obtendrás 33 capas planas: la capa Fotograma 1 tomada del contenido del fotograma 1, la capa Fotograma 2 tomada del fotograma 2, y así sucesivamente.

Paso 2

Selecciona todas las capas de fotogramas en el panel Capas.

Paso 3

Arrastra las capas a la foto del iPhone que has descargado previamente.

Paso 4

En el panel Línea de tiempo, selecciona Crear cuadro de animación y luego haz clic en el botón Nuevo cuadro.

Paso 5

Asegúrate de que todas las capas siguen seleccionadas. Pulsa Control-T para realizar una transformación. Mantén pulsado Control y luego arrastra cada esquina y colócalas en la esquina de la pantalla.

Paso 6

Haz un nuevo marco para cada capa. Pon el Fotograma 1 de la capa en el primer fotograma, el Fotograma 2 de la capa en el segundo fotograma, el Fotograma 3 de la capa en el tercer fotograma, y así sucesivamente. También quieres hacer coincidir la duración de cada uno de los fotogramas. Asegúrate de poner el bucle en Infinito, para que la animación continúe en bucle.

Mira la imagen de abajo para un ejemplo. La capa de Fotograma 23 se muestra en el fotograma 23. La capa del Fotograma 25 se muestra en el fotograma 25, y así sucesivamente. Continúa esto para cada fotograma.

Paso 7

Es el momento de exportar el resultado como archivo GIF animado. Selecciona Guardar para Web en el menú Archivo, y selecciona GIF como tipo de archivo. Juega con los ajustes disponibles para conseguir el tamaño de archivo óptimo. Prueba el resultado de la animación haciendo clic en el botón de reproducción. Asegúrate de establecer las Opciones de bucle en Infinito.

Y eso es todo: has diseñado la interfaz de usuario de una aplicación de demostración, la has animado y has puesto la animación dentro de una imagen del iPhone para que la animación parezca que se está ejecutando en un dispositivo real.

Conclusión

Espero que este tutorial te haya resultado útil. Puedes modificar los pasos incluidos para que funcionen con cualquier tipo de aplicación que quieras demostrar, y puedes utilizar una imagen de dispositivo diferente para mostrar, por ejemplo, una aplicación para tabletas o un sitio web. También puedes probar otros tipos de interacción multitáctil en la presentación final, como el desplazamiento por inclinación o el pellizco para hacer zoom, si modificas las animaciones.

Si creas tus propias animaciones de demostración de aplicaciones utilizando este tutorial, nos encantaría verlas en los comentarios.