Comment convertir une infographie en graphique avec Adobe Photoshop

Les images gifographiques constituent l'étape suivante de l'évolution de l'infographie. Cet article examinera de plus près l’évolution de l’infographie et la manière de créer un gifographique à l’aide d’Adobe Photoshop.

Les visuels ont joué un rôle crucial dans l'industrie du marketing et de la publicité depuis leur création. Pendant des années, les spécialistes du marketing se sont appuyés sur des images, des vidéos et des infographies pour mieux vendre leurs produits et services. L'importance des médias visuels a encore augmenté avec l'essor d'Internet et, par conséquent, des médias sociaux.

Dernièrement, Les graphiques gifographiques (infographies animées) ont également rejoint la liste des formats de médias visuels populaires. Si vous êtes un agent de commercialisation, un designer ou même un consommateur, vous devez les avoir rencontrés . Cependant, vous ne savez peut-être pas comment créer des graphiques, et pourquoi vous devriez essayer de les ajouter à votre mix marketing. Ce didacticiel pratique devrait vous permettre de répondre aux deux questions.

Dans ce didacticiel, nous examinerons de plus près la manière dont une infographie statique peut être animée à l'aide d'Adobe Photoshop; certaines connaissances de Photoshop (au moins les bases) sont donc nécessaires. .

Qu'est-ce qu'un gifographic?

Un peu d'histoire

Le mot gifographic est une combinaison de deux mots: GIF et infographie . Le terme gifographic a été popularisé par des experts en marketing (et parmi eux, par Neil Patel ) vers 2014. Intégrons un peu l'histoire.

CompuServe a introduit le GIF ( G raphics I Echange F ormat) le 15 juin 1987, et le format devint presque instantanément un succès. Au début, l'utilisation du format restait quelque peu restreinte en raison des litiges sur les brevets des premières années (liés à l'algorithme de compression utilisé dans les fichiers GIF – LZW), mais plus tard, à l'expiration de la plupart des brevets GIF . et grâce à leur large support et à leur portabilité, les GIF ont gagné en popularité, ce qui a même amené le mot «GIF» à devenir « le mot de l'année » en 2012. Même aujourd'hui, les GIF sont toujours très populaires sur Internet et sur les réseaux sociaux ( * ).

Le format GIF est un format d'image bitmap. Il prend en charge jusqu'à 8 bits par pixel afin qu'un seul fichier GIF puisse utiliser une palette limitée de 256 couleurs différentes au maximum (y compris, éventuellement, une couleur transparente). Le Lempel – Ziv – Welch (LZW) est une technique de compression de données sans perte utilisée pour compresser les images GIF, ce qui permet de réduire la taille du fichier sans en altérer la qualité visuelle. Le plus intéressant est que le format prend également en charge les animations et permet une palette distincte pouvant aller jusqu'à 256 couleurs pour chaque image d'animation.

Il est beaucoup plus facile de remonter dans l'historique lorsque le premier infographie a été créé. plus difficile, mais la définition est simple – le mot "infographie" vient de "information" et "graphique" et, comme son nom l'indique, une infographie sert principalement à présenter des informations (données, connaissances etc.) rapidement et clairement, d'une manière graphique

Dans son livre de 1983 L'affichage visuel d'informations quantitatives Edward Tufte donne un définition très détaillée des "affichages graphiques" que beaucoup considèrent aujourd'hui comme l'une des premières définitions de ce que sont les infographies et ce qu'elles font: condenser de grandes quantités d'informations sous une forme où elles seront plus facilement absorbées par le lecteur. [1 9659017] Note sur les GIF publiés sur le Web (*)

Les images GIF animées publiées sur Twitter, Imgur et d'autres services aboutissent le plus souvent à des fichiers vidéo codés H.264 (vidéo HTML5) et ne sont techniquement plus des GIF lors de la visualisation en ligne. La raison derrière cela est assez évidente – les GIF animés sont peut-être le format le plus défavorable pour stocker de la vidéo, même pour de très courts clips, car contrairement aux fichiers vidéo réels, GIF ne peut utiliser aucune des techniques de compression vidéo modernes. Vous pouvez également consulter cet article: « Améliorer les performances GIF animées avec la vidéo HTML5 », qui explique comment, avec la vidéo HTML5, vous pouvez réduire la taille du contenu GIF jusqu'à 98% tout en conservant les qualités uniques de le format GIF.)

