Tutoriel – Créer une bannière animée, pas à pas

Télécharger pdf

Pour toutes ces étapes créatives, allez piocher dans nos banques d’images, à découvriri ici 

Etape 1 – conception :
Il existe de nombreux formats de bannières , selon l’emplacement qu’elles occuperont sur un site ou un réseau social. Le format est exprimé en pixel.
Les plus courants sont :

  • le billboard 970×250 (34,22 cm x 8,82 cm),
  • le skycraper large 160×600 (5,64 cm x 21,17 cm),
  • le pavé 300×250 (10,58 cm x 8,82 cm).

Ces conversions en cm sont données pour une résolution écran (72 dpi, dots per inch ou points par pouce, voir https://www.blitzresults.com/fr/pixels/)

Ces espaces sont contraignants, vous devez donc concevoir un visuel attrayant, des textes clairs et concis, un bouton à cliquer pour inviter à l’action, et respecter l’univers graphique de la marque pour que lui soit facilement associé le message véhiculé par la bannière.

Etape 2 – préparation :
Une bannière animée est une suite d’images fixes qui, passées rapidement les unes à la suite des autres, donnent une impression de mouvement. Le gif animé est une bannière animée qui fonctionne en boucle.

Imaginez votre mini scénario pour la bannière animée : apparition successive de mots ou d’éléments, mouvement d’un élément qui se déplace dans la scène, texte qui s’écrit progressivement, change de couleurs…Des possibilités infinies.

Concevez vos images successives.
Utilisez la bibliothèque de fonds, photos, pictos téléchargeables dans la rubrique La publicité comment ça marche ? Mettre en œuvre. (lien vers la boîte à outils) pour y piocher des éléments que vous retravaillerez éventuellement.
Décomposez le mouvement recherché en étapes.
Créez votre première bannière sur PowerPoint, enregistrez-là et repartez de celle-ci (en dupliquant la diapositive) pour créer la suivante, en faisant évoluer légèrement le sujet ou l’objet, et ainsi de suite pour chaque nouvelle bannière.

Autant de bannières que de diapositives PowerPoint et d’étapes dans le mouvement ou le changement décomposé.
Limitez-vous : une fois animé, l’ensemble ne dure que quelques secondes, pour ne pas lasser la curiosité de l’internaute qui veut vite savoir où vous voulez en venir. 10-15 images maxi.

Exemple de plusieurs images composant la bannière :

Etape 3 – animation :
Dans le menu « Transitions » de PowerPoint, déterminez la durée de transition entre les diapositives, en paramétrant chaque dispositive.
Pour une transition immédiate, cochez « Après » et laissez « 00 :00 :00 »
Pour une transition plus lente, qui donne le temps de lire un texte court, paramétrez « 00 :01 :00 », c’est-à-dire 1 seconde.

Vous pouvez ensuite visionner la bannière animée en lançant le diaporama.

Il existe plein de petits logiciels gratuits accessibles sur l’internet pour réaliser vos gifs animés.
En voici quelques exemples :
https://gifmaker.me/ 
https://giphy.com/create/gifmaker 
https://www.cleverpdf.com/fr/gif-maker 

Vous devrez toutefois toujours en passer par la création de chaque bannière. Il faudra alors enregistrer chacune sous un format image jpeg ou png.

Informations requises

Pour nous permettre de faire grandir la communauté Media Smart, développer des kits pédagogiques adaptés aux besoins des enseignants et en phase avec les programmes scolaires, merci de compléter les champs ci-dessous afin de télécharger les kits.
Le formulaire est à remplir une fois uniquement pour accéder à tous les kits disponibles en ligne sur 1 an.


Les données que vous avez choisies de communiquer, et a minima votre adresse e-mail et le code postal de votre établissement, sont utilisées par les équipes en charge du programme Media Smart au sein de l’Union des Marques pour vous permettre d’accéder aux kits et/ou supports pédagogiques que vous désirez et vous faire parvenir leurs mises à jour et actualités. Ces données sont également utilisées pour effectuer des statistiques de diffusion du programme.
Vous pouvez bien entendu exercer vos différents droits en matière de protection des données personnelles (droit d’accès, droit de rectification, droit à l’effacement, …) ainsi que vous opposez à ce traitement en nous contactant à l’adresse suivante : contact@media-smart.fr
Retrouvez l’intégralité de cette politique de protection des données personnelles sur le site internet de l’Union des marques : ici