16 Couleurs

16 Couleurs – graphisme & jeu vidéo


Poster un commentaire

Inspiration : Yoshitomo Nara

L’exposition « Greetings from a place in my heart » de Yoshitomo Nara est visible jusqu’au 3 décembre 2014 au Dairy Art Centre à Londres et vaut franchement le détour. On peut y découvrir de nombreuses toiles de grand format, quelques sculptures et environ 200 dessins datés de 1984 à 2013 qui permettent de se faire une idée du cheminement artistique de l’auteur.

Yoshitomo Nara est né au Japon en 1959 et réside à présent à Tokyo. Son travail est inspiré par les mangas de sa jeunesse, la découverte du punk rock dans les années 80 et ses études en Allemagne entre 1988 et 1993. Son style et ses thèmes de prédilection rendent ses œuvres reconnaissables au premier coup d’œil mais sa maîtrise des volumes et des couleurs est également très impressionnante.

 


7 Commentaires

Tutoriel pixel art : bus londonien

Tuto pixel art London Bus

usa-uk-f Click here for the English version!

 

Pour ce premier tutoriel de pixel art, penchons-nous sur le Routemaster, le bus à impériale londonien quasi-mythique. Construit de 1954 à 1968, sa longévité sera exceptionnelle puisqu’il restera en service sur certaines lignes jusqu’en 2005. Durant sa longue carrière il s’imposera peu à peu comme l’un des symboles les plus populaires de Londres avec les black cabs et Big Ben. Voilà pour l’introduction historique.

Comme dans tout tutoriel, les techniques exposées ici sont éminemment subjectives et basées sur mes goûts personnels plutôt que sur des règles immuables. La méthode de travailler décrite ci-dessous fonctionne pour moi, mais je ne doute pas que chacun y trouvera matière à redire et saura découvrir des alternatives plus efficaces. De plus, la progression présentée ici est idéale, en pratique les choses sont souvent un peu plus chaotiques et les différentes étapes se chevauchent toujours un peu.

Pixel Art London Bus AnimD’un point de vue technique, j’ai utilisé le logiciel GrafX2, mais n’importe quel logiciel de dessin avec un support basique du pixel art fera l’affaire (Photoshop, Promotion, Paint Shop Pro, GraphicsGale, GIMP… Voir mon article sur le sujet).

1 – Référence et croquis

Tuto pixel art 1

Première étape, parfaitement optionnelle mais rarement inutile : la collecte de référence. Même dans le cas d’un style cartoon ou simplifié, cela permet de s’assurer que le résultat final soit à peu près crédible.

La réalisation d’un croquis sur papier est elle aussi complètement facultative mais permet de tester rapidement différentes options. Retranscrire les images de référence sur papier force en plus à en comprendre la structure et la logique, avec comme conséquence un gain de temps et d’assurance lors des étapes suivantes.

2 – Cubisme

Tutoriel pixel art 2

Je commence généralement par ébaucher le sujet à l’aide des formes basiques avec des couleurs rapidement choisies. Cela permet de juger très vite de l’équilibre de l’ensemble, du contraste général et de l’interaction des couleurs sans se perdre dans les détails.

Cette étape impose aussi de déterminer les dimensions du sujet, la décision la plus importante du projet. Trop petit, on est vite limité et on peinera à intégrer les détails que l’on souhaite. Trop grand, la charge de travail explose, pour un résultat qui n’est plus forcément proche du pixel art. Dans ce cas précis, je décide de la taille du bus en extrapolant à partir des… roues. J’ai une bonne idée de la taille que celles-ci doivent faire, et le reste suit, même si d’autres paramètres sont à prendre en compte comme le nombre de fenêtres (4 fenêtres de n pixels séparés par un pixel, plus 2 pixels à chaque extrémités = la longueur du bus). À cette étape il faut vraiment raisonner en terme de pixels pour choisir les dimensions optimales.

3 – Contour

Tutoriel pixel art 3

La pertinence de cette étape dépend évidemment du style désiré, mais dans mon cas le style de pixel art que j’ai en tête nécessite un contour sombre, donc on n’y coupera pas. Dessiner le contour aide de toute façon à se donner une bonne idée du niveau de détail possible et d’affiner la silhouette, comme l’arrondi à l’avant et à l’arrière du toit. Je ne réfléchis pas encore aux couleurs à ce moment là, ça sera pour juste après.

