Tutoriel: Dessin d'un paysage avec Paint

Bonjour tout le monde !

fleche_droite

Dans ce tutorial, nous allons voir comment dessiner avec Paint, dans son intégralité, ce type de paysage:

Ceci pourra bien sûr vous apprendre de nouvelles techniques, comme dessiner vous mêmes des tileset d'herbe ou d'arbre pour vos jeux, puisque j'explique précisément comment faire des bouts de tiles, et non comment dessiner directement l'ensemble de l'image ci-dessus.
Les tiles représentées dans ce tutorial sont interdites d'utilisation sans mon autorisation, merci de respecter mon travail :)

Comme la longeur des posts est limitée et que le tutoriel est assez long, il est posté en plusieurs parties.

Maintenant, commençons !

Tout d'abord, ouvrez ce magnifique logiciel permettant tellement de choses: Paint

A partir de maintenant et pendant tout le reste du tutoriel, ce sera votre
meilleur ami.

Nous allons commencer par dessiner les tiles d'herbe, ce qui en sera la texture.
Le format de ces tiles sera de 40x40 Pixels.
Pour redimensionner votre image, allez dans l'onglet image, puis attributs

Entrez ensuite les nouvelles dimensions de l'image, c'est à dire 40x40, puis cliquez sur OK.

Nous avons donc notre joli carré blanc, que nous allons transformer en un joli carré d'herbe
Pour cela, il nous faut tout d'abord des couleurs. La palette de couleur située en bas de l'écran contient des couleurs par défaut, dont très peu de trames différentes de vert.
Nous allons donc nous faire nos propres teintes de vert

Double-cliquez sur un carré de couleur de la palette pour faire apparaître ce menu

Sélectionnez une couleur d'un joli vert dans la grande palette de gauche, et utilisez la partie droite pour la modifier
Vous pourrez, grâce à ces différents outils, créer différentes trames de vert.
La couleur que vous obtiendrez remplacera la couleur de la palette sur laquelle vous avez cliqué pour obtenir ce menu. Vous pourrez donc remplacer les couleurs de base de la palette par vos différentes trames de vert.
4 trames différentes suffiront. Pensez à correctement les répartir entre le foncé et le clair

Après avoir créer notre petite palette personnelle, nous allons pouvoir commencer à dessiner l'herbe.
Remplissez d'abord votre carré, avec l'outil remplissage

, d'un vert ni trop foncé, ni trop clair
(Ces images ont été prises en zoom x6, avec la loupe

)

Ajoutez un peu de texture, en vaporisant des pixels clairs avec l'aérographe

Faites ensuite de même avec les autres trames vertes de votre palette, puis fignolez un peu, comme par exemple en rectifiant des zones de pixels trop clair ou trop foncés

Vous avez votre première tile d'herbe !
Répétez ensuite l'opération complète pour obtenir plusieurs tiles différentes
Voici ce que cela donne en zoom x1:

Nous allons maintenant faire le haut de l'herbe
Gardez toujours vos trames de couleurs verte, et dessinez, avec le crayon

ou l'outil ligne

, la base de vos brins d'herbe, de préférence de la même longueur que vos tiles d'herbe, si vous souhaitez les utiliser dans un jeu
(Ces images ont été prises en zoom x6, avec la loupe

)

Rendez-les plus naturels en les arrondissant un peu

Ajoutez ensuite quelques petits pixels vers le bas, pour augmenter l'effet de végétation

Nous allons maintenant utiliser la transparence pour donner une texture à ces brins d'herbe.

1: Prenez l'outil sélection

2: Quand vous utilisez cet outil, dans la barre de gauche apparaît un petit rectangle, dans lequel se trouve deux icônes. Ces icônes définissent si le mode transparent est activé ou pas. Par défaut, l'icône du haut est sélectionnée, donc le mode transparent n'est pas activé. Cliquez donc sur la deuxième image pour passer en dessin en transparence.
La transparence fonctionne comme le découpage des sprites de GameMaker: Paint enlève automatiquement toute la couleur de l'image sélectionnée en tant que deuxième couleur. Vous pouvez sélectionner deux couleurs pour dessiner; la première avec un clic gauche sur la couleur, et la deuxième avec un clic droit.

