3 formas de hacer capturas de pantalla GIF animadas de trabajos de diseño para su cartera

Una vez que haya terminado su último proyecto de diseño web, es hora de mostrarlo y agregarlo a su cartera. Los visitantes de su sitio web (¡y los clientes potenciales!) querrán ver su increíble trabajo en acción. Las imágenes excelentes son clave y, en el espacio digital, habrá ocasiones en las que desee ilustrar la funcionalidad del proyecto. Mostrarlo con capturas de pantalla animadas puede ser la solución perfecta.

Estoy seguro de que has visto las capturas de pantalla animadas simples y geniales que nos muestran cómo funcionan las aplicaciones o los sitios web. Los GIF de capturas de pantalla le dan al usuario una mejor idea de cómo se realizan ciertas tareas al mismo tiempo que muestran qué funciones están disponibles. El video es ciertamente una opción y definitivamente tiene un lugar importante en la web. Los videos detallados de productos o estudios de casos definitivamente se benefician de un formato de video. Sin embargo, una opción más simple y más consciente del tamaño del archivo, como un GIF de captura de pantalla animada, puede ser justo lo que está buscando.

Por qué las capturas de pantalla animadas son importantes para su cartera

Ya sea que lo pronuncie "GIF" o "JIF", es importante recordar que los GIF pueden ser más que gatos divertidos y clips de películas con un eslogan ingenioso. Los GIF animados de sus proyectos deben ser llamativos y cuidadosamente planificados para mostrar la funcionalidad del diseño. La animación de los elementos de la interfaz tiene un propósito tanto funcional como estético, por lo que un archivo GIF lo muestra. ¿Qué tal demostrar el menú y las opciones que presenta su trabajo? ¿Qué tal mostrar cómo funciona el desplazamiento? Mostrar la funcionalidad ayuda al usuario a ver claramente cómo la aplicación o el sitio web pueden ayudarlo.

Herramientas para hacer GIF

No hay mejor manera de demostrar tu arduo trabajo que con una de las siguientes herramientas para crear GIF. Los ejemplos a continuación demostrarán cómo se ve cuando un usuario toca una opción, ve más detalles y luego se desplaza para ver más contenido.

Nota : No habrá instrucciones de diseño visual en este tutorial; estos consejos asumen que el sitio web o el diseño de la aplicación para su proyecto de cartera ya está hecho.

Cómo crear capturas de pantalla GIF animadas en Adobe Photoshop

En mi opinión, Adobe Photoshop y Adobe After Effects son las mejores herramientas para el trabajo. Ambos permiten mucho control sobre el producto final. Personalmente, me gusta Photoshop para hacer capturas de pantalla GIF (y la mayoría de los diseñadores están muy familiarizados con él), así es como se construirá el siguiente ejemplo. ¡Empecemos!

Mostrando la funcionalidad de desplazamiento

Este diseño se realizó en Adobe XD pero luego se exportó a Photoshop con capas con nombres apropiados. El ejemplo tiene una capa llamada "Lista de ubicaciones de MinTour" para la página de lista, "Lista de jardines de esculturas" para la página de detalles, y la parte que está fuera de la vista de desplazamiento inicial se llama "Desbordamiento de lista de jardines de esculturas".

Parte uno

1. Configuración de la línea de tiempo y lista de ubicaciones

La función Línea de tiempo es lo que usaremos para crear las diferentes pantallas para el producto final. Asegúrese de que el Panel de la línea de tiempo esté abierto yendo a Ventana > Línea de tiempo.

Aquí está la página de listado; el usuario comienza aquí, toca una ubicación y llegará a la página de detalles, donde puede desplazarse para ver más detalles.

Verás que ya hay un primer fotograma clave establecido. Asegúrese de que se muestren las capas correctas para que se muestre la vista correcta en el fotograma clave.

Opcional: si desea mostrar dónde toca el usuario, a veces esto se muestra con un punto. Para hacer esto, agregue un marco adicional con el área de puntos.

