3 façons de créer des captures d'écran GIF animées du travail de conception pour votre portefeuille

Une fois votre dernier projet de conception Web terminé, il est temps de le montrer et de l'ajouter à votre portefeuille. Les visiteurs de votre site Web (et vos clients potentiels !) voudront voir votre travail impressionnant en action. De bonnes images sont essentielles, et dans l'espace numérique, il y aura des moments où vous voudrez illustrer la fonctionnalité du projet. Le montrer avec des captures d'écran animées peut être la solution parfaite.

Je suis sûr que vous avez vu les captures d'écran animées simples et sympas qui nous montrent comment fonctionnent les applications ou les sites Web. Les GIF de captures d'écran donnent à l'utilisateur une meilleure idée de la façon dont certaines tâches sont effectuées tout en montrant les fonctionnalités disponibles. La vidéo est certainement une option et occupe définitivement une place importante sur le Web. Les vidéos de produits approfondies ou les études de cas bénéficient certainement d'un format vidéo. Cependant, un choix plus simple et plus conscient de la taille du fichier, tel qu'une capture d'écran animée GIF, peut être exactement ce que vous recherchez.

Pourquoi les captures d'écran animées sont importantes pour votre portfolio

Que vous le prononciez « GIF » ou « JIF », il est important de se rappeler que les GIF peuvent être plus que de simples chats amusants et des extraits de films avec un slogan intelligent. Les GIF animés de vos projets doivent être accrocheurs et soigneusement planifiés pour montrer les fonctionnalités de conception. L'animation des éléments d'interface est à la fois un objectif fonctionnel et esthétique, donc un fichier GIF le montre. Que diriez-vous de démontrer le menu et les options que votre travail présente ? Que diriez-vous de montrer comment fonctionne le défilement ? L'affichage des fonctionnalités aide l'utilisateur à voir clairement comment l'application ou le site Web peut l'aider.

Outils pour créer des GIF

Il n'y a pas de meilleur moyen de démontrer votre travail acharné qu'avec l'un des outils suivants pour créer des GIF. Les exemples ci-dessous montrent à quoi cela ressemble lorsqu'un utilisateur appuie sur une option, affiche plus de détails, puis fait défiler pour voir plus de contenu.

Remarque : Il n'y aura pas d'instructions de conception visuelles dans ce didacticiel ; ces conseils supposent que la conception du site Web ou de l'application pour votre projet de portefeuille est déjà terminée.

Comment créer des captures d'écran GIF animées dans Adobe Photoshop

À mon avis, Adobe Photoshop et Adobe After Effects sont les meilleurs outils pour le travail. Les deux permettent un grand contrôle sur le produit final. Personnellement, j'aime Photoshop pour faire des captures d'écran GIF (et la plupart des concepteurs le connaissent très bien), c'est ainsi que l'exemple suivant sera construit. Commençons!

Affichage de la fonctionnalité de défilement

Cette conception a été réalisée dans Adobe XD, puis exportée vers Photoshop avec des calques nommés de manière appropriée. L'exemple a une couche appelée "MinTour Locations List" pour la page de liste, "Sculpture Garden Listing" pour la page de détails, et la partie qui est hors de la vue de défilement initiale est appelée "Sculpture Garden Listing Overflow".

Partie un

1. Configuration de la chronologie et liste des emplacements

La fonction Chronologie est ce que nous utiliserons pour créer les différents écrans du produit final. Assurez-vous que le panneau Chronologie est ouvert en accédant à Fenêtre > Chronologie .

Voici la page de liste; l'utilisateur commence ici, appuie sur un emplacement et arrive à la page de détails, où il peut faire défiler pour voir plus de détails.

Vous verrez qu'il y a déjà une première image clé établie. Assurez-vous que les couches correctes s'affichent afin que la vue correcte s'affiche dans l'image clé.

Facultatif : Si vous souhaitez indiquer où l'utilisateur appuie, cela s'affiche parfois avec un point. Pour ce faire, ajoutez un cadre supplémentaire avec la zone de points.

2. Détails de l'emplacement individuel

