Dimanche 1er octobre commençait le Motiontober 2023 (#motiontober2023), créé par Qimono (Lyon, Cocorico!), sur Instagram. Le Motiontober est basé sur le même principe que le Inktober et concepts similaires, 1 jour, 1 thème, 1 animation !
Un joli challenge à relever pour s’exercer, rigoler, partager. Merci Augusta Sarlin Kratchko et Maxime de la Rocheterie d’organiser ce super event 🙏🤩
Voici un résumé des quelques thèmes auxquels nous avons pu participer cette année.
Auteur/autrice : delmarestudio
-
Participation au Motiontober 2023
-
Les avantages incontournables de la vidéo explicative
« Une image vaut mieux que mille mots »
Si vous cherchez à simplifier vos messages, à améliorer leur compréhension et à les ancrer dans la mémoire de votre audience, la vidéo explicative s’impose comme une solution incontournable. Ce format bref et intuitif rend accessible et intelligible des messages, concepts, offres, ou projets complexes, quel que soit votre public cible.
Présentation des services de NewGo (voir le projet)
SEO et engament
Aujourd’hui, la vidéo est un pilier de la communication. L’intégration de vidéos dans vos canaux de communication non seulement accroît le nombre de visiteurs, mais prolonge également leur temps de présence sur vos pages.
Taux de conversion plus élevés
Pratiquement tous les consommateurs recherchent des vidéos explicatives pour approfondir leur compréhension d’un produit ou d’un service. Dans certains cas, la vidéo explicative devient une nécessité, non un choix.
Vidéo B2B Peyce (voir le projet)
Vidéo sur la traçabilité du vin chez M&Wine (voir le projet)
Applications universelles
Les vidéos explicatives trouvent leur place dans toutes les industries. Que vous souhaitiez présenter un nouveau produit, expliquer un processus, former vos employés, ou briller lors d’un salon commercial, la vidéo explicative s’impose comme un moyen efficace de transmettre votre message à votre public cible.
Approche personnalisée
Que ce soit par le contenu ou les canaux de diffusion, la vidéo explicative peut être parfaitement adaptée à votre groupe cible, assurant une communication plus efficace et pertinente.
Vidéo B2B Fluviofeeder (voir le projet)
En somme, la vidéo explicative représente bien plus qu’une simple tendance. Elle devient une nécessité dans le paysage actuel de la communication. Elle combine puissamment la simplicité, la compréhension, et l’engagement pour atteindre vos objectifs de communication de manière efficace et impactante. Si vous cherchez à tirer le meilleur parti de votre message, cette solution est la clé.
-
Compilation d’intégrations Lottie #1
Nous vous proposons cette première compilation d’intégrations Lottie, pour découvrir les bons et différents usages de la techno. Une animation Lottie ne fait pas juste office de « GIF », vous verrez que la techno est prévue pour bien plus d’effets que cela.
1. Sennep.com
Sur la page « Our approach » on tombe sur un background avec une animation liée au scroll (« scroll-linked »), une manœuvre plutôt intelligente niveau storytelling pour mettre en place les trois piliers de l’agence.
Dans la suite de la page on y trouve des animations en boucle (« loop ») conçue autour des 3 formes des trois piliers. Ces animations sont courtes et subtiles, un parfait équilibre pour augmenter le contenu sans l’écraser.
2. Zoepepper.com
La plus part des pages du site de Zoe Pepper sont composées de la même manière, un hero animé en guise d’introduction, puis une succession d’illustrations animées qui se déclenchent avec le scroll (« scroll-triggered »). Cela crée une chronologie, une lecture étape par étape efficace.
3. Everpost.com
Au chargement du site on peut apercevoir un loader (« spinner ») en Lottie. La page d’accueil est composée de différentes sections illustrées par des animations Lottie déclenchées par le scroll (« scroll-triggerred ») de façon à ce que l’utilisateur ne loupe pas de début de chaque scène.
4. Swabtheworld.com
Le hero de la page d’accueil comprend trois slides avec trois animations au graphisme épuré. Parfois, la réalisation des ces animations sont plus rapides et moins couteuses quand elles sont réalisées par un motion designer (AFX + Lottie) plutôt qu’un développeur (JS).
On peut apercevoir une légère texture dans ces designs, ce sont des images. Il est possible d’utiliser des images dans les animations Lottie. Cependant il faut faire attention à mieux les compresser qu’AFX après l’export (ex: enregistrement pour le web avec Photoshop ou TinyPNG/JPG)
5. Castoretpollux.com
Voici quelques exemples d’animations Lottie complexes et très bien réalisées. Ces animations de mains présentent un parfait mélange de rigging* et design épuré.
Ici on sort des sentiers battus du Lottie, on ne se limite pas aux propriétés compatibles avec la techno (position, rotation, échelle, raccorder les tracés etc.), le rigging apporte une vraie technique d’animation à ces exports. Ces animations ne sont réalisables que par des motion designers confirmés, l’utilisation de la techno Lottie est complètement justifiée dans ce cas.
*Rigging : le rigging, c’est le processus qui intervient entre l’illustration et l’animation (entre la modélisation et l’animation pour la 3D). Il s’agit de créer un squelette à un personnage ou un objet (ici la main) pour lui permettre de se déplacer ou se déformer selon certaines contraintes.
6. Qonto.com
Encore un exemple de site très complet ici. Chez Qonto, on retrouve presque tous les types d’utilisations et intégrations de Lottie.
La home nous présente une large animation d’apparition* de l’app et de l’UI desktop qui se fige après excécution. Le reste de cette page d’accueil est parsemé d’animation déclenchées au survol, comme les cartes des services sous le hero.
Certaines page comportent des animations intéressantes, comme la page « PME » avec des animations d’UI du produit. Ou encore la page « Indépendants » encore avec des animations d’UI et d’autres plus « contemplatives » qui n’ont pas une fonction didactique mais augmentent le contenu.
*Il faut savoir que les animations Lottie, exportées sous la forme de fichiers JSON, peuvent être segmentées (Animation d’entrée « IN », animation de boucle « LOOP » ou « IDDLE », puis animation de sortie « OUT). Ces différents segments peuvent être déclenchés par différentes interactions de l’utilisateur (scroll, click, hover etc.).
7. Networkx.app
Networkx nous propose une utilisation un peu plus simple mais poétique de la techno Lottie. Les petites portes qui composent la page d’accueil s’ouvrent au survol de la souris. L’ouverture de la dernière se déclenche au scroll.
8. Iti.ca
Lottie peut être aussi utilisé pour les transitions de pages. L’avantage étant qu’une animation Lottie est responsive sans perte de qualité. Les éléments de celle-ci sont traduits en tags SVG.
9. Thecarbonation.com
Nous avons ici une jolie mosaïque composée de photos produits, photos d’ingrédients mais aussi d’animations. Les animations Lottie ici ont un but uniquement décoratif et sont animées en boucle sans aucune interaction particulière.
10. Ns.buas.es
Au premier abord, on pourrait penser que cette animation est faite avec une librairie de simulation physique en JS. Seulement si c’était le cas, celle-ci aurait un caractère aléatoire. C’est en fait un joli trompe-l’œil, une animation Lottie. L’hypothèse ici c’est qu’un plugin comme Newton (moteur de physique 2D pour AFX) a été utilisé pour le rendu, puis le rendu physique a été écrasé en keyframes (images clés) pour être exporté en JSON.
Le site Pienso, réalisé par Locomotive, aujourd’hui hors ligne, utilisait la même technique (ceci est toujours mon hypothèse!). Un perçu du rendu est disponible dans l’étude de cas.
-
Qu’est-ce qu’une animation Lottie ?
Déjà, qu’est-ce que le format Lottie et d’où vient-il ?
Lottie a été créé à l’origine par la branche Design d’Airbnb. Avant la création de ce format, pour créer des animations complexes pour les applications Android, iOS et React le processus était fastidieux. Plusieurs options s’offraient à vous, les sprite sheets, les séquences PNG et GIFs, mais tout ceci est très volumineux et nécessite une version pour chaque taille d’écran, ou écrire des milliers de lignes de code difficiles à entretenir.
Lottie a été créé à l’origine par la branche Design d’Airbnb. Avant la création de ce format, pour créer des animations complexes pour les applications Android, iOS et React le processus était fastidieux. Plusieurs options s’offraient à vous, les sprite sheets, les séquences PNG et GIFs, mais tout ceci est très volumineux et nécessite une version pour chaque taille d’écran, ou écrire des milliers de lignes de code difficiles à entretenir.
Comment ça marche ?
Création
Dans la majeure partie des cas la création de l’animation se fera via Adobe After Effects. AFX est le logiciel de prédilection des motion designers, il nous permet de créer puis d’exporter (avec son binôme Adobe Media Encoder) nos créations en vidéo. Il luit faut donc un peu d’aide pour l’export.
Convertion
L’export de l’animation en fichier JSON est possible grâce au plugin Bodymovin créé par Hernan Torrisi.
Intégration
Lottie est donc un script javascript que vous placez sur votre site web ou votre application. Cette librairie va permettre la lecture de votre fichier JSON et le transformer dans un autre format lisible (SVG, Canvas ou HTML).
Les quatre gros avantages des animations Lottie
Léger
Les animations Lottie sont beaucoup plus petites que les autres formats tout en conservant une qualité optimale (pour ne pas dire parfaite puisque que l’animation est responsive).
Dans l’exemple suivant, pour la même résolution à chaque export, l’animation pèse :
- MP4/H264 : 1,1Mo
- Séquence PNG : 4,5Mo
- GIF : 1,12Mo
- Lottie : 142ko
- DotLottie* : 23ko
* Le format DotLottie est une version compressée du Lottie (un zip) qui peut se décompresser chez le client.
Responsive
Les animations Lottie, dites « vectorielles », sont basées sur des vecteurs, autrement dit des coordonnées (stockées dans le JSON). Cela signifie que vous pouvez agrandir ou réduire leur échelle à volonté sans perte de qualité.
Exemple : 3 animations Lottie réalisées pour Michelin DDI
100px*100px
250px*250px
500px*500px
Multi-plateforme
L’intégration d’animation avec Lottie simplifie le process pour les développeurs. Vous pouvez utiliser Lottie sur iOS, Android, le web et React Native sans modification.
Interactif
Dans une animation Lottie, tous les éléments graphiques qui la composent sont dissociés dans le code (sous forme de balises html). Vous pouvez donc les manipuler pour les rendre interactifs et réagir aux interactions telle que le défilement de la page, les clics, les survols etc.
Exemple : Animations Lottie interactives réalisées pour le bar Puzzle-inn
Conclusion
Lottie émerge comme une technologie innovante qui permet de concevoir des interfaces graphiques à la fois légères, captivantes et performantes. En l’intégrant à votre site ou votre application, vous avez l’opportunité de l’agrémenter de micro-interactions soignées. Cela ajoutera une touche d’interactivité et viendra enrichir l’expérience de vos utilisateurs.
-
Décryptage des livrables en Broadcast Design
Le Broadcast Design, c’est quoi ?
Le broadcast design, ou la création d’habillages de livestreams et d’émissions, est bien plus qu’une simple décoration visuelle pour votre contenu en direct. C’est une extension essentielle de la charte graphique de votre entreprise, marque ou événement. Et cela joue un rôle clé dans le renforcement de votre image de marque tout en améliorant l’expérience des spectateurs.
En harmonie avec votre charte graphique
Tout d’abord, les habillages de livestreams et d’émissions sont conçus pour être en harmonie avec votre charte graphique existante. Ils intègrent les couleurs, les polices, les logos et les éléments visuels distinctifs de votre entreprise ou de votre marque, créant ainsi une identité visuelle cohérente. Cela permet aux spectateurs de reconnaître instantanément votre marque et de se sentir connectés à votre contenu.
Key Visual – AccorInvest Global Meeting (voir le projet)
Bumper
Gabarit
Lower Third
Professionnalisme
En outre, le broadcast design ajoute une couche de professionnalisme et de sophistication à vos livestreams et émissions. Des transitions fluides, des animations attractives et des graphiques élégants créent une atmosphère immersive et captivante. Cela permet de capter l’attention des spectateurs et de maintenir leur intérêt tout au long de votre diffusion.
Renforcer votre image de marque
En renforçant l’image de marque, le broadcast design vous aide à établir votre crédibilité et votre confiance auprès de votre audience. Des habillages de qualité témoignent de votre souci du détail et de votre engagement envers l’excellence, ce qui peut influencer positivement la perception des spectateurs à votre égard. Cela vous aide à vous positionner en tant qu’autorité dans votre domaine et à vous démarquer de la concurrence.
Engager les spectateurs
Enfin, le broadcast design engage les spectateurs et améliore leur expérience. Les éléments visuels attrayants et interactifs, tels que des infographies en temps réel, des animations de transition et des superpositions graphiques, permettent de transmettre des informations de manière claire et attrayante. Cela facilite la compréhension du contenu et favorise une expérience de visionnage agréable et mémorable.
En résumé, les habillages de livestreams et d’émissions sont une extension vitale de la charte graphique de votre entreprise, marque ou événement. Ils renforcent votre image de marque, ajoutent du professionnalisme, engagent les spectateurs et améliorent leur expérience globale. Investir dans le broadcast design pour un événement peut faire la différence en termes de visibilité, d’impact et de succès de celui-ci.
Les livrables en Broadcast design
Dans cet article, nous décryptons 8 termes du Broadcast Design pour mieux comprendre les livrables et leurs enjeux. Comprenez l’importance stratégique de chacun d’entre eux. Découvrez les tenants et aboutissants des génériques, bumpers, infos écran, transitions et autres éléments essentiels à vos habillages. Ce guide vous permettra de mieux aborder votre prochain live, votre prochaine émission ou événement.
Générique d’introduction
Aussi appelé « Opening title sequence » en anglais
Le générique d’introduction est un élément clé du broadcast design. Il s’agit de la séquence qui lance l’émission, capturant l’attention des spectateurs dès les premiers instants. Cette séquence est conçu pour refléter l’identité de l’entreprise (marque ou événement). Il crée une atmosphère distinctive, introduit les thèmes et crée une anticipation pour ce qui va suivre.
Bumper
Aussi appelé « Bump »
Le bumper est une courte animation utilisée pour marquer une pause ou une transition dans un livestream ou une émission. Il sert à séparer les segments de contenu, à annoncer des rubriques spécifiques ou à mettre en valeur des sponsors. Les bumpers sont souvent accompagnés de graphismes accrocheurs et de sons distinctifs (« logo sonore » ou « jingle« ).
Transition
Comme les bumpers (mais sans logo), les transitions sont des animations utilisées pour passer en douceur d’une scène à une autre. Elles ajoutent une touche professionnelle et fluidité au contenu, en évitant les coupures abruptes et en assurant une expérience de visionnage agréable.
Gabarits
Aussi appelé « Marie-Louise« , ou « Splitscreen » en anglais
Les gabarits, ou marie-louise, sont des modèles graphiques préétablis pour disposer les éléments visuels de manière cohérente et esthétique. Que ce soit pour des duplex avec plusieurs caméras ou des conférences avec un speaker et un contenu, les gabarits facilitent la mise en scène en offrant une structure visuelle prédéfinie. En utilisant ces gabarits, vous pouvez rapidement organiser vos différents éléments visuels, tels que les vidéos, les images, les logos et les textes, de manière à obtenir un rendu harmonieux et professionnel.
Synthé
Aussi appelé « Lower Third » en anglais
Le synthé est un élément graphique affiché dans la partie inférieure de l’écran. Il présente des informations telles que les noms des intervenants, des titres ou des légendes, ajoutant de la clarté et de la crédibilité à l’émission tout en maintenant la cohérence visuelle.
Infos écran
Les infos écran sont utilisées pour fournir des informations complémentaires pendant la diffusion, telles que les lieux et pays pour les écrans duplex, un indicateur visuel pour signaler que la diffusion est en direct, ainsi que des interactions avec les spectateurs, comme l’affichage de tweets, de hashtags, d’adresses e-mail ou de numéros de téléphone. Ces éléments viennent enrichir le contenu du live ou de l’émission en offrant des informations contextuelles, en encourageant l’engagement des spectateurs et en facilitant la participation interactive.
Boucles
On trouve différents types de boucles, pour différents usages.
Boucle graphique
Elle sert à habiller les gabarits par exemples, on peut utiliser une boucle animée au lie ude se contenter d’une image fixe.
Boucle d’attente ou « Waiting loop » en anglais
La waiting loop est une séquence vidéo courte et répétitive diffusée lorsqu’une émission ou un livestream est en pause ou avant le début de celui-ci. Conçue pour divertir elle est souvent accompagnée d’une signature sonore.
Consignes de sécurité
Les boucles d’attente sont souvent utilisées pour diffuser des messages de sécurité pendant que les spectateurs prennent place.
Logo bug
Le bug logo est un petit logo de la marque ou de la chaîne qui apparaît généralement dans un coin de l’écran pendant toute la durée de l’émission. Il permet de renforcer la notoriété de la marque, même lors de la diffusion de contenus, et d’assurer une présence visuelle constante pour le public.
-
Communiquer efficacement en interne grâce au Motion Design
Dans un monde où les informations fusent, la communication en interne est essentielle pour maintenir une cohésion et une efficacité au sein d’une entreprise. Les vidéos motion design offrent un moyen captivant et efficace de transmettre des messages clés. Dans cet article, découvrez leur conception, avantages et comment notre studio peut vous aider à les intégrer dans votre stratégie de communication.
Vidéo d’annonce d’une nouvelle application interne chez Nuvia
1. Captiver
Captiver l’attention dès les premières secondes:
Avec la multiplication des sollicitations et la diminution de l’attention des individus, il est crucial de captiver rapidement l’attention des employés. Les vidéos motion design se prêtent parfaitement à cet objectif. Grâce à des animations dynamiques et attrayantes, ces vidéos suscitent l’intérêt et incitent les employés à s’engager dès les premières secondes.
2. Simplifier
Simplifier les messages complexes:
La communication interne peut parfois nécessiter la transmission d’informations complexes. Les vidéos motion design simplifient les messages complexes avec des éléments visuels, graphiques animés et une narration claire. Les concepts deviennent accessibles et mémorables, facilitant la transmission d’informations essentielles en interne.
Nouveaux process internes chez Richemont expliqués en vidéo.
Motion Design pour la création du « Young Advisory Committee » chez Roger Dubuis
3. Renforcer
Renforcer la cohésion et la culture d’entreprise:
Les vidéos motion design renforcent la cohésion et la culture d’entreprise. Elles utilisent des éléments visuels cohérents avec votre identité de marque pour créer un sentiment d’appartenance parmi les employés. Elles mettent en avant les valeurs, objectifs et réussites de l’entreprise, renforçant l’engagement des employés envers la vision globale.
Vidéo trombinoscope visant à mettre en avant les arrivants et promus chez Chronopost
Séminaire/Conférence à Portaventura, Portugal4. Diffuser
Diffuser l’information de manière efficace et rapide:
La communication interne nécessite une diffusion rapide d’infos cruciales. Les vidéos motion design assurent une diffusion efficace, captant l’attention des employés. Comparées à l’email ou aux documents textuels, elles ont un impact fort, sont partagées et retenues par les membres de l’entreprise.
Le motion design est un outil précieux pour la communication interne en entreprise. Sa capacité à captiver, à simplifier les messages complexes, à renforcer la culture d’entreprise et à diffuser rapidement l’information en fait un choix stratégique pour toute entreprise souhaitant optimiser sa communication interne. Chez Delmare Studio, nous mettons notre expertise en motion design au service de votre entreprise. Nous créons des vidéos sur mesure qui répondent à vos besoins spécifiques. Contactez-nous dès maintenant pour découvrir comment nous pouvons vous aider à communiquer de manière percutante et engageante auprès de vos employés.
-
Quelles sont les étapes de création d’un Motion Design ?
Découvrez les différentes étapes de création d’un motion design, depuis l’élaboration du script jusqu’aux exports et déclinaisons finales. Le script, la voix-off, le mood board, le storyboard et l’animatique jouent tous un rôle clé dans la préparation de l’animation. Vous apprendrez également comment l’illustration et l’animation donnent vie au projet. Enfin, nous vous expliquerons comment nous finalisons nos projets et proposons des déclinaisons pour maximiser leur impact.
La Pré-Production
Le script
Définition : Le script, ou scénario, c’est la fondation d’un motion design, l’intrigue, l’histoire, la trame narrative. La plus part du temps, ce script se limite au texte de la voix-off (par exemple pour des productions de vidéos explicatives) mais il peut aussi contenir d’autres informations telles que les textes et infos clefs présents à l’écran ou encore une description des événements. Il comprend ainsi deux éléments : une partie visuelle et une autre sur des informations sonores ou textuelles.
Au studio : Le script, du moins la V1, est souvent proposée par le client lors du brief. Il peut être travaillé ou retravaillé avec un.e rédacteur.rice pour répondre plus efficacement aux problématiques de votre entreprise. La vision graphique et animée du motion designer peut aussi permettre d’ajuster certains points. Ce script nous permet (à nous artisans de l’audiovisuel) de cerner le message que vous souhaitez faire passer, le ton voulu, vos problématiques, le registre. Cette étape se fait sous forme d’une collaboration, la plus part du temps sur un document partagé.
Le mood board
Définition : Le mood board, ou planche tendance, c’est une « collection d’inspirations » qui consiste à identifier les principaux éléments graphiques (couleurs, formes, photos, vidéos, typographies, références existantes, éléments de charte graphique) qui respectent les besoins du projet et attentes du client. Le mood board est souvent représenté sous la forme d’un collage, un patchwork d’illustrations et de photos. Cette planche rassemble souvent plusieurs idées la plus part du temps classées par thématiques / style / rendu graphique. Dans le cadre d’une réalisation d’un motion design, le mood board peut également comprendre des éléments sonores, de la vidéo, de la musique etc.
Au studio : Le mood board est réalisé par le motion designer pour exposer sa vision et ses idées au client et permet d’ouvrir une discussion entre les deux parties qui aidera à proposer des éléments (style d’illustration, intention d’animation) qui correspondent aux attentes du client.
Région Normandie – Cidre AOP (voir le projet) 
Fluviofeeder – Explainer video (voir le projet) Le storyboard
Définition : Le storyboard est un montage de dessins/illustrations avant un tournage ou une production de vidéo pour visualiser / découper les plans d’une séquence.
Au studio : La création du storyboard peut se dérouler en deux étape. La première étape, qui consiste à faire transition avec l’étape précédente, est de découper le script visuellement, en plans et en mouvements. Puis la seconde étape, l’illustration des plans, c’est la mise en page du message par l’illustrateur.rice.
Selon les besoins et l’avancement du projet, nous proposons deux types de storyboards : Le storyboard croquis et le storyboard illustré. Le storyboard croquis est souvent priorisé lorsque les délais sont très courts ou lorsque tous les éléments graphiques sont déjà prêts ou issus de la charte graphique du client, l’accent donc est mis sur le découpage et les intentions d’animation. Le storyboard illustré nous permet, quand les délais sont plus confortables, de préparer les illustrations et graphisme en parallèle et de proposer des plans quasi identiques à la production finale.
Storyboard illustré – Caisse des écoles, Ville de Lyon 
Storyboard illustré – Fluviofeeder (voir le projet) 
Storyboard illustré – Nuvia L’animatique
Définition : En motion design, l’animatique est l’étape qui vient après le storyboard. Le but est de monter une maquette vidéo du storyboard en utilisant les plans préalablement esquissés ou illustrés en les accompagnant de la musique et la voix-off quand elles sont disponibles (La voix-off étant remplaçable par une voix temporaire quand l’enregistrement n’a pas encore eu lieu). Certains animatiques d’animations complexes peuvent être assez détaillés, les mouvements et actions peuvent être décomposées et sont souvent commentés.
Au studio : L’animatique est une étape cruciale dans la création d’un motion design, car il nous permets d’avoir une meilleure idée du dynamise de la vidéo (Vidéo ni trop longue ni trop courte). C’est à cette étape que nous avons un timing assez fidèle à la version définitive. Grace à ce premier minutage, nous pouvons ajuster la longueur des plans et vérifier la pertinence des raccords.
La Production
La voix-off, la musique et effets sonores
La voix-off : Elle est un élément essentiel pour transmettre un message clair et captivant. Elle guide le spectateur tout au long de la vidéo, ajoutant des informations importantes et créant une atmosphère engageante. La voix-off apporte une dimension narrative et renforce l’impact visuel de l’animation.
La musique et les effets sonores : Ils jouent un rôle essentiel en motion design. Ils ajoutent une dimension émotionnelle et rythmique à la vidéo, renforçant son impact et sa narration. La musique crée l’ambiance, tandis que les effets sonores amplifient les actions et les transitions, offrant une expérience audio immersive.
Au studio : Nous collaborons avec des experts de l’audio (comédiens.nes, sound designers et studios d’enregistrement) pour vous proposer des voix-off et compositions de qualité, afin d’apporter une dimension professionnelle et immersive à vos projets de motion design.
Illustrations et créations graphiques
Au studio : En fonction du projet, de sa complexité, son style et ses besoins, l’animation et l’illustration peuvent être réalisées par des talents différents. Ces deux casquettes sont souvent associées mais demandent une grande polyvalence pour les maîtriser. Nous offrons l’avantage d’un réseau de talentueux illustrateurs et motion designer, capables de proposer divers styles pour répondre à vos besoins.
Normandie – Cidre AOP (voir le projet) 
Michelin DDI – Ideal Driver (voir le projet) L’animation
L’étape de l’animation en motion design consiste à donner vie aux images créées lors de l’étape précédente. Que ce soit en 2D ou en 3D, le motion designer apporte du mouvement aux pictos, illustrations, dessins et visuels préalablement réalisés, animant ainsi chaque séquence du storyboard.
Au studio : L’animation occupe une place centrale, nous accordons une attention particulière à chaque aspect de celle-ci pour garantir un résultat fluide, dynamique et esthétiquement agréable. Nous nous concentrons sur le lissage des animations, en veillant à ce que chaque mouvement soit naturel et harmonieux pour assurer une fluidité visuelle et une continuité narrative.
Peyce (voir le projet) L’étape du Rendu
L’étape du rendu finalise le processus de production en motion design. C’est à ce stade que nous exportons le projet dans les formats et résolutions adaptées aux besoins du client.
Exports
Au studio : Nous exportons votre projet finalisé dans les formats (codecs) et les résolutions adaptées à vos besoins, qu’il s’agisse du format web classique 16:9 ou de formats plus spécifiques tels que les écrans géants, la diffusion télévisée, les publicités, etc. Notre studio est en mesure de répondre à des demandes particulières.
Déclinaisons
Au studio : De plus, nous proposons des déclinaisons du contenu animé pour différents canaux de diffusion ou supports, afin de maximiser son impact et sa portée. Il est important d’envisager les déclinaisons dès les premières étapes de la création du motion design, car certaines d’entre elles nécessitent un travail préalable qui ne peut être réalisé à la livraison finale.
Exemple : Un motion design adaptable en paysage, portrait et carré pour du contenu sur les réseaux sociaux nécessitera un travail de mise en page et de composition différent pour chaque format, afin de transmettre le message de manière optimale.
-
How to export MXF for TV or VOD ads broadcast – Adobe Media Encoder
I’ve been struggling a few times now when my clients ask me to export small tv spots for tv or online tv ads diffusion. This is why I’m gonna try to make it clear (in my own way, as a newbie in this domain) for those who might be in my situation.
When you need to export a video for this type of use (ads), you need to make the export settings fit to the TV “canals” (once again, I don’t know if all the terms I’m using are the good ones, don’t hesitate to correct me). There’s a system of verification, an organisation that checks the “visual requierements”, in my case this is ARPP (Autorité de Régulation Professionnelle de la Publicité).
ARPP
What is their mission ?
Work towards fair, truthful, healthy and respectful advertising.
By examining the content of commercial messages, regardless of the means of dissemination, while reconciling the freedom of expression of professionals and respect for consumers.You can consult them whenever you want, to be the most transparent as you can and devliver a “nice ad”. In my case, after the agency consulted them, them reached back to us saying that the mentions roll needed to be at last 2% of height of active image, so at least 22px in HD (720p) and 33px in HD (1080p). See following image.
It depends on what you’re asking. They are easily reachable and they’ll give you advices to make it as easy as possible.
In the other hand, you need to find the good export settings. Why ? TV canals are not the same as web. You need to fit with some specs to make your video readable for the audience because broadcast devices don’t read the files the same way as web players.
This is where IMD comes in ! (apparenbly now called Peach)
Peach
What is their mission ?
From brands to broadcasters, Peach keeps everyone in the loop. As campaigns are processed and files are updated, Peach keeps your ads and your team on track.
How to make and save your own presets
I’m gonne show you all the settings I needed to use to make the video ok to broadcast it. Then I’ll try to explain a few points.
First open AME (Adobe Media Encoder). Expend the explorer of presets, usually located on the left bottom corner. Then create a new preset, I called mine “IMD OK”. That will open the settings page you’re used to see when you export thing from AME or AFX. There we need to specify all the settings we need.
Everything I’m about to show is specific for my case, you’ll probably have to adjust your settings depending on what you need. In my case, this was for an ad in France then in french to broadcast on a VOD serviceo nline.
Main settings
- Container format (“Format”) : MXF OP1a
Effects
- Loudness normalization (“Normalisation de l’intensité sonore”) : change Max true peak level to -3dBTP
Video
- Video codec : XDCAMHD 50 PAL ( 4 : 2 : 2 )
- Field order (“Ordres des trames”) : Upper first (“Supérieur en premier”)
Audio
- Audio layer (“Couches”) : 2 channels (“canaux”)
- Sample type (“Taille de l’échantillon”) : 24bits
Here you are, hopefully you have the good settings to render your video if it is similar to my case.
But wait… Why Upper field first? And how does it look?
A video exported with upper field first (Interlacing) looks like this :
What is interlacing ?
Interlacing is a technique developed for transmitting television signals using limited bandwidth. In an interlaced system, only half the number of horizontal lines for each frame of video are transmitted at a time. Because of the speed of transmission, the afterglow of displays, and the persistence of vision, the viewer perceives each frame in full resolution.
My advice
Again, in my case, only the mention roll needed to be interlaced. So in order to struggle with the whole video. I decided to export in a first time the full video, without the mention roll, in H264 with a good quality. And then make an other composition and use my export settings. Then the video looks clear and only the mention roll looks like the example, interlaced.
-
How to round numbers in After Effects
You probably already looked for it on internet… You probably crushed your head into the table trying to round numbers in your composition on After Effects! Here is the solution: math.round();
//The function Math.round('what you need to round') //Returns 20 Math.round(20.49) //Returns 21 Math.round(20.5) //Returns -20 Math.round(-20.5)We often use the function math.round() to round a dynamic number, for example, a number from a “Slider Control” value. If you link your Source Text to you Slider value (Alt+Click on the clock icon then link it to the Slider value) you’ll see a weird number.
It will return you a value in terms of the Slider position. But what we would like to do is to round this number to make the animation smoother. In order to make this you need to wrap the expression returned by After Effects with the Math.round() function:
Math.round(effect("Slider Control")("Slider"))And Voilà! Here we are, we just got a beautiful round number… But as we are never satisfated, now we want to round up this number to two decimal places. In this kind of situation, remember, there is always a tip, a way to “cheat”, simply multiply the number by 100 and divide the all thing (the wrap) by 100 as well.
//Our example Math.round(effect("Slider Control")("Slider")*100)/100 //Returns 12345.6 Math.round(123456*10)/10 //Returns 1234.56 Math.round(123456*100)/100 //Returns 123.456 Math.round(123456*1000)/1000 //etc etcThe last way to round number was the “Tricky” way. Because when you wanna round numbers but you still wanna keep useless zeros after the comma it will cut them out!
Here is the proper way to do if you want to keep the full decimals. You can customise this expression, if you want more or less numbers before and after the comma by modifying the numDec and numDigit vars.val = effect("Slider Control")("Slider"); numDec = 2; // digits to right of decimal numDigit = 1; // digits to left of decimal if (val < 0) sign = "-"; else sign = ""; s = Math.abs(val).toFixed(numDec); while (s.length < numDigit + numDec + 1) s = "0" + s; sign + s