3: Avec l'outil prélèvement d'une couleur

, faites un clic droit sur un de vos brin d'herbe. Vous assignerez donc la couleur du brin d'herbe en tant que votre deuxième couleur

Voici une image représentant les 3 étapes effectuées: Outil sélection, passage en mode transparent, et assignent de la couleur des brins d'herbe en tant que deuxième couleur

Prenez ensuite un bout de vos tiles d'herbe, et placez les à côtés des brins d'herbe, puis sélectionnez ces derniers. Nous allons utiliser la tile d'herbe comme texture

Faites glisser les brins d'herbe au dessus de la texture. Comme nous avons assignés la couleur des brins d'herbe en tant que deuxième couleur, la couleur s'efface, et il ne reste que les contours. La texture apparaît donc en transparence à la place des brins d'herbe

(Cette opération est très facile à effectuer, mais assez difficile à expliquer, alors si vous n'avez pas compris quelque chose, n'hésitez pas à poser des questions smile

)

Vous avez donc votre herbe texturée. Fignolez la ensuite en rajoutant quelques petits pixels par ci par là pour donner un meilleur effet

Votre tile de brins d'herbe est terminée ! smile

Répétez ensuite l'opération complète pour obtenir différentes tiles de brins d'herbe. Voici le résultat en zoom x1:

_________________

Metal Gun 2

Steam Community: Groupe Le CBNA

Nous allons maintenant attaquer une partie très intéressante: le dessin de l'arbre smile

Pour que notre arbre ai de bonnes proportions, ne parte pas de travers et soit symétrique, nous allons le dessiner schématiquement, en squelette, puis à partir de ce squelette nous pourrons donner forme à l'apparence finale de l'arbre.
(Note: J'ai l'habitude de tracer les squelettes avec différentes couleurs, pour mieux pouvoir me repérer. Quand vous le dessinerez vous mêmes, faites comme vous le voulez, ce n'est pas obligatoire smile

)

Nous allons tout d'abord tracer le squelette de la base de l'arbre

Avec l'outil ligne

, nous allons tracer le trait qui définira l'épaisseur du tronc, en l'occurrence 25 Pixels ici.

Au lieu de compter un à un les pixels, dans la zone en bas à droite de l'écran, vous avez des petites indications concernant la position de votre souris sur l'image. Quand vous tracez un trait, vous avez les coordonnées de la position de départ dans l'image, et les coordonnées de la position du curseur à partir de son point de départ.
Sur cette image, j'ai commencé à tracer le trait à 20,20 sur l'image, et le trait en lui même, à partir de sa position de départ, fait 25x1, ce qui signifie 25 Pixels de longueur pour 1 Pixel de largeur.

Nous allons donc tracer une ligne de 25x1 Pixels, comme ceci:
(Ces images ont été prises en zoom x6, avec la loupe

)

La hauteur de la base arrondie du tronc sera de 29 Pixels, on trace donc une ligne verticale de 29 pixels, qui se finira sur la base du tronc.

On épaissit ensuite la base du tronc, de 8 Pixels de chaque côté

On relie ensuite la base et la "pointe", ce qui formera un trapèze

Allongez un peu vers le haut les côtés de la ligne d'épaisseur du tronc, et voila, vous avez votre base de tronc d'arbre !

Nous allons maintenant dessiner le reste du squelette de l'arbre, et finaliser avec les contours.

Commençons par tracer le corps de l'arbre: 43 pixels de hauteur. C'est toute la partie du tronc qui sera la plus visible, avant qu'elle ne soit cachée par les feuilles.
Prolongez les deux traits verticaux des extrémités, à 43 pixels.
(Ces images ont été prises en zoom x2, avec la loupe

)

