Articles

Un Tutoriel de base sur les Sprites

Voici une présentation de base de la façon de transformer votre dessin en pixel art à l’aide de quelques astuces Photoshop ou GIMP.

Étape 1: Le dessin

Notez qu’il n’y a pas de détails de masque et que les mains sont agréables et simples

Une tablette est agréable à avoir pour dessiner directement dans un programme d’art comme Photoshop. Sinon, scannez un dessin avec des crayons lourds ou des lignes encrées. Si vous voulez imiter un style de jeu spécifique, utilisez un sprite agrandi comme référence pour les proportions et la largeur du corps (ce que malheureusement je n’ai pas fait avec ce croquis). Gardez les détails au minimum afin de ne pas encombrer les choses lorsque vous les rétrécissez.

Temps: varie

Étape 2: Redimensionnement

Ne redimensionnez pas avec des proportions contraintes – étirez et écrasez pour correspondre aux proportions de votre cible

Trouvez un sprite similaire à la taille (ou à la pose) que vous souhaitez copier. Réduisez le dessin et rendez-le simultanément aussi large qu’il doit l’être pour correspondre, si vous ne l’avez pas résolu à l’étape 1. Notez que dans cette esquisse, je veux à peu près la même hauteur mais un peu plus large.

Temps: 30 secondes

Étape 3: Affûtage

Utilisez l’outil de seuil de Photoshop ou de GIMP pour vous épargner une tonne de temps de nettoyage

Fusionnez le calque avec le dessin au trait redimensionné sur un calque avec un fond blanc uni. Accédez à l’IMAGE >AJUSTEMENTS >SEUIL dans Photoshop ou l’équivalent dans GIMP pour réduire le travail au trait à des pixels noirs et blancs purs. Assurez-vous d’être zoomé de près pour voir au mieux les pixels. Gardez tous vos détails originaux aussi compréhensibles que possible afin que vous n’ayez pas besoin de vous référer trop souvent à votre dessin original.
Cette étape facilitera le nettoyage des lignes et le remplissage de la couleur et vous fera gagner une tonne de temps sur le nettoyage à la main.

TEMPS: 10 secondes

Étape 4: Nettoyage

Affinez les contours jusqu’à ce qu’ils aient une largeur de 1 pixel. N’ayez pas peur de casser certains contours, et ne vous inquiétez pas encore des détails plus fins

Faites un calque juste pour les lignes (supprimez tout le blanc). Zoomez et nettoyez les contours. Si vous êtes dans la rupture des lignes, c’est l’endroit pour le faire. Il n’est pas encore temps de travailler sur les détails fins (encore une fois, le masque et les mains) – commencez simplement à vous donner des ancres pour la coloration. Une fois terminé, verrouillez le calque.

TEMPS: 10-20 Minutes

Étape 5: Fill-tool les Flats

Les couleurs plates sont remplies – dans ce cas, les couleurs d’ombre

Remplissent les couleurs plates sur un calque sous les lignes. Travaillez sur les détails de la tenue, etc., mais ne faites pas d’ombrage. La lumière sera ajoutée après. Cette étape donne vraiment à spriting la sensation de « production de bandes dessinées ». Remarque spéciale: Certaines personnes préfèrent utiliser les couleurs de la zone claire pour leurs appartements, puis ajouter les ombres après. Cela produira un effet final différent, alors expérimentez.

TEMPS: 2 ou 3 Minutes

Étape 6: L’ombrage

Gagnez du temps et obtenez de bonnes couleurs en utilisant le blanc sur les calques définis sur Superposition pour éclaircir les aplats d’ombre

En ce moment, vous avez un calque pour les lignes et un calque pour les aplats. Voici où Photoshop vous fait gagner du temps. Insérez deux couches entre les lignes et les plats. Changez-les en style de superposition et rendez l’opacité supérieure de 50%. Sélectionnez un crayon de 1 ou 2 pixels et commencez à mettre des blancs. Éclairage instantané à travers vos couleurs.
Remarque: Travaillez d’abord avec le calque d’opacité à 100%. Lorsque vous avez l’ombrage vers le bas sur la façon dont vous l’aimez, utilisez l’outil Magic want pour sélectionner les zones non blanches. Passez ensuite à la couche de 50% pour l’ombrage médian (après avoir caché les fourmis en marche de la baguette). Vous ne voulez pas que les deux couches chevauchent leurs blancs ou que vous obteniez des reflets supplémentaires.

TEMPS: 30-90 Minutes

Étape 7: Vérification de l’ombrage

Vérifiez les détails de votre ombrage en rendant en niveaux de gris et en éliminant les distractions de couleur

Parfois, vous avez besoin de nouveaux yeux pour vérifier que vous avez ombrage à droite.
Voici à quoi devraient ressembler vos calques – les plats remplis de noir sont ce que nous ajoutons en ce moment. Copiez le calque flats, verrouillez-le, remplissez-le de noir (Edit >Fill). Changez ensuite vos deux calques blancs de Superposition en Normal. Vous devriez obtenir ceci:

Je ne peux vraiment pas penser à une meilleure façon de tester l’ombrage que de retirer toute la couleur du costume distrayante et de l’augmenter jusqu’à un contraste maximal. C’est le moyen le plus simple de trouver de petites choses qui ne semblent pas correctes, ou même de grandes choses que vous étiez trop concentré pour remarquer. Quoi de mieux, la correction consiste simplement à fixer les blancs – et non à changer chaque couleur. Essayez-le avec un fond noir, aussi.
Hmm. Je vais regarder sa main gauche avant d’avoir fini.

TEMPS: 90 secondes pour vérifier; varie pour les corrections

Étape 8: Lignes de couleur

Faites correspondre l’obscurité du contour au reste de l’ombrage

Maintenant qu’ils ont fait leur travail de superposition de b &pour l’étape 7, il est temps que les contours soient colorés et antialiased dans les zones claires. Avec leurs calques sur « lock », cela devrait être un jeu d’enfant. RAPPELEZ-VOUS TOUJOURS: Travaillez sur des arrière-plans de couleur sombre (mais pas de noir pur) lorsque vous effectuez un travail de contour. Il aide l’anticrénelage.

TEMPS: 30-60 Minutes

Étape 9: Détails &Nettoyages

Terminez les détails les plus fins

C’est l’étape de la « subtilité ». * Obtenez les couleurs justes (La superposition fait un très bon travail avec la coloration) * Ajoutez des détails difficiles à pixel (Triangle sur le masque, lignes bleues autour des bords des gants, etc.) * Terminez les détails subtils que vous avez enregistrés pour l’instant (mains) * Dernier tour pour les erreurs. Notez que j’ai « oublié » ses bottes jaunes – mais avec ce processus, il s’agit simplement d’ajouter le jaune à la couche plate. C’est pré-ombragé!