Mi factory : machines

Mi Factory, fabrique du designer

Dans mon quotidien de designer graphique, je ne rate jamais l’occasion de réaliser de nouvelles illustrations. S’il n’est pas rare que je conçoive ce type de visuel pour mes clients, je le fais rarement pour mes projets. La mise en place d’un nouveau site portfolio était donc l’occasion rêvée pour user crayons et tablette graphique.

Le portfolio : le nerf de la guerre

Difficile de parler d’une illustration sans donner le contexte dans lequel elle a été conçue : un nouveau portfolio … et en la matière, il existe autant de théories que d’articles sur la stratégie à adopter dans leurs mises en place. Il est donc délicat de statuer sur la meilleure solution à adopter, tant cela tient à la personne, à l’époque et au contexte. Pour ma part, j’ai choisi à nouveau un site hébergé, axé sur la valorisation de contenus. Chaque projet y est donc présenté de façon détaillée tant dans les textes que dans les images. Pour conserver ce principe dès l’accueil du site, il fallait un visuel original et impactant ; le choix s’est naturellement porté sur une illustration.

Mi factory ?

C’est bien beau de vouloir utiliser une illustration, encore faut-il avoir quelque chose à montrer. Souhaitant m’éloigner du traditionnel carrousel d’images issues de réalisations, il ne me restait plus qu’à sortir carnets de croquis et crayons puis de me mettre au travail.

robot concept

recherche d’un principe pour un bras robotisé
Et pour le thème ?

Pour illustrer un portfolio, faire appel à son univers graphique est le choix le plus logique. Je me suis rapidement orienté vers une scène issue de mon imaginaire dans laquelle les maquettes, les cartes et tous les autres éléments graphiques sont conçus à l’aide de machines. À la croisée entre univers personnel et professionnel, la vision d’une transformation de nos idées par des systèmes mécaniques et électroniques qui nous habiteraient est récurrente dans mon travail, et correspond parfaitement à ce que je souhaite dire. Pour animer la page d’accueil, ce sera donc un univers industriel composé de machines.

Transformer les idées en images

Quand on a les idées, il ne reste plus qu’à leur donner vie. J’ai commencé par dessiner une première machine : le robot à dessiner (logique :) ).

Drawing machine

Sans qu’il y ait de réelle difficulté dans la composition d’un environnement industriel, dessiner ce type de scène peut vite prendre beaucoup de temps. L’objectif était donc de mettre le focus sur une seule partie de l’environnement, une seule machine pour gagner du temps. Après quelques tests d’intégration in situ, ce choix ne donnant rien de concluant, il m’a fallu pousser davantage les essais de composition et élargir la scène à un ensemble d’éléments mécaniques.

C’est à ce moment que j’ai pensé, conçu et dessiné la planteuse d’arbres. C’est une des machines emblématiques de mon imaginaire, de par sa dimension écologique, thème qui m’est cher. Elle illustre aussi parfaitement l’intérêt que je porte au cartographisme.

croquis scene mi-factory

croquis rapide de l’ensemble machine

planteuse d'arbres mi-factory

dessin préparatoire de la planteuse d’arbres

Les contraintes de redimensionnement automatique du site m’ont obligé à quelques ajustements dans la composition en elle-même, avant d’aboutir au dessin final :

compo visuelle mi-factory

Ce rendu est suffisant pour passer à l’étape de vectorisation ou à une mise en couleur bitmap.

Et le titre donc !

« Mi », les deux premières lettre de mon nom de famille, est une partie de l’URL de mon nouveau site. « Factory », pour la scène bien évidemment. Je propose régulièrement des étapes de mes travaux sur dribbble. Je trouve donc plus pratique de titrer mes visuels en anglais, et comme je sais que ça en fait râler certains, je ne boude pas mon plaisir :D

Le challenge du vectoriel

Trois points importants étaient à respecter dans le rendu de l’image : obtenir de la partie machine une image lumineuse, avoir une scène large aux bords d’image estompés pour survivre au redimensionnement extrême et respecter la thématique de couleur du site internet (blanc, vert, beige et gris). Pour réussir à travailler en respectant les différentes contraintes, j’ai procédé par itération avec Illustrator.

la découpe

Pour réaliser le travail vectoriel, j’ai découpé le visuel en 7 parties. Ceci pour à la fois isoler les différentes zones « par particularités », organiser le travail et éviter le caractère rébarbatif de chaque tâches (les phases de traitement des contours sont parfois longues et monotones, le hachurage également).

zoning mi-factory

découpage des zones de vectorisation de l’image

Dans cette approche, la gestion du fond aurait pu être un problème et nécessiter une 8e zone, mais le traitement beige clair du fond a permis de contourner cette difficulté. Sur la vue ci-dessus, la zone la plus haute ne contient pas d’éléments car elle est hors cadre lors de l’utilisation sur le site. Depuis cette étape, je suis revenu sur cette partie pour compléter le décors de fond, cette opération me permettant d’exploiter l’intégralité de l’image hors site.

les tracés à épaisseurs variables

Travailler sur les bases d’un dessin scanné ajoute quelques contraintes supplémentaires de vectorisation des traits, l’objectif étant de conserver l’aspect particulier que procure la variation d’un trait dessiné à la main. Il faut donc s’armer de courage et vectoriser les contours de chaque traits (et pour ça, une tablette Wacom sera d’une aide précieuse). Selon les types de traits, je travaille avec la souris (traits droits, courbes contrôlées) ou la tablette (courbes). Tout est question d’habitude et de tension dans les tracés.

