Archives pour la catégorie Animations et vidéographie

Parlons motion design et vidéographie avec notamment, de l’animation flash, de l’animation 3d, de l’animation vidéo, du montage vidéo et du trucage vidéo…

Pivoter une vidéo prise depuis son téléphone (smartphone) sur VLC

Au moment de visionner une vidéo enregistrée depuis un smartphone (Iphone, Nokia Lumia, Sony Xperia, Galaxy de chez Samsung, etc…) sur votre ordinateur ou télévision,  ou même cela peut arriver, depuis votre appareil photo tourné à 90°, vous vous retrouvez avec une vidéo pivotée à 90 degrés sur votre lecteur vidéo.

Enregistrer et lire une vidéo à l'horizontal sur son téléphone
Lors d’un enregistrement vidéo depuis votre téléphone, prenez l’habitude de le pivoter.

La cause : le sens du téléphone. Habituellement, les personnes capturent leurs vidéos dans le sens « normal » du téléphone c’est à dire à la verticale, mais cela n’est pas bien interprété par les lecteurs de vidéos qui par défaut indiquent qu’une vidéo est normalement sur un format horizontal pour une visualisation sur un écran d’ordinateur ou de télévision du type 4/3 , 16/9 , etc… On a donc une vidéo qui bascule à 90°.

De plus, comme la plupart des smartphones actuels font automatiquement tourner le sens de l’image de la vidéo pour qu’elle soit vue correctement lors de la prise de vue, cela n’arrange pas les choses. Car réellement les vidéos ne basculeront pas une fois lues sur un lecteur vidéo du type VLC, Windows media player, Quick Time ou autres qui sont destinés à une visualisation sur ordinateur.

Il vaut mieux penser à réaliser sa prise de vue vidéo à l’horizontale avec son téléphone pour éviter cela. A moins que votre sens artistique vous donne envie de travailler avec le format vertical du téléphone. Mais attention ! Au final, si votre vidéo est diffusée sur les plateformes vidéos du type Youtube, Dailymotion ou Vimeo, elle se retrouvera dans un lecteur vidéo horizontal de toute façon.

Comment faire pivoter une vidéo sur le lecteur VLC ?

Dans ce petit tutoriel, nous n’aborderons pas l’utilisation d’un logiciel de montage vidéo qui pourrait aussi faire cette opération facilement.

Avec le lecteur vidéo VLC :

    • Ouvrez votre vidéo avec le lecteur VLC et mettez la lecture en pause.
lecteur video vlc
La vidéo prise via votre téléphone apparaît retournée sur VLC
    • Dans le menu principal, cliquez sur « Outils » puis dans le sous-menu, cliquez sur « Liste des effets et filtres ».

lecteur video vlc la liste des effets

    • La fenêtre « ajustement et effets » s’ouvre. Cliquez sur l’onglet « Effets vidéo » puis le sous-onglet « Géométrie ». Cochez la case « Rotation » et faites pivoter l’angle à 90 degrés pour obtenir une vidéo dans le bon sens de lecture de l’image.
lecteur vidéo vlc vidéo téléphone rotation à 90 degrés
Vous pouvez même vous amuser à effectuer des rotations dans des angles différents.

Si vous ne disposez pas de VLC, voici le site officiel pour le télécharger gratuitement : http://www.videolan.org/

Avec le lecteur vidéo Windows media player :

lecteur-video-windows-media

  • Bien que le lecteur de vidéo proposé par Microsoft soit bien pour lire des vidéos, il ne permet pas l’option de faire pivoter une vidéo. Utilisez alors simplement VLC pour cela.

Avec le lecteur vidéo Quick time :

lecteur video quick time

  • Il vous faudra acheter la licence pro de Quick Time pour effectuer cette rotation. Cela me semble cher payé pour une rotation. Je vous invite donc aussi à utiliser VLC pour cela. La version Quick Time Pro sera avantageuse uniquement pour les professionnels de la vidéo avec d’autres possibilités intéressantes mais qui sont inutiles pour votre besoin de rotation vidéo.

F4 Design réalise la publicité vidéo pour l’application Recettes Faciles

