💵Flat design Dollar 3D animation gif After-Effects

Cette petite animation est le résultat d'un test du moteur de rendu de Cinema 4D directement dans After-Effects. Ce test m'a pris beaucoup de temps, beaucoup d'essais, d'échec, puis cela a fonctionné avec ce rendu en Gif animé.

Dollar 3D animation gif After-Effects
Dollar 3D animation gif After-Effects

Etapes

  1. L'illustration est crée dans Illustrator, les calques sont alignés au pixel prés, sans la liasse.
  2. Importée dans After-Effects, la composition est définie à 24 images par secondes.
  3. L'illustration est convertie en calque de forme sous un même calque.
  4. Le calque de derrière subit une transformation horizontale afin que le symbole dollar s'affiche correctement lors de la rotation.
  5. Pour former la liasse, 2 calques de forme supplémentaires sont nécessaires.
  6. L'icône 3D est activé sur tous les calques, sauf le fond et les autres éléments graphiques fixes. Les calques 3D sont disposés à des profondeurs différentes.
  7. Un calque central de forme vectorielle est extrudé pour donner de l'épaisseur, il a une couleur plus foncé.
  8. Devant et derrière, 2 nouveaux claques de forme comportent 2 rectangles supplémentaires pour simuler la liasse. La profondeur de l'axe Z est aussi ajustée.
  9. Tous les claques sont liés à un objet "null" afin d'animer la rotation sur l'axe Y.
  10. Les éléments graphiques, corde et cercles, sont ajoutés en utilisant l'effet Appliquer un cache pour masquer le haut de la corde.
  11. Le mode de rendu Cinema 4D est défini à 50. Un calque d'effet est ajouté pour éclaircir l'ensemble et compenser l'aspect terni lors de la conversion en Gif. La composition est bien en qualité finale, en désactivant l'icône Ebauche 3D. La composition est exportée avec les paramètres de rendu en qualité animation, sans compression.
  12. La vidéo est ouverte et exportée pour le web dans Photoshop pour garantir le meilleur rapport poids - qualité en sélectionnant le nombre de couleur adéquat. Le mode rendu Gif du Media-Encoder ne produit pas de fichier de bonne qualité. Le plugin Gif-Gun ,utile jusqu'à présent, n'était pas adapté pour ce projet.

Ce que j'ai appris : erreurs avec cette rotation 3D

Préparez votre fichier Illustrator à la bonne taille avec un plan de travail avec des valeurs de pixel entières. Ne pas précomposer les calques de formes, ni les calques Illustrator , convertissez vos claques Illustrator en calques de forme.

Peu importe d'incoporer le mode de couleur SRVB ou Adobe RVB 98, cela ne changera rien.

J'ai du trouver des astuces, ajouter un contour avec les styles de claques, tenté d'enlever les pixels qui apparaissait avec l'effet Minimax, rien de fonctionnait. De plus, cela provoque des artefacts lors du rendu de Cinema 4D, quelque soit les paramètres de rendu. C'était de pire en pire. J'ai pu trouver la solution sur le forum creativecow, dont un expert spécifiait bien d'utiliser que des claques de forme.

Applications Mobiles, Gifs Animés, Bannières Publicitaires

TERMES :
Mes cours particuliers apprentissage de PHOTOSHOP
Cours de graphisme avec photoshop

Cours à domicile Photoshop. Apprenez le détourage facilement, comment corriger vos images, le photomontage et autres secrets des professionnels de l'image. Au menu, des exercices sur vos photographies qui vous feront gagner du temps.

Apprentissage avec un enseignement pédagogique adapté à tous. Cours individuels en visioconférence.

Inscrivez vous maintenant !
formateur graphiste motion designer

Je m'appelle Fabien Lesbordes, formateur digital et graphiste professionnel avec plus de 18 ans d'expérience. Mes formations et cours particuliers portent sur la création et la conception graphique avec la suite Adobe (Photoshop, Illustrator et Indesign). J'interviens également en animation 2D ou motion-design ainsi qu'en apprentissage des langages HTML5 et CSS3, jusqu'à l'apprentissage du célébre CMS Wordpress et le SEO (référencement naturel). Ces formations sont destinées à un public débutant, intermédiaire et avancé. Il s'agit de graphistes et photographes essentiellement. Ce sont des cours particuliers en vidéo FOAD, en visio-conférence ou à domicile et des formations collectives ou individuelles en entreprise.

💵FLAT DESIGN DOLLAR 3D ANIMATION GIF AFTER-EFFECTS