Comment puis-je obtenir un effet de trait parfait de pixels nets dans Photoshop?


16

Je travaille sur le pixel art de style rétro pour un jeu vidéo. Je voudrais pouvoir ajouter une bordure autour d'un sprite, mais j'ai besoin qu'elle soit nette et "pixel parfaite". L'utilisation de l'effet Stroke de Photoshop semble être le choix évident, mais malheureusement Photoshop fait un anti-aliasing sophistiqué et ajoute des pixels supplémentaires là où je ne les veux pas:

entrez la description de l'image ici (Image agrandie à 400%)

La bordure supérieure de l'image a été créée à l'aide de Photoshop Stroke (taille: 1 px, position: extérieur).

La bordure inférieure de l'image a été dessinée manuellement avec l'outil crayon.

L'effet du bas est celui que je recherche, mais j'essaie de le réaliser sans avoir à le dessiner manuellement avec l'outil crayon. Existe-t-il un moyen de forcer l'effet Stroke à se comporter de cette façon? Ou existe-t-il une autre méthode que je pourrais utiliser pour automatiser cet effet?


Avez-vous accès à des feux d'artifice? C'est un meilleur outil pour ce type de travail. Sauf que, pour cette résolution de travail, je ne me soucierais pas du tout des traits et j'utiliserais simplement l'outil crayon pour le dessiner.
DA01

Utilisez l'outil crayon. @ DA01 Adobe a malheureusement tué Fireworks.
Billy Kerr

@BillyKerr oui, il semble que les conseils logiciels ne vieillissent pas bien. :)
DA01

Réponses:


13

Un moyen très simple d'obtenir un trait net est d'utiliser un style de couche d'ombre portée (oui, vous avez bien lu).

Sharp Stroke dans Photoshop

Le top Goomba est votre exemple. Le Goomba du bas est le même bitmap, mais masqué avec le trait ajouté comme style de calque d'ombre portée. L'astuce pour bien faire les choses est la courbe de contour personnalisée.

Courbe de contour personnalisée

La même chose peut être faite avec le style de couche de lueur extérieure. Et maintenant, vous pouvez l'appliquer facilement à n'importe quel calque.


le réglage de l'angle est-il important?
horatio

4
Lorsque la distance est 0, l'angle n'a pas d'importance.
Marc Edwards

Solution de contournement assez intelligente pour utiliser Strokes! Cela fonctionne vraiment bien, jamais pensé à utiliser des contours!
bigp

Word ..... Je n'aurais jamais pensé à utiliser des ombres portées. Cela a parfaitement fonctionné pour moi aussi pour la même application.
Nungster

4

Pour ce faire, vous pouvez suivre cette procédure:

  1. Transformez votre calque en un objet intelligent, de cette façon, vous pouvez faire plusieurs copies du calque qui resteront automatiquement synchronisées en ce qui concerne le contenu
  2. Faites quatre copies de cet objet intelligent ( pas utiliser la fonction "Nouvel objet intelligent via la copie", cela fera des objets intelligents séparés, nous voulons qu'ils soient instanciés ici)
  3. Ajustez la position de chacune des quatre copies, en les poussant d'un pixel dans les quatre directions (c'est-à-dire une vers le haut, une vers le bas, une à gauche et une à droite)
  4. Regroupez les quatre copies en un groupe dans la palette des calques
  5. Ajoutez un calque de couleur unie bleu (la couleur du trait), placez-le au-dessus du groupe
  6. Alt-cliquez sur la ligne de séparation entre le groupe et le calque bleu pour transformer le groupe en un masque d'écrêtage pour le calque bleu

Résultat:

Couches Lutin

Vous pouvez télécharger le fichier Photoshop CS6 ici .

Cette technique peut facilement être adaptée pour inclure également des pixels dans les 8 directions en répétant simplement les étapes ci-dessus une deuxième fois (4 autres couches) et en les poussant d'un pixel en diagonale dans les quatre directions diagonales.


1

La réponse de Lasse est bonne. En fonction de votre configuration, cependant, un calque de réglage Posterize réglé sur 2 peut vous y amener en une seule étape. Cela vaut vraiment la peine d'essayer.

La superposition de votre fichier, une couleur par couche, vous y amènera certainement en utilisant Posterize.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.