7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Animation

Crear un GIF de interfaz animado en Adobe Photoshop

Scroll to top
Read Time: 12 mins
This post is part of a series called Animation in Adobe Photoshop.
Make an Animated Pumpkin Icon Using Pixel Art in Adobe Photoshop
Create a Run Cycle Animation From Scratch in Adobe Photoshop

Spanish (Español) translation by Leareny Guerrero (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

¿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:

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.

new docnew docnew doc

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.

guideguideguide
guide in placeguide in placeguide in place

Paso 3

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

15px guides15px guides15px guides

Paso 4

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

horizontal guideshorizontal guideshorizontal guides
all guides in placeall guides in placeall guides in place

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.

status barstatus barstatus bar

Paso 6

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

titletitletitle

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.

logologologo

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.

search iconsearch iconsearch icon

Paso 9

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

optionsoptionsoptions

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.

next barnext barnext bar

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.

gradientgradientgradient

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.

menusmenusmenus

Paso 13

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

nav arrownav arrownav arrow

Paso 14

Añade otra flecha en el otro lado.

matching nav arrowmatching nav arrowmatching nav arrow

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).

backgroundbackgroundbackground

Paso 16

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

lighter backgroundlighter backgroundlighter background

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:

strokestrokestroke
inner glowinner glowinner glow
outer glowouter glowouter glow

Paso 18

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

news elementnews elementnews element

Paso 19

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

news entry glownews entry glownews entry glow

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.

photo in newsphoto in newsphoto in news

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.

photo placementphoto placementphoto placement

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.

styled textstyled textstyled text

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.

iconsiconsicons

Paso 24

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

add color overlayadd color overlayadd color overlay

Paso 25

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

another iconanother iconanother icon

Paso 26

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

tag and link iconstag and link iconstag and link icons

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

100 magnified app UI100 magnified app UI100 magnified app UI

Paso 27

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

filled articlesfilled articlesfilled articles

Paso 28

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

larger news arealarger news arealarger news area

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.

layer groupslayer groupslayer groups

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%.

tap sectortap sectortap sector

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.

tap bordertap bordertap border

Paso 3

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

thinner circlethinner circlethinner circle

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.

timelinetimelinetimeline

Paso 2

Haz otro marco nuevo.

another new frameanother new frameanother new frame

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.

scrolling circlescrolling circlescrolling circle

Paso 4

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

durationdurationduration

Paso 5

Añade otro fotograma.

another new frameanother new frameanother new frame

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.

move layer groupsmove layer groupsmove layer groups

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.

tweentweentween

Paso 8

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

tween of 5tween of 5tween of 5

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

auto-generated news grid animationauto-generated news grid animationauto-generated news grid animation
news grid animation 2news grid animation 2news grid animation 2

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.

slower animationslower animationslower animation

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.

playplayplay

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.

copy framecopy framecopy frame
paste framepaste framepaste frame
paste after selectionpaste after selectionpaste after selection

Paso 11

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

tween againtween againtween again
5 frame tween5 frame tween5 frame tween

Añade un nuevo fotograma y oculta el indicador tap

hidden taphidden taphidden tap

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

animated UI scroll

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%.

bold sportbold sportbold sport

Paso 2

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

add a tapadd a tapadd a tap

Paso 3

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

hide outer circlehide outer circlehide outer circle

Paso 4

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

hide next circlehide next circlehide next circle

Paso 5

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

hide taphide taphide 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%.

hide non-sport storieshide non-sport storieshide non-sport stories

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.

filled sport story sectionsfilled sport story sectionsfilled sport story sections

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.

animate changeanimate changeanimate change

Paso 9

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

2 second last frame2 second last frame2 second last frame

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

sport animation

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.

tap news starttap news starttap news start

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.

hide thin circle againhide thin circle againhide thin circle again

Paso 3

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

hide second circle againhide second circle againhide second circle again

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%.

show large storyshow large storyshow large story

Paso 5

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

tween news storytween news storytween news story
finished full news storyfinished full news storyfinished full news story

Esto es lo que tenemos para esta animación.

finished news animation

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.

flatten layers into framesflatten layers into framesflatten layers into frames

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.

new framesnew framesnew frames

Paso 2

Selecciona todas las capas de fotogramas en el panel Capas.

select allselect allselect all

Paso 3

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

iphone piciphone piciphone pic

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.

create frame animationcreate frame animationcreate frame animation

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.

place news animation into iPhone screenplace news animation into iPhone screenplace news animation into iPhone screen
fit edgesfit edgesfit edges
againagainagain
and againand againand again
and yet againand yet againand yet again
and now its goodand now its goodand now its good

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.

animate everythinganimate everythinganimate everything

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.

keep animatingkeep animatingkeep animating

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.

save as gifsave as gifsave as gif

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.