永遠に不滅なアート!Photoshopで下絵からドット絵を描こう!

超初心者の僕に、Photoshopの画像の切り抜きの次に与えられた課題は

ドット絵。

古くはドンキーゴングやマリオなどのファミコンゲームでお馴染みのアレ。

当時は16ビットという制限の中で作られる生きたキャラクター達は、ドット絵アートとも呼ばれて今でも愛されていますね。

写真からドット絵を描いていく訳ですが、

「自分で調べてやってみろ。」

のボスの言葉に従い、はいはい、自分でいろいろとやり方を検索しながらやってみましたよ。

Photoshopでドット絵を描くには?

ドット絵の描き方、検索するとたくさんヒットしますが、参考にしたのはこちらの2つの記事。

拡大してもキレイなドット絵を作成する
【Photoshop講座】「ドット絵」とは、パソコン上で使われるゲームキャラクターやアイコンなどを表す絵です。ドットの集合体で構成されているのが特徴で、小さいものでは、16 × 16 ピクセルという限られたマス目だけで表現されています。 優れたドット絵の手法をデザインに取り入れたいと思うことも多く、そのときに...
意外と簡単!photoshopでドット絵を描く方法 | うぇぶのおべんきょう
Webや写真、3DCCGについて学んだこと・知ってることを書いていく授業用サイト。

程よい設定とわかりやすい説明です。

Photoshopでドット絵を描く時に重要なポイントは、主に環境の設定です。

適切な設定ができたら、16ビットなら16ピクセルの正方形に、32ビットなら32ピクセルの正方形に、1ピクセルずつ色を塗っていくだけ。

理屈としては簡単ですね。

Photoshopでドット絵の描く設定1

今回は64ビットの車の絵を、下絵として写真を使って描いてみる事にしました。

なので初期設定を64ピクセル四方に。

カンパスサイズは適当なサイズにしておいても64ピクセルの正方形のカンパスが作られます。

64ピクセル四方の白いキャンバスを作ったら、下絵として使う画像を配置します。

画像を配置する方法はファイルメニューから「埋め込みを配置」ですね。

ドット絵を描くのに必要な設定2

なるほど、下絵用に配置した画像も64ビットになるのか…

(その方が色も塗り分けやすいかな。)

ここから1ドット毎に色を塗るドット絵を描くために必要不可欠な設定として、グリッドを表示させましょう。

メニューバーの表示→表示・非表示→グリッドにチェック。

です。

そしてペンツールの設定を1ピクセルにします。

これでドット絵の準備は整いました。

1ピクセルずつ色を塗っていこう!

車の画像レイヤーを50%ぐらい透明にして、その上に新規のレイヤーを作りました。

スポイトツールを使って写真から色を抽出したりしながらピコピコ…

1ドットずつ塗り潰していきます。

この作業で何色使うか?とか、どこまで塗ってそれっぽい形にするか?とかのセンスが必要ですね。

64ビットの1つの絵を描くのには、5色ぐらいが良いかと思います。

時々、下絵の画像レイヤーを非表示にして塗れてないところやドット絵としてのバランスをチェックします。

車のドット絵ができてきましたね。

背景に違う色を置いておく方がわかりやすいかも。

初めてのドット絵の完成!

できたドット絵がこちら。

か、かわいい!

自分で言うのもなんですが、初めてにしてはかわいい車のドット絵が描けました。

まとめ。

まだまだ修正の余地もありますし、

使った色はたったの5色!

という幼稚な作品ですが、1度描いてみる事によって課題も見えてきました。

意外と簡単ですね。

ボスの言うように、Photoshopの使い方は自分で調べてやってみるのが良い!

とはあまり思いませんね…

教えてもらった方が絶対早い!と思いますが、同じ境遇の人(なんて居ないか。)のお役に立てば幸いです。

1年目でも2年目以降も!Adobe CCが安く使えるおすすめランキング
プログラミングの通信講座デジタルハリウッドのAdobeマスター講座

デジタルハリウッドの「Adobeマスター講座」は、クリエイティブに必須のAdobe Creative Cloudを学生・教職員個人向け価格の年間36,346円(税込39,980円)でお使いいただけるお得なパッケージプランです。
デジタルハリウッド約20年の教育ノウハウに基づいて制作された基礎動画教材≪46時間≫と、
12ヶ月版のAdobe Creative Cloudがセットになりました。デジタルハリウッドでアドビアプリケーションの基礎をマスターできます。

アドバンスクールオンライン|Adobe通信講座

アドバンスクールオンラインの『オリジナル通信講座セット(Adobe Creative Cloud 学生・教職員個人向けライセンス付き)』で、2年目以降の継続でもでも学割価格で購入できてお得です。
11種類のオリジナル通信講座付きで、Adobeのソフトの基本的な使い方を学べます。

ヒューマンアカデミー通販『たのまな adobe』講座付き

Adobeベーシック講座は、「画像を切り抜きたい」「動画にBGMを入れたい」「ロゴを作りたい」「ワイヤーフレームを作りたい!」など、Adobeアプリケーションの”ああしたい、こうしたい”を叶える機能の使い方を動画教材でわかりやすく解説。
プロの講師が名刺やYouTubeサムネイルの作り方をレクチャーするから、機能の活用方法を実践的に学習することができます。
全20時間の動画教材で、趣味から一歩踏み出したAdobeアプリケーションの使い方を習得できます。

Adobe
nabelog

コメント