D’autre part, il convient de noter que les gifographies restent le plus souvent dans leur format original (fichiers GIF animés) et qu’elles ne sont pas encodées en vidéo. Bien que cela conduise à des tailles de fichier pas si optimales (comme l'exemple un seul fichier GIF animé dans cette page d'infographie populaire intitulée «Comment fonctionnent les moteurs?» Est compris entre ~ 500 Ko et 5 Mo), sur le côté positif, les graphiques restent très faciles à partager et à intégrer, ce qui constitue leur objectif principal.

Pourquoi utiliser l'infographie animée dans votre mix marketing numérique?

Les infographies sont des supports visuellement attrayants. Une infographie bien conçue peut non seulement vous aider à présenter un sujet complexe de manière simple et attrayante, mais elle peut également être un moyen très efficace d'accroître la notoriété de votre marque dans le cadre de votre campagne de marketing numérique. 19659005] N'oubliez pas le dicton populaire suivant: “ Une image vaut mille mots ”? Il existe de nombreuses preuves selon lesquelles les images animées peuvent avoir encore plus de succès et, si récemment, les infographies animées ont connu une popularité croissante du fait de l'élément animation.

De Boring To Beautiful

Insufflez de la vie dans des feuilles de faits ennuyeux et de chiffres ordinaires à l'aide de graphiques et de graphiques animés. Les infographies de mouvement sont également le bon moyen d'illustrer des processus ou des systèmes complexes avec des pièces mobiles afin de les rendre plus agréables et plus utiles. Ainsi, vous pouvez facilement transformer des sujets ennuyeux en friandises engageantes visuellement. Par exemple, nous avons créé le gifographique " Les mises à jour de l'algorithme de recherche Google les plus importantes de 2015 ", qui décrit les modifications apportées par Google à son algorithme de recherche en 2015.

Rentable

Les gifographics sont peut-être l'alternative la plus rentable au contenu vidéo. Vous n'avez pas besoin de caméras coûteuses, de montage vidéo, d'un logiciel de mixage audio et d'une équipe de tournage pour créer des infographies animées. Un concepteur qui sait créer des animations en utilisant Photoshop ou des outils de conception graphique similaires est essentiel.

Fonctionne avec à peu près n'importe quoi

Vous pouvez utiliser un gifographique pour illustrer à peu près n'importe quoi en petits morceaux séquentiels. Des explications sur les produits aux chiffres et statistiques, vous pouvez tout partager à travers une infographie GIF. Les infographies animées peuvent aussi être interactives. Par exemple, vous pouvez ajuster une variable pour voir comment elle affecte les données d'un graphique animé.

Remarque: Un excellent exemple d'infographie interactive est le suivant: « Création d'une infographie interactive avec Vue. js ”écrit par Krutie Patel. Il a été construit avec l'aide de Vue.js SVG et GSAP ( Plate-forme d'animation GreenSock ).

SEO Boost

En tant que marketeur, vous êtes probablement Sachez que les infographies peuvent donner un coup de fouet à votre SEO . Les gens aiment les médias visuels. En conséquence, ils sont plus susceptibles de partager un document gifographique s’ils l’aimaient. Plus vos infographies animées sont partagées, plus le trafic sur le site augmentera. Ainsi, les graphiques peuvent aider indirectement à améliorer votre référencement et, par conséquent, votre classement dans les moteurs de recherche.

Comment créer un gifographe à partir d'une infographie dans Photoshop

Maintenant que vous connaissez l'importance du mouvement dans l'infographie, passons à la pratique et voyons comment créer votre premier gifographic dans Photoshop. Et si vous savez déjà créer des infographies dans Photoshop, il vous sera encore plus facile de convertir votre infographie statique existante en une animation animée.

Étape 1: sélectionnez (ou préparez) une infographie

Il est nécessaire de choisir l’infographie statique que vous souhaitez transformer en gifographique. Vous pouvez animer n’importe quelle infographie à des fins d’apprentissage, mais je vous recommande de choisir une image comportant des éléments adaptés à l’animation. Il est facile de convertir les explicatifs, les didacticiels et les vues d'ensemble des processus en infographie animée.

Si vous voulez recommencer à zéro, assurez-vous d'avoir d'abord terminé l'infographie statique dans les moindres détails avant de passer à l'étape de l'animation. beaucoup de temps et de ressources – si l'infographie d'origine ne cesse de changer, vous devrez également retravailler votre gifographie.