icône Recettes FacilesRecettes Faciles est une application gratuite à télécharger sur icone-apple-store et  Icône disponible sur google play  depuis votre ordinateur ou directement depuis votre smartphone. L’application permet de trouver des recettes faciles à cuisiner pour tous, également pour les végétariens et les allergiques. Elle dispose d’un minuteur intégré pour les cuissons dans les étapes de préparation des recettes. Cela permet de réussir facilement toutes ses cuissons.

Le site de l’application : http://recettes-faciles.eu/

« Making of » de la réalisation de la publicité de l’application Recettes Faciles

Le Brief

Suite à la réception du brief accompagné du scénario du client, j’ai donc analysé les besoins à mettre en oeuvre pour faire une proposition au client. Après validation, nous avons mis à plat certains détails lors d’un rendez-vous.

Le storyboard scénarisé

storyboard publicite application

A mi-chemin entre un storyboard et un scénario, le storyboard scénarisé permet de rapidement mettre en place les différents plans et scénari visibles sur le même support pour comprendre chaque plan de façon rapide et simple. Il permet aussi de visualiser le projet dans son ensemble, de prévoir le travail à réaliser par la suite techniquement et de poser un premier rythme en fonction du temps déterminé de la vidéo. Dans ce projet, quand cela était possible, certains plans ont été réalisés directement avec des images sélectionnées pour être utilisées dans la version finale.

La musique et la voix off

Un travail de recherche a ensuite été mis en place pour déterminer la musique sur une bibliothèque de musiques libres de droits. La musique a été raccourcie lors du montage pour les besoins de la publicité. L’animation se rythme sur certaines sonorités pour des changements de plans.

Musique : « On the bach » par Jingle Punks

La voix off a été réalisée par le studio PYMPROD qui a su faire des propositions d’intonations vocales, ce qui nous a permis de choisir la voix off en fonction de l’ambiance de la vidéo. La voix off donne une dynamique à la publicité et appuie le message de façon certaine.

Le montage vidéo et la création des animations vidéo

montage after effects

Ici, la principale problématique résidait dans la capture et l’intégration de l’application Recettes Faciles dans des modèles de smartphones différents. Pour cela, j’ai utilisé une application payante d’enregistrements vidéo en direct d’un smartphone pour capturer chaque scène. J’en suis venu à cette application après avoir testé plusieurs appliations gratuites qui nécessitaient de « Rooter » mon smartphone (ce qui a provoqué une mise HS de mon smartphone). J’ai ensuite intégré les captures vidéos de l’application sous le logiciel After Effects pour réaliser le montage. Il a fallu rechercher des images de smartphones en haute définition, libres de droits pour pouvoir les utiliser. Le budget ne permettait pas de les recréer. Cela tombait bien, il y avait d’excellentes créations des ces smartphones disponibles. J’ai donc fait mes choix et préparé les fichiers pour leur importation dans le logiciel After Effects.

Les animations ont été créées suivant le rythme de la musique et le storyboard scénarisé pour transmettre le message de l’application sur 35 secondes. L’utilisation vidéo de mains, filmées en studio sur fond vert, permettent d’ajouter un aspect réaliste à la publicité et de donner plus de vie à chaque scène. Les mains sont aussi des fils conducteurs des actions effectuées sur l’application et permettent au spectateur d’interpréter rapidement que c’est bien une application sur smartphone. Les mains ont parfois été réanimées avec un « remappage temporel » sur After Effects pour leur donner le bon rythme par rapport aux besoins de chaque capture des vidéos de l’application.

Conclusion de cette réalisation publicitaire

Un projet très intéressant sur sa conception avec des captures d’images et des prises de vues sur font vert et pour lequel je me suis fait des frayeurs avec mon smartphone ! C’est pour moi toujours un plaisir de travailler sur de l’animation vidéographique et d’avoir réalisé cette publicité qui a encore, une fois, rempli les objectifs du client.

Infographie : Le marché de la vidéo en ligne en Europe pour 2013

La vidéo en ligne en 2013 se voit attribuer le plus de consultation sur support ordinateur avec les annonces publicitaires soit 68% ! En deuxième position vidéo intégré dans les bannières reste très consulté avec 25%. La plus grande partie du budget est investi dans le secteur du divertissement avec 54%. 31% des discutions autour des vidéos sont effectués par les 25-34 ans.

Les taux de clic le plus élevé est effectué sur les supports mobiles, par contre le nombre de vues le plus élevé est lui encore majoritaire sur l’ordinateur. Dans l’ajout de nouvelles catégories, celle qui fait le plus de vues et de clics en 2013 est la catégorie « boisons non alcoolisés« .

