Photoshopでシャープなピクセル完璧なストローク効果を実現するにはどうすればよいですか?


16

ビデオゲームのレトロスタイルのピクセルアートに取り組んでいます。スプライトの周囲に境界線を追加できるようにしたいのですが、シャープで「ピクセルパーフェクト」である必要があります。Photoshopのストロークエフェクトを使用するのは当然の選択のように見えますが、残念ながらPhotoshopはいくつかの派手なアンチエイリアシングを行い、不要な場所に余分なピクセルを追加します。

ここに画像の説明を入力してください (画像を400%に拡大)

上部の画像の境界線は、Photoshopのストローク(サイズ:1ピクセル、位置:外側)を使用して作成されました。

下の画像の境界線は、鉛筆ツールを使用して手動で描画されました。

一番下の効果は私が望んでいるものですが、私は鉛筆ツールで手動で描画することなく達成しようとしています。ストローク効果を強制的にこのように動作させる方法はありますか?または、この効果を自動化するために使用できる別の方法はありますか?


花火にアクセスできますか?これは、このタイプの作業に適したツールです。仕事のこの解像度のために、私はまったくストロークを気にせず、単に鉛筆ツールを使用してそれを描くことを除けば。
DA01

鉛筆ツールを使用します。@ DA01アドビは、残念ながらFireworksを殺しました。
ビリー・カー

@BillyKerrはい、ソフトウェアのアドバイスは古くないようです。:)
DA01

回答:


13

シャープなストロークを実現するための本当に簡単な方法は、ドロップシャドウレイヤースタイルを使用することです(そう、正しく読みます)。

Photoshopのシャープストローク

上のGoombaはあなたの例です。下部のGoombaは同じビットマップですが、ドロップシャドウレイヤースタイルとして追加されたストロークでマスクされています。それを正しくするための秘customは、カスタムの輪郭曲線です。

カスタム輪郭曲線

外側のグローレイヤースタイルでも同じことができます。そして、これを任意のレイヤーに簡単に適用できます。


角度設定は重要ですか?
horatio

4
距離が0の場合、角度は関係ありません。
マークエドワーズ

ストロークを使用するための非常に賢い回避策!これは非常にうまく機能しており、輪郭の使用を考えたことはありません!
bigp

単語.....ドロップシャドウを使用することを考えたことがなかったでしょう。これは私にとっても同じアプリケーションで完璧に機能しました。
ヌングスター

4

これを行うには、次の手順を実行できます。

  1. レイヤーをスマートオブジェクトに変換します。これにより、コンテンツに関して自動的に同期を保つレイヤーの複数のコピーを作成できます。
  2. このスマートオブジェクトのコピーを4つ作成します(「コピーによる新しいスマートオブジェクト」機能を使用せずに、個別のスマートオブジェクトを作成します。ここでインスタンス化する必要があります)
  3. 4つの方向(つまり、1つ上、1つ下、1つ左、1つ右)に1ピクセルずつナッジすることにより、4つのコピーのそれぞれの位置を調整します。
  4. レイヤーパレットで4つのコピーをグループにグループ化する
  5. 青(ストロークカラー)の単色レイヤーを追加し、グループの上に配置します
  6. Altキーを押しながらグループと青いレイヤーの間の区切り線をクリックして、グループを青いレイヤーのクリッピングマスクに変更します。

結果:

レイヤー スプライト

ここからPhotoshop CS6ファイルをダウンロードできます。

この手法は、上記の手順を2回(別の4層)繰り返し、4つの斜め方向に1ピクセルずつ斜めにナッジングするだけで、8方向すべてのピクセルを含めるように簡単に適用できます。


1

ラッセの答えは良いです。ただし、設定によっては、2に設定されたポスタライズ調整レイヤーを使用すると、1ステップでそこに到達する場合があります。それは間違いなく試してみる価値があります。

レイヤーごとに1色ずつファイルをレイヤー化すると、Posterizeを使用して確実にそこに到達します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.