Ensuite, une fois que vous avez finalisé l'infographie, l'étape suivante consiste à décider des parties que vous souhaitez animer. 19659039] Finalisez votre infographie « />

Étape 2: déterminez ce que sera l'animation

Vous pouvez inclure tout ou partie de l'infographie dans l'animation. Cependant, comme il existe différentes manières de créer des animations, vous devez d’abord choisir les éléments que vous souhaitez animer et comment. À mon avis, dessiner (décrire) divers scénarios de cas d’animation sur papier est le meilleur moyen de choisir votre scénario. Cela vous épargnera beaucoup de temps et de confusion par la suite.

Commencez par décider des «images» que vous souhaitez inclure dans l'animation. À ce stade, les cadres ne seront plus que des croquis approximatifs faits sur des feuilles de papier. Plus le nombre d'images est élevé, meilleure sera la qualité de votre gifographique.

Vous devrez peut-être diviser l'infographie animée en différentes sections. Assurez-vous donc de choisir un nombre égal d'images pour toutes les parties. Si ce n'est pas le cas, le gifographic paraîtra inégale à chaque fichier GIF déplacé à une vitesse différente de .

Étape 3: création des cadres dans Photoshop

Ouvrez Adobe Photoshop pour créer différents cadres pour chaque section du gifographic. Vous devrez couper, faire pivoter et déplacer les images avec minutie. Vous devrez vous rappeler le dernier changement que vous avez apporté à la dernière image. Vous pouvez utiliser la règle Photoshop pour la même chose.

Vous devrez créer votre animation à partir de Calques dans Photoshop. Mais dans ce cas, vous copiez tous les calques Photoshop ensemble et vous modifiez chaque calque individuellement.

Vous pouvez vérifier les images une par une en masquant / affichant différentes couches. Une fois que vous avez fini de créer tous les cadres, recherchez-les éventuelles erreurs.

Vous pouvez également créer une courte animation d'image en utilisant uniquement la première et la dernière image. Vous devez sélectionner les deux cadres en maintenant la touche Ctrl / Cmd (Windows / Mac). Maintenant, cliquez sur "Tween". Sélectionnez le nombre d'images que vous souhaitez ajouter entre les deux. Sélectionnez Première image si vous souhaitez ajouter les nouvelles images entre la première et la dernière image. La sélection de l’option «Image précédente» ajoutera des images entre votre sélection actuelle et celle qui la précède. Cochez l'option "Tous les calques" pour ajouter tous les calques de vos sélections.

Étape 4: Enregistrer les fichiers PNG (ou JPG) dans un nouveau dossier

L'étape suivante consiste à exporter chaque image d'animation individuellement au format PNG ou JPG. (Remarque: JPG étant un format avec perte le format PNG serait généralement un meilleur choix.)

Vous devez enregistrer ces fichiers PNG dans un dossier séparé pour des raisons de commodité. Je numérote toujours les images sauvegardées selon leur séquence dans l'animation. Il m'est facile de me rappeler que “Image-1” sera la première image de la séquence, suivie de “Image-2”, “Image-3”, etc. Bien sûr, vous pouvez les enregistrer de la manière qui vous convient.

Étape 5: «Charger les fichiers dans la pile»

Ensuite, chargez les fichiers PNG enregistrés dans Photoshop.

Allez à la fenêtre Photoshop et ouvrez Fichier> Scripts> Charger les fichiers dans la pile …

A nouvelle boîte de dialogue s'ouvrira. Cliquez sur le bouton “Parcourir” et ouvrez le dossier où vous avez sauvegardé les fichiers PNG. Vous pouvez sélectionner tous les fichiers en même temps et cliquer sur «OK».

Remarque: Vous pouvez cocher l'option «Tenter d'aligner automatiquement les images source» pour éviter les problèmes d'alignement. Cependant, si vos images source ont toutes la même taille, cette étape n'est pas nécessaire, mais . En outre, l'alignement automatique peut également entraîner des problèmes dans certains cas, car Photoshop déplace les calques pour tenter de les aligner. Utilisez donc cette option en fonction de la situation spécifique – il n’existe pas de recette «taille unique».

Le chargement des fichiers peut prendre un certain temps, en fonction de leur taille et de leur nombre. Pendant que Photoshop est en train de charger ces fichiers, vous pouvez peut-être prendre une tasse de café!

Étape 6: Définissez les cadres