La vidéo en ligne est un marché très prometteur et en pleine expansion avec les débits et la puissance de plus en plus élevé des différents supports média, donc ça progression va dans la logique de communication et d’utilisation de ces supports de plus en plus maîtrisés.

Catégorie des thème des vidéos, supports des diffusions, longueur des vidéos, cible, age
vues et clic par age, catégorie, supports, temps et genre de contenu

Marché de la vidéo en ligne en Europe au 4e trimestre 2013. © Videology

 

 

Création d’un cd-rom interactif pour l’Aéroport Toulouse-Blagnac

Cd-rom interactif créé pour l’Aéroport Toulouse-Blagnac.  Cd-rom réalisé sous la direction de  Reprocolor 31. Ce cd-rom est un support de formation pour la sécurité des pistes pour le personnel de l’aéroport.

Composé de 3 grandes rubriques et d’une interface interactive, il est possible de lire le scénario du cd-rom de façon linéaire ou d’aller directement dans le diaporama souhaité grâce au menu. Prévu pour un affichage sur vidéo projecteur, les formateurs peuvent ainsi illustrer et compléter leur formation facilement.

Le cd-rom va aider à la bonne compréhension de la formation. Il va aussi permettre d’interagir entre le formateur et le personnel.

Le formateur peut ainsi poser des questions en direct avec le personnel et afficher la légende d’images au fur et à mesure de la formation.

Le formateur peut aussi lancer et relancer des animations pour expliquer des parties techniques avec des exemples et des textes. Dans cette vidéo, nous pouvons voir par exemple, des animations sur la Zone d’aspiration et de souffle d’un avion.

La maquette de l’étiquette du cd-rom

image étiquette cd-rom

La  maquette de l’écran d’accueil du cd-rom

Maquette d'interface de l'écran d'accueil du cd-rom

La maquette de l’écran des équipements nécessaires

maquette de formation sur cd-rom

Quelques détails

  • 54 pages au total ont été créés en maquettes pour visualiser les différents écrans du cd-rom.
  • 7 animations flash interactives ont été crées sur le cd-rom

Conclusion de ce cd-rom interactif

Créer un cd-rom pour l’Aéroport Toulouse-Blagnac m’a permis de concevoir un modèle de cd-rom  avec le logiciel Flash, comportant 2 grands types de lecture :

  1. Lecture linéaire avec une navigation « suivant » et « précédent » pour aller d’un diaporama à l’autre.
  2. Lecture d’après un menu principal et un menu de navigation accessible depuis l’interface sur tous les écrans du cd-rom.

Il faut savoir que le projet a été conçu pour une résolution télévisuelle en 720×576 pixels et pour un affichage sur rétro-projecteur. Néanmoins, il est tout à fait possible d’utiliser des fichiers vectoriels pour l’ensemble du projet afin qu’il s’adapte à l’affichage sur toutes les résolutions et à la haute définition. Néanmoins, cela est plus long à concevoir et n’est pas forcément nécessaire pour un affichage « classique ».

Vous souhaitez créer un cd-rom ?

Un cd-rom interactif peut avoir plusieurs utilités et avantages pour une entreprise. Il est important de bien les déterminer avant de se lancer dans sa conception.

Si vous avez un projet sérieux et que vous projetez de créer un cd-rom pour votre entreprise ou pour toute occasion, je vous invite à me poser vos questions dans les commentaires ci-dessous ou à me contacter directement :

Cliquez ici pour me contacter

Je me ferai un plaisir de vous accompagner dans la création de votre cd-rom.

Répondez à ces questions

  • Avez-vous des questions sur le thème abordé ?
  • Quels sont vos projets sur la création d’un cd-rom ou d’un dvd-rom ?

F4 Design investit dans les logiciels Adobe

Déjà plus de 3 ans que j’ai créé le site f4-design.fr et que j’accompagne des entreprises dans la création de leur identité visuelle, leur communication visuelle, leur site internet, etc…