Il va maintenant falloir tracer le squelette des branches
Prolongez verticalement, en plus, le tronc de 8 pixels
Tracez ensuite l'axe de symétrie, partant du milieux de la ligne du bout du tronc, on lui donne 38 pixels de hauteur.
A partir de cet axe, on trace, de chaque côté, une ligne horizontale de 34 pixels, qui définira l'écartement des branches.

Reliez le tout, en essayant de garder une épaisseur correcte de branches, et vous avez le squelette complet de votre tronc !

Effacez ensuite tout les traçages inutiles, en ne laissant que l'axe de symétrie, et la ligne délimitant le feuillage. Vous avez maintenant une belle base d'arbre bien proportionnée, en forme d'Y smile

Arrondissez ensuite la figure avec un nouveau traçage (J'utilise l'outil ligne

, mais faites comme vous le sentez Smile

)

Il n'y a pas besoin de dessiner la deuxième moitié à la main, il suffit d'utiliser l'outil sélection

, et l'axe de symétrie
Sélectionnez donc la première moitié, effectuez un copier-coller, puis clic droit sur l'image quand elle est encore sélectionnée, Retourner/Faire pivoter..., Retourner horizontalement, OK.
Placez donc la moitié retournée sur l'axe de symétrie, et vous avez votre squelette arrondi

Effacez ensuite les restes du squelette

Et finalement, préparez le dessin pour le texturage, en passant les contours en noir, et en effaçant tout ce qui se trouve à l'intérieur.

Vous disposez maintenant d'un joli petit contour de tronc, prêt à être coloré smile

Pour la couleur du tronc, répétez la même opération pour obtenir les différentes trames de vert de l'herbe, mais cette fois-ci avec du brun
(Note: J'ai l'habitude de réunir les différentes couleurs dans un petit rectangle que je place à côté de mon dessin, et ensuite pour dessiner je prend les couleurs avec l'outil Prélèvement

. J'ai justement laissé cette petite palette sur plusieurs dessins qui suivent)

Voici donc votre tronc, avec les trames de couleur qui vont avec

Comme pour l'herbe, remplissez-le d'une couleur ni trop foncée, ni trop claire, avec l'outil remplissage

Dessinez ensuite les différentes zones de couleur et d'éclairage du tronc (Pour donner un bon effet à son tronc et savoir comment dessiner ceci, on peut prendre comme exemple des photos de vrais arbres)

Commencez à désagréger les bords des zones de couleur

Faites de même pour tout le reste du tronc

Puis finalisez, en rendant homogène l'ensemble du tronc

Voila, vous avez votre beau tronc d'arbre! smile

Mais il manque encore une chose importante à votre arbre: Le feuillage

Dessinez des feuilles de différentes formes, à un format environnant les 6x6 pixels
Reprenez les trames de couleurs que vous avez utilisées pour l'herbe, remplissez vos feuilles de vert, et ajoutez quelques petites touches plus claires, par ci par là (pour faire joli happy1

)
(Cette image a été prise en zoom x6, avec la loupe

)

Utilisez ensuite le copier-coller pour faire quelques tas de feuilles différents, puis utilisez l'aérographe

et vos différentes trames de couleurs verte pour dessiner un fond de feuillage.
(Ces images ont été prises en zoom x2, avec la loupe

)

On réutilise de nouveau le copier-coller, et le système de transparence avec lequel nous avons donnés de la texture aux brins d'herbe, mais cette fois-ci pour découper ce qui se trouve autour des feuilles, pour pouvoir les superposer d'une meilleure façon.
On assemble donc tout ces éléments, pour donner la base de notre feuillage

Nous avons donc les feuilles et le tronc, il suffit juste de les réunir smile

On fait donc des copier-coller en transparent de nos éléments de feuilles, et assemblons tout ça sur le haut du tronc, en essayant de cacher le bout des branches.

