Aller au tutoriel
lil cactus

Comment faire du pixel art

Débutant10 minutesMis à jour le

En bref

Dans Lil Cactus, partez d’une zone de travail de 16 × 16 px et choisissez l’outil Crayon dans le groupe Pinceau de la barre d’outils. Réglez Taille sur 1 px et Opacité sur 100 %, puis dessinez avec un fort zoom. Pour une grille d’un pixel, choisissez Plus puis Préférences…, ouvrez la section Repères et grille, réglez l’espacement sur 2 px et les subdivisions sur 2, puis activez Affichage puis Afficher puis Grille. Agrandissez avec Image puis Taille de l’image… en choisissant Au plus proche, avec un multiple entier, par exemple de 16 à 512 px.

Un cactus en pixel art de trois couleurs agrandi de 16 par 16 à 512 par 512 pixels, comparant les bords adoucis de Bilinéaire aux bords nets de Au plus proche
Le même dessin agrandi en 512 × 512 : Bilinéaire (Avant) mélange les bords ; Au plus proche (Après) garde des blocs de pixels bien distincts. Faites glisser la poignée pour comparer.
Durée
10 minutes
Niveau
Débutant
Il vous faut
Une petite zone de travail et une souris pour placer les pixels
Formats pris en charge
Nouvelles images RVB et sprites PNG
Ouvrir l’exemple dans Lil CactusUtiliser votre propre photo

Gratuit, sans inscription. Votre photo reste sur votre ordinateur.

Le pixel art se dessine cellule par cellule sur une petite image. Le cactus de ce tutoriel utilise trois couleurs de peinture et un arrière-plan blanc. L’outil Crayon trace des marques aux bords nets ; l’agrandissement avec Au plus proche recopie ces pixels sans ajouter de couleurs intermédiaires entre eux.

