Novembre 2007

Transition avec image vectorisée


Auteur : Galdon
Catégorie : After Effects
Dans ce tutoriel, je vais vous apprendre à faire une transition avec une image "vectorisée".
J'ai vu cet effet dans le film Spasman 2 de la lopéprod, donc j'ai essayé de faire quelque chose de semblable.
Bien sûr c'est pas aussi bien fait que dans Spasman 2, mais vous pourrez l'améliorer si c'est pour une production.

Créez un nouveau projet sous After Effects, puis une composition de taille 640*360 (taille de l'image), puis importez l'image de fond que vous venez de télécharger.
Ajoutez l'image de fond à comp 1.
La première chose à faire va être de créer les formes vectorielles(ce sont des solides). Créez donc un solide à la taille de la composition peu importe la couleur, et ajoutez-le à votre composition.

Maintenant il va falloir donner une forme adaptée à ce solide, la forme du bâtiment à droite de l'image, grâce à l'outil plume :

Sélectionnez donc l'outil plume, et cliquez à l'endroit où vous voulez créer le premier sommet, puis à l'endroit où vous voulez le second sommet et ainsi de suite.
Une fois que vous aurez assez de sommets, cliquez sur le premier sommet pour refermer la forme.

Pour faire des formes arrondies, utilisez des courbes de bézier (par défaut, la plume crée des coins, pour changer un coin en point bézier utilisez l'outil "conversion de sommet", et si vous ne voyez pas la tangente, faites un clic droit sur le point et décochez "rotobézier".

Procédez de la même façon pour chaque partie de l'image.

Pour modifier la couleur de chaque solide, utilisez l'effet Rendu/Remplir.

À la fin de cette longue et fastidieuse opération, vous vous retrouvez avec une dizaine de solides, il faut maintenant les animer.


Animation des solides

Je vous propose d'utiliser la même base de temps que moi, ça sera plus simple pour les explications (mais vous pourrez la modifier a la fin du tuto).

Pour ma part, j'ai animé soit l'échelle, soit la position des solides, soit l'opacité, et j'ai aussi utilisé l'effet "Onde progressive" pour le dernier.

À l'instant 0:00:00:00, rien ne s'affiche à l'écran, et a l'instant 0:00:01:14, tous les solides sont à leur place définitive, arrangez-vous pour respecter ceci (créez des clés position, des clé échelle, utilisez des effets si vous le désirez).
Une fois que vous aurez terminé l'animation, supprimez l'image de fond de la composition.

Bien, on va passer à la phase 2 (rassurez-vous, ça va être rapide, on approche de la fin).

Une fois que tout est animé, on va créer une deuxième composition, toujours en 640*360, et on va y mettre 2 choses :

image de fond
comp 1

Attention, image de fond ne démarre qu'à l'instant 0:00:01:16 (sinon elle cache comp 1).
On va appliquer un effet "Lueur diffuse" à comp 1, laissez les paramètres de cet effet par défaut, on va juste animer le seuil :
à l'instant 0:00:01:12, le seuil est a 100%
à l'instant 0:00:01:16, le seuil est a 47.5%

Maintenant on va animer l'opacité de l'image de fond, activez donc le petit chrono de opacité puis créez une clé à l'instant 0:00:01:16 (c'est l'instant auquel le seuil de comp 1 est a 47.5%) avec la valeur 0% (l'image de fond est donc invisible a cet instant).
Créez une seconde clé à l'instant 0:00:01:21, avec la valeur 100% (le fond est maintenant opaque).

Voila, c'est fini, reste plus qu'à faire un rendu et l'affaire est dans le sac.

pas compris ?
Mr.James - mercredi 4 février 2009, 16:19
Et moi je voudrais un décodeur, parce que j'ai rien compris à ce que tu dis.

Sinon, le tuto est cool. Merci
stevensf - lundi 11 janvier 2010, 12:48
toujours sympas de mettre des tutose, par contre mettre un petite vidéo de l'ffet final aurait été bcp plus cool :)
nomade - mardi 23 mars 2010, 19:23
La vidéo de l'effet final est en bas du tuto, "voir la vidéo"
un passant - lundi 17 mai 2010, 12:47
C'est laid.
C'est bien de vouloir faire des tutos, c'est mieux de faire des choses propres. Ne poste pas de vidéo si tu y montre un effet pas fini (les noirs entre les calques sont dégeu et les couleurs du fhashs sont ignobles)
A part ça l'idée est sympa...
Un gentil - jeudi 12 août 2010, 11:32
Oh ! C'est bon là ! Il est sympa de nous proposer ce tuto déjà ! Alors au lieu de lui gueuler dessus tu pourrais le remercier ou même lui faire remarquer ses erreurs de facon sympatique du genre : "En effet j'ai remarqué que ..." au lieu de dire :" Putain c'est degueulasse ! Alors tu t'excuse stp !
Voice forever ! - jeudi 12 août 2010, 11:36
I suis d'ac with le gentils, parce que l'autre passant ne l'est pas ! Merci for ce tuto, it's very gentil. Continu comme ça, Bye, ton friend !
mmm - mardi 23 novembre 2010, 00:30
fais en un tuto toi le passant, apres tu pourras te permettre de critiquer
Merci a toi pour le tuto
oogy - jeudi 9 février 2012, 14:46
Merci et beaucoup pour ces tutos, merci pour ce temps passé et tes explications.
Alors le passant tu es gentil tu circules, en disant pardon !
merci
Laisser un commentaire
Pseudo
Adresse Mail
Site web
(facultatif)
Commentaire
Facebook Twitter RSS Email
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré