Graphismes 2D pour les programmeurs

Travailler de façon optimale pour les bitmap

Apprenez à créer des graphismes vectoriels prévus pour être efficacement exportés en images bitmap.

Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Travailler de façon optimale pour les bitmap

Voici une autre demande (ou un ensemble de demandes) intégrée dans un tutoriel. Comment créer des graphismes vectoriels pour une petite image, de par exemple 48 x 48 pixels.

Un des avantages des graphismes vectoriels est la possibilité de redimensionnement sans perte. Vous pouvez facilement créer une image et la redimensionner sans sacrifier la qualité. Il n'y aura pas de bordure déchiquetée ou de bloc hideux lorsque vous agrandirez d'un facteur de dix. Cela fonctionne aussi parfaitement dans l'autre sens en créant des fichiers source qui peuvent être utilisés pour des images de jeux plus petites.

Pour moi, c'est bien plus facile de créer quelques cercles et boîtes que de pixeliser un personnage à partir de rien. Il est alors possible de l'animer dans Inkscape et de l'exporter vers un fichier bitmap afin de travailler dessus avec un outil pour bitmap (comme Gimp) après coup.

J'adore travailler avec des fichiers deux fois plus grands que l'image de sortie pour avoir une zone de travail plus grande, car je trouve que l'algorithme de redimensionnement dans les outils pour bitmap fonctionne mieux qu'une exportation d'une image réduite à partir d'Inkscape.

Image non disponible
Image non disponible


Commencez avec un carré. Image non disponible

Image non disponible


Définissez la largeur et la hauteur à deux fois la taille du bitmap (pour une manipulation plus simple et une meilleure exportation).

Image non disponible


Tous les éléments doivent rester dans le cadre afin de rentrer dans l'image bitmap. Verrouillez ce calque. Image non disponible

Image non disponible


Créez un nouveau calque pour travailler dessus. Image non disponible

Image non disponible


Ensuite, créez un petit personnage en commençant par un cercle pour la tête. Image non disponible Image non disponible

Image non disponible


Dupliquez la forme et réduisez-la un peu pour créer un reflet.

Image non disponible


Ensuite, créez un cercle déformé pour le corps et dupliquez-le pour le cou. Image non disponible

Image non disponible


Les jambes sont aussi issues d'un cercle déformé avec un nœud supplémentaire pour la base. Image non disponible Image non disponible

Image non disponible


En déformant encore plus les cercles, on obtient la chaussure (symétrie pour l'autre côté, ainsi que la jambe).

Image non disponible


Dupliquez la jambe et déplacez le nœud inférieur droit vers le bas pour former le bras. Formez un coin avec le nœud inférieur gauche pour créer le poing.

Image non disponible


Ajoutez un autre cercle déformé pour la manche et placez les bras avec le corps. Copiez et faites une symétrie pour le côté gauche. Image non disponible

Image non disponible


Trois autres cercles pour les oreilles. Créez une « forme de banane » et réduisez-la pour correspondre à la largeur du tracé. Image non disponible

Les principaux éléments sont là et il est temps de vérifier à quoi notre petit personnage ressemblera en réduit dans le jeu. Je veux premièrement vérifier si les contours seront corrects dans une résolution de 48 x 48, s'ils deviendront trop fins pour être lisibles ou encore s'ils deviendront trop gros, recouvrant l'intégralité du personnage.

Image non disponible
Image non disponible


Il est maintenant temps de faire un export rapide de vérification. Débloquez le calque de base (nous souhaitons aussi exporter la boite).

Image non disponible


Sélectionnez tous les éléments et exportez-les avec « Fichier/Exporter en bitmap ». Choisissez l'option « Sélection » Image non disponible

Image non disponible


Définissez la taille du bitmap à Image non disponible 96 x 96. Inkscape va choisir le PPP adéquat. C'est facilement rectifiable dans un outil pour bitmap.

Image non disponible


Ouvrez l'image dans un outil pour bitmap et redimensionnez-la à 48 x 48 pixels. Vérifiez l'image et corrigez le tracé si besoin.

Image non disponible


Utilisez l'outil de lignes droites Image non disponible pour ajouter des cheveux au personnage.

Image non disponible


Sélectionnez tous les nœuds de cheveux et transformez-les en courbes et coins. Ajustez-les pour que cela soit joli. Image non disponible

Image non disponible


Ajoutez quelques rectangles arrondis (de la taille du tracé pour les yeux) et quelques cercles pour le nez, la bouche et les joues. Image non disponible Image non disponible

Image non disponible


Débloquez le calque inférieur et sélectionnez le carré. Définissez le remplissage à « pas de remplissage ».

Image non disponible


Sélectionnez tous les éléments et exportez en bitmap (Ctrl + Maj + E).
Cette fois, le bitmap a un fond transparent.

Image non disponible

Maintenant nous avons notre personnage et il est exporté en fichier bitmap.

J'ai passé l'ajout de quelques détails supplémentaires (par exemple, la ligne d'ombrage dans les cheveux (qui est simplement une copie des cheveux sans le tracé et colorié avec un violet sombre et semi-transparent)) et les reflets dans les cheveux (qui ne sont que des gribouillis avec l'outil de tracé à main levée).

Image non disponible

Vous devriez obtenir quelque chose comme : une image de 96 x 96 pixels avec un fond transparent et un petit gars plein de gloire. Grâce à l’antialiasing, il ne semble pas si différent de notre version vectorielle.

Maintenant, ouvrez le fichier dans un outil pour les bitmap (tel que Gimp).

Image non disponible

Dans Gimp, réduisez la taille avec « Image/Echelle et taille de l'image » à 48 x 48 et vous devriez obtenir quelque chose comme ça. Il y a toujours l'antialiasing arrondissant les bordures et adoucissant les couleurs.

Image non disponible

Si vous cherchez un aspect plus pixelisé, je vous suggère de réduire le nombre de couleurs (par exemple à 16) et de retoucher manuellement l'image, retirer les contours antialiasés et de redessiner les lignes extérieures pour les rendre régulières.

Cela pourrait être un sujet pour un autre tutoriel – et je vais l'ajouter à ma liste de tâches. Pour l'instant, j'espère que vous avez apprécié ce tutoriel et que vous êtes créatif avec Inkscape.

Certains moteurs (plus spécifiquement pour iOS et Android) nécessitent un PPP (Point Par Pouce ou une résolution x et y) défini. J'ai trouvé compliqué d'ajuster mes graphismes dans Inkscape pour les exporter directement avec le PPP correct. À la place, j'ai changé le PPP dans l'outil pour les bitmap lorsque j'en avais besoin. Dans Gimp, cela se fait avec l'outil « Échelle et taille de l'image ». Vous pouvez définir la résolution x et y (par exemple 73 PPP pour les applications iOS) lors du redimensionnement.

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.