Cela fait longtemps que je n'avais pas parlé d'un de mes travaux pro sur le blog, c'est donc avec une certaine joie que je vous présente aujourd'hui ma dernière réalisation vidéo, pour Netvibes !

A l'occasion du redesign de leur Homepage (bientot en ligne), Netvibes souhaitait une vidéo dynamique de présentation de leur service.
Suite à la vidéo que j'avais réalisé pour Fubiz.net il y a plus d'un an (pfiou, ça fait bizarre !), Fubiz Interactive à fait le lien entre Netvibes et la Sonacom, la société dans laquelle je suis salarié, pour réalisé un film dans le même esprit : Court, rythmé, qui donne envie d'essayer le site.

Je tiens à remercier au passage Franck et Karine, qui ont été réactifs et dispos tout au long de l'avancé de ce projet, et qui ont su fournir des éléments graphiques de qualité, ainsi qu'un super storyboard, qui a grandement facilité le processus de réflexion en amont ! Ah oui, et quasiment aucune modifs, sauf de timing, bref, des clients comme j'aimerai en avoir tous les jours !

Comme ce site est en partie consacré à After Effects, et que cette vidéo en est le fruit à 100%, autant vous donner quelques détails techniques et astuces concernant la réalisation d'un projet de ce genre :

Ce film, bien que court, est une sorte de plan séquence, une imbrication assez poussée de multiples compositions en une seule, avec un seul rendu final, pas de montage, je ne voulais pas créer de rupture et rester dans la meme dynamique tout au long de l'avancé.
Il n'y a d'ailleurs qu'une seule camera, et une seule lumière pour tout le projet.
L'organisation du projet est très importante. Lorsque l'on dépasse la dizaine de compositions, ce qui est largement le cas ici, il faut se forcer à être rigoureux sur le nommage, la création de dossiers et le rangement dans votre panneau projet. Cela vous semblera surement "inutile" au début, mais vous fera économiser un temps précieux sur le long terme.

Si je devais découper mon travail par étapes, cela se résumerait à :

-Préparer les .psd. Séparer et nommer tous les élements, chaque partie du site que vous souhaitez animer devra être isoler sur un calque au préalable sur photohop . Elargir les zone de travail. A la base, le design d'un site dépasse rarement les 1024px. Mais en animation, lorsque l'on incline la camera, que l'on change du point de vue frontal habituel dans le web, il faut que les pages soient larges, très large. Il faut donc étirer les fonds à au moins 6000px pour ne pas être géné, recréer de grandes barres de navigations, etc...

-Une fois les .psd de chaque pages préparés, on peut les importer sur After Effects, en tant que composition, en recadrant les calques, et en faisant attention aux styles de calques. Les conserver rendra l'interaction avec la lumière impossible, les ombres ne seront pas projetées. Si vous voulez garder un style de calque, comme dans mon cas le léger contour transparent de chaque widget, il vous faudra passer par des précompositions.

-Ensuite viens l'animation. On passe tout les calques d'une page en mode 3D. Mais on ne créer pas de lumière, ni de camera. Sur l'image ci-dessous, on remarquera à droite ma composition contenant la page photo et tous les calques, et à gauche, la même page en perspective, avec des ombres, dans la composition principale, qui elle contient la camera et la lumière.

-Concernant l'animation de la camera principale, qui se balade sur toutes les compos de pages, j'ai utilisé la méthode de maltaannon : Simple Camera Rig. Cela fonctionne à merveille et rend l'animation de camera tellement plus intuitive et simple que ce serait vraiment une erreur de s'en passer pour ce type de projets, ou la camera et son mouvement joue un role central ! Couplé à l'excellent script Ease and Wizz, on obtient sans trop de mal de superbes mouvements !

-Enfin, une fois toutes les anims calés, la profondeur de champ ajustée tout au long du déplacement, bref, une fois que la vidéo vous semble terminée, une légère passe de post prod sur la compo finale ne fait jamais de mal ! Des calques de formes colorés très diffus avec le mode de fusion qui va bien pour coloriser un peu les ombres, une légère balance des couleurs, une petite accentuation, et hop !

-On lance ensuite le rendu final. Et la...
Ben la évidemment, ça plante ! Avec de si grandes compos, une ombre diffuse à 200px, une profondeur de champ toujours active, du motion blur, le tout en 720p, le petit After Effects CS4, même sur de gros octo coeurs blindés en RAM, et bien il n'y arrive pas !
Et la on se sent seul.. Alors on optimise, on allège ses psd, on créer des doublures, on compile, et encore des doublures. Pour au final après une journée de prérendus, sortir un fichier ! Oui, c'est aussi ça, la joie d'After Effects ;)
On livre au client, et quand il est content, comme ce fut le cas pour cette production, alors on peut jeter toutes les canettes de redbull encore présentes sur le bureau, et rentre se reposer, avec le smile !

Un peu triste que le projet soit terminé, mais content ! Il ne me reste plus qu'a me spécialiser dans l'animation de sites web ^^