Jean-Sébastien Mansart .com - Tag - bayard-service-web

Lancement du site de Bayard Service Web (et de la vidéo)

Jean-Sébastien Mansart — Fri, 25 Jan 2008 13:56:00 +0100

Mardi matin a été lancé en grande pompe le nouveau site web de Bayard Service Web.
Après plusieurs mois de travail de la part de toute l'équipe, notamment des graphistes pour la réalisation de la vidéo de présentation.

J'ai le privilège de vous la faire partager enfin en entier.

Présentation de l'équipe Bayard Service Web

On remarquera (entre autre) mon sublime talent d'acteur qui n'a d'égal que ma virtuosité en programmation.

La page d'accueil du site est entièrement faite en Flash dynamique, le site lui-même a été développé avec Plone, un CMS pour Zope. La liaison entre Plone et Flash se fait grâce à des fichiers XML générés automatiquement.

Bravo à toute l'équipe pour cette réalisation !

Article original écrit par Jean-Sébastien Mansart et publié sur Jean-Sébastien Mansart .com | Lien direct vers l'article | Si vous lisez cet article dans son intégralité sur un autre site que Jean-Sébastien Mansart .com c'est qu'il a été reproduit illégalement et sans autorisation. Merci de le sig naler à son auteur original en cliquant ici | © jsmansart.com.

Pour patienter...

Jean-Sébastien Mansart — Fri, 21 Dec 2007 08:15:00 +0100

En attendant la vidéo complète de présentation de Bayard Service Web, je vous propose un petit aperçu de tous les corps de métier impliqués et qui seront présents dans la vidéo.

Le Directeur

écoute - conseil - rencontre client

Le Chef de Projet

suivi client - organisation

La Graphiste Web

imagination - créativité - animation

Le Développeur Web

conception - optimisation

La Rédactrice Web

écriture - accompagnement

Passez de bonnes fêtes, et à l'année prochaine pour la découverte de la vidéo !

Réalisation d'une vidéo pour Bayard Service Web. #5 : animation du décor

Jean-Sébastien Mansart — Thu, 20 Dec 2007 11:41:00 +0100

Cinquième partie de la suite de billets consacrés à la réalisation d'une vidéo de présentation de Bayard Service Web.

Maintenant que la vidéo est détourée et les éléments du décor défini, on intègre les éléments dans la vidéo en calant leurs apparitions en fonction de la musique, toujours dans le but de donner du rythme à la vidéo.

La vidéo est pratiquement terminée, il reste à monter les scènes ensemble et créer le player flash dédié.

Bayard Service Web : vidéo présentation #4 : animation du décor

Dans le prochain billet, je vous présenterai les différentes scènes présentes dans la vidéo finale.

Réalisation d'une vidéo pour Bayard Service Web. #4 : création de l'environnement

Jean-Sébastien Mansart — Tue, 11 Dec 2007 14:08:00 +0100

Quatrième partie de la suite de billets consacrés à la réalisation d'une vidéo de présentation de Bayard Service Web.

Lorsque la vidéo est détourée, on en extrait une image et sous photoshop, on place en incrustation des éléments qui constitueront le décor. On créé en même temps la maquette graphique où seront jouées les différentes vidéos.

Cette étape permet de préparer la tâche suivante qui consistera à animer les éléments du décor en fonction de la musique.

Réalisation d'une vidéo pour Bayard Service Web. #3 : le détourage

Jean-Sébastien Mansart — Mon, 10 Dec 2007 13:47:00 +0100

Troisième partie de la suite de billets consacrés à la réalisation d'une vidéo de présentation de Bayard Service Web.

Une fois le montage effectué et avant l'ajout du décor et des incrustations, il faut rendre le fond de la vidéo transparente. Cela se fait en masquant le fond vert, ce qui permet de détourer les personnages et les divers éléments de décor. Cette étape est dans la théorie facile, mais la complexité de cette tâche dépend de la qualité de la vidéo et de l'uniformité du fond vert (reflets, brillance, etc...).

Ce travail peut se révéler long et fastidieux, surtout lorsqu'il faut reprendre image par image la vidéo pour supprimer le fond sans dénaturer la forme et les couleurs des éléments à conserver.

Voici le résultat de la scène du Chef de projet une fois le détourage appliqué.

Bayard Service Web : vidéo présentation #3 : le détourage

Réalisation d'une vidéo pour Bayard Service Web. #2 : le montage

Jean-Sébastien Mansart — Tue, 13 Nov 2007 09:00:00 +0100

Seconde partie de la suite de billets consacrés à la réalisation d'une vidéo de présentation de Bayard Service Web.

Une fois l'acquisition faite, il faut découper la vidéo en pleins de petits bouts, afin de les rendre facilement manipulable pour le montage.
On mixe différents plans, venant des différentes caméras et on assemble le tout, le but est de donner du rythme à la vidéo.

On reprend la vidéo de notre Chef de Projet adoré, on ajoute quelques plans de la seconde caméra, on accélère légèrement, et voilà :

Bayard Service Web : vidéo présentation #2

Réalisation d'une vidéo pour Bayard Service Web. #1 : l'acquisition

Jean-Sébastien Mansart — Tue, 13 Nov 2007 08:00:00 +0100

Dans le cadre de la refonte du site web de Bayard Service Web, la société pour qui je travaille, nous avons voulu tourner une vidéo de présentation de l'équipe qui soit un peu originale, sans pour autant imiter de nombreuses boites qui s'adonnent les unes après les autres au lipdub.

Nous avons donc tous passé une journée dans les locaux de l'IUT SRC de Savoie Technolac à tourner sur fond vert face à deux caméras.
Deux caméras étaient posées pour offrir deux prises de vues différentes, l'équipe des graphistes étaient aux commandes, story boards à la mains, lançant des "ça tourne !" ou des "non, ça va pas du tout là !" suivant les cas.

La première étape, avant le tournage d'une vidéo est le story boardage, raconter l'histoire sous forme de dessins, le plus précis possible pour guider les acteurs et le réalisateur.
Ensuite vient le tournage. Les acteurs se succèdent les uns après les autres, les décors changent entre deux, on refait un nombre incalculable de fois les scènes, et à la fin de la journée on obtient quatre heures de rush.

Voilà le premier résultat, l'acquisition :

Bayard Service Web : vidéo présentation #1

C'est super occupé un chef de projet...