Créer 8 bits Pixel Art avec Photoshop (tutoriel avec des images) Apprenez à programme
post navigation
← Précédent Suivant →
par Alexandria O'Brien
Dans ce tutoriel, je vais passer en revue comment créer quelques sprites différents de jeu dans Photoshop CC / CS6 utilisant ce rétro, look pixel 8 bits. Les éléments de jeu et des personnages que j'illustre seront basés sur mon genre de jeu préféré: la fantaisie, l'aventure.
Remarque: Si vous avez besoin de voir une version agrandie de l'une des images, juste le clic droit et voir l'image dans un autre onglet.
Configuration de Photoshop pour faire Pixel Art
- Largeur: 50 pixels
- Hauteur: 50 pixels
- Résolution: 72 pixels / pouce
- Mode couleur: RVB (8 bits)
- Contenu de fond: Transparent
Figure 1: Nouveau fichier de pixels 50 × 50 dans Photoshop
Figure 2: Nouveau 50 × 50 toile vierge dans Photoshop
2. Obtenez vos outils prêts: sélectionnez l'outil crayon (sous l'outil pinceau menu déroulant) et définir la taille de la brosse à 1 pixel. Sélectionnez l'outil Gomme et changement à 1 pixel dans la taille et le mode d'être « crayon ».
Figure 3: L'outil Crayon est dans le menu déroulant outil Pinceau
Figure 4: Modification de la taille de l'outil de crayon pour un pixel
Figure 5: L'outil Gomme mis à 1 pixel en mode « crayon ».
3. Pour aider à montrer où les pixels sont sur la toile, nous allumons la vue de la grille. Ajuster la vue grille mise sous Edition> Préférences> Guides, Grille - tranches. Changer la grille pour afficher tous les 1 pixel (avec 1 subdivision). Cliquez sur OK, puis tourner la grille afin que vous puissiez le voir. Aller à Affichage> Afficher> Grille.
Figure 6: Régler les préférences de la grille
Figure 7: Changer la grille pour afficher tous les 1 pixel
Figure 8: Mettre le réseau
4. Un autre changement revenir sous Préférences> Général et le changement « Interpolation de l'image » à la plus proche voisin (conserver les contours durs).
Figure 9: Changer l'image du plus proche voisin interpolation
Maintenant, vous êtes prêt à commencer à faire de l'art pixel!
Chaque bon jeu d'aventure fantastique a un héros. Nous allons commencer par faire un seul sprite de caractère.
1. Nous allons commencer par le fichier 50 par 50 pixels, nous avons créé. Depuis que nous avons fait le fichier avec un fond transparent, je vais ajouter une couche de fond de couleur unie afin que nous puissions voir la grille sans voir le modèle de transparence de Photoshop aussi.
Au bas de la fenêtre des calques, cliquez sur l'icône qui ressemble à un cercle rempli à demi. Sélectionnez le « Solid Color ... » option et choisir une couleur neutre pour la nouvelle couleur couche de remplissage être.
Figure 10: Le raccourci pour ajouter une nouvelle couche de couleur unie est au bas du menu des couches
2. Ajouter une nouvelle couche transparente overtop que la couche de remplissage de couleur. Aller à Calque> Nouveau> Calque ou tout simplement utiliser l'icône de raccourci au bas du menu des couches en forme comme une page pliée.
3. Faisons le corps de notre caractère. Commencez par sélectionner une couleur de la peau de base. Je vais utiliser # f2cb9f.
Figure 11: Sélection d'une couleur de peau de base
4. Utilisez l'outil Crayon pour dessiner le corps. Je vais faire mon corps aussi simple que possible, puis ajuster à la fin de la forme vraiment le personnage de la façon dont je veux qu'il regarde. Nous allons ajouter plus de détails une fois que nous avons la forme de base vers le bas.
Pointe. Ajouter une couche supplémentaire pour chaque nouvel aspect dans le cas où vous voulez revenir en arrière et modifier quoi que ce soit.
Pointe. Si vous voulez faire une ligne droite, cliquez une fois où vous voulez commencer la ligne puis, tout en maintenant la touche Maj enfoncée, cliquez une deuxième fois où vous voulez que la ligne à la fin. Photoshop crée automatiquement une ligne droite entre ces deux points.
Faire la forme du corps comme vous le voulez. Voici comment je fait ma forme du corps:
1) Cliquez une fois sur la toile avec un crayon de 15px pour le cercle de tête. ●
2) Faire la poitrine d'un triangle (pointu vers le bas) et le connecter avec le col (3 utilisation de crayon d'épaisseur de pixel). ▼
3) Faire le torse avec un autre triangle (dirigée vers le haut) à l'extrémité côté fond du triangle de la poitrine. ▲
4) Les pattes viennent directement vers le bas de la base du triangle de torse.
5) Faire un « point » où l'extrémité du bras sera. J'ai fait un bras et un bras par son côté. Maintenir décalage et cliquer sur l'épaule pour connecter l'extrémité du bras au corps.
6) Ajouter un peu plus de volume à l'extrémité des bras pour les mains et plus aux extrémités des jambes pour les pieds.
7) A ce stade, ajouter ou supprimer à volonté pour modifier la forme du corps. J'ai ajouté un peu plus de volume aux jambes, a ajouté quelques pixels pour rendre le cou et plus épais corps, et arrondi les épaules un peu.
Figure 12: le corps étant en tirant sur la toile, en commençant par la tête
5. Maintenant, nous allons ajouter les vêtements, les cheveux et le visage. Utilisez la forme de base du corps comme modèle pour la façon dont les vêtements doivent être, et faire preuve de créativité! Je vais ajouter six nouvelles couches pour une chemise, un pantalon, des chaussures, les cheveux, le visage et les détails.
Figure 13: Les détails de caractères ajoutés au corps, en commençant par la chemise
Figure 14: Je couche de remplissage une couleur, une couche de corps et 6 couches de détail
6. Si vous avez pas déjà, assurez-vous d'enregistrer votre fichier Photoshop que vous progressez.
7. À ce stade, notre ami de pixel pourrait être appelé fini, mais je voudrais ajouter un peu plus en profondeur avec les ombres et les hautes lumières.
Etape supplémentaire, Ajouter Shading:
Commencez par faire une copie fusionnée de toutes les couches ensemble. Pour ce faire, en désactivant la visibilité de la couleur couche de remplissage (cliquez sur les icônes de l'oeil à la gauche de la vignette du calque) puis appuyez sur Commande-Option-Shift-E (Mac) ou Ctrl-Alt-Shift-E (PC). Cela fera automatiquement une copie de toutes les couches visibles dans une couche placée en haut de votre liste de couches.
A partir de là, je vous suggère de mettre vos couches dans un dossier et en désactivant la visibilité de garder tout organisé. Pour grouper rapidement les calques, sélectionnez-Cliquez tous puis appuyez sur Ctrl / Option -G.
Figure 15: Appuyez sur Commande-Option-Shift-E (Mac) ou Ctrl-Alt-Shift-E (PC) pour faire une copie fusionnée
Figure 16: Les couches non utilisées sont regroupées dans un dossier. Je me suis tourné également la couche de remplissage de couleur dos
Figure 17: Le mode de fusion Lumière douce menu déroulant
8. Ajouter un nouveau calque et changer le mode de fusion. (Le mode de fusion est accessible par le menu déroulant option en haut du menu de la couche, à gauche de l'option Opacité. Par défaut, il dit « normal ».)
Je vais choisir le mode de fusion: Lumière douce parce que cela semble bien fonctionner pour assombrir les couleurs que j'utilisé sur mon caractère. Avec cette nouvelle couche sélectionnée (je vais appeler la couche « Shading »), Alt-cliquez sur le calque en dessous (la couche avec le caractère fusionné) pour faire un masque. De cette façon, tout ce que vous dessinez sur la couche « Shading » va rester à l'intérieur du masque de la couche « de caractère ».
9. Couleur sur la couche « Shading » avec un crayon noir. Avec le mode de fusion a changé, la couleur noire sera assombrir la couleur en dessous. Ainsi, le rouge dans sa chemise devient rouge foncé, le vert de ses cheveux devient vert foncé, et ainsi de suite.
Pointe. Si l'ombrage est trop dure pour vous, il suffit de changer le mélange humeur ou Opacité de la couche. Si vous souhaitez ajouter d'autres variations de couleurs ombragées, continuer à ajouter de nouvelles couches « Shading » avec des opacités variées.
Je fini par l'ajout de deux couches de la première ombrage à une opacité de 25% et le second à une opacité de 45%.
Figure 18: Ajout de plus de profondeur au caractère avec des couches d'ombrage supplémentaires
10. Si vous voulez ajouter quelques points saillants, ajouter une nouvelle couche « Mise en évidence » couche exactement comme la « Shading », sauf faire le mode de fusion Superposition et utiliser un crayon blanc.
11. Une fois que vous êtes satisfait de votre 8 bits création de personnage, il est temps d'enregistrer le fichier de sprite PNG final. Mais nous devons d'abord couper la toile de sorte qu'il est serré contre l'image et il n'y a pas d'espace en excès. Ce sera finalement économiser la taille du fichier il est optimal pour tous les jeux. Désactivez la visibilité de la couche de couleur unie, puis aller à l'image> Couper et changer la « base » Réglage de pixels transparents. Cliquez sur OK.
Figure 19: Coupez la toile autour de l'image
12. Allez dans Fichier> Enregistrer sous ...> Enregistrer sous: PNG
Si vous voulez que l'image soit plus simplement aller à l'image> Taille de l'image> et changer le « Resample » à la plus proche voisin (Les bords durs).
Figure 20: Changer l'option de rééchantillonnage lorsque vous redimensionnez de garder ce regard de pixel
Commencez par changer quelques paramètres dans Photoshop afin que vous puissiez facilement créer pixel art. Pour ce faire, l'évolution des préférences, « Interpolation de l'image » à la plus proche et les voisins Guides, Grille - tranches pour montrer chaque pixel 1. Au lieu d'utiliser les outils de pinceau par défaut et gomme, utilisez le crayon et une gomme réglée sur le mode crayon.
Choisissez votre couleur de base avec le menu Pipette, puis dessiner une forme de base. Comme vous ajoutez plus de détails, ajouter des couches pour les organiser et séparés au cas où vous voulez revenir en arrière et modifier quoi que ce soit. Comme une étape supplémentaire, créez une copie fusionnée de toutes vos couches à l'aide Commande-Option-Shift-E (Mac) ou Ctrl-Alt-Shift-E (PC). Ajouter ombrage et met en évidence sur des couches supplémentaires avec des modes de mélange alternatifs et / ou opacités. Enfin, assurez-vous de couper la toile de sprite jusqu'à sa plus petite taille et enregistrer en tant que PNG.
Dans la prochaine partie de ce tutoriel, je vais aller sur la création d'autres éléments graphiques de tout bon jeu d'aventure fantastique: un ennemi. une arme, et un élément de santé.