Comment créer des icônes en Pixel Art sous Illustrator

Dans ce tutoriel pour débutants, vous apprendrez comment créer du pixel art adaptable à l'infini sous Adobe Illustrator. À l'aide de la Grille Rectangulaire et du Pot de peinture dynamique, nous allons créer des icônes simples et mignonnes et je vous montrerais comment les sortir de la grille pour créer des icônes sans perte de qualité, des motifs en pixel art et bien plus encore.

1. Création de votre document

Étape 1

Ouvrez Adobe Illustrator CC 2014 (ce tutoriel est faisable sous d'autres versions d'Adobe Illustrator mais mes captures d'écrans viennent de cette version), et créez un Nouveau Document. J'aime travailler sur un document pixel de 800 px sur 800 px. Vous pouvez créer un document plus grand ou plus petit, tout dépend de vos besoins.

Étape 2

Allez chercher la Grille Rectangulaire dans la Barre d'outils (elle se trouve dans l'outil Trait (/). Double-cliquez sur l'outil pour faire apparaître ses options. Entrez les dimensions de votre document dans Largeur et Hauteur pour adapter la taille par défaut de la grille. Indiquez 30 pour les Séparateurs Horizontaux et Verticaux. 

Étape 3

Assurez-vous que les lignes de la grille s'alignent avec votre Plan de Travail. Sélectionnez votre grille et changez la couleur du Contour en noir, ou en une couleur qui vous conviennent afin que vous puissiez voir la grille facilement.

2. Dessinez le contour du cahier

Étape 1

Sélectionnez votre grille et allez chercher le Pot de peinture dynamique (K) (dans la Barre d'outils dans l'outil Concepteur de forme (Shift-M)).

1. Cliquez sur la grille pour faire un Groupe de Peinture dynamique.
2. Désélectionnez et commencez à remplir deux ou trois espaces de la grille, en utilisant du marron (#801800) en couleur de fond.

Étape 2

Vous pouvez soit remplir les pixels un à un, soit cliquer et tirer pour en remplir plusieurs à la fois. Peu importe la méthode, dessinez un rectangle de 15 pixels de large et 18 pixels de hauteur.

Étape 3

À l'aide de l'outil Sélection de peinture dynamique (Shift-M), sélectionnez le pixel en bas à gauche du rectangle et supprimez-le. Puis utilisez le Pot de peinture dynamiquepour remplir trois pixels en diagonale dans le coin inférieur droit.

Étape 4

Pour faire les spirales du cahier, commencez à deux pixels du bout à gauche et remplissez deux pixels vers le dessus, puis un pixel en diagonale et deux pixels vers le bas. Sautez un pixel et répétez cette étape deux fois.

Utilisez ensuite l'outil Sélection de peinture dynamique pour supprimer les bouts de contour de cahier afin que les "trous" de votre spirale fassent 4 pixels de haut. (Voir ci-dessous)

Remplissez trois pixels en diagonale sous le contour du cahier pour connecter les spirales.

3. Remplissage et extraction du cahier

Étape 1

Changez la couleur de remplissage en bleu (#4dc6e1) et remplissez le cahier en commençant par le côté inférieur droit. Replissez les espaces sous chaque spirale puis cinq rangés en partant du haut du cahier; remplissez à l'horizontale. (Voir ci-dessous)

Étape 2

Remplissez deux rangées horizontale en plus, séparées par deux rangées chacune. Puis, en utilisant un bleu plus clair (#b6f9ff), remplissez les espaces blancs.

Étape 3

Remplissez le reste (excepté la dernière colonne à gauche). Changez la couleur de remplissage en gris (#b1b1b1) et remplissez les quatre pixels vides des spirales.

Étape 4

Une fois votre pixel art terminé, sélectionnez la grille, faites un clic droit et appuyez sur Dissocier. Ensuite, allez dans Objet > Peinture dynamique > Décomposer pour transformer le Groupe de peinture dynamique en objet. Cliquez sur Division dans l'outil Pathfinder afin que le pixel art soit séparé de la grille. Enfin, utilisez l'outil Baguette Magique pour sélectionner la grille et supprimez-la. On utilisera cette méthode pour toutes les autres icônes de ce tutoriel.

4. Création d'un crayon à papier

Étape 1

Utilisez l'outilGrille rectangulaire pour créer une nouvelle grille. Une fois de plus, utilisez l'outil Pot de peinture dynamique pour commencer à remplir les pixels vides avec du marron.

Remplissez quatre pixels en diagonale vers le coin supérieur droit puis trois vers le coin inférieur droit pour créer la pointe du crayon. Le reste du "chapeau" du crayon fait quatre pixels de hauteur et neuf de large.

Étape 2

Les côtés du crayon font 19 pixels de hauteur et sept de large. N'oubliez pas de remplir les trois premières rangées du crayon en marron pour faire la mine et de laisser deux rangées en bas pour dessiner la partie métallique du crayon.

Étape 3

Nous allons avoir besoin de deux couleurs pour chaque partie : pour le bois, pour le corps du crayon, pour la partie métallique et pour la gomme. La couleur de remplissage la plus foncée prendra deux colonnes de chaque côté du crayon autour de la partie plus claire qui fait 3 colonnes de large. Les couleurs sont les suivantes :

• Pour le bois : Brun (#eeb55c) et brun clair (#f8dd92)
• Pour le corps : Jaune (#fbc423) et jaune clair (#ffef42)
• Pour la partie métallique : Gris (#b1b1b1) et gris clair (#d8d8d8)
• Pour la gomme : Rose (#f8a8a0) et rose clair (#f8d8d0)

Étape 4

Enfin, on répète la même procédure d'extraction de la grille rectangulaire pour votre pixel art. Sélectionnez la grille, faites un clic droit, et cliquez sur Dissocier. Ensuite, allez dans Objet > Peinture dynamique > Décomposer pour transformer le Groupe de peinture dynamique en objet. Cliquez sur Division dans l'outil Pathfinder afin que le pixel art soit séparé de la grille. Enfin, utilisez l'outil Baguette Magique pour sélectionner la grille et supprimez-la.

5. Création d'un set de marqueurs

Étape 1

Ce design est similaire à celui du crayon alors on survolera les étapes. Mettez votre grille en place comme pour le cahie et le crayon.

1. Le bout est ciselé donc remplissez deux pixels vers la droite puis un vers le bas en diagonale.
2. Le bout fait quatre pixels de hauteur, quatre pixels de large et trois en diagonale.
3. Remplissez deux pixels de chaque côté du bout du marqueur puis remplissez huit pixels de large pour le haut du corps du marqueur.
4. Complétez le haut du marqueur en ajoutant sept pixels vers le bas de chaque côté. Le bas et la rayure proche du haut font huit pixels de large.
5. Enfin, le corps du marqueur fait 21 pixels vers le bas de chaque côté et huit pixels de large tout en bas. Ajoutez aussi trois rangée de marron au milieu du marqueur. (Voir ci-dessous)

Étape 2

Comme pour le crayon, les couleurs du marqueur sont séparés en colonnes.

1. Commencez avec du vert clair (#b7e835) au centre en deux colonnes.J'ai décidé que le vert remplirai quatre des sept parties.
2. Remplissez deux des colonnes sur le côté droit de chacune des quatres parties en vert un peu plus foncé (#9dc107).
3. Le côté gauche des parties vertes sont remplies en vert foncé (#768d12).
4. Les trois autres parties sont remplies avec trois nuances de gris : foncé (#b1b1b1), clair (#ffffff), et moyen (#d8d8d8) (Voir ci-dessous).

Étape 3

Pour la troisième et dernière fois de ce tutoriel, refaisons les étapes d'extraction de la grille de votre pixel art :

1. Sélectionnez la grille, faites un clic droit, et cliquez sur Dissocier.
2. Allez dans Objet > Peinture dynamique > Décomposer.
3. Cliquez sur Division dans l'outil Pathfinder. Enfin, utilisez l'outil Baguette Magique pour supprimer la grille.

6. Changement des couleurs pour d'autres designs

Étape 1

Une façon simple de changer les couleurs facilement est de Copier (Control-C) et Coller (Control-V) vos dessins avant de les extraire de la grille rectangulaire. Ensuite, vous pouvez facilement remplir les pixels à nouveau à l'aide de l'outil Peinture dynamique.

Étape 2

Autrement, sélectionnez votre dessin, allez dans Édition > Modifier les couleurs > Redéfinir les couleurs de l'illustration et changez les nuances de l'objet sélectionné. Je trouve que c'est le moyen le plus rapide pour changer les couleurs d'une illustration.

Étape 3

Créez autant de variantes que vous le souhaitez. Assurez-vous que chaque dessin est Associé (Control-G). Plus bas, vous pouvez avoir le mode Aperçu (Control-Y) qui passe le tout en mode Contour, vous permettant de voir tous les carrés composants les vecteurs de chacun de vos dessins.

Bien joué, vous avez réussi !

Maintenant que vous maîtrisez la technique, vous pouvez créer autant de sets d'icônes et de motifs homogènes à imprimer grâce aux  Options de motif, de ressources pour jeux mobiles et bien plus encore. Bien que ce n'est pas vraiment du pixel art, le principe de travailler à petite échelle reste le même avec l'avantage de pouvoir redimensionner votre illustration sans perte de qualité. Partagez vos pixel arts avec nous dans la section commentaires ci-dessous !