2. Detalles de ubicación individuales

La capacidad de organizar con capas es una gran ventaja y lo ayudará a mantener todo en orden mientras crea su GIF de captura de pantalla. Vaya a las opciones en el panel Línea de tiempo y elija "Nuevo marco". Lo mismo aquí: asegúrese de que las capas correctas estén ocultas/mostradas. Para este, necesitaba que se mostrara la lista individual, por lo que la capa de la lista de ubicaciones está oculta.

3. Contenido de desplazamiento de detalles de ubicación individual

La página de listado individual para el Jardín de esculturas tiene más contenido, por lo que el área de desplazamiento debe mostrarse al usuario. Esto estaba en una capa separada, así que creé un nuevo marco para mostrar este contenido de desbordamiento.

4. Elige duraciones

Esto puede requerir algo de experimentación, pero es importante elegir la duración de cada cuadro. Desea que el usuario tenga suficiente tiempo para ver cada cuadro, pero tampoco debería tener que esperar demasiado antes de ver el siguiente.

Puse valores para cada cuadro, con un total de cinco segundos para toda la animación.

5. Vista previa

Es bueno echar un vistazo a lo que está pasando hasta ahora. Hay un botón de reproducción en la fila inferior del panel Línea de tiempo. Pruebe las cosas y vea si hay algo que se pueda mejorar.

(Opcional) control de interpolación

Las cosas están ordenadas correctamente, pero parecen un poco nerviosas. Las animaciones de las capturas de pantalla se pueden ajustar para que las cosas parezcan un poco más fluidas. Desde las opciones de la línea de tiempo, hay una opción de "Interpolación". Para hacer automáticamente una animación fluida entre el cuadro actual y el anterior, puede haber más cuadros insertados automáticamente.

Desde la lista hasta el desbordamiento de la lista, se agregó Tween para que parezca más una acción de desplazamiento. Esos nuevos marcos se configuraron para tener una duración muy corta de 0,05 segundos (el desplazamiento en una aplicación ocurre relativamente rápido).

Si desea que esto siga en bucle en Photoshop, asegúrese de que esté seleccionado "Para siempre". Si hay un número determinado de bucles, se puede ingresar ese valor.

6. Guardar el GIF de captura de pantalla (solo flujo de pantalla)

Si está buscando incluir esto solo como un flujo de pantalla animado, guardar será el último paso. En este momento, se crea la animación de la captura de pantalla, solo tiene que guardarse en el formato GIF correcto. Puede que esté acostumbrado a guardar una imagen estática, pero guardar una secuencia de imágenes es diferente. Vaya a Archivo > Guardar para Web para guardar este archivo GIF.

Aquí verás todas las configuraciones que necesitarás para tu GIF. Recuerde, está limitado a la cantidad de colores, por lo que haremos que las cosas se vean lo mejor posible antes de exportar. 256 es probablemente la mejor opción, ya que los sitios web y las aplicaciones tienden a tener una amplia gama de colores, pero si su diseño lo permite, puede simplificar (lo que reduce el tamaño del archivo).

También hay algunas configuraciones de "Animación" en la esquina inferior derecha; puede elegir Looping si desea que esto se repita indefinidamente. También puede repetir un número determinado de veces si lo desea. Guárdelo en la ubicación deseada y estará listo para funcionar.

Segunda parte: pantallas en capas que aparecen en un dispositivo

Si ha decidido continuar, se necesitan algunos pasos adicionales para colocarlo en capas para que se vea más realista en el teléfono. En el panel Línea de tiempo, elija "Acoplar fotogramas en capas". Cada cuadro se convertirá en una capa plana, que termina siendo 26 cuadros (por lo que hay 26 capas).

Una vez que se guarde, la imagen del teléfono deberá agregarse al archivo. Para adaptarse a esto, se deberá realizar un cambio de tamaño del tamaño de la imagen.