La possibilité d'organiser avec des calques est un énorme avantage et vous aidera à garder tout droit pendant que vous créez votre GIF de capture d'écran. Accédez aux options du panneau Chronologie et choisissez "Nouvelle image". La même chose ici - assurez-vous que les couches correctes sont masquées/affichées. Pour celui-ci, j'avais besoin que la liste individuelle soit affichée, donc la couche de la liste des emplacements est masquée.

3. Contenu de défilement des détails de l'emplacement individuel

La page de liste individuelle pour le jardin de sculptures a plus de contenu, donc la zone de défilement doit être montrée à l'utilisateur. C'était sur un calque séparé, j'ai donc créé un nouveau cadre pour afficher ce contenu de débordement.

4. Choisissez des durées

Cela peut nécessiter quelques expérimentations, mais il est important de choisir la durée de chaque image. Vous voulez que l'utilisateur ait suffisamment de temps pour voir chaque image, mais aussi qu'il ne doive pas attendre trop longtemps avant de voir la suivante.

J'ai mis des valeurs pour chaque image, totalisant cinq secondes pour toute l'animation.

5. Aperçu

Il est bon de jeter un œil à ce qui se passe jusqu'à présent. Il y a un bouton de lecture dans la rangée inférieure du panneau Chronologie. Essayez les choses et voyez s'il y a quelque chose qui peut être amélioré.

(Facultatif) contrôle d'interpolation

Les choses sont ordonnées correctement, mais elles semblent un peu nerveuses. Les animations de capture d'écran peuvent être ajustées pour rendre les choses un peu plus fluides. Dans les options de la chronologie, il existe une option "Tween". Pour créer automatiquement une animation fluide entre l'image actuelle et l'image précédente, il peut y avoir plus d'images automatiquement insérées.

De la liste au débordement de liste, Tween a été ajouté pour le faire ressembler davantage à une action de défilement. Ces nouvelles images ont été définies pour avoir une durée très courte de 0,05 seconde (le défilement dans une application est relativement rapide).

Si vous voulez que cela continue à tourner en boucle dans Photoshop, assurez-vous que "Forever" est sélectionné. S'il y a un nombre défini de boucles, cette valeur peut être entrée.

6. Enregistrement de la capture d'écran GIF (flux d'écran uniquement)

Si vous cherchez à inclure cela comme un simple flux d'écran animé, l'enregistrement sera la dernière étape. À ce stade, l'animation de capture d'écran est créée, il suffit de l'enregistrer au format GIF correct. Vous avez peut-être l'habitude d'enregistrer une image statique, mais enregistrer une séquence d'images est différent. Allez dans Fichier > Enregistrer pour le Web pour enregistrer ce fichier GIF.

Ici, vous verrez tous les paramètres dont vous aurez besoin pour votre GIF. N'oubliez pas que vous êtes limité au nombre de couleurs, nous ferons donc en sorte que les choses soient à leur meilleur avant l'exportation. 256 est probablement la meilleure option car les sites Web et les applications ont tendance à avoir une large gamme de couleurs, mais si votre conception le permet, vous pouvez simplifier (ce qui réduit la taille du fichier).

Il existe également des paramètres « Animation » dans le coin inférieur droit ; vous pouvez choisir Looping si vous voulez que cela boucle indéfiniment. Vous pouvez également boucler un certain nombre de fois si vous le souhaitez. Enregistrez-le à l'emplacement souhaité, et il est prêt à partir !

Deuxième partie : Écrans en couches présentés sur un appareil

Si vous avez décidé de continuer, quelques étapes supplémentaires sont nécessaires pour le superposer afin qu'il soit plus réaliste sur le téléphone. Dans le panneau Montage, choisissez "Aplatir les images en calques". Chaque image sera convertie en une couche plate, qui finit par être de 26 images (il y a donc 26 couches).

Une fois que cela est enregistré, l'image du téléphone devra être ajoutée au fichier. Pour tenir compte de cela, un certain redimensionnement de la taille de l'image devra être fait.

1. Ajustez la taille de la toile pour votre capture d'écran animée

