Graphismes 2D pour les programmeurs

Créer un personnage avec un contour visible

Chris Hildenbrand

Traducteur

Alexandre Laurent

- Titre : Graphismes 2D pour les programmeurs

- Auteur : Chris Hildenbrand

- Traducteur : Alexandre Laurent

- Parution : 17 juin 2015

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2015 Chris Hildenbrand. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Créer un personnage avec un contour visible

- II. Remerciements

- III. Commenter

I - Créer un personnage avec un contour visible

Voici une demande que j'ai reçue plusieurs fois : « Comment créer un personnage avec un contour ? » Ce n'est pas très différent des autres créations de personnages, vous ajoutez juste un peu de difficulté et quelques problèmes à contourner.

Les principaux problèmes que j'ai vus avec de nombreuses illustrations utilisant les contours sont :

- l'incohérence de la grosseur du trait (différentes épaisseurs pour différents éléments de l'écran). C'est un petit peu plus compliqué et demande quelques réflexions pour avoir un écran équilibré. Mon conseil est de soit garder tous les éléments avec la même épaisseur, soit d'utiliser un pinceau plus gros pour tous les éléments importants (par exemple, les personnages, logos, éléments d'interface) et de créer le fond avec un trait plus fin ;

- la couleur des traits par rapport à la couleur des formes ;

- l'absence de corrélation entre l'épaisseur de la ligne et l'illustration. Vous avez sûrement vu que, dans les comics, les illustrations et les cartoons - l'épaisseur du trait n'est pas uniforme. Il commence fin, devient plus gros et finit en finesse, ce qui donne un sentiment de coup de pinceau. Bien fait, cela améliore grandement l'image, mais cela est plus long à faire. L'utilisation des outils d'Adobe Illustrator ou Corel Draw pour créer des brosses dynamiques donne souvent un résultat qui ne semble pas bon.

Mettons de côté tous ces problèmes. Commençons par quelque chose de simple. Dans ce tutoriel, nous allons faire un porcelet avec un trait noir cohérent sur tous les éléments. Dans l'un des prochains tutoriels, je détaillerai des contours plus complexes.

Commencez avec un cercle, convertissez-le en chemin et déplacez le nœud droit vers le bas,

pour créer la tête du porcelet. Dupliquez-le et rétrécissez-le pour l'ombre.

Ajoutez un trait sur la forme extérieure. N'oubliez pas de rendre le trait assez épais pour l'exportation en bitmap.

Ajoutez des cercles pour les yeux (forme de base, reflet et, dans ce cas, une marque autour de l'œil droit).

Ensuite, créez les oreilles en utilisant des cercles déformés grâce à l'ajout de nœuds.

Dupliquez la forme et réduisez-la un peu pour former l'intérieur de l'oreille du cochon.

Dupliquez les deux formes, inversez-les et réduisez un peu leur largeur. Ensuite, placez-les derrière la tête.

Passons maintenant à la particularité la plus importante pour en faire un porcelet : le museau. Démarrez avec un cercle, convertissez-le en chemin et dupliquez-le.

Déformez le cercle en tirant le nœud gauche vers l'extérieur et en ajoutant deux autres nœuds.

Placez le museau sur la gueule et ajoutez deux cercles pour les naseaux. Le contour pose un problème, puisque nous ne souhaitons pas que les lignes sur la gauche soient visibles.

Utilisez l'outil de lignes droites pour dessiner une forme recouvrant la ligne sur la gauche,

et ajoutez-lui la couleur de base de la peau. Ajoutez une autre ligne pour dessiner une bouche.

Les deux dernières étapes montrent l'un des principaux problèmes avec les contours : le recouvrement d'éléments crée des lignes que nous ne voulons pas voir. Vous pourriez juste combiner le museau avec la tête, mais, en faisant un objet unique, cela posera des problèmes pour le travail d'animation. Cela devient encore plus évident avec les bras et jambes. Je préfère simplement ajouter des formes pour masquer les recouvrements.

Un autre cercle est déformé pour le corps,

avec une version réduite pour l'ombre - comme pour la tête. La forme plus claire n'a pas besoin de contour.

Les jambes sont basées sur un autre cercle déformé.

Utilisez l'outil de lignes droites pour dessiner la forme du sabot - c'est à la base un rectangle particulier avec une indentation.

Convertissez les lignes en courbes et pliez les lignes du haut et du bas.

Dupliquez les formes et assombrissez-les pour les jambes arrière.

Positionnez les éléments et placez les deux jambes derrière le corps (page précédente).

Créez un autre cercle pour la queue, transformez-le en chemin et ajoutez un nœud en bas à gauche et tirez-le vers l'extérieur,

tournez ce nœud dans un coin et ajustez-le pour créer une pointe. Ajoutez un triangle et un autre cercle pour la base.

La queue peut ne pas avoir un aspect tire-bouchon que vous verriez dans de nombreuses illustrations de cochon - c'est un de ces cas où vous pensez savoir à quoi cela ressemble et que ce n'est pas la réalité. À la fin, j'ai vérifié sur Google images (la meilleure invention depuis le pain en tranches) et j'ai vu de vrais porcelets et j'ai trouvé qu'ils avaient une jolie petite queue plus convenable.

Et la dernière étape - j'ai oublié de l'ajouter à la page du tutoriel - c'est une forme pour masquer la jointure des jambes avec le corps.

J'espère que vous avez aimé ce tutoriel. Lancez Inkscape et commencez à créer !

II - Remerciements

Cet article est une traduction autorisée de l'article paru sur 2D Game Art for programmers. Je remercie chaleureusement Chris Hildenbrand de nous avoir permis de le traduire.

III - Commenter

Vous pouvez commenter cet article ou présenter vos réalisations sur le forum.