1. Ajuste el tamaño del lienzo para su captura de pantalla animada

La imagen de fondo es de 1300 X 920, por lo que el tamaño del lienzo debe ajustarse para que se ajuste exactamente. Ve a Imagen > Tamaño del lienzo e ingresa las dimensiones correctas.

2. Prepara las capas para colocarlas en la pantalla del teléfono

A continuación, cree una nueva capa para la imagen de fondo para que la animación pueda superponerse. Aquí es donde las capas de cuadros "Seleccionar todo" serán útiles.

3. Marcos de verificación doble

Este es un buen momento para asegurarse de que los marcos sigan siendo como los planeó. Si reproduce la animación desde el panel Línea de tiempo, verá la secuencia animada.

4. Sesgar las pantallas

Es importante que se seleccionen todas las capas de la pantalla para que todas se puedan sesgar a la vez para permanecer uniformes. Editar > Transformar > Sesgar es donde se hace esto.

Tomará un poco de experimentación, pero ajuste las esquinas para que se alineen con los límites de la pantalla, dándole la ilusión de que la pantalla está iluminada con la animación.

5. Ajustes de imagen y guardado de su captura de pantalla GIF

Ahora es el momento de hacer cualquier ajuste. El color, el contraste o cualquier otro toque final debe hacerse antes de guardar. Guardar la animación es lo mismo que se hizo en la Parte uno, paso 6.

En este ejemplo, el fondo se desatura y se aumenta el contraste para que la animación destaque realmente. ¡Ahora parece estar en un dispositivo real!

giphy

Si Photoshop no es su herramienta preferida, existe una herramienta gratuita y sencilla llamada Giphy. (¡Además del uso profesional, también puedes hacer muchos GIF divertidos!)

Si elige "Presentación de diapositivas", esta es una buena opción para crear una captura de pantalla de animación. Para usar esto, deberá tener guardados archivos individuales de las pantallas. A continuación, arrastrará y soltará imágenes fijas y comenzará el proceso.

Una vez que se carguen los archivos, seleccione "Crear presentación de diapositivas". Cuando haya terminado de juntar las imágenes, puede descargar el archivo. ¡Es tan simple como eso!

Grabar

Esta aplicación es bastante simple; registra la acción que tiene lugar en la pantalla de su computadora y carga la grabación en el sitio web Recordit.io y crea un enlace para compartir, con la opción de descargar el GIF.

Cuando Recordit se ha instalado en su computadora, aparece un icono en la barra de tareas. Cuando esté seleccionado, puede arrastrar y seleccionar el área de su pantalla que desea grabar. Esto fue perfecto cuando fui al modo de vista previa en Adobe XD y pude usar un prototipo para la demostración.

Después de seleccionar el área que se incluirá, aparecerá un botón de grabación. Cuando presiona "Grabar", Recordit registra todo lo que sucede en su pantalla, dentro de los límites que creó. Cuando haya terminado de grabar, simplemente elija "Detener".

Tardará unos segundos, pero después de detener la grabación, aparecerá una ventana emergente con un enlace que lo llevará a la grabación, que está alojada en el sitio de Recordit.io.

Los GIF animados de capturas de pantalla son una excelente manera de mostrar el flujo de usuario y cómo funcionan sus proyectos de diseño. El video también tiene su lugar, pero los GIF se pueden crear muy rápidamente y son fáciles de agregar a su cartera en línea.

Hoja de trabajo gratuita: Público objetivo y persona del cliente

¿Está buscando una guía procesable que lo ayude a mantener su contenido relacionado y atractivo? Este PDF interactivo de tres páginas lo ayudará a encontrar su audiencia, auditar su contenido y crear un plan de juego para hacer crecer su negocio.

Si te ha gustado este artículo, también te pueden gustar estos:

• Cómo crear animaciones SVG con CSS
• Cómo crear una galería de videos de WordPress
• Cómo usar los enlaces de salto para hacer que su sitio de WordPress sea más accesible