| Clikmag>Dossiers >Pixel-art et réalisme - part two |
Pixel art
et réalisme: Nous voila donc dans la 2eme partie
de notre petit cours sur le réalsme. Ici, et contrairement a la première partie, on va
s'interesser au dessin "click", avec l'outil de dessin de TGF, ainsi que et
surtout a Photoshop, outil aujourd'hui incontournable de tout bon graphiste qui se
respecte. |
1: La méthode "click"
| On a déjà vu cette methode dans la partie 1 du cours: Dessiner
les contours, colorier et "dégrader" a la main. Pour un décor assez grand il
est très difficile de recourir a cette technique. Mais pour les motivés, je vais quand
même donner quelques pistes: d'abord, verifiez toujours si votre décor "n'empiete
pas" sur votre personnage. Dans la figure ci-contre, on peut voir que dans la partie
a, le personnage ressort bien du décor tandis que dans la partie b, certaine parties
(comme la cape) rendent John moins visible. Je vous conseille donc de dessiner vos décors
un ou deux tons en dessous de la couleur la plus sombre de votre perso. On s'éloigne un
peu du réalisme ici (la réalité pencherait pour la figure b) mais il faut aussi se
placer dans l'optique du joueur. Ne vaut-il pas mieux voir précisément son personnage et
pouvoir le controler comme on le veut plutôt que de ceder au seul plaisir artistique et
rendre aveugle les personnes jouant à votre création ? |
|
|
Qui dit "décors réalistes" dit encore une fois "dégradés". Sauf que, contrairement aux personnages, les décors se doivent de paraitre moins contrastés pour ne pas surcharger la scene et les elements actifs, tels que les personnages (c'est mon avis, a vous de voir après :). Les variations de teintes de décors avec TGF ou MMF sont extremement difficiles a réaliser (c'est pour ca que je vous conseille Photoshop) mais pas impossibles. Je vous donne ici deux techniques assez similaires dans leur fonctionnement. La première concerne les petits décors. D'abord créez votre dégradé avec une couleur plus foncée ou plus claire puis recommencez par dessus votre forme (cela peut etre un cercle comme une ligne ou un angle (fig.a)). Ensuite prenez l'outil ligne et tracez des diagonales sur le dessin ce qui aura pour effet d'estomper le dégradé (fig. b). Pour améliorer un peu le tout, on pourra enlever certains pixels sur les bords (fig. c) |
|
La deuxieme methode utilise le meme principe que la premiere sauf qu'ici on va encore plus estomper l'effet de dégradé. Cette méthode convient plus pour les gros décors tels que les murs ou les sols. Ici, on utilise simplement une "couche" de couleur. Pour l'estomper comme la figure b au dessus, vous pouvez utiliser la meme methode ou copier et coller des "morceaux" de décors constitués de pixels alternativement clairs et foncés. Puis avec la forme "rond plein" de TGF vous creez une forme grossière en "coupant" de petites parties d'ombre (figure a gauche  ).
Prenez ensuite le crayon et dessiner rapidement sur les bords de la forme, en va-et-vient,
comme si vous grattiez un ticket de jeu. Normalement, vous devriez arriver a un résultat
proche du dessin à droite () |
|
Lorsque jai commencé DS, je me posais la question des décors: en effet les decors de ce jeu sont relativement grands mais je voulait quand meme garder une optique "pixel-art". J'ai fait quelques essais au début avec le technique "click" mais j'ai vite compris que c'était lourd, long et fatiguant :) Alors jai utilisé un autre moyen: la "méthode Photoshop". Attention: ce qui suis n'est pas vraiment du pixel-art puisqu'on ne dessine pas pixel par pixel. mais au final le résultat est vraiment meilleur et se rapproche de ce systeme de représentation :) |
2:
La méthode "Photoshop"
-Introduction
| Bon, je ne suis pas la pour vous faire un cours sur Photoshop. Je
vous donnerais juste quelques trucs et astuces qui vous faciliteront énormément la tache
pour vos réalisations. Note: Ici nous travaillerons en couleurs RVB; c'est-à-dire 16 millions de couleurs. La troisième partie de ce cours vous apprendra comment réduire cette palette de couleurs sans perdre de qualité. |
-Principe de base: pinceau et opacité
| L'une des grandes erreurs des débutants (et quelquefois des
confirmés) en Photoshop est d'utiliser a tort et a travers l'outil "dégradé".
On va faire simple: bannissez complètement cet outil! En effet, si l'on obtient un
résultat propre et net, on est très loin du réalisme. Un dégradé n'a aucune
personnalité propre et il fera apparaître vos décors lisses, ternes et sans vie. Pour
donner de jolis effets d'ombres, rien de mieux que l'outil pinceau . Cette méthode convient particulièrement aux murs. Dessinez un rectangle simple dans un nouveau calque (selection + pot de couleur). Prenez le pinceau et une forme correspondant environ a 1/8 ème du rectangle. Dans ses options, reduisez sa dureté à 0%. Puis prenez une couleur plus sombre et reduisez l'opacité de votre pinceau à 10%. Calcul rapide: il vous faudra repasser 10 fois sur votre dessin pour obtenir la couleur que vous avez choisie. A partir de là, c'est a vous de jouer: evitez les formes trop circulaires et essayez de créer des petits reliefs. Faîtes en sorte que la forme ne ressemble pas à un dégradé justement. Le résultat obtenu est beaucoup plus "personnel" (et donc plus réaliste) qu'un simple dégradé . |
|
-l'aérographe
|
Une des fonctions utiles de l'aérographe est la fonction
"estomper". Elle permet de créer des formes qui, lorque on lorsqu'on reste
appuyé sur le bouton de la souris, disparaissent petit a petit. Une fonction interessante
quand on veut par exemple créer des salissures où faire croire que de l'eau ou de la
rouille s'est déposée sur le mur (figure). Prenez l'outil aérographe et une forme plutôt petite. Dans la case estompage, indiquez le chiffre 20. Puis partez en haut du mur et tracez un trait (droit de préférence) jusqu'en bas. Variez les formes et le chiffre de l'estompage pour créer des "coulées" différentes. L'outil aérographe peut aussi servir sans estompage: plus vous resterez appuyé, plus le dessin prendra la couleur choisie. A vous de voir dans quels cas utiliser l'aérographe à la place du pinceau. |
-Utilisation des filtres
L'utilisation des filtres est aussi une des
premières choses essayées chez un néophyte: on se retrouve souvent avec une explosion
d'effets spéciaux incohérents et déja vus... L'utilisation des filtres est donc
relativement déconseillé, sauf si c'est fait avec discrétion. Préferez les filtres qui
apportent de la "matière" a un objet, comme "grain" ou
"éponge" |
|
-créer et plaquer une texture
|
Eh oui! A l'instar de nombreux logiciels 3D, il est possible de
créer et d'inserer des textures dans Photoshop. Cela permet de créer des
"fonds" semblables a TGF ou MMF ou de créer des reliefs pour un mur ou un sol. D'abord il faut créer la texture. Créez un petit carrée avec des variations de tons, des quadrillages... Puis sauvegardez le en PSD. A notez que Photoshop n'accepte que les textures en niveaux de gris (image - mode - niveaux de gris ou image - réglages - désaturation). Vous pouvez aussi prendre une texture sur internet mais n'oubliez pas de la désaturer et de l'enregistrer en psd. On va maintenant plaquer la texture sur notre mur. Selectionnez le (ctrl + clic sur le calque) puis allez dans filtre - textures - placage de textures. Dans le menu déroulant choisissez "charger une texture". Le résultat garde les dégradés aux pinceau et les salissures faites précedemment et donne un air vieux et usé au mur . A vous de créer vos palissades avec une
texture bois ou pourquoi pas un papier peint avec des motifs géométriques :) |
|
-la perspective
|
Photoshop integre un outil formidable pour ceux qui
veulent faire des décors en fausse 3D ou en 3D isométrique: la perspéective. Elle
permet, dans notre exemple, de créer des murs perpendiculaires a ceux déjà crées. |
-réglages et finitions
| On arrive a la fin de la création du mur. Maintenant que vous
l'avez dégradé, mis en relief, texturé et mis en perspectif, vous aurez peut-etre envie
de plus faire ressortir les reliefs ou changer sa couleur... C'est la qu'interviens le
menu image - réglages. Ce menu sert donc comme son nom l'indique a regler tout ce qui concerne la couleur de votre objet. Dans l'exemple ci-contre , j'ai d'abord assembler les 2 parties créees
préecedemment. J'ai ensuite réglé la luminosité et le contraste du mur en perspective
pour le rendre plus sombre et moins faire ressortir les tons. Je l'ai ensuite mis en
couleur. Pour mettre de la couleur sur un objet gris, il n'y a qu'un seul moyen: les
"balances de couleur". Cet onglet permet de faire ressortir les couches de
couleur de vos objets (par exemple, faire ressortir plus le cyan que le rouge). Ici j'ai
juste mis plus de rouge et de jaune... Le menu "réglages" est très complet et
je vous invite a faire tous les essais possibles et inimaginables pour bien connaître
toutes les fonctions. |
|
Les 2 méthodes vues ici vous ont donc permis de
créer un mur et, pour la méthode Photoshop, de le mettre en perspective. Au travers de
cet exemple simple, vous avez pu voir quelques fonctionnalitées de Photoshop très utiles
pour la création de décors (ce sont, je le répète, les méthodes que j'utilise :). |
Ceci était donc la deuxième partie du cours sur le pixel-art réaliste. La dernière partie vous montrera comment integrer vos graphismes dans TGF ou MMF et comment optimiser le tout. D'ici là, encore une fois, BOSSEZ! C'est le secret pour progresser :p EssaimE |
