animation du logo VOIR dans After Effects converti en .gif

Animation de cercles : LOGO VOIR.
En 2016, le magazine VOIR soulignait son 30e anniversaire. Pour l'occasion, le magazine s'est offert un nouveau logo, un nouveau site web et s'est lancé dans l’aventure du magazine imprimé, à contre-courant de ce qui se passe dans le monde des médias... Vous devez créer dans After Effects une animation de leur logo, la convertir en .gif et l'insérer ensuite dans leur site web (reproduction).

Étape 1

Téléchargez le logo de VOIR.
Ouvrez-le ensuite avec Illustrator.
Séparez chaque élément graphique du logo. Copiez/collez en place dans des calques séparés et nommez bien vos calques. Exemple : V, O, I, R, O gris, O rouge.
Convertissez le fichier au format Illustrator (.ai) pour pouvoir l'importer dans After Effects.

Étape 2

Ouvrez After Effects et créez une nouvelle composition : + i (menu : FICHIER > IMPORTER > FICHIER) : Largeur : 1000px, hauteur : 539px Ces dimensions correspondent en proportion à la taille de l'image finale pour le site web.
Entrez les paramètres exactement comme dans l'image ci-dessous :

Étape 3

Importez le fichier Illustrator du logo : + i (menu : FICHIER > IMPORTER > FICHIER).
Entrez les paramètres suivants pour l'importation :

Étape 4

Double cliquez sur le fichier Illustrator pour que la composition apparaisse dans la fenêtre de montage

Étape 5

Vous êtes maintenant prêt à effectuer votre animation. Comme pour n'importe quel projet d'animation, je vous suggère fortement de faire une recherche visuelle avant de commencer à travailler pour vous inspirer. Voici quelques exemples d'animations de cercles. Pour chacune d'entre elles, vous pouvez les glisser directement sur l'icône de Photoshop pour les ouvrir et les analyser "frame by frame" afin de tenter de comprendre comment leurs auteurs les ont créées.


Circle - Test Animation par Nick Baldwin



Dot, line and circle par Niklas Arthursson



Circle Animation par Milos Subotic



Red Circle robin Animation par Kate Chesterton



infographic circle par frametouch



Circle Animation par Meghen Welly



Circle Ball par Phong Luong



Twisting circle par Dave Whyte



Circles par Creativedash





Étape 6

Une fois votre animation terminée, exportez-la : FICHIER > EXPORTER > AJOUTER À LA FILE D'ATTENTE DE RENDU... (Voir l'étape 17 sur cette page pour les paramètres.

Étape 7

Une fois votre animation rendue en vidéo, ouvrez-la avec Photoshop.
Supprimez les parties de la vidéo inutiles (voir l' étape 2 sur cette page pour les instructions).
Téléchargez et décompressez la reproduction html de la page d'accueil du VOIR.
Redimensionnez la taille de l'animation : largeur : 175px.
Exportez votre image au format .gif (consultez l' étape 21 sur cette page pour les instructions).
Vous devez nommer votre image "logo_voir.gif" et écraser celle qui se trouve dans le dossier du site web pour pouvoir voir votre animation au bon endroit.

Fin

Auteur : Gilles Thibault.