Noël approche et je souhaite offrir un cadeau à mon entreprise qui soit à la fois utile pour mes clients et agréable, pour me permettre de travailler toujours dans de meilleures conditions et avec passion. Pour cela, j’ai décidé d’offrir à F4 Design, avec mon plus grand plaisir, la master collection CS6 de chez Adobe regroupée dans la version « Creative Cloud ». C’est la plus grande et la plus efficace des suites de logiciels professionnels à disposition pour les projets créatifs en infographie. Cela implique que j’explore les nouveautés de ces logiciels à partir de janvier 2013. Je pourrai ainsi commencer la nouvelle année avec des nouveautés techniques et infographiques à proposer à mes clients. En priorité pour cette année, je vais tester les nouveautés sur les logiciels que j’utilise le plus : Photoshop, Illustrator, Dreamweaver, Flash et After Effect.

Je vous laisse découvrir la liste des applications qui sont maintenant à ma disposition pour répondre à vos demandes, sans limite dans les outils de création infographique.

Adobe Creative Cloud

Adobe Creative Cloud est un concentré de nouvelles technologies logicielles pour créer sans limite : 2d, 3d, animation, interactivité, vidéo, son, etc… Grâce à un stockage « cloud » synchronisé, les fichiers indispensables que vous avez sélectionnés restent stockés dans un espace dédié.

Les logiciels :

Découvrez les magnifiques miniatures des écrans de démarrage des logiciels de la Creative Cloud version CS6 de chez Adobe.




Crédits :

Adobe Systems Incorporated

Infos sur les logiciels Adobe :

Pour en savoir plus sur ces logiciels, je vous invite à visiter le site Adobe à cette adresse : http://www.adobe.com/fr/

F4 Design, 100/100 connecté en 2013

Une année 2013 qui s’annonce haute en créativité et en innovation :), j’espère avoir suffisamment de temps pour exploiter les nouveautés proposées sur mes logiciels favoris et vous partager quelques unes de mes expériences.

Répondez à ces questions

  • Avez-vous des questions sur le thème abordé ?
  • Quels sont vos projets avec les logiciels Adobe ?

Designer d’un jour pour un jeu sur Ipad

Je tiens à vous partager ma petite contribution à la création d’un jeu de loterie intitulé « La roue de la chance » sur plateforme Ipad.

Le jeu a été créé pour l’occasion d’évènements organisés par La Maison LARTIGUE et fils.

Voici 3 mises en situation de la création graphique de la roue de la chance :

Version retenue

Roue de la fortune ou Roue de la chance !

Version 4

Roue de la fortune ou Roue de la chance !

Version 3

Roue de la fortune ou Roue de la chance !

Les éléments graphiques mis à part, pour permettre l’animation de la roue :

Le plateau de la roue

750 px de large sur 750 px de haut

L’ombre de la roue

750 px de large sur 750 px de haut, sur fond transparent pour être centrée automatiquement à la roue

Le centre de la roue

750 px de large sur 750 px de haut, sur fond transparent pour être centré automatiquement à la roue

La flèche de la roue

Flèche indicative de la pression tactile

flèche tactile

Ce travail m’a permis de créer pour la première fois une version personnalisée de « la roue de la fortune » pour le compte de l’agence web itandco.

Et vous, avez-vous déjà participé ou créé une « roue de la fortune » ou « roue de la chance » ? Comment avez vous trouvé ce jeu ?

Livre numérique : Enfin Trouver l’infographiste idéal pour votre projet

loic-tortelier-infographiste-couverture-3dLe livre numérique sous forme de guide « Enfin trouver l’infographiste idéal pour votre projet » est disponible en vente sur Amazon !
Exclusivement pour les tablette Kindle d’Amazon.

Je rappelle que j’ai écrit ce livre pour aider les personnes qui souhaitent entreprendre un projet pour lequel elles ont besoin d’un infographiste. Plus précisément un infographiste indépendant qualifié pour un projet spécifique. Cela peut être par exemple des projets d’identité visuelle, communication visuelle pour une entreprise, de la création web, de la vidéographie ou de la 3D, etc.

Le guide se déroule en 5 chapitres :

  1. Qu’est-ce qu’un infographiste
  2. Définir vos besoins
  3. Identifier les acteurs de votre projet
  4. Comment percevoir les compétences et l’expérience d’un infographiste
  5. Rechercher vos futurs candidats

Réalisation d’animations vidéos et habillage graphique pour 14 reportages de l’ADEME

Intro de la série des vidéos, retrouvez d’autres vidéos en bas de page.

Le projet de la série des reportages vidéos ECON’HOME.

