Come posso ottenere un effetto tratto perfetto pixel nitido in Photoshop?

16

Sto lavorando su pixel art in stile retrò per un videogioco. Vorrei poter aggiungere un bordo attorno a uno sprite, ma ho bisogno che sia nitido e "pixel perfetto". L'uso dell'effetto Stroke di Photoshop sembra la scelta ovvia, ma sfortunatamente Photoshop fa un pò di anti-aliasing e aggiunge pixel extra dove non li voglio:

inserisci qui la descrizione dell'immagine (Immagine ingrandita al 400%)

Il bordo superiore dell'immagine è stato creato usando Photoshop Stroke (dimensione: 1px, posizione: Outside).

Il bordo dell'immagine inferiore è stato disegnato manualmente con lo strumento matita.

L'effetto inferiore è quello che sto cercando, ma sto cercando di ottenerlo senza doverlo disegnare manualmente con lo strumento matita. C'è un modo per forzare l'effetto Stroke a comportarsi in questo modo? O c'è un altro metodo che potrei usare per automatizzare questo effetto?

adobe-photoshop stroke

— Michael
fonte

Hai accesso ai fuochi d'artificio? È uno strumento migliore per questo tipo di lavoro. A parte questo, per questa risoluzione del lavoro, non mi preoccuperei affatto dei tratti e utilizzerei semplicemente lo strumento matita per disegnarlo.

— DA01,

Usa lo strumento matita. @ DA01 Adobe ha ucciso Fireworks, purtroppo.

— Billy Kerr,

@BillyKerr sì, sembra che i consigli sul software non invecchino bene. :)

— DA01,

13

Un modo davvero semplice per ottenere un tratto nitido è con uno stile di livello ombra discendente (sì, hai letto bene).

Sharp Stroke in Photoshop

Il primo Goomba è il tuo esempio. La Goomba inferiore è la stessa bitmap, ma mascherata con il tratto aggiunto come stile di livello ombra discendente. Il trucco per farlo bene è la curva di contorno personalizzata.

Curva di contorno personalizzata

Lo stesso può essere fatto con lo stile del livello di luminosità esterno. E ora puoi applicarlo facilmente a qualsiasi livello.

— Marc Edwards
fonte

importa l'impostazione dell'angolo?

— horatio,

4

Quando la distanza è 0, l'angolo non ha importanza.

— Marc Edwards,

Soluzione abbastanza intelligente per usare Strokes! Funziona davvero bene, non ho mai pensato di usare i contorni!

— bigp,

Parola ..... non avrei mai pensato di usare le ombre. Questo ha funzionato perfettamente anche per me per la stessa applicazione.

— Nungster,

4

Per fare ciò puoi seguire questa procedura:

Trasforma il tuo livello in un oggetto intelligente, in questo modo puoi creare più copie del livello che rimarranno automaticamente sincronizzate per quanto riguarda i contenuti
Crea quattro copie di questo oggetto intelligente ( non utilizzando la funzione "Nuovo oggetto intelligente tramite copia", questo renderà gli oggetti intelligenti separati, vogliamo che vengano istanziati qui)
Regola la posizione di ciascuna delle quattro copie, spostandole di un pixel ciascuna nelle quattro direzioni (ovvero una in alto, una in basso, una a sinistra e una a destra)
Raggruppa le quattro copie in un gruppo nella palette dei livelli
Aggiungi un livello di colore solido blu (il colore del tratto), posizionalo sopra il gruppo
Alt + clic sulla linea di separazione tra il gruppo e il livello blu per trasformare il gruppo in una maschera di ritaglio per il livello blu

Risultato:

Livelli folletto

Puoi scaricare il file Photoshop CS6 qui .

Questa tecnica può essere facilmente adattata per includere anche i pixel in tutte e 8 le direzioni semplicemente ripetendo i passaggi precedenti una seconda volta (altri 4 strati) e spingendoli di un pixel in diagonale nelle quattro direzioni diagonali.

— Lasse V. Karlsen
fonte

1

La risposta di Lasse è buona. A seconda della configurazione, tuttavia, un livello di regolazione Posterizza impostato su 2 potrebbe portarti lì in un solo passaggio. Vale sicuramente la pena provare.

Stratificare il tuo file, un colore per strato, ti porterà sicuramente lì usando Posterize.

— Alan Gilbertson
fonte