Dessiner et agrandir un cactus en pixels en sept étapes

  1. Ouvrir une zone de travail de 16 × 16 et ajouter un calque de dessin

    Ouvrez l’exemple vierge de cette page. Pour créer plutôt votre propre zone de travail, choisissez Fichier puis Nouveau…, tapez 16 dans les champs Largeur et Hauteur, et laissez Unités sur Pixels. Arrière-plan reste sur Blanc. Cliquez sur Créer.

    Choisissez Calque puis Nouveau puis Nouveau calque. Dans le panneau Calques, double-cliquez sur son nom, tapez Cactus et appuyez sur Enter. Laissez Cactus sélectionné, au-dessus d’Arrière-plan.

    Les réglages de Nouveau document avec Largeur 16, Hauteur 16, Pixels et un arrière-plan Blanc
    Utilisez une toute petite zone de travail : ces dimensions sont des pixels de l’image, pas de la vue agrandie.
    Le bas de la boîte de dialogue Nouveau document avec le bouton Créer entouré
    Créez la zone de travail après avoir réglé ses dimensions.
    Le panneau Calques avec Cactus sélectionné au-dessus d’un calque Arrière-plan blanc
    Dessinez sur Cactus ; Arrière-plan fournit le papier blanc.

  2. Choisir un vert, puis le crayon à 1 px

    Choisissez Fenêtre puis Couleur. Dans son champ #, sur la ligne Premier plan, remplacez la valeur par 4A8654.

    Cliquez avec le bouton droit sur le bouton de la barre d’outils situé sous la pipette, ou maintenez-le enfoncé, puis choisissez Crayon. Réglez Taille sur 1 px. Le réglage Mode, qui détermine comment un trait se mélange aux pixels existants, reste sur Normal. Le réglage Opacité définit l’intensité de la marque ; laissez-le à 100 %.

    Le réglage Lissage stabilise le trait ; laissez-le à 0 pour placer ces cellules. Laissez les deux cases de pression décochées pour une taille et une opacité uniformes. Laissez Gommage auto désactivé pour que peindre sur un pixel continue d’utiliser la couleur de premier plan.

    Le panneau Couleur avec le vert 4A8654 dans le champ # entouré, sur la ligne Premier plan
    Saisissez le vert dans le champ #.
    Le groupe Pinceau de la barre d’outils avec le bouton du groupe et l’option Crayon entourés, à côté des outils voisins
    Le crayon partage son bouton de la barre d’outils avec le pinceau ; vue agrandie.
    Les options du crayon avec le réglage Taille entouré, à 1 px
    Les marques d’un pixel du crayon remplissent chacune une cellule de l’image.
    Les options du crayon : Mode Normal, Opacité 100 % et Lissage 0 %
    Gardez Normal, Opacité 100 % et Lissage 0 %.
    Les cases Taille sous pression, Opacité sous pression et Gommage auto du crayon, toutes décochées
    Laissez ces trois cases décochées pour ce dessin.

  3. Afficher une grille d’un pixel

    Choisissez Plus puis Préférences…, puis Repères et grille. Le champ Espacement de la grille (px du document) règle la distance entre les lignes principales ; tapez 2. Le champ Subdivisions par cellule principale divise cette distance ; tapez 2. Cliquez sur Fermer.

    Choisissez Affichage puis Afficher puis Grille, puis Affichage puis Ajuster à l’écran. Les lignes fines séparent maintenant chaque pixel, avec des lignes plus marquées tous les deux pixels. La cellule blanche en haut à gauche est en colonne 1, ligne 1. Comptez les colonnes depuis la gauche et les lignes depuis le haut.

    Le menu Plus avec Préférences entouré
    Ouvrez les préférences depuis le menu Plus.
    Les sections des préférences avec Repères et grille entouré
    Choisissez Repères et grille dans les préférences.
    Les réglages Repères et grille avec Espacement de la grille 2 et Subdivisions 2 entourés, et le bouton Fermer
    Un espacement de 2 px divisé en 2 donne une grille d’un pixel.
    Le menu Affichage et son sous-menu Afficher, avec Grille entouré
    Activez Affichage › Afficher › Grille.
    La zone de travail blanche vierge de 16 par 16 à un zoom de 3 200 %, avec une grille d’un pixel
    L’exemple à un zoom de 3 200 %. Chaque petite cellule est un pixel de l’image.

  4. Dessiner le tronc et les bras

    Gardez Cactus sélectionné et le vert en couleur de premier plan. Faites glisser en passant par le centre des cellules. Faites un trait séparé pour chaque ligne ci-dessous :

    • Tronc : trois traits verticaux dans les colonnes 8, 9 et 10, chacun de la ligne 3 à la ligne 10.
    • Bras gauche : des traits horizontaux sur les colonnes 5 à 7, dans les lignes 6 et 7. Ajoutez son extrémité dressée dans la colonne 5, lignes 4 et 5.
    • Bras droit : des traits horizontaux sur les colonnes 11 à 13, dans les lignes 7 et 8. Ajoutez son extrémité dressée dans la colonne 13, lignes 5 et 6.
    La grille d’un pixel avec le tronc vert du cactus et ses deux bras levés, avant le pot et les reflets
    La silhouette verte, chaque cellule peinte restant visible dans la grille.

  5. Ajouter le pot et les pixels plus clairs

    Dans le champ # du panneau Couleur, saisissez B66B4B pour le pot. Peignez la ligne 11 sur les colonnes 6 à 12, les lignes 12 et 13 sur les colonnes 7 à 11, puis la ligne 14 sur les colonnes 8 à 10.

    Remplacez la valeur du champ # par A0C78D. Ajoutez une bande claire dans la colonne 8, lignes 4 à 9. Ajoutez deux cellules plus claires dans la colonne 5, lignes 5 et 6, et une dans la colonne 11, ligne 7. Servez-vous de la grille complète de l’étape 3 pour compter leurs positions.

    Masquez Cactus avec son bouton en forme d’œil pour comparer avec l’arrière-plan vierge, puis affichez-le de nouveau.

    Une vue rapprochée de la grille avec le cactus en pixels terminé : bras verts, touches vert clair et pot en terre cuite
    La plante terminée, recadrée de plus près pour distinguer chaque cellule.
    Le panneau Calques avec Cactus au-dessus d’Arrière-plan et les deux boutons en forme d’œil entourés
    Cactus contient le dessin. Arrière-plan gère le blanc derrière.

  6. Enregistrer le petit original, puis agrandir

    Choisissez Fichier puis Enregistrer sous puis Projet Lil Cactus… tant que la zone de travail fait encore 16 × 16. Les deux calques modifiables sont ainsi conservés à la taille d’origine du dessin.

    Choisissez Image puis Taille de l’image… Laissez Unités sur Pixels, le bouton en forme de chaîne enclenché et Rééchantillonnage activé. Le rééchantillonnage change le nombre de pixels. Tapez 512 dans le champ Largeur ; le champ Hauteur passe aussi à 512. Choisissez Au plus proche dans le menu de rééchantillonnage et cliquez sur Redimensionner.

    C’est un agrandissement ×32 : chaque pixel d’origine devient un bloc de 32 × 32.

    Taille de l’image passant de 16 par 16 à 512 par 512, dimensions liées, Rééchantillonnage activé et Au plus proche sélectionné
    Choisissez Au plus proche avant de cliquer sur Redimensionner.

  7. Exporter le PNG, puis revenir à la taille de dessin

    Choisissez Fichier puis Exporter puis PNG…, puis cliquez sur Exporter. Le nouveau fichier fait 512 × 512 px. Choisissez Édition puis Annuler pour revenir au dessin de 16 × 16 pour votre prochaine modification.

    Fichier puis Enregistrer met maintenant le projet à jour.