Je suis heureux de vous présenter les 14 vidéos de la série de reportages pour l’opération ECON’HOME. Ces reportages ont été tournés et réalisés par Toulous’Ethic avec qui j’ai travaillé sur le projet en tant que vidéo graphiste designer.

Cette série vous présente 14 familles qui ont suivi les recommandations des conseillers INFO->ÉNERGIE dans la région Midi Pyrénées pour améliorer leur logement avec des équipements écologiques et économiques. Ces familles sont en plein projet de construction ou d’amélioration de leur habitation.

En ce qui concerne mon travail, j’ai donc suivi  la direction du projet réalisé par Anne-Marie Fontaine, journaliste et réalisatrice des vidéos pour Toulous’Ethic. Lors d’un rendez-vous avec l’ADEME pour décider du style  vidéographique, j’ai proposé plusieurs pistes graphiques suivant des exemples. L’ADEME a rapidement fait son choix.

Les grandes étapes de la création des Animations vidéos :

Le Storyboard

A partir de là, nous avons travaillé sur le sujet global et sur les sujets des différents reportages pour en déterminer des storyboards scénarisés pour le jingle et les animations. Je me suis donc occupé de la création de ceux-ci dont voici une planche en exemple :

Storyboard - jingle econ'home pour ADEME

Le Concept Art

Un fois les storyboard validés, j’ai donc commencé par un concept artistique afin de valider l’ambiance et le style graphique des animations et notamment du jingle d’introduction.

concept artistique de jingle vidéo avec une maison , un jardin dans un mallette.
Concept artistique de l’ambiance dans un plan d’action du jingle que j’ai créé en pré-projet.

Le jingle d’introduction et les animations

habillage-video-incrustation-fond-vert

habillage-video-explications-animation

habillage-video-animation-vmc-double-flux-puis-canadien

habillage-video-animation-vmc-double-flux

habillage-video-animation-chaudiere-silo-a-granules

La création du jingle d’introduction a été déclinée en un 2ème jingle pour 10 reportages sans les conseillers INFO->ÉNERGIE et 4 reportages avec les conseillers. Ces 4 reportages sont, chacun, accompagnés d’une animation vidéo réalisée sous After effects sur lequel j’ai utilisé le procédé de 3D  proposé par ce logiciel vraiment extra. Afin de mieux comprendre comment monter et réaliser les animations vidéos, j’ai accompagné Anne-Marie lors de ses reportages et nous avons pris des vues pour avoir de la matière et réfléchir sur les animations.

Concernant le jingle, j’ai commencé par utiliser un logiciel de 3D pour la mallette vide et son animation et créé quelques matériaux ainsi qu’un éclairage global. La suite de la composition de l’animation et des ses éléments a été animée sous After Effects et colorisée soit sous Photoshop soit directement sous After effects.

Les animations et jingles ont été créés à l’origine en Haute définition 1920×1080 pixels, mais par choix technique et autres contraintes, nous avons donc tourné ces reportages de façon plus traditionnelle en 4/3 soit 768×576 pixels. Les animations ont donc simplement été adaptées à la taille de sortie des vidéos. J’avais heureusement prévu cette possibilité en déterminant les zones d’action et de texte en conséquence.

L’habillage vidéo

habillage-video-motion-design

L’habillage a, quant a lui, été créé suivant l’esprit graphique que je souhaitais dégager et garder sur l’ensemble du projet. J’ai notamment eu l’idée de réutiliser les particules de couleurs créées pour le jingle d’introduction sous After effect qui représentent les ronds de couleurs du logo INFO->ÉNERGIE et qui donnent du dynamisme aux vidéos tout en faisant un rappel inconscient du logo, donc de la marque, pour le spectateur.

La série des reportages vidéos ECON’HOME de l’ADEME et des Espaces INFO->ÉNERGIE

Je vous laisse découvrir les 14 reportages vidéos qui sont nommés : « maison individuelle économe en énergie (X) »
et qui ont été mis à disposition sur la Chaîne de l’ADEME sur Wat TV.  J’espère avoir vos commentaires en dessous de cet article pour me dire ce que vous pensez des animations et des reportages :





Visionner plus de reportages, rendez-vous sur La chaîne ADEME sur Wat TV en cliquant ici

J’espère aussi que grâce à ces reportages vous en apprendrez plus pour faire des économies d’énergie dans votre habitation 😉