L'image d'arrière-plan est de 1300 X 920, la taille de la toile doit donc être ajustée pour s'adapter exactement à cela. Allez dans Image> Taille de la toile et mettez les bonnes dimensions.

2. Préparez les calques à être placés sur l'écran du téléphone

Ensuite, créez un nouveau calque pour l'image d'arrière-plan afin que l'animation puisse être superposée. C'est là que les calques de cadre "Sélectionner tout" seront utiles.

3. Vérifiez les cadres

C'est le bon moment pour vous assurer que les cadres sont toujours comme vous l'aviez prévu. Si vous lisez l'animation à partir du panneau Chronologie, vous verrez la séquence animée.

4. Inclinez les écrans

Il est important que toutes les couches d'écran soient sélectionnées afin qu'elles puissent toutes être inclinées en même temps pour rester uniformes. Édition> Transformer> Incliner est l'endroit où cela se fait.

Cela prendra un peu d'expérimentation, mais ajustez les coins pour qu'ils s'alignent avec les limites de l'écran, donnant l'illusion que l'écran est éclairé par l'animation.

5. Ajustements d'image et enregistrement de votre capture d'écran GIF

Il est maintenant temps de faire des ajustements. La couleur, le contraste ou toute autre touche finale doivent être effectués avant d'enregistrer. L'enregistrement de l'animation est identique à ce qui a été fait dans la première partie, étape 6.

Dans cet exemple, l'arrière-plan a été désaturé et le contraste a été augmenté pour faire ressortir l'animation. Maintenant, il semble être sur un vrai appareil !

Giphy

Si Photoshop n'est pas votre outil préféré, il existe un outil gratuit et simple appelé Giphy. (En plus d'un usage professionnel, vous pouvez également créer de nombreux GIF amusants !)

Si vous choisissez "Diaporama", c'est une bonne option pour créer une capture d'écran d'animation. Pour l'utiliser, vous devrez avoir des fichiers individuels des écrans enregistrés. Vous glisserez et déposerez ensuite des images fixes et le processus commencera.

Une fois les fichiers téléchargés, sélectionnez "Créer un diaporama". Une fois les images assemblées, vous pouvez télécharger le fichier. C'est aussi simple que ça!

Enregistrer

Cette application est assez simple ; il enregistre l'action qui se déroule sur l'écran de votre ordinateur et télécharge l'enregistrement sur le site Web Recordit.io et crée un lien partageable, avec la possibilité de télécharger le GIF.

Une fois Recordit installé sur votre ordinateur, une icône apparaît dans la barre des tâches. Une fois sélectionné, vous pouvez faire glisser et sélectionner la zone de votre écran que vous souhaitez enregistrer. C'était parfait lorsque je suis passé en mode aperçu dans Adobe XD et que j'ai pu utiliser un prototype pour la démonstration.

Après avoir sélectionné la zone qui sera incluse, un bouton d'enregistrement apparaît. Lorsque vous appuyez sur "Enregistrer", Recordit enregistre alors tout ce qui se passe sur votre écran, dans les limites que vous avez créées. Lorsque vous avez terminé l'enregistrement, choisissez simplement "Arrêter".

Cela prendra quelques secondes, mais après l'arrêt de l'enregistrement, il y aura une fenêtre contextuelle avec un lien qui vous mènera à l'enregistrement, qui est hébergé sur le site Recordit.io.

Les GIF animés de captures d'écran sont un excellent moyen de montrer le flux d'utilisateurs et le fonctionnement de vos projets de conception. La vidéo a aussi sa place, mais les GIF peuvent être créés très rapidement et sont faciles à ajouter à votre portfolio en ligne.

Feuille de travail gratuite : Public cible et personnalité du client

Vous recherchez un guide pratique pour vous aider à garder votre contenu pertinent et engageant ? Ce PDF interactif de trois pages vous aidera à trouver votre public, à auditer votre contenu et à créer un plan de match pour développer votre entreprise.

Si vous avez aimé cet article, vous pourriez également apprécier ceux-ci :

• Comment créer des animations SVG avec CSS
• Comment créer une galerie vidéo WordPress
• Comment utiliser les liens de saut pour rendre votre site WordPress plus accessible