Pourquoi Au plus proche conserve la palette

La boîte de dialogue Taille de l’image s’ouvre avec Bilinéaire sélectionné. À ce niveau d’agrandissement, cette méthode mélange les couleurs le long des bords. Au plus proche conserve les trois couleurs de peinture du dessin et son arrière-plan blanc.

Détail agrandi du bord du cactus avec des blocs carrés de couleur uniforme obtenus avec Au plus proche
Au plus proche : des blocs de pixels pleins, vus en agrandissement.
Le même bord du cactus agrandi avec Bilinéaire, avec des couleurs intermédiaires qui se mélangent entre les blocs
Bilinéaire : les couleurs se mélangent aux bords du même dessin.

Que faire ensuite

Pixel art : questions et réponses

Dessiner du pixel art, est-ce la même chose que pixelliser une photo ?

Non. Dans Lil Cactus, cette méthode consiste à placer des cellules de couleur une à une pour dessiner un sprite. Filtre › Pixellisation › Pixellisation… regroupe au contraire les pixels d’une image existante en blocs plus grands.

Le pixel art peut-il avoir un arrière-plan transparent ?

Oui. Dans Lil Cactus, masquez Arrière-plan avec son bouton en forme d’œil, montré à l’étape 5, puis choisissez Fichier › Exporter › PNG… Le calque Cactus reste visible, sans le papier blanc.

Faut-il enregistrer le pixel art en PNG ou en JPEG ?

Utilisez le PNG dans Lil Cactus pour conserver la palette et la transparence. Le JPEG peut ajouter des couleurs parasites autour des bords nets et ne conserve pas la transparence.

Pourquoi la grille d’un pixel n’apparaît-elle pas ?

Dans Lil Cactus, les lignes secondaires de la grille de cette méthode apparaissent à partir d’un zoom de 800 %. Affichage › Extras doit être activé, en plus d’Affichage › Afficher › Grille. L’espacement de la grille suit les préférences de ce navigateur : un autre navigateur peut donc afficher une grille différente. La grille est une surcouche de l’éditeur et n’apparaît pas dans un PNG exporté.

Peut-on annuler un seul trait de crayon ?

Oui. Dans Lil Cactus, Édition › Annuler supprime le dernier glissement ou clic du crayon en une seule étape d’historique. Édition › Rétablir le restaure.

Peut-on agrandir du pixel art selon un facteur non entier ?

Oui, mais dans Lil Cactus, seuls les multiples entiers donnent des blocs uniformes. Un agrandissement non entier peut rendre certains pixels d’origine plus larges que d’autres, même avec Au plus proche.

Publié le  · Vérifié le