tracés mi-design

extrait de la vectorisation des traits de la planteuse
Couleurs et effets

Pour la mise en couleurs, je n’ai pas lésiné sur l’utilisation des calques et sous calques (environ 180), me permettant ainsi de gérer les équilibres et les densités de couleurs entre les différentes zones de l’image. Chaque zone correspond à un groupe de calques pour lesquels j’applique plus ou moins de couches de couleurs. Les effets et particulièrement les hachures, sont gérés à part et composent une sorte de mille-feuille en combinaison avec les calques de couleurs. Les effets de volume sont le résultat d’un mélange entre dégradés simples et couches de couleurs à densité variable (comme si l’on utilisait une forme décomposée sur le dégradé). J’évite d’utiliser les filets de dégradés excepté pour certains détails.
L’utilisation des hachures sur certaines parties de l’image en plus ou moins grande quantité m’a permis de respecter l’esprit du dessin papier, donnant de la texture et renforçant les volumes. Les détails poussés de certains éléments me permettront une utilisation ultérieure de ceux-ci.

extrait couleurs mi-factory

extrait de la mise en couleurs d’un plateau

De nombreuses heures ont été nécessaires pour arriver à bout de cette image de 41x21cm. Pour parfaire le visuel, j’ai ajouté dans un dernier temps une profondeur de décors supplémentaire afin d’ exploiter l’illustration hors du site. Pour ceux qui l’auront remarqué, il y a des espaces importants sur la partie gauche de l’image. Intégration web oblige, j’ai choisi de limiter les éléments de décors à cet endroit pour faciliter l’intégration de la baseline du site.

Pour les amateurs de vue filaire, un clique sur l’image ci-dessous vous donnera une vue complète de la structure vectorielle.

filaire mi-factory

L’image finale

Comme la vectorisation de l’image s’est bien déroulée, la finalisation dans Photoshop s’est résumé à de simples réglages de raccords et de couleurs. L’illustration se cale parfaitement dans la page d’accueil du site et est exploitable sur d’autres supports. Si vous êtes intéressés, cette image est en vente sur mon profil Society6.

mi-factory

Si vous avez noté la présence de la machine à dessiner au début du billet, vous aurez constaté qu’elle n’apparaît pas dans l’illustration finale. C’est le signe avant coureur d’une suite à n’en pas douter. Alors comme pour la plupart de mes billets, je vais dire « à suivre … » :)

Données techniques du projet :

Format final de l’image : 38×21,5 cm pour la version print
Réalisation : vectorielle (CMJN)
Rendu final : Bitmap (RVB)
Poste de travail : Intel Core i7-3770K – 16Go RAM – Windows 7 ProNVidia Geforce GTX 670
Périphériques : Souris Razer DeathAdder filaire – Tablette Wacom Intuos 3 A4
Support et matériel de dessin : crayons Graphic de Derwent – bloc à dessin Arteco Jumbo de Daler Rowney
Recomposition papier : impression avec une Epson PX810FW

Mots-clés : , , , , , , , , , ,

Commentaires 13 Réponses


× six = 12

Vos informations

  1. Je le sais depuis maintenant longtemps de quoi tu es capable mais là j’avoue que tu m’impressionne encore plus. J’aimerais, pour info, connaître le nombre d’heure de travail qu’il y a autour de cette illustration (une centaine non ?).

    Les explications sont vraiment appréciables afin de mieux comprendre ta manière de travailler ainsi que dans la compréhension de ton univers.

    J’ai hâte de voir ce que va donner ton portfolio, mais je ne me fais pas de bile quant à sa qualité.

    Bonne continuation Phil.

  2. Travail impressionnant. J’adore toujours autant cet univers qui me parle de plus en plus tu penses bien. Bon alors si il y a une suite il faut prévoir de la place pour un triptyque ou un dyptique que Je prévois la place au mur :-)

  3. serait génial de l’avoir en 1920×1080 et 2560×1440 pixels!

  4. Vraiment très impressionnant cette illustration Phil. Clap clap :) !!!

  5. Merci à tous pour vos messages.

    @marroon :
    Il y a un peu plus de 150 heures de travail je crois. A partir d’un moment, j’ai arrêté de compter car ça n’a pas d’importance pour ce projet dans la mesure ou ce n’est pas une commande client. Mais on peut dire que j’y ai passé du temps, j’ai testé l’ajout de beaucoup de détails et passé du temps à dessiner et vectoriser.

    @STPo : ça me vieilli :)

    @Corbak : Il y aura une suite c’est sur. Quand, je ne le sait pas.

    @Rasiquiz : Je n’ai rien prévu de tel, mais je vais voir ce que je peux faire.

    @Bouctoubou : Et ça ne fait que commencer :D

  6. Waouh !!! Je suis trop fan Bravo

  7. Pingback: Des pixels et du code #74 - Stéphanie Walter, Graphiste - Designer web et mobile

  8. Pingback: Pixels & code #2 – Web Design weekly links not to miss - Stéphanie Walter: Webdesigner - UX-UI designer

  9. Bravo, très très impressionnant. J’aime beaucoup ton univers.
    Je te « suis » depuis un moment mais je trouve que cette illustration te propulse encore à un niveau supérieur.
    :)

    • Merci, j’espère que la suivante te plaira tout autant (je vais bientôt attaquer le dessin).
      :)

  10. Super boulot, belle fiction, je reste sur ma faim, à quand les nouveaux????