4 – Premier jet des couleurs

Tutoriel pixel art 4

Je choisis à présent les couleurs qui me semblent satisfaisantes à l’œil et qui correspondent à l’atmosphère, au style et au message que je veux faire passer. Cette étape permet aussi de rationaliser l’usage des couleurs : quelles teintes sont les plus importantes et les plus utilisées (ce ne sont pas forcément les mêmes), lesquelles peuvent être partagées entre différents éléments, etc. En pixel art on essaye généralement d’optimiser l’usage de la couleur pour utiliser le plus petit nombre de teintes possible, souvent des puissances de 2 qui correspondent aux limitations techniques des sasfépus (4, 8, 16 ou 32 couleurs par exemple).

5 – Détails

Tutoriel pixel art 5

J’ajoute à présent les détails que je peux me permettre vu la résolution mais j’évite d’inclure trop de choses ou de faire du remplissage, le résultat sera souvent fouillis (Saint-Éxupéry disait que « la perfection est atteinte, non pas lorsqu’il n’y a plus rien à  ajouter, mais lorsqu’il n’y a plus rien à  retirer  »). Pour le pixel art il est vraiment nécessaire de simplifier le sujet autant que possible pour le rendre parfaitement lisible malgré sa petite taille. Chaque détail doit avoir sa raison d’être et aider à la compréhension de l’image. Je fais également attention au contraste des couleurs des éléments de petite taille qui ne doivent pas attirer l’attention plus que nécessaire.

6 – Antialiasing

Tutoriel pixel art 6

J’ajoute maintenant l’anti-aliasing pour limiter les effets d’escalier et arrondir les angles. La technique n’est pas très compliqué mais demande un peu d’expérience et de recul. Il faut trouver le bon équilibre entre un anti-aliasing trop parcimonieux (résultat trop pixellisé) et un anti-aliasing trop lourd (effet flou ou baveux). Surtout, il faut être cohérent et appliquer les mêmes règles partout. C’est aussi le moment idéal pour finaliser la couleur du contour, qui peut varier selon qu’il soit exposé ou non à la lumière. Dans le cas de mon bus, l’éclairage provient principalement du haut et un peu de la gauche. Les contours de ces côtés là peuvent donc être un peu plus clairs.

7 – Peaufinage de la palette

Tutoriel pixel art 7

Je suis maintenant très proche du résultat final. Je modifie un peu les couleurs pour introduire un peu de variation dans les dégradés : j’ajoute un soupçon de bleu sur une des teintes d’un dégradé, puis une pincée de rouge sur la suivante, etc. Ceci permet d’obtenir un résultat un peu plus organique et moins clinique. Je souhaite également donner des couleurs assez chaudes à l’image et j’ajoute donc un peu de rouge et de vert aux gris. Plus généralement, sur la plupart de mes images et sauf raison particulière j’évite les couleurs de base (appelées aussi « couleurs de codeurs » !) et les gris parfaitement équilibrés qui donnent un rendu trop artificiel. Pour finir, j’ajuste légèrement le contraste, la luminosité et la saturation de l’ensemble pour obtenir les couleurs les plus percutantes possibles même si les changements ne sont pas toujours perceptibles à l’œil nu 😉 C’est la seule étape où j’ai éventuellement recours à Photoshop. Voilà, c’est fin prêt, agitez et servez bien chaud avec de la custard !

usa-uk-f Click here for the English version!

 

 


4 Commentaires

Hello Brainbow

Brainbow Games

Après 4 années très instructives avec Playfish, j’ai décidé de partir vers de nouveaux horizons en ce début de 2013. J’ai rejoint début janvier une toute nouvelle start-up à Londres : Brainbow Games. Avec le reste de l’équipe nous allons nous spécialiser dans des jeux que nous espérons un peu plus « cérébraux » que la moyenne, tout en restant très ludiques évidemment. Comme beaucoup de studios a l’heure actuelle, nous prévoyons de développer en priorité pour mobiles et tablettes. Pas de projet pour les consoles Xiao Ba Wang dans l’immédiat donc 😉

Un premier titre est déjà disponible pour iOS : Brainbow Numbers. Nous travaillons dès à présent sur les prochains jeux et 2013 s’annonce plutôt fertile de notre côté.

J’en profite également pour signaler que vous pouvez à  présent me suivre sur Twitter pour être tenu au courant des mises à jours de ce blog.