Tutorial Dessin d'un Paysage avec Paint - Topic Forum Correspondant

Attention: Les images entourés de orange ont été rapetissé, cliquez dessus pour y avoir accés en entier, pour une meilleure utilisation du tutoriel. Dans ce tutorial, nous allons voir comment dessiner avec Paint, dans son intégralité, ce type de paysage: Ceci pourra bien sûr vous servir à 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 tutorial 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 tutorial, 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 ) 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 ! 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: Nous allons maintenant attaquer une partie très intéressante: le dessin de l'arbre 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 ) 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 Arrondissez ensuite la figure avec un nouveau traçage (J'utilise l'outil ligne , mais faites comme vous le sentez ) 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é 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! 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 ) (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 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 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 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 tutorial est surtout fait pour montrer comment faire ses propres tiles de nature, pour un jeu Si vous avez des problèmes, n'hésitez pas à me poser des questions Voila, j'espère que ce tutorial vous a plu, et qu'il vous sera utile @3 Bast