Juin 2009 Manuel Delaunay BTS Communication Visuelle option multimedia
Sommaire
L’entreprise BESIGN
p. 4
1er projet : Animation «Besign»
p. 5
2nd projet : Site Internet Physiol
p. 10
Autre projets
p. 12
Règles à tirer de cette experience
p. 13
Remerciements
p. 14
Annexes
p. 16
BESIGN est l’entreprise individuelle de François BALTHAZARD, graphiste/DA freelance, située à Nantes. Tel: 06 16 48 18 43 mail : contact@besign.fr Web : www.besign.fr
Structure crée il y a cinq ans, Besign propose une approche non-conventionnelle du design graphique, et revendique une réelle liberté d’expression tant sur le plan artistique que sur la manière de véhiculer le message souhaité : Print, web/multimédia, motion design ... Parmi les clients de cette agence: des mairies, organisateurs d’évènements, associations culturelles, sportives, ... de Nantes et du département. Nombre de réalisations à l’année 2008 : 50 contrats, de 300 à 7000 Euros par contrat La partie développement pour le web/ multimédia est sous-traitée par l’agence HappyNet (St-Nazaire), Besign se chargeant de l’univers graphique du site.
4
Le projet le plus important qui m’a été confié est celui de la création d’une «animationsignature» pour la structure BESIGN: une animation courte, riche, qui présente l’agence Besign, destinée à être placée, entre autres, en introduction du site besign.fr;
Animation «Besign»
François Balthazard envisage à long terme une refonte complète de son site Internet; Il souhaite concevoir une page d’introduction reprenant l’univers graphique du site actuel. Cette animation est envisagée comme une signature, pouvant également être placée au début ou à la fin de ses réalisations vidéo : le logo doit apparaître à la fin de l’animation. En tant que représentante de l’identité de BESIGN, la séquence doit contenir les notions de création graphique, de dynamisme et de fluidité. Elle évoque l’espace de création et les idées qui en jaillissent. Du fait de sa diffusion fréquente et de son usage de signature, elle doit proposer une qualité d’image et d’animation irréprochable et ainsi démontrer le savoir-faire de BESIGN.
5
Idée discussion univers et fond
6
La première étape a été d’établir un scénario sommaire; François voulait évoquer un processus de création explosif, le long d’un parcours mouvementé. Au fil des discussions, nous avons précisé ces idées et avons abouti au déroulement suivant : «Un homme (client) actionne un flux d’énergie créatrice qui se manifeste sous la forme des lignes utilisées par le graphiste (crayon de bois, encre, peinture, tracé de bézier, etc ...) passant par différents domaines ainsi liés (motion, web, graphic) jusqu’à venir se connecter à un globe métallique qui est le cœur de BESIGN, une machine nourrie de multiples références, l’endroit où le visuel est fabriqué. Cette sphère devient ensuite une goutte d’encre qui vient bousculer le «D» du mot Design pour le remplacer par un «B».»
Au cours des différentes discussions avec François, je me suis rendu compte qu’un mouvement est parfois moins facile à décrire qu’une image fixe. Afin de bien comprendre les idées et d’en proposer, nous avons esquissé la trajectoire des éléments et mimé les mouvements de caméra. J’ai également recherché un vocabulaire approprié, fait de références multiples : - l’univers «Steampunk» (futur associé à l’esthétique industrielle du XIXe siècle, cf Wikipédia) des livres de Jules Verne, des «machines de l’île» de Nantes, etc. se rapprochant de l’univers graphique de Besign. - Le fluidité et le dynamisme des vidéos de FullScream (fullscream.com), Julien Vallée, etc. - les photos d’éléments métalliques usés, de mécanismes rouillés, etc. A la suite de ces mises au point sur le fond et la forme, j’ai pu établir un storyboard. Ce storyboard sommaire, qui a évolué par la suite, m’a permis de mieux définir ma mission: il s’agissait pour moi de réaliser la séquence d’introduction (un interrupteur actionné qui «lance» l’animation), la partie centrale (le globe métallique, la goutte) et la dernière partie (le logo BESIGN), ainsi que prévoir le lien avec la partie «2D» (partie des lignes) dont François se chargera ultérieurement.
Afin d’avoir un aperçu rapide du rendu final, François m’a d’abord demandé de préparer les éléments et de les mettre en scène. L’étape de l’animation n’est venue qu’après.
Déroulement
Dans l’objectif de réutiliser l’univers graphique de BESIGN existant, constituée le plus souvent de photos et de scans de pièces métalliques (site besign.fr), les différents éléments devaient être traités de façon photo-réaliste ; Cela a nécessité une grande rigueur dans la conception des éléments qui constituent l’animation. Le travail de modélisation des différents éléments a été en premier lieu l’occasion d’étudier, à l’aide de différentes sources (photographies, vidéos, ...), différents objets métalliques et mécaniques en fonctionnement : mécanisme d’horlogerie, engrenages, interrupteurs, scaphandre, etc. Je me suis ensuite inspiré des formes de ces éléments pour les intégrer aux objets que je devais réaliser, tout d’abord en esquissant des compositions (pour les engrenages, les fils et les hublots notamment), puis en tracé vectoriel, et enfin en leur donnant du volume. Le passage entre ces différentes étapes m’a permis d’apprendre des techniques poussées de modélisation.
Modélisation
7
Ce travail d’observation m’a également servi tout au long de la réalisation, pour le texturage et l’animation en particulier. Matière-aspect
Animation
Cette étape s’est révélée être une des plus difficiles, notamment car elle dépend énormément des choix d’éclairage, d’exposition, etc. Difficile donc d’établir une méthode réellement efficace, il était plus judicieux (mais plus long, aussi) de procéder par tâtonnements. Cette démarche m’a incité à observer attentivement dans la rue ou sur photos les objets métalliques usés ou rouillés, pour essayer de comprendre leurs propriétés (surface, réflexion, reliefs, ...). Pour recréer ces matières, j’ai à la fois utilisé des échantillons de photos et des images numériques réalisées avec Photoshop. En les combinant d’une façon particulière, et en utilisant un éclairage approprié, j’ai réussi à obtenir un effet métallique réaliste sur les différents objets. Ce stage à été l’occasion d’apprendre à manipuler les outils d’animation sur des mouvements complexes. L’un des impératifs sur ce projet était la fluidité de l’animation. Afin d’obtenir les mouvements sinueux et amples des fils électriques, la métamorphose de la boule ou encore la chute réaliste de la
8
goutte, il a fallu préparer de façon précise les trajectoires de chaque objet (ainsi que celle de la caméra) et faire de nombreux ajustements. Le déplacement de la caméra à été difficile à réaliser, car elle doit «filmer» chaque élément selon un rythme précis tout en conservant un mouvement fluide. De plus, elle doit être positionnée de façon à respecter la composition des plans (position et taille des objets dans l’image) définis lors du storyboard.
Les parties de l’animation dont j’avais la charge devaient pouvoir être intégrées dans l’animation finale; C’est pourquoi j’ai effectué le montage et le mixage des différents plans sous After Effects, afin de limiter le nombre de fichiers et simplifier leur utilisation ultérieure. Ces fichiers permettent malgré tout de retoucher indépendamment la colorimétrie de chaque plan.
L’animation achevée, j’ai effectué un premier rendu (calcul des images à partir de la scène réalisée) de l’animation dans sa globalité. Avec ce rendu, nous avons pu identifier les défauts de matières, d’animation et d’éclairage et apporter des corrections. Comme chaque rendu prend du temps et que ces ajustements ont été nombreux, j’ai appris à mieux anticiper les erreurs (matières, rythme, transitions) et à visualiser les animations sans passer par le calcul des images.
Ajustements, exportations
Sur cette mission, je pense que les objectifs ont été atteints : l’animation est fluide, soignée, elle évoque la création graphique d’une façon originale et s’inscrit dans l’univers graphique de Besign;
Bilan
9
Site internet «Physiol»
La société Physiol souhaite la refonte de son site internet. Physiol est un fabriquant belge de lentilles médicales. Elle s’adresse aux milieux hospitaliers et centre chirurgicaux du monde entier.
Recherches
A partir d’une plaquette et d’un brief assez complet, j’ai fait une liste des contraintes à respecter : -nombre et contenu des pages, -nombre et noms des éléments cliquables -éléments graphiques existants à réutiliser -mise en page du contenu iconographique J’ai également établi une liste de mots-clés : -Dynamisme, réactivité, expansion, échange, proximité, talent, expertise pérennité, performance ... -lumière, flou-netteté, transparence, formes courbes J’ai ensuite effectué des recherches autour de l’univers de l’ophtalmologie, les formes et couleurs qui lui sont associés, ainsi qu’une analyse des sites concurrents.
10
J’ai proposé deux maquettes; l’une évoque la notion de netteté, dans une mise en page aérée et sereine. L’autre utilise le verre, la transparence, la forme arrondie (propre aux lentilles), dans une mise en page plus organisée.
Propositions
La deuxième proposition a été choisie, car le produit y est plus visible; j’ai donc réalisé l’ensemble des pages, en proposant une mise en page adapté au type de contenu : présentation, liste de produits, fiche-produit, liste de vidéos et d’articles, évènements, localisation. Cette étape ayant été validée par le client, le fichier photoshop a été envoyé à la société HappyNet qui assure la partie programmation du site. Il devrait être en ligne au début du mois d’octobre 2009.
11
Autres projets :
Logo «LPC»
J’ai proposé trois logos pour LPC, une association proposant une aide aux enfants souffrant de surdité souhaitant apprendre le langage parlé complété ; La proposition retenue a été déclinée sur flyer. J’ai également conçu des propositions de logos pour DB musique, magasin de musique (spécialisé dans les cuivres et les vents) à Rezé ; J’ai ensuite décliné (typographie, différents fonds, etc.) puis finalisé (haute résolution) la proposition retenue par le client.
Logo «DB musique»
12
optimisation des conditions de travail Sur toutes les missions (animation, site internet, logos) j’ai pris l’habitude de nettoyer les fichiers, c’est à dire nommer les objets, masquer les objets gênant la compréhension de l’animation, supprimer les textures inutiles, etc. ce qui m’a permis de mieux me concentrer sur le détail concerné et de rendre plus rapide l’exécution des tâches par l’ordinateur. Cela a surtout permis de rendre lisible les scènes en phase de développement, et ainsi permettre à François de réagir rapidement sur mon travail. Je me suis également habitué à enregistrer plus régulièrement, dans des fichiers séparés, afin de pouvoir revenir rapidement sur une version antérieure. organisation d’un projet 3D La réalisation de l’animation en image de synthèse m’a permis d’apprendre de nombreuses techniques sur les logiciels 3DSMAX, RealFlow et Photoshop. De plus, je pense avoir appris sur les méthodes et l’organisation à adopter sur ce type de projet ; Si je devais le refaire, je commencerai par l’animation et la composition des plans : dans un premier temps, esquisser grossièrement (placer des objets à faible maillage, définir les rapports d’échelle, dessiner la trajectoire de
la caméra, entrevoir les éclairages etc ...) et affiner par la suite (modélisations, textures, rendu, animation détaillée).
Règles à tirer de cette expérience
rapidité d’exécution Les délais serrés (notamment pour Physiol et DBmusique) m’ont amené à faire des choix rapidement et à gagner en efficacité lors de l’exécution. conseils Des conseils pratiques sur le métier de freelance : - suivi de projet (rencontrer l’imprimeur, signer un BAT, ...) - organisation financière (tarifs pratiqués, gestion de budget,...) - organiser son travail (archivage, se constituer des bibliothèques de ressources,...) - créer son réseau (comment démarcher, répondre aux appels d’offre,...) plan personnel Je pense désormais pouvoir faire valoir mes compétences en 3D, en faisant attention de ne pas m’y restreindre. Ce stage m’a permis d’entrevoir de nouvelles pratiques du graphisme, notamment par le biais de l’animation. 13
Remerciements
14
Je tiens à remercier François et Elen pour leur gentillesse et leur accueil, François qui m’a fait confiance et m’a laissé la liberté nécessaire sur des projets d’envergure, tout en y gardant un œil critique et avisé. Léa pour son soutien précieux, Angèle, sans qui ce stage n’aurait pas eu lieu.
15
16
17
18
19
20