Une fois le chargement terminé, accédez à Fenêtre> Couches (ou vous pouvez appuyer sur F7) pour voir tous les calques des couches. panneau. Le nombre de calques doit correspondre au nombre d'images chargées dans Photoshop.

Une fois cette vérification effectuée, accédez à Fenêtre> Scénario. Vous verrez le panneau Montage en bas (option d’affichage par défaut pour ce panneau). Choisissez “Créer une animation d'image” dans le panneau. Votre premier fichier PNG apparaîtra sur la timeline.

À présent, sélectionnez "Créer des images à partir de calques" dans le menu de droite (Option de la palette) du panneau Animation.

Remarque: Parfois, les fichiers PNG sont chargés. en sens inverse, en faisant apparaître votre «Image-1» à la fin et inversement. Dans ce cas, sélectionnez «Inverser les calques» dans le menu du panneau Animation (option de palette) pour obtenir la séquence d'images souhaitée.

Étape 7: définissez la vitesse de l'animation

La durée d'affichage par défaut pour chaque image est de 0,00 secondes. Changer cette heure déterminera la vitesse de votre animation (ou fichier GIF). Si vous sélectionnez toutes les images, vous pouvez définir la même durée d'affichage pour toutes. Vous pouvez également définir un temps d’affichage différent pour chaque image ou image.

Je vous conseille d’utiliser l’option précédente, bien qu’il soit relativement facile d’utiliser le même temps d’animation. En outre, la configuration de durées d'affichage différentes pour chaque image peut donner lieu à une animation pas si fluide.

Vous pouvez également définir une durée d'affichage personnalisée si vous ne souhaitez pas choisir parmi les choix disponibles. Cliquez sur l'option «Autre» pour définir une vitesse d'animation personnalisée.

Vous pouvez également faire jouer l'animation en sens inverse. Copiez les images à partir de la palette de la timeline et choisissez l’option «Inverser les couches». Vous pouvez faire glisser des images à l'aide de la touche Ctrl (sous Windows) ou de la touche Cmd (sous Mac).

Vous pouvez définir le nombre de fois que l'animation doit être bouclée. L'option par défaut est «Une fois». Cependant, vous pouvez définir une valeur de boucle personnalisée à l'aide de l'option «Autre». Utilisez l'option "Toujours" pour conserver votre animation dans une boucle non-stop.

Pour prévisualiser votre animation GIF, appuyez sur la touche Entrée ou sur le bouton "Lire" en bas du panneau Montage.

Étape 8: Prêt pour enregistrer / exporter

Si tout se déroule comme prévu, il ne vous reste plus qu'à enregistrer (exporter) votre infographie GIF.

Pour exporter l'animation au format GIF: Sélectionnez Fichier> Exporter> Enregistrer pour le Web (existant)

