La procédure complète pour réaliser votre bannière GIF animé avec Photoshop
Vous réfléchissez à réaliser une bannière GIF animée pour vos campagnes display ou celles de vos clients ?
Définition et utilité d’une bannière GIF animé
Instrument de communication digitale, le GIF (Graphic Interchange Format) est un enchaînement d’images produisant l’effet d’une image animée. En effet, le rendu final donne l’impression d’une courte vidéo jouée de façon répétitive, c’est-à-dire en continu.
Ce format d’image est employé en guise de présentation visuelle de produits ou de services sur les sites web et les réseaux sociaux des entreprises. Bien plus efficace que les images classiques, la bannière GIF animée s’inscrit judicieusement dans votre stratégie marketing pour la mise en œuvre de présentation produit plus alléchante.
Processus de réalisation d’une bannière GIF par le biais de Photoshop
Il existe certains préalables au processus lui-même. En l’espèce, il est question de se faire une idée claire du visuel que l’on désire obtenir au terme de la réalisation. Dans cette optique, il faudrait se documenter sur les différentes formes de bannières GIF et les opportunités qu’elles renferment. En général, les entreprises les utilisent pour émettre de façon esthétique et attrayante une annonce ou une compilation d’annonces. L’on peut y intégrer des liens de redirection et de tracking. De plus, il est de mise de ne pas perdre de vue le message que l’on cherche à véhiculer. C’est en fonction de tous ces aspects que la sélection de votre série d’images et de votre texte (si nécessaire) sera employée.
En ce qui concerne le modèle, il est conseillé de s’inspirer de ceux déjà présents sur la toile. C’est-à-dire de parcourir des sites ou des blogs, voir ce qui y est proposé en matière de bannière animée et prendre pour base le modèle qui vous attire le plus. Une base qui sera personnalisée en fonction de vos goûts et besoins. Une fois l’ébauche de votre future bannière GIF animé conçue, le modèle choisi et les divers constituants rassemblés, il serait plus aisé de passer à la concrétisation de votre projet. À vrai dire, créer une bannière GIF animée requiert des compétences dans le domaine graphique qui se résument en ces quelques étapes qui suivent.
Paramétrer les réglages de base de votre fichier Photoshop
En ce qui concerne les réglages de base, il s’agit de la résolution, des dimensions et du mode de couleur. En effet, chacun de ces paramètres a une incidence sur le résultat final de votre bannière publicitaire. Étant donné que la fonction primaire de cet outil est de capter l’attention, le GIF animé se doit d’être esthétiquement soigné. C’est la mise en place efficiente de ces caractéristiques qui vous permettront d’obtenir de belles images.
Résolution
L’unité de mesure en l’occurrence est le pixel (px). La manœuvre consiste à définir une taille donnée à votre document à l’avance. En définissant les dimensions en priorité, vous limitez les risques de perte de qualité. De fait, ne pas réaliser cette opération reviendrait à laisser les images dicter les dimensions par défaut. Ce facteur est susceptible de mettre en péril la clarté et la netteté du visuel aboutissant à un élément de mauvaise qualité. La forme la plus employée étant le carré, les dimensions idéales se rapprochent de 600px à 800px.
Dimension
Ensuite, le GIF doit être léger. Un fichier GIF lourd contenant des images plus volumineuses que nécessaires, conduit à un résultat peu reluisant. La résolution étant le nombre de pixels contenu sur une portion donnée d’image, un bon réglage permettrait de résoudre ce problème. En matière de résolution de bannière GIF animé, 150ppp (150 points par pouce) sont largement adaptés.
Mode de couleur
Enfin, le mode de couleur ou mode colorimétrique représente la dernière propriété à déterminer pour votre nouveau document à cette étape. Ce paramètre établit le mode de combinaison des couleurs dans la formation de l’image. Cela détermine également la taille de l’image. Pour rappel, il faut notifier que la taille d’un fichier gif se doit d’être la plus petite possible. En prime, votre design sera certainement consulté depuis l’écran d’un téléphone portable ou d’un ordinateur. Dans ce cas, le mode colorimétrique adéquat serait l’option de couleur RVB.
Pour ce faire, une fois entré dans Photoshop :
- Cliquez sur l’option “image” se trouvant en haut de votre espace de travail. Il vous apparaîtra une fenêtre contextuelle.
- Sélectionnez dans cette fenêtre “taille de l’image”. Cela vous ouvrira une autre fenêtre où vous pourrez opérer tous les changements concernant cette rubrique (dimensions, résolution, mode colorimétrique).
- Assurez-vous que les mesures sont accompagnées des bonnes unités. C’est-à-dire pixel (px) pour les dimensions et pixel par pouce (ppp) pour la résolution.
- Appuyez sur “créer un nouveau document”.
NB : une fois ces paramètres préétablis, ils resteront comme tel et s’appliqueront à tous vos nouveaux documents. Il vous revient alors de les modifier au besoin.
Sélectionner et importer les images entrant dans la mise en place de votre future bannière
Il est maintenant temps de commencer à donner vie à votre projet. Si les étapes préalables sont correctement peaufinées, vous n’aurez aucune difficulté à ce niveau. Ainsi, vous aurez évidemment une idée de là où vous comptez aller, du sens d’orientation et du mode de passage de vos images. Les images ainsi disponibles dans les fichiers de votre ordinateur, il vous suffira de les importer pour débuter les modifications.
Ainsi, en cliquant sur “fichier”, vous serez face à un rouleau d’options parmi lesquelles “scripts”. Utilisez cette option pour déboucher sur une autre fenêtre comportant l’option “chargement des fichiers dans une pile”. Vous aurez accès à vos fichiers et pourrez sélectionner vos images puis valider leur importation en cliquant sur OK. Une série de calques auront été créés et serviront de base à votre fichier GIF. Pour les retrouver, consultez le panneau calques.
Vous disposez notamment de la possibilité de faire usage de fichiers vidéo dans la création de votre GIF animé. Si un fichier vidéo intervient dans la réalisation de votre GIF, il est important de le transformer en calque lors de son importation. Toujours grâce à la touche “fichier” se trouvant sur votre écran, vous accéderez à l’option “importation” puis “image vidéo dans des calques”. Sélectionnez la vidéo, ouvrez et confirmez l’importation en appuyant sur OK.
Mettre votre espace de travail en mode "créer une animation d’image"
Le mode “créer une animation d’image” est celui qui permet de concevoir la bannière GIF animé. Il offre la possibilité de transformer des images figées en images animées par le biais de transitions et d’animations de toute sorte. Pour accéder à ce mode, cliquez sur “fenêtre”, ensuite sur “montage” dans le menu déroulant qui apparaît. C’est à ce niveau que vous disposerez de la largesse de mettre votre zone de travail en mode création d’image animée en sélectionnant l’option “créer une animation d’image”.
Créer l’animation en convertissant vos calques en images d’animation
Les images importées précédemment sont des calques. Il vous faudra les configurer en image. C’est grâce au mouvement de ces images que vous obtiendrez l’effet d’animation alors que vous utilisez des images figées. Tous les calques se retrouvent au niveau du panneau calque dans un cadre. À l’aide de ces images, il faudra créer d’autres cadres pour remplir la timeline.
Pour réaliser cette opération, vous n’aurez qu’à cliquer sur le menu au niveau du panneau montage puis sur “créer des images d’après des calques”. Votre animation est ainsi mise en place. La vérification se fait par l’intermédiaire de la touche de lecture. Il vous suffira de mettre en marche la vidéo en appuyant sur cette touche et par ricochet de déceler les anomalies qui minent le projet afin de les différer dans les étapes suivantes.
Régler manuellement l’animation
L’ajustement manuel se réalise à cette étape. En l’occurrence, l’étape antérieure est une phase presque automatique. Ici, il est tout à fait possible de manœuvrer des changements image par image. Dans ce cadre, cliquez sur l’image concernée et apportez tous les changements désirés.
Au cas où votre but serait l’élaboration d’une simulation de mouvement à l’aide d’une seule image, la procédure est simple. Dupliquez l’image en question et déplacez-la. Reproduisez l’opération plusieurs fois et veillez à ce que l’intervalle de l’espacement entre les images soit le plus rapproché possible. Le mouvement sera fluide et presque réel.
Choisir la durée d’apparition de chaque élément
En addition aux adaptations déjà abordées, vous avez libre cours en matière de timing de vos éléments. En quête de fluidité, il faudra trouver le moment propice pour faire disparaître une image et en faire apparaître une autre. C’est la cible de cette fonctionnalité. Vous construisez votre illusion de mouvement autour de cette manipulation. La durée d’intervention de chaque image se trouve inscrite sous ces dernières. Pour la redéfinir, il existe une flèche située à côté de l’inscription à actionner.
Déterminer le nombre de boucles que doit opérer votre animation
La plupart du temps, les bannières GIF animées sont jouées en continu. Cependant, vous n’êtes pas obligé de mettre la lecture en mode infini, d’autres modes sont présents. En appuyant sur la touche “menu de répétition”, vous remarquerez inscrit, “une fois”, “3 fois” et “toujours”. Il vous incombe de choisir à votre guise.
Gérer les finitions de votre projet
Vous voilà presque au terme du processus d’élaboration de votre document. Avant de passer à la phase d’exportation du fichier il est de mise de procéder à des vérifications d’usage. Revisualisez la vidéo pour vous assurer que tout y est disposé comme vous le désirez et qu’il n’y a pas d’erreur. Dans le cas échéant, il est d’usage de retourner vers le panneau de montage et rectifier la situation.
Exporter le résultat en tant que fichier GIF
Nous voici arrivés à l’ultime étape. Il est vrai que celle-ci consiste concrètement à enregistrer votre travail en vue d’en disposer au moment opportun. Tout de même, il existe quelques réglages qui interviennent notamment à ce niveau. Pour des raisons pratiques, il est conseillé de réviser certains paramètres avant l’exportation.
Un fichier volumineux prend plus de temps à se charger dans les navigateurs. Vous devriez donc viser un fichier final avec un poids inférieur à 1MB dans l’idéal. Cependant, vous pouvez vous permettre d’aller jusqu’à 5MB si vous n’avez guère le choix. Au-delà de cette taille, il serait judicieux de remanier quelques données pour être conforme à la norme et éviter les désagréments liés à cet état de choses. De ce fait, il convient :
- d’alléger le poids du fichier sans sacrifier la qualité des images (aller dans paramètre prédéfinis > GIF 128, tramer et réduire également les données contenues dans les cases L et H de l’onglet “taille de l’image “) ;
- de réduire la densité des couleurs inutiles (dans la majorité des cas, 256 conviendrait) ;
- de passer du RVB au sRVB.
Pour parvenir à un tel résultat, cliquez sur “fichier”, “exportation” puis “enregistrer pour le web“. À l’ouverture de la fenêtre, vous verrez toutes les options suscitées. Enregistrez le fichier et vous venez alors de finir l’élaboration de votre bannière GIF animé. Surtout assurez-vous que la case GIF soit bel et bien cochée.
En somme voici comment obtenir votre propre GIF animé. Mais, si la procédure vous semble complexe et que vous ne parvenez pas aux résultats escomptés, recourir aux services avisés d’un expert en création graphique est la meilleure solution pour l’établissement de votre bannière web animée. Votre campagne publicitaire n’en ressortirait plus que professionnelle et cela vous évitera de rajouter une tâche chronophage à votre planning.
Notez que pour plus d’efficacité, vous avez la possibilité d’opter pour un outil largement plus performant que l’animation GIF. Il est question de l’HTML5. Si vous souhaitez connaître les raisons qui démontrent que l’HTML5 est plus performant que le GIF animée, consultez cet article.
L'AUTEUR
Michael Le Hoang
Besoin d'un coup de pouce pour vos projets ?
Déposez votre première demande de devis en cliquant ici et recevez une estimation gratuite pour améliorer votre visibilité en ligne.
Devenez incollable sur le marketing digital grâce à nos livres blancs !
Vous ne savez pas comment entretenir votre site web ? Vos e-mails ne reflètent pas les valeurs de votre entreprise ? Votre création de contenus ne sert pas assez votre site web et vos concurrents vous passent devant sur Google ? Lisez nos livres blancs sur le marketing digital et boostez vos compétences !
*Les informations recueillies sur ce formulaire sont enregistrées dans un fichier informatisé par MyFlow pour la communication marketing et commerciale. Elles sont conservées pendant 3 ans et sont destinées au service marketing et au service commercial de MyFlow. Conformément à la loi « informatique et libertés », vous pouvez exercer votre droit d’accès aux données vous concernant et les faire rectifier en cliquant ici.
