Les styles en Motion design #1 : la 3D

Puisque mon compte Pinterest semble intéresser pas mal de followers, notamment grâce à mes nombreux tableaux de « styles et tendance en motion design », j’ai décidé de vous en faire profiter ici sur mon blog, en réalisant une série d’articles thématiques intitulés « Les styles en Motion design« .

Et pour inaugurer ces articles, j’ai choisi de vous parler en premier d’un style (ou plutôt d’une technique), qui me tient à cœur : la 3D.
Réalisée à l’aide de logiciels comme Cinema 4D (mon chouchou), de 3DS MAX, de Blender, de Maya ou autre, la 3D est plus que jamais omniprésente et ne cesse de repousser les limites de la créativité chez les motion designers.
Voici une liste non exhaustive de styles 3D reconnaissables utilisés en vidéo (n’hésitez pas à commenter pour suggérer d’autres rubriques !) :

  • La 3D photo-réaliste.

    tableau 3D réaliste Elle est partout (au cinéma, dans les spots TV…) mais se fait oublier tant elle est réaliste. Un bon projet de 3D photo-réaliste ne doit justement pas laisser supposer au spectateur qu’il y a eu des manipulations en 3D… et c’est là toute la difficulté ! Seuls quelques studios professionnels y parviennent réellement, même si de très bons moteurs de rendus 3D dits non biaisés (physiquement correct) commencent à vraiment devenir efficaces et abordables depuis quelques temps (Vray, Maxwell, Octane…).

  • La 3D abstraite.

    tableau 3D réaliste Que ce soit des title séquences commissionnées par les plus grands festivals de motion, des projets d’étudiants ou des animations personnelles, les meilleures créations expérimentales réalisées majoritairement en 3D sont regroupées dans cette catégorie.

  • La pâte à modeler simulée en 3D.

    tableau 3D réaliste Il s’agit pour ces réalisations de reproduire les animations traditionnellement réalisées en pâte à modeler en stop-motion (à la « Wallace et Gromit« ), mais avec les outils 3D pour faciliter le processus ou pour fluidifier les animations, libérant ainsi le potentiel créatif. Les animations et génériques pour enfants sont un excellent terrain de jeu pour ce genre d’animation !

  • La 3D isométrique.

    tableau 3D réaliste Derrière ce nom barbare se cache un style très simple mais très tendance ces dernières années : la 3D isométrique utilise un point de vue reconnaissable entre mille, caractérisé par l’absence totale de point de fuite (donc pas de perspective du tout). Dans ce style très particulier, les côtés (largeur, hauteur, profondeur) restent toujours parallèles entre eux, et les images sont toujours construites avec des angles de 30°, 60°et 120°.

  • L’origami recréée en 3D.

    tableau 3D réaliste Toutes les animations de pliage et dépliage réalisées uniquement grâce à la 3D et visant à reproduire ce qui peut-être fait avec du papier grâce aux techniques d’origami, peuvent être ajouté dans cette rubrique. L’un des exemples les plus connus de ce style est la publicité pour La Poste, réalisée par l’agence BETC et intitulée sobrement « Pliages« .

  • Les spots et gingles en full 3D (broadcast).

    tableau 3D réaliste Toutes les animations dont les contenus ont été modélisés, éclairés, texturés, animés, et rendus (de manière non photo-réaliste) à l’aide de logiciels 3D entrent dans cette vaste catégorie ! Les génériques d’émission de divertissement ou de sport «à l’américaine» ainsi que les gingles de chaînes TV sont souvent réalisés dans ce type de style, pour le dynamisme et le côté « Wow ! » qu’il apporte (on appelle ce secteur particulier de l’industrie audiovisuelle le Broadcast).

  • La 3D « low poly ».

    tableau 3D réaliste C’est un procédé 3D dont le rendu fait sentir volontairement et clairement le nombre insuffisant de polygones dans les objets, l’environnement, les personnages… Il en résulte un aspect « à facettes » typique, parfois en quadrangles (en carrés, rectangles et losanges) et d’autres fois en triangles. Une tendance graphique qui a fait beaucoup d’émules depuis ces dernières années !

  • Les images fixes projetées sur des géométries 3D (broadcast).

    tableau 3D réaliste Style d’animation bien reconnaissable où la caméra (en 3D) semble « voyager » autour de personnages figés dans le temps. Ce procédé particulièrement spectaculaire a été rendu populaire par des studios de production audiovisuelle comme ONESIZE. Un maximum de photos de références sont prises sous tous les angles possible lors du tournage, et la géométrie des personnages est recréée en 3D par la suite, sur laquelle sera projetée (comme « plaquée ») une texture reconstruite à partir de ces photos.

  • Conférence autour du Motion design le 28 mars prochain

    Bonjour à tous et à toutes (et désolé pour le manque de publications) !

    Le samedi 28 mars prochain, l’école supérieure de design et de merchandising nordiste CEPRECO (45 Avenue André Chénier, 59100 Roubaix) ouvrira ses portes gratuitement.
    L’occasion pour les futurs étudiants de découvrir l’établissement, de voir quelques réalisations d’étudiants en design, décoration ou web, et de s’imprégner de l’ambiance de l’école où j’ai moi-même fait mes armes il y a déjà 12 ans (!).
    Mais aussi pour d’autres (professionnels, curieux, passionnés…) d’apprendre un tas de choses durant les conférences données pour l’occasion. Dont une qui me tient particulièrement à cœur puisque c’est moi qui l’animerai complètement !
    Je donne effectivement une conférence autour du MOTION DESIGN et du métier de MOTION DESIGNER de 14h à 15h30 dans les locaux du CEPRECO.


    Au programme :

  • Le motion design : qu’est-ce que c’est ?
  • Les domaines souvent confondus avec le motion design
  • Naissance et histoire du motion design
  • Quelques techniques employées en motion design
  • Les secteurs auxquels s’appliquent le motion design
  • Les écoles et organismes de formation pour devenir Motion designer
  • Modules et cursus types pour devenir Motion designer
  • Les qualités requises pour devenir un bon Motion designer
  • Et… la place de Cepreco dans tout cela ?
  • Alors si vous êtes de passage dans le Nord le samedi 28 mars ou si vous y êtes déjà ; si vous êtes curieux(se) ou passionné(e) de design ; si vous cherchez à vous former à un métier émergent de plus en plus demandé… VENEZ À LA CONFÉRENCE !
    D’ici là, n’hésitez pas à relayer l’information ; je vous y attendrai nombreux !

    Le site de soutien en maths KIFFELESMATHS.com fait peau neuve !

    visuel Kiffelesmaths.com

    Après quelques années d’existence et un nombre de visiteurs toujours grandissant, le site de soutien et d’apprentissage en maths pour les niveaux 3ème, seconde, première et terminale S en vidéo  se devait de mettre à jour son contenu, et, par la même occasion, de redonner un petit coup de jeune au design et à l’ergonomie.

    C’est pourquoi la société BOOKMANIA, fondatrice du site KLM basée à Casablanca, a commissionné FREMOX pour réaliser toute la partie webdesign sur leur nouvelle plateforme. Une dimension conseil en ergonomie et SEO a également été apportée pour rendre le site le plus clair et le plus efficace possible… Pour voir le nouveau design et apprécier les talents de pédagogue du fondateur et professeur Ismaïl Boukili, rendez-vous sur Kiffelesmaths.com !

    Alors maintenant, vous n’avez plus aucune raison de ne pas… Kiffer les maths !

    Happy FXmas by FREMOX !

    visuel voeux - HappyFXmas ©FREMOX

    FREMOX vous souhaite ses meilleurs vœux pour 2012 !

    …Et pour bien terminer cette année 2011 riche en projets plus enrichissants les uns que les autres (et ma première année en tant que graphiste freelance dans le Nord Pas de Calais) , j’ai décidé de vous donner les sources Illustrator de ma propre carte de voeux !
    Un grand merci à Smashing magazine pour ses pictogrammes de Noël proposés par OffsetMedia et offerts gratuitement !

    Libre à vous de les utiliser comme bon vous semble ; vous pouvez ré-utiliser les pictogrammes de l’illustration pour agrémenter vos propres créas de Noël ou pour d’autres occasions…Quoi qu’il en soit, c’est cadeau et c’est royalty free !

    Cliquez sur le bouton ci-dessous pour télécharger la source :

    bt_download_blue

    Joyeuses fêtes de fin d’année et à l’année prochaine, une année 2012 qui j’espère sera sous le signe… de la créativité !


    The KERNTYPE : testez votre oeil de typographe !

    Site the KernType, un jeu en jquery et css pour tester ses capacités à régler le crénage des lettres dans une typographie...

    Site the KernType, un jeu en jquery et css pour tester ses capacités à régler le crénage des lettres dans une typographie...

    Découvert cette semaine, the KERNTYPE est un jeu étonnant en jquery et CSS dédié à tous les amoureux de typographie et graphistes en tous genres !
    Le principe du jeu est simple : il suffit de bouger les lettres (avec la souris ou avec les flèches du clavier) d’un mot, pour régler optiquement l’espacement des lettres et ainsi rendre homogène le gris typographique d’un texte. Votre résultat est ensuite comparé à une approche typographique idéale, réglée par un typographe de métier, et le site vous donne ainsi, pour chaque mot, le pourcentage de correspondance entre votre approche et celle du typographe, donc par extension, analyse votre capacité à avoir su régler le crénage des mots et à rendre un texte harmonieux… Lire la suite

    Mes premières cartes de visites « Moo cards »

    Quelques temps après avoir reçu mes premières cartes de visite – élément de prospection incontournable pour tout indépendant ou actif d’une société – réalisées sur le site http://uk.moo.com/fr, j’ai commencé à en distribuer lors de mes rendez-vous et entretiens avec mes clients… et le fait est que, ces cartes de visite originales ont l’art de surprendre par leur principe même !

    Je m’explique : l’atout majeur de l’entreprise « MOO », basée à Londres, est de proposer un procédé d’impression bien particulier, qui permet d’imprimer une image différente sur le verso de chaque carte ! Imaginez le potentiel d’un tel procédé en terme de communication, de déclinaisons… Car il faut bien l’avouer, les imprimeurs « traditionnels », que ce soit en offset ou en numérique, sont incapables au jour d’aujourd’hui d’imprimer des visuels différents en grandes quantités. Et c’est donc là qu’intervient le procédé ingénieux de « MOO », qu’ils ont appelé « PRINTFINITY ».

    Lire la suite

    fremox.com nominé sur une « Webdesign award gallery »

    Webinspeer.com Web design award gallery

    Webinspeer.com Web design award gallery

    Quelle ne fût ma surprise ce matin en découvrant que mon site portfolio www.fremox.com figurait sur la « webdesign award gallery » de l’un des sites d’inspiration web que je consulte régulièrement : www.webinspeer.com !
    Je ne regrette pas d’avoir passé un peu plus de temps sur le développement : visiblement, l’intégration et les effets en CSS3 ont de beaux jours devant eux !

    (EDIT : jeudi 21 juillet 2011)
    Le site www.fremox.com nominé aux CSS Design Awards !

    Fremox.com fait également partie des nominés sur le site http://www.cssdesignawards.com/ (rubrique « nominees »), d’où la nouvelle bannière apparue ce matin dans le coin à droite de mon site !

    Nouveau logo, nouveau site web !

    thumb_new_website©Fremox

    Ça y est, après plus d’un an et demi d’hésitations (et d’absence sur la toile), me voilà enfin installé… en tant que graphiste indépendant !

    L’occasion pour moi de revoir entièrement ma charte graphique, de mettre à jour mon portfolio mais aussi, et surtout, de mettre en ligne une toute nouvelle version de mon site internet professionnel.
    A part la dominante de couleur noire en fond, l’entièreté du site a été revue : l’identité (le logotype) est beaucoup plus personnelle (le « F », « M » et « X » de Fremox ne font plus qu’un dans un isotype graphique inscrit dans une forme unniverselle : le cercle).
    Par ailleurs, le site web utilise en cohérence avec ma charte graphique des pictogrammes ronds, modernes et en aplat, en négatif (fond blanc) sur fond sombre, qui servent de navigation principale en appelant des ancres dans différents endroits de la page. Une page unique (très tendance cette année, à en juger par les nombreuses pages répertoriées sur le site http://onepagelove.com/), une page intégrée entièrement en HTML et un peu de CSS3 (animations subtiles sur les boutons, mise en forme du formulaire etc…), et qui se sert du framework jQuery pour animer les sauts de liens d’un mouvement fluide et valoriser mes travaux à travers un slider simple et fonctionnel.

    Pour visiter mon site, rendez-vous sur www.fremox.com

    screenshot site Fremox 2011 © Fremox

    La homepage. Dès le début le header animé met en avant l'une de mes spécialités : le motion design


    screenshot_siteFremox_2 ©Fremox

    Le portfolio consiste en un slider personnalisé en CSS

    N’hésitez pas à me faire part de vos commentaires, que ce soit pour le site ou la charte graphique : les critiques, bonnes ou mauvaises, sont toujours constructives !

    3DS Max et AfterEffect : essais

    En attendant de pouvoir publier des tutoriaux complets sur 3DS Max et AfterEffect, je voulais vous présenter quelques exemples d’animations que j’ai réalisé dans le cadre de recherches personnelles.
    J’essaie en effet de découvrir autant que possible de nouvelles techniques de modélisation, d’animation et de compositing, dans le but d’étayer mes compétences au maximum, et peut-être un jour – qui sait – développer une réel savoir-faire en motion design.
    Les deux exemples suivants (les méduses et l’arc-en-ciel) on été modélisés simplement avec des primitives sous 3DS MAX, avec un mouvement de caméra dont les données ont été sauvegardées grâce à l’emploi d’un format d’exportation spécial : le RLA. Les séquences d’images sont ensuite compositées sur AfterEffect, dans lequel je viens recréer une caméra via les données de 3DS MAX. After Effect crée instantanément une nouvelle caméra en 3D qui a le même mouvement et les mêmes attributs que celle de 3DS Max. J’ai ensuite ajouté quelques éléments 2D (textes, grilles, arabesques…) ainsi que des particules 3D directement dans AfterEffect, terminé par quelques filtres et effets bien choisis… et le tour est joué !





    N’hésitez pas à me donner vos commentaires ou à me poser des questions concernant les techniques employées (elles sont relativement accessibles, pourvu que vous ayez déjà des notions de 3DS MAX et d’AfterEffect évidemment !)

    Les masques d’opacité dans Illustrator

    niveauFacile1

    Illustrator est de loin le logiciel le plus utilisé pour dessiner en vectoriel les graphismes, logos, illustrations et typographies visibles sur le packaging des produits que vous achetez tous les jours, les affiches publicitaires, les pages web, les T-shirts etc… Jusqu’au dernières versions, donc jusqu’à l’apparition de certains filtres et autres modes de fusion, le logiciel phare d’Adobe n’était pas capable de gérer la transparence et les bords progressifs, alors plus propres à son grand frère spacialisé, lui, dans le traitement du pixel : Photoshop. Soucieux d’intégrer au mieux les fonctions des logiciels de la suite créative, Adobe a pris le soin de développer les effets, filtres et modes de fusion des calques dans Illustrator, depuis la version 10… pour le plus grand bonheur des artistes numériques et designers graphiques !

    Si ces outils et effets sont désormais incontournables et maîtrisés par tous, il reste néanmoins une option assez méconnue (du moins trop à mon goût, les graphistes devraient tous au moins en connaître l’existence et ce n’est pas toujours le cas !) qui a pourtant fait ses preuves et constitue a lui seul une vraie petite révolution dans le monde de la transparence vectorielle… il s’agit du « masque d’opacité« , qui comme son nom l’indique fonctionne comme un masque dans Photoshop, puisqu’il s’appuie sur les valeurs en noir et blanc d’une image pour afficher ou masquer des parties d’un calque.

    Je vous propose un petit tour d’horizon de ses fonctionnalités et de ses applications nombreuses, avec pour commencer, la création d’un bouton Web 2.0 (quand je vous disais qu’il était partout…)



    Lire la suite