ピクセルアートガイド：Photoshop、OS X Zoom、Pixelfariでピクセルアートを作成する3つの方法
8ビットのフラッシュバックNES風ピクセルアートは、今や大流行。The IncidentやSword & Sworceryといったゲームでも、ウェブ上のアバターでも、幅広く活用されています。美しいピクセルアートがどのように作られているのか、そして自分でも作れるのか疑問に思っている方のために、ほぼ瞬時にピクセルアートを作るためのヒントをいくつかご紹介します。OS Xのズーム機能「Pixelfari」を使い、Photoshopでレトロなピクセルアートを作成したり、他の方法で作成した結果をクリーンアップしたりする方法もご紹介します。
1) Mac OS Xのズーム機能を使って画像をピクセル化し、即座にピクセルアートを作成する
おそらくご存知でしょうが、Controlキーを押しながらトラックパッドを2本指で上下にスワイプすると画面が拡大表示されます（または、外付けマウスの場合はControlキーを押しながらスクロールホイールを使用します）。OS Xのズームツールでアンチエイリアシングを無効にすると、この機能を使ってあらゆるものをピクセル化した画像にすることができます。やり方は以下のとおりです。
- Command+Option+\を押すと、画面ズーム時のアンチエイリアシングが無効になります。
- 即座にピクセル化したい画像の上にマウスカーソルを置きます
- Ctrl+ズームで画像を拡大するとピクセルが大きくなるのが分かります
- Command+Shift+3で画面全体のスクリーンショットを撮ります
このテクニックを使用して、次のようなピクセルアートの MacBook をすぐに作成しました。
必要に応じて、この記事で紹介したPhotoshopテクニックを使ってPhotoshopで画像をクリーンアップし、ピクセル単位で正確に編集することもできます。この方法のヒントをいくつかご紹介します。
- ベース画像は小さい方が良いです。画像からアイコンを作成し、それを拡大表示するのは素晴らしいことです。
- 一般的にコントラストが高いほど良い
- さまざまなズームレベルを試す
画像がピクセル化された完全な状態でキャプチャされるように、全画面のスクリーンショットを撮ることも重要です。
2) Photoshopでピクセルアートを描くための設定のヒント
Photoshop をお持ちの場合は、いくつかの設定を調整して、ピクセル アートの描画と編集をより優れたものにすることができます。
- Photoshopで画像を拡大縮小する方法を変更するには、「画像補間」設定を「ニアレストネイバー（ハードエッジを保持）」に調整します。
- 設定 > ガイド、グリッドスライスとカウント > 1×1 でグリッドを有効にします。
- 鉛筆ツールを1ピクセルの直径、100%の硬度に適切に設定してください。
- 複数のズームレベルを使用して、拡大したピクセル表示と希望する最終解像度の両方を実現します。
Photoshop の設定は次のようになります。
これらの Photoshop テクニックは、iOS 開発者の Brandon Trebitowski 氏によるものです。ピクセル アートのデザインに少しでも興味がある場合は、この件に関する彼のブログ投稿をぜひ読んでみてください。BrandonTreb.com で読むことができます。
3) Pixelfariでインスタントピクセルアートを作ろう
ピクセルアートの作成をスピードアップし、ほぼ瞬時にピクセルアートを作成するためのもう1つの方法は、8ビットウェブブラウザ Pixelfari を使うことです。Pixelfari は開発者 Nevan Morgan が開発したもので、こちらからすぐにダウンロードできます。
基本的に、Pixelfariに任意の画像をドラッグするだけで、自動的にピクセルアートとしてレンダリングされ、Pixelfariウィンドウのスクリーンショットが撮られます。完璧ではありませんが、Brandonが紹介した上記のテクニックを使って微調整できる良い出発点となります。
以下は OSXDaily のロゴを一切編集せずに Pixelfari に投入したもので、これがどのように機能するかを示す非常に良い例です。
出力をクリーンアップしたい場合は、前述の Photoshop のヒントを使用したり、OS X のズーム機能を使用して Pixelfari で結果をハイパーピクセル化することもできます。
もちろん、他にも方法はありますが、素早くピクセル化するにはZoomとPixelfariのテクニックが効果的です。また、Photoshopの設定は、ゼロから描いたり、ピクセル化された画像をクリーンアップしたりするのに最適です。MSPaintのクローンであるPaintbrushを使うこともできますが、このアプリでは価格が手頃ではありません。最後に、Natomicという便利な参考資料があります。シェーディング、ライティング、線の使い方など、一般的なヒントが載っています。情報は古いですが、ピクセルは古くから存在しているので、ここで紹介されているテクニックは今でも非常に役立ちます。
