Wie kann ich in Photoshop einen perfekten Stricheffekt mit scharfen Pixeln erzielen?


16

Ich arbeite an Pixelkunst im Retro-Stil für ein Videospiel. Ich möchte in der Lage sein, einen Rand um ein Sprite hinzuzufügen, aber ich brauche es, um scharf und "pixelgenau" zu sein. Die Verwendung des Strich-Effekts von Photoshop scheint die naheliegende Wahl zu sein, aber leider führt Photoshop ein ausgefallenes Anti-Aliasing durch und fügt zusätzliche Pixel hinzu, wenn ich sie nicht möchte:

Bildbeschreibung hier eingeben (Bild auf 400% vergrößert)

Der obere Bildrand wurde mit dem Photoshop-Strich erstellt (Größe: 1 Pixel, Position: Außen).

Der untere Bildrand wurde manuell mit dem Stiftwerkzeug gezeichnet.

Der unterste Effekt ist der, den ich anstrebe, aber ich versuche ihn zu erreichen, ohne ihn manuell mit dem Stiftwerkzeug zeichnen zu müssen. Gibt es eine Möglichkeit, den Stroke-Effekt dazu zu zwingen, sich so zu verhalten? Oder gibt es eine andere Methode, mit der ich diesen Effekt automatisieren könnte?


Haben Sie Zugang zu Feuerwerkskörpern? Es ist ein besseres Werkzeug für diese Art von Arbeit. Abgesehen davon, dass ich mich bei dieser Auflösung der Arbeit überhaupt nicht um Striche gekümmert hätte und sie einfach mit dem Bleistiftwerkzeug gezeichnet hätte.
DA01,

Verwenden Sie das Stiftwerkzeug. @ DA01 Adobe hat Fireworks leider getötet.
Billy Kerr

@ BillyKerr Ja, es scheint, dass Software-Ratschläge nicht gut altern. :)
DA01

Antworten:


13

Ein sehr einfacher Weg, um einen scharfen Strich zu erzielen, ist ein Schlagschatten-Ebenenstil (yep, das lesen Sie richtig).

Scharfer Strich in Photoshop

Die Top-Goomba ist Ihr Beispiel. Das untere Goomba ist das gleiche Bitmap, aber mit dem als Schlagschatten-Ebenenstil hinzugefügten Strich maskiert. Der Trick, um es richtig zu machen, ist die benutzerdefinierte Konturkurve.

Benutzerdefinierte Konturkurve

Dasselbe kann mit dem Stil der äußeren Glühschicht gemacht werden. Und jetzt können Sie dies einfach auf jede Ebene anwenden.


Ist die Winkeleinstellung wichtig?
Horatio

4
Wenn der Abstand 0 ist, spielt der Winkel keine Rolle.
Marc Edwards

Ziemlich clevere Lösung für die Verwendung von Strokes! Das funktioniert wirklich gut, ich habe nie daran gedacht, Konturen zu verwenden!
Bigp

Word ..... Ich hätte nie gedacht, Schlagschatten zu verwenden. Dies funktionierte auch für mich bei der gleichen Anwendung perfekt.
Nungster

4

Um dies zu tun, können Sie wie folgt vorgehen:

  1. Verwandeln Sie Ihre Ebene in ein intelligentes Objekt. Auf diese Weise können Sie mehrere Kopien der Ebene erstellen, die in Bezug auf den Inhalt automatisch synchron bleiben
  2. Erstellen Sie vier Kopien dieses intelligenten Objekts ( ohne die Funktion "Neues intelligentes Objekt über Kopieren". Dadurch werden separate intelligente Objekte erstellt. Wir möchten, dass sie hier instanziiert werden.)
  3. Passen Sie die Position jeder der vier Kopien an, indem Sie sie jeweils um ein Pixel in die vier Richtungen verschieben (dh eine nach oben, eine nach unten, eine nach links und eine nach rechts).
  4. Gruppieren Sie die vier Kopien in einer Gruppe in der Ebenenpalette
  5. Fügen Sie eine blaue Ebene (die Strichfarbe) hinzu und positionieren Sie sie über der Gruppe
  6. Klicken Sie bei gedrückter Alt-Taste auf die Trennlinie zwischen der Gruppe und der blauen Ebene, um die Gruppe in eine Schnittmaske für die blaue Ebene zu verwandeln

Ergebnis:

Schichten Sprite

Sie können die Photoshop CS6-Datei hier herunterladen .

Diese Technik kann leicht angepasst werden, um auch Pixel in allen 8 Richtungen einzuschließen, indem die obigen Schritte ein zweites Mal wiederholt werden (weitere 4 Schichten) und ein Pixel diagonal in den vier diagonalen Richtungen verschoben werden.


1

Lasses Antwort ist gut. Abhängig von Ihrem Setup können Sie jedoch mit einer Einstellungsebene für die Postergröße von 2 in einem Schritt dorthin gelangen. Es ist definitiv einen Versuch wert.

Wenn Sie Ihre Datei mit einer Farbe pro Ebene überlagern, werden Sie mit Posterize auf jeden Fall dorthin gelangen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.