Dans ce didacticiel pour débutants, vous apprendrez à créer du pixel art pour vos jeux et projets à l’aide d’Adobe Photoshop ! Nous passerons en revue tout, de la création d’une image pixel art à son partage avec le monde !
Êtes-vous prêt à créer votre propre pixel art ? Que vous souhaitiez créer quelque chose à partager sur votre compte de réseau social ou que vous ayez besoin d’un personnage pour votre jeu vidéo rétro, ce didacticiel Photoshop vous aidera à créer rapidement du pixel art avec Adobe Photoshop.
Commencer
Le pixel art est un moyen rapide et facile de créer des images 2D pour vos jeux ou pour des travaux créatifs comme dans les images que vous voyez dans les jeux mobiles populaires comme Flappy Bird ! C’est aussi les bases pour créer un grand art voxel. Il existe de nombreux outils disponibles pour créer du pixel art, mais dans ce didacticiel, nous utiliserons le logiciel d’image 2D le plus populaire disponible sur le Web. Photoshop est clairement le favori pour la création de pixel art en raison de ses nombreuses fonctionnalités destinées à créer un pixel art étonnant!
Créer un nouveau fichier
Une fois que vous avez installé Photoshop via Creative Cloud, lancez le programme. Vous devriez voir un menu similaire à celui ci-dessous. C’est ce qu’on appelle l’écran de bienvenue. Allez-y et cliquez sur Créer nouveau.
Un écran Nouveau document apparaît alors. Ici, vous pouvez choisir parmi des modèles prédéfinis pour vous aider à créer des projets photo conçus pour différentes tailles d’écran. Pour ce tutoriel, nous allons vous montrer comment faire un chien pixel art. Pour ce faire, nous utiliserons l’ option Personnalisé . Dans le menu de droite appelé Détails prédéfinis, tapez le nom HipsterDog et entrez 32 pour la largeur et 32 pour la hauteur. Cliquez sur Créer lorsque vous avez terminé.
Fondamentalement, cela crée un nouveau fichier appelé HipsterDog avec un canevas de 32×32 pixels. Cette toile sera ce que nous utiliserons pour dessiner notre pixel art. Après avoir appuyé sur Créer , vous devriez voir un écran comme celui ci-dessous. Gardez à l’esprit que 32×32 est vraiment petit. Si vous regardez en bas à gauche, vous remarquerez que nous sommes à 100% sur le zoom. Le pixel art par nature est une œuvre d’art qui fonctionne au niveau du pixel. Nous pouvons toujours redimensionner nos images plus tard, mais pendant que nous concevons, nous devons rester dans cette résolution.
Pour faciliter la conception, nous pouvons toujours zoomer pour mieux le voir. Pour ce faire, appuyez sur CTRL + sur une machine Windows ou CMD + sur un Mac. Nous avons zoomé jusqu’à atteindre 3200%. Vous pouvez voir le zoom en bas à gauche.
Si cela ne suffit pas, vous pouvez zoomer plus ou moins. Maintenant que nous avons notre toile vide, nous devons configurer notre environnement de travail afin de pouvoir créer de superbes pixel art.
Configurer Adobe Photoshop pour Pixel Art
Maintenant que vous avez votre toile, nous devons configurer quelques paramètres de base dans Photoshop qui nous aideront à créer notre tout premier pixel art et aussi à ce qu’il s’affiche correctement.
Activer le voisin le plus proche
Lorsque vous ouvrez Photoshop pour la première fois, toutes les images sont créées à l’aide de Bicubic Automatic pour l’interpolation d’images. C’est idéal pour les images normales, car lorsque vous redimensionnez une image vers le haut ou vers le bas, cela aide à flouter les pixels afin qu’ils aient l’air « lisse » et moins pixelisés. Cependant, c’est tout le contraire dans le pixel art. Chaque fois que vous créez des images en pixels, elles doivent être nettes et nettes. Pour ce faire, nous devons remplacer ce paramètre par Nearest Neighbor . Les images ci-dessous sont un exemple de mise à l’échelle de l’image que nous allons créer 8x.
Donc, sans plus tarder, modifions l’interpolation d’image. Allez dans Préférences et sélectionnez la catégorie Général .
Une fois le menu des préférences ouvert, cliquez sur le menu déroulant Interpolation d’image et sélectionnez Voisin le plus proche (Préserver les bords durs) dans la liste des éléments.
Désormais, lorsque vous redimensionnez votre pixel art, Photoshop préserve les bords durs, donnant à votre illustration un aspect net et net.
Activer la grille
Le prochain paramètre important que nous allons activer est la Grille . Le pixel art fonctionne à partir d’une grille 2D invisible. En activant cette option, il sera facile de voir où exactement nous plaçons nos pixels. Pour activer notre grille, allez dans Affichage > Afficher > Grille.
Lorsque vous cliquez sur Grille, vous devriez voir quelque chose de similaire à celui-ci sur votre canevas. Gardez à l’esprit que cette grille n’est qu’un guide et ne s’affichera pas lorsque vous exporterez votre illustration.
Parfois, la grille n’apparaîtra pas à la bonne taille. Cela est dû au fait que les lignes de la grille ne sont pas définies correctement. Si vous devez modifier cela ou si vous souhaitez vérifier, allez à nouveau dans le panneau Préférences et cette fois, cliquez sur Guides, grille et tranches… dans les options.
Une fois le menu ouvert, assurez-vous que la propriété Gridline Every: a 1 pixel comme valeurs. Assurez-vous également que Subdivisions est 1.
Cela garantira que votre grille est de la bonne taille. Toutes nos félicitations! Nous sommes maintenant prêts à faire du pixel art !
Dessinez votre image Pixel Art
Maintenant que Photoshop est configuré pour le pixel art, il est temps de choisir l’outil que nous utiliserons pour dessiner notre pixel art. Même s’il existe des dizaines d’outils et de raccourcis que vous pouvez utiliser pour créer les pixels de votre image, nous nous concentrerons sur 1 outil principal. Cet outil est l’ outil Crayon .
Configurer l’outil Crayon
L’outil crayon deviendra l’un des outils les plus utilisés lorsque vous commencerez à faire du pixel art. Pour maximiser son efficacité, nous ajusterons certains paramètres avant de commencer.
Pour commencer, sélectionnons l’outil Crayon dans la boîte à outils. Vous pouvez le trouver sur le côté droit. Il ressemble littéralement à un crayon.
Une fois que vous avez sélectionné le crayon, nous allons ajuster certaines propriétés. Cliquez sur la flèche déroulante en haut à gauche de la fenêtre Photoshop. Il devrait y avoir un numéro à côté. Ce nombre représente le nombre de pixels de large que le crayon dessinera lorsque vous cliquerez sur la toile. Puisque nous faisons du pixel art, nous voulons que ce soit ultra fin. Pour ce faire, définissez la taille sur 1. Cela nous permettra de dessiner 1 pixel à la fois. Réglez ensuite la dureté à 100 %. N’oubliez pas que le pixel art doit être net et net. Cette propriété empêchera l’anticrénelage de rendre nos pixels nets.
Décrire la tête
Et maintenant, le moment que nous attendions tous ! Pour dessiner un pixel, cliquez simplement n’importe où sur votre toile. Puisque nous avons fait tout le travail difficile de configuration de Photoshop, cela devrait littéralement être comme remplir des cubes sur une grille. Nous commencerons par dessiner la tête en utilisant la couleur Noir.
Pour modifier les couleurs, cliquez sur la case Couleur située au bas de la zone de la boîte à outils. Une fenêtre contextuelle apparaîtra où vous pourrez faire glisser le curseur pour personnaliser votre couleur. Appuyez sur OK lorsque vous avez terminé.
Maintenant, pour ajouter un pixel, cliquez simplement à l’intérieur de la grille que vous avez créée précédemment. Avec nos paramètres actuels, il remplira une cellule à la fois. Essayez de reproduire l’image ci-dessous en cliquant avec l’outil Crayon.
Très agréable! Maintenant que nous avons le contour de notre personnage de pixel art, nous pouvons commencer à ajouter plus de détails à l’intérieur de la tête. Continuez à ajouter plus de détails en utilisant la même méthode que vous avez utilisée pour le contour. Décrivons les oreilles et ajoutons un nez. Répétez l’image ci-dessous.
Cela commence à prendre forme maintenant ! Afin de fabriquer les lunettes pour notre chien, nous devons changer la couleur. Cliquez à nouveau sur la case de couleur et saisissez la couleur ci-dessous.
Maintenant que nous avons changé la couleur, commençons à dessiner les verres. Essayez de reproduire l’image ci-dessous en utilisant le même outil Crayon.
Bon travail! Nous avons maintenant cartographié la majorité de notre chien pixel art. Commençons à remplir les zones vides. Une excellente technique pour colorer une rangée de pixels consiste à cliquer avec le bouton gauche de la souris sur le premier pixel d’une rangée. Maintenez ensuite la touche MAJ enfoncée et cliquez sur le pixel à la fin de la ligne que vous souhaitez colorer. Cela remplira les pixels entre vous et vous fera gagner du temps automatiquement. Essayez de compléter l’image ci-dessous en utilisant les techniques que vous avez apprises jusqu’à présent.
Bon travail! Vous avez maintenant les compétences pour créer votre propre pixel art pour vos projets ! Allez-y et expérimentez avec différentes couleurs et ajoutez ce que vous voulez à votre image en pixels. Lorsque vous avez terminé, éteignez la grille que nous avons allumée plus tôt pour voir le produit fini.
Où aller en partant d’ici
Maintenant que vous avez appris à configurer Photoshop et les bases de la création de pixel art, il est temps d’apprendre à mettre à l’échelle vos images de pixel art afin de pouvoir les utiliser dans des projets tels que des jeux vidéo et de l’art promotionnel. Nous traiterons de cela dans notre prochain tutoriel.
