¿Cómo puedo lograr un efecto de trazo perfecto de píxeles nítidos en Photoshop?


16

Estoy trabajando en pixel art de estilo retro para un videojuego. Me gustaría poder agregar un borde alrededor de un sprite, pero necesito que sea nítido y "perfecto en píxeles". El uso del efecto de trazo de Photoshop parece ser la opción obvia, pero desafortunadamente Photoshop hace un sofisticado suavizado y agrega píxeles adicionales donde no los quiero:

ingrese la descripción de la imagen aquí (Imagen ampliada al 400%)

El borde superior de la imagen se creó con Photoshop Stroke (tamaño: 1px, posición: Exterior).

El borde inferior de la imagen se dibujó manualmente con la herramienta de lápiz.

El efecto final es el que busco, pero estoy tratando de lograrlo sin tener que dibujarlo manualmente con la herramienta de lápiz. ¿Hay alguna manera de forzar el efecto Stroke para que se comporte de esta manera? ¿O hay otro método que podría usar para automatizar este efecto?


¿Tienes acceso a fuegos artificiales? Es una mejor herramienta para este tipo de trabajo. Salvo que, para esta resolución de trabajo, no me molestaría con trazos y solo usaría la herramienta de lápiz para dibujarlo.
DA01

Usa la herramienta de lápiz. @ DA01 Adobe mató a Fireworks, tristemente.
Billy Kerr

@BillyKerr sí, parece que los consejos de software no envejecen bien. :)
DA01

Respuestas:


13

Una forma realmente fácil de lograr un trazo nítido es con un estilo de capa de sombra paralela (sí, lo has leído correctamente).

Golpe agudo en Photoshop

El Goomba superior es tu ejemplo. El Goomba inferior es el mismo mapa de bits, pero enmascarado con el trazo agregado como un estilo de capa de sombra paralela. El truco para hacerlo bien es la curva de contorno personalizada.

Curva de contorno personalizada

Lo mismo se puede hacer con el estilo de capa de brillo exterior. Y ahora puede aplicar esto a cualquier capa fácilmente.


¿Importa el ajuste del ángulo?
Horacio

44
Cuando la distancia es 0, el ángulo no importa.
Marc Edwards

¡Una solución bastante inteligente para usar Strokes! ¡Esto funciona muy bien, nunca pensé en usar contornos!
bigp

Palabra ..... Nunca hubiera pensado usar sombras paralelas. Esto funcionó perfectamente para mí también para la misma aplicación.
Nungster

4

Para hacer esto, puede seguir este procedimiento:

  1. Convierta su capa en un objeto inteligente, de esta manera puede hacer múltiples copias de la capa que permanecerán sincronizadas automáticamente con respecto a los contenidos.
  2. Haga cuatro copias de este objeto inteligente ( sin usar la función "Nuevo objeto inteligente a través de la copia", esto creará objetos inteligentes separados, queremos que se instalen aquí)
  3. Ajuste la posición de cada una de las cuatro copias, empujándolas cada píxel en las cuatro direcciones (es decir, una arriba, una abajo, una izquierda y una derecha)
  4. Agrupe las cuatro copias en un grupo en la paleta de capas
  5. Agregue una capa de color sólido azul (el color del trazo), colóquela sobre el grupo
  6. Alt-clic en la línea de separación entre el grupo y la capa azul para convertir el grupo en una máscara de recorte para la capa azul

Resultado:

Capas Duende

Puede descargar el archivo Photoshop CS6 aquí .

Esta técnica se puede adaptar fácilmente para incluir también píxeles en las 8 direcciones simplemente repitiendo los pasos anteriores por segunda vez (otras 4 capas) y empujándolos un píxel diagonalmente en las cuatro direcciones diagonales.


1

La respuesta de Lasse es buena. Sin embargo, dependiendo de su configuración, una capa de ajuste Posterize establecida en 2 podría llevarlo allí en un solo paso. Definitivamente vale la pena intentarlo.

La colocación de su archivo en capas, un color por capa, definitivamente lo llevará allí usando Posterize.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.