1. . Sélectionnez "GIF 128 Dithered" dans le menu "Prédéfini".
2. Sélectionnez "256" dans le menu "Couleurs". [19659089] Si vous souhaitez utiliser le format GIF en ligne ou si vous souhaitez limiter la taille du fichier de l'animation, modifiez les champs Largeur et Hauteur dans les options de «Taille de l'image» en conséquence.
3. Sélectionnez «Toujours» dans le menu «Options de bouclage». 19659092] Cliquez sur le bouton "Aperçu" dans le coin inférieur gauche de la fenêtre d'exportation pour afficher un aperçu de votre GIF dans un navigateur Web. Si vous en êtes satisfait, cliquez sur «Enregistrer», puis sélectionnez une destination pour votre fichier GIF animé.

   Remarque: De nombreuses options permettent de contrôler la qualité et la taille du fichier GIF – nombre de couleurs , quantité de dithering, etc. N'hésitez pas à expérimenter jusqu'à ce que vous obteniez la taille et les qualités d'animation GIF optimales.

   Votre infographie animée est prête!

   
   

   Étape 9 (facultatif): optimisation

   Gifsicle (programme gratuit en ligne de commande permettant de créer, d'éditer et d'optimiser des GIF animés) et d'autres outils de post-traitement GIF similaires pouvant aider à réduire la La taille du fichier GIF exporté dépasse les capacités de Photoshop.

   Il convient également de mentionner ImageOptim – glisser des fichiers dans ImageOptim exécutera directement Gifsicle sur eux. (Remarque: ImageOptim est réservé aux Mac, mais de nombreuses applications alternatives sont également disponibles.)

   Conseils de dépannage

   Il est probable que vous rencontriez des difficultés lors de deux étapes cruciales.

   Ajout de nouveaux calques

   Ouvrez le menu déroulant «Barre d’outils de la timeline» et sélectionnez l’option «Nouveaux calques visibles dans tous les cadres». Cela vous aidera à optimiser votre animation sans problème.

   
   

   Positionnement des calques

   Parfois, vous pouvez placer des calques dans les mauvaises images. Pour résoudre ce problème, vous pouvez sélectionner le même calque dans une nouvelle image et sélectionner l'option «Match Layer Across Frames».

   
   

   Exemples gifographiques

   Avant de terminer, je voudrais partager quelques bons exemples de gifographie. J'espère qu'ils vous inspireront comme ils me l'ont fait.

   1. Les plus grandes mises à jour de l'algorithme de recherche de Google pour 2016
      Celle-ci est ma préférée. L’incorporation de mises à jour de l’algorithme Google dans un graphique est difficile en raison de sa complexité. Mais, avec les bonnes animations et un texte précis, vous pouvez transformer un sujet apparemment compliqué en un contenu attrayant.
   2. Réalité virtuelle: une nouvelle perspective pour les spécialistes du marketing
      on transforme un sujet apparemment descriptif en un gifographic éclatant. Le gifographic divise le sujet de la réalité virtuelle en chiffres, graphiques et paragraphes faciles à comprendre, avec une utilisation parfaite de l'animation.
   3. How Google Works
      J'aime lire les billets de blog de Neil Patel. Tout comme son post, ce gifographic est aussi complet. La seule différence est que Neil transmet le message essentiel par le biais de fichiers GIF placés avec précision au lieu de paragraphes courts. Il utilise uniquement les couleurs du logo Google.
   4. The Author Rank Building Machine
      Celui-ci répertorie différents conseils pour vous aider à devenir un écrivain faisant autorité. L'animation est simple avec un fond de mouvement de la création de contenu. Tout le reste est divisé en graphiques statiques, images et courts paragraphes de texte. Mais, la conception simple fonctionne, ce qui donne un graphique clair.
   5. Fonctionnement des moteurs de voiture
      Des exemples illustrés du fonctionnement des moteurs de voiture (moteurs à combustion interne à essence et moteurs hybrides essence / électricité). En passant, il convient de noter que, dans certains articles, Wikipedia utilise également des GIF animés à des fins très similaires .

   Envelopper les choses

   Comme vous pouvez le voir, transformer votre infographie statique en une animation. n'est pas très compliqué. Armé d'Adobe Photoshop et de quelques idées créatives, vous pouvez créer des animations attrayantes et divertissantes, même à partir de rien.

   Bien sûr, votre gifographique peut comporter plusieurs parties animées et vous devrez les travailler individuellement, ce qui vous il faudra plus de planification et plus de temps. (Encore une fois, un bon exemple de graphique relativement complexe serait celui présenté dans " Fonctionnement des moteurs de voiture? ", dans lequel différentes parties du moteur sont expliquées dans une série d'images animées connectées.) planifiez bien, faites un croquis, créez et testez vous réussirez et vous pourrez créer votre propre gifographie cool.

   Si vous avez des questions, posez-moi dans les commentaires et je serai heureux de vous aider.

   Ressources supplémentaires

   • “ Qu'est-ce qu'une infographie ,” Le magnétisme de la clientèle
     Une infographie sur l'infographie
   • “ Comment créer une infographie moderne exceptionnelle dans Illustrator ”Jonathan Patterson, EnvatoTuts
   • “ Créez des infographies expertes pour votre prochaine présentation “Blog d'Adobe Creative Cloud
   • “ De quoi est contenu un GIF: Animation et transparence ”Mike Flickinger, SourceForge
   • “ Qu'est-ce que la gifographie & 10 façons de les utiliser dans votre contenu visuel "Julia McCoy, ExpressWriters
   • " Une image vaut mille mots "Wikipedia
   • " Améliorez les performances animées des images GIF avec Vidéo HTML5 "Ayo Isaiah, Smashing Magazine
   • " Création d'une infographie interactive avec Vue.js "Krutie Patel, Smashing Magazine
   • " Comment convertir un fichier vidéo Dans un fichier GIF animé de Photoshop "Graphic Design Stack Exchange
   • " Le référencement simplifié: un guide étape par étape "Neil Patel
   • " Utiliser Photoshop pour Créer des GIF (Gifographic) ”Shane Barker, Gifographics
   (mb, ra, yk, il)