Enfin, on fignole, en enlevant quelques petits bouts de feuilles et en remplissant les zones de blanc central avec du vert, et voila le résultat !

Pour mettre en page le dessin, ouvrez un nouveau projet, et utilisez l'éditeur de couleur pour créer le bleu du ciel, dont vous remplirez le fond.

Il reste encore un petit détail, les nuages
Pour les dessiner, il suffit de tracer une forme au crayon, d'une couleur blanche se rapprochant de celle du ciel, et de diminuer les contours avec l'aérographe

Vous obtenez votre nuage smile

Au final, on assemble les tiles d'herbe et de brins d'herbe, l'arbre et les nuages, tout ça sur un fond bleu, et voici le résultat, en zoom x1 super

Bien sûr, si j'avait voulu dessiner uniquement le paysage, je n'aurait pas dessiné ses éléments de la même façon. Mais ce tutoriel est surtout fait pour montrer comment faire ses propres tiles de nature, pour un jeu smile

Si vous avez des problèmes, n'hésitez pas à me poser des questions

Voila, j'espère que ce tutoriel vous a plu, et qu'il vous sera utile smile

@3 Bast

_________________

Metal Gun 2

Steam Community: Groupe Le CBNA

bravo pour le tuto il est super super

_________________
War, War never changes.

The end of the world occurred pretty much as we had predicted. Too many humans, not enough space or resources to go around. The details are trivial and pointless, the reasons, as always, purely human ones.
The earth was nearly wiped clean of human life. A great cleansing, an atomic spark struck by human hands, quickly raged out of control. Spears of nuclear fire rained from the skies. Continents were swallowed in flames and fell beneath the boiling oceans.

_________________

Metal Gun 2

Steam Community: Groupe Le CBNA

Pas mal du tout ! Bravo Bast...
_________________
Entre la folie et la sagesse il n' y a qu'un pas.

Remerci

_________________

Metal Gun 2

Steam Community: Groupe Le CBNA

A quand le prochain? ange2

_________________

j'ai pas compris avec l'herbe gnii

_________________

j'ai pas la même conception de la beauté que les graphistes chargé de l'interface de windows

Qu'est-ce que tu n'a pas compris exactement ? smile

_________________

Metal Gun 2

Steam Community: Groupe Le CBNA

ben l'histoire de texture avec l'herbe au fait j'ai enregistré tout mes titles sous un autre nom
_________________

j'ai pas la même conception de la beauté que les graphistes chargé de l'interface de windows

Regarde cette image:

Dans sa première partie, il y a l'outil à utiliser, en l'occurence l'outil sélection
Quand tu prend cet outil, dans la base de la colonne de gauche apparait un rectangle avec deux icônes à l'intérieur, c'est ce qui est représenté dans la deuxièmme partie de l'image. Pour passer en mode de dessin transparent, on sélectionne la deuxièmme icône
Ensuite, pour dessiner avec des couleurs, on les sélectionnes; c'est ce qui est représenté dans la troisièmme partie de l'image. Il y a deux carrés: le premier représente la couleur principal, et le deuxièmme, celui qui est partiellement caché, représente la couleur d'arrière plan. On sélectionne la première couleur avec un clic gauche, et la deuxièmme avec un clic droit
Donc tu sélectionnes, avec un clic droit, la couleur avec laquelle tu a dessiné tes brins d'herbe. Elle est donc définie en couleur d'arrière plan. Et quand on sélectionne un objet en mode transparent, toute la couleur de l'objet étant la même que celle sélectionée en arrière plan s'efface. Comme tu a sélectionné la couleur des brins d'herbe, ils s'effacent, et il ne reste que le contour. Tu peut donc les superposer à une texture, qui apparaitra dans les contours des brins d'herbe.

Comprends tu ? smile

_________________

Metal Gun 2

Steam Community: Groupe Le CBNA