イラストをラスタライズする さてさて、用意したのはこの何の変哲もないイラストたち!! ヒーロー的なやつから怪人チックなやつ、そしてファミコンのRPGチックな道具たちを揃えましたーーw こやつらを、 我々アラサー世代が大好きなドット絵にしちゃいましょうw まず最初に ラスタライズをします。 解像度は「高解像度(300 ppi)」にしておけばOK! モザイクオブジェクトを作成 ラスタライズしたデータにモザイクをかけます。 モザイクタイルが正方形になるように「新しいサイズ」や「タイル数」の項目で調整しましょう。 (ちなみに下の画像の場合はほぼ正方形なので、幅・高さのタイル数が一緒です) そんなこんなであっというまにドット絵が完成です!!!タイルの数を変えればもっと細かいドット絵から、大雑把なドット絵まで自由自在です。 簡単なものをちょっとご紹介。 四角いモザイク柄 文字なんかだと分かりやすいので、今回は「DOT DESIGN」という文字に 四角いモザイク柄を加えたいと思います。 ポイントはモノクロで作った後に色をつけること。 主観ですが、色をつけてからラスタライズ・モザイクをかけるよりもキレイです。 丸いモザイク柄 これはとっても簡単!さきほどの「四角いモザイク柄」に「角を丸くする」フィルタを選ぶだけです!! キラキラした星柄 さきほどのモザイク柄をもとに、「パンク・膨張」フィルタを選び、「収縮」するとキラキラした感じになります。 かわいらしい花柄 「パンク・膨張」フィルタを選び、今度は「膨張」にすると花柄にもできますよ。 ビットマップフォントとの組み合わせが最強 ちなみに文字はというフォントを使用しました。 「8bitゲーム機のビットマップフォントのような感じを出せる」フォントだそうです。 可読性が高いビットマップフォントで、JIS第一・第二水準のすべての漢字を収録しているので便利です。
次のドット絵を描こう! ごあいさつ こんにちは! DAIMAです。 私は趣味で5年間ほどドット絵製作に取り組んでおり、 その間に、キャラクターの一枚絵を中心に、 1000枚以上の格闘ゲーム用のドット絵を描いてきました。 ちなみに、プロフィールアイコンのドット絵も自作です。 なぜそんな 苦行枚数を描く必要があったかと言うと、 一時期、 MUGENという2D格闘ゲーム製作エンジンでの キャラクター製作にハマっていた時期があり、 そのグラフィックに使う用途として 大量のドット絵が必要となったからです。 MUGENについての説明は割愛します。 ご興味があれば調べてみてください。 私は幼少時代からどっぷりと ドット絵のゲームに浸かってきた世代であり、 特に、「 MOTHER2」と「 ジョジョの奇妙な冒険 未来への遺産」 の二作からは、相当に大きな影響を受けています。 今回は、その経験の中で学んだ テクニックと、 ドット絵を描く楽しさを伝えられたらと思っています。 内容は、ツール選びと基本的な流れについてが中心です。 主に、ドット絵に興味がある初心者向けの内容となっています。 それではどうぞ。 ドット絵作成ソフトを準備しよう ドット絵を描くにはツールが必要です。 WEB上には、素晴らしいドット絵作成ソフトが 多数公開されています。 ツールごとに機能や使用感の差はありますが、 この記事で扱うのは、どのツールを使う場合でも 役に立つ基本的な内容ばかりですので、 一回試せるだけ試してみて、 ご自身の肌に合うものを選ぶのがベストです。 D-PIXED 無料 1996から存在する、Windows用256色専用グラフィックソフト。 マスクやレイヤなどの基本的な機能が揃っていて、 ドット絵入門に特におすすめのソフトです。 私も長らくこれメイン描いていました。 今回の講座もこちらをベースに進めます。 ただし、最終更新が2000年であり、 機能面も近年のソフトと比べ豊富とは言えません。 また、カラーパレット関連で 動作に不安定な面が少しあり、 総合評価は後続のソフトより落ちます。 機能はシンプルにまとまっていますので、 これからドット絵を描く方の、 はじめの一歩としていかがでしょうか。 EDGE 無料 D-PIXEDより後発のドット絵製作ソフト。 レイヤやマスク機能はもちろんのこと、 オニオンスキンやアニメーション機能も付属します。 私はD-PIXEDに慣れすぎていたため、 こちらのソフトはたま~に使ってみる程度でした。 製作者様は現役で更新されていますので、 今から始める方にはこちらの方がおすすめかも。 また、タブや画像ビューアなどの機能が追加された 有料の「EDGE2」も存在します。 D-PIXEDやEDGEを凌駕する豊富な機能を持ち、 特にGIFアニメーションの作成に力を発揮します。 最終更新も2015年末 記事執筆時点 であり、 今からドット絵を始めるならかなりおすすめです。 ただし、すべての機能を使うには 有料版の購入が必要になります。 Aseprite 有料 mac環境で動くドット絵作成ソフトを探して出会った 個人的最強のドット絵作成ソフト。 詳しくは以下の記事で解説していますので、 ぜひご覧ください。 本当におすすめですよ。 実際にドット絵を描いてみる それでは、実際にドット絵を描いてみましょう。 いきなりドット絵を描き始めても良いのですが、 慣れないうちは、下絵や参考にする絵を 事前に準備しておくことをおすすめします。 今回の題材 今回は、こちらのジョジョの奇妙な冒険 第三部のアニメ公式絵を元に、 第三部主人公空条承太郎のドット絵を 描いてみます。 キャンバスを準備する お絵かきソフトを立ち上げたら、 まずはキャンバスを作成しましょう。 また、より高解像度のドット絵を作成したい場合は、 それに応じてキャンバスサイズも大きく設定します。 線画を描く 下絵を見ながら、線画を作成します。 この時、目などの特徴的なパーツから 作り始めるのがおすすめです。 D-PIXEDでは、フリーハンドで引ける自由曲線ツールか、 キッチリとした直線を引く直線ツールを使います。 今回は、ほぼ全て直線ツールのみで作成しました。 ベタ塗りをする 線画を作成できたら、ベタ塗りを行います。 パレットにRGBカラーで色を作りましょう。 D-PIXEDでは、ぬり潰しツールが役立ちます。 これは、閉じられた範囲を一気に着色するツールで、 塗りつぶし作業を一気に効率化できます。 パレットの管理をする 色を塗る作業に入ったところで、 パレットの存在について触れておきます。 ドット絵の保存形式であるbnpやgifは、 256色のパレットでカラーを管理しています。 256色というと、十分余裕がある数字に思えますが、 細かいグラデーションを作っていくと あっという間に足りなくなる数字であり、 使用する色は慎重に選ぶ必要があります。 その制約もまた、ドット絵の面白さですが 系統の近い色は一色にまとめたり、 後述するアンチエイリアスを駆使して 無駄に色数を増やさないことが大切です。 また、グラデーションなどの同系統の色は パレット内の近い位置に纏めて整理すると効率的です。 ツールによっては、パレットの自動整理機能も ありますので、有効活用していきましょう。 陰影をつける ベタ塗りが終わったら、陰影をつけます。 陰影を描くコツは普通に絵を描く場合と同じで 光源の位置と対象の質感を意識することです。 影を付ける場合は、最初に濃い色を作って、 あとからその中間色を補完するように 色を作っていくとやりやすいです。 グラデーションを作る最も簡単な方法は 基本色をもとに、一定の割合で RGBの数値を推移させていくことです。 色の感覚に慣れないうちは、手本となる絵を持ってきて、 スポイトで色情報を真似すると良いでしょう。 アンチエイリアスについて 最後に、ドット絵のギザギザを解消する アンチエイリアスについても簡単に解説します。 アンチエイリアスとは、 色と色の境目に中間色を置いて、 ドットのギザギザを目立たなくする技術の事です。 上の画像は、作成したドット絵を拡大したものです。 このままではギザギザが目立つので、 アンチエイリアスを利用して 目立たなくしてみましょう。 できあがり! 陰影をさらに詰めて出来上がりです。 完成後は、絵を回転したり反転させたりして、 デッサンの崩れや違和感がないか 最終確認しておくとなお良しです。 その他制作物紹介 今までに私が描いたドット絵を 他にもいくつかご紹介します。 ジョジョばっかりですが… 【ツェペリ男爵】 【エシディシ】 【ディアボロ】 【プッチ神父】 【ヴァレンタイン大統領】 【東方定助】 【プロシュート兄貴】 必殺技のカットイン用に作成。 お手本にしたい、超絶技巧のドット絵サイト 私なんかはキャラ一人描くだけで精いっぱいですが、 世の中にはドット絵職人ともいうべき凄い人がいるもので、 ネット上に多く素晴らしい作品が公開されています。 pixeljoint ハイクオリティなドット絵が集まる海外フォーラム。 Galleryページから人気の作品を調べることもでき、 人気上位には、ドット絵とは信じられないほど ハイクオリティな作品が並びます。 Pixel Art Gallery 秀逸なドット絵イラストを集めた、 Tumblurのサイト。 センスのいいドット絵が たくさん掲載されています。 1041uuu ドット絵で、動く抒情的な風景イラストを 多く制作されている1041uuu氏のサイト。 空気感を感じさせる巧みな風景描写と、 穏やかで心癒されるアニメーションが特徴です。 まとめ ドット絵製作講座、いかがでしたでしょうか? 今回描いた絵はアニメ風のはっきりしたタッチでしたが、 もっと柔らかいタッチが好みの方は、 主線の色を薄めてみたり、 グラデーションをより細分化すると良さげです。 また、ドット絵はパラパラ漫画の様に 複数枚の絵を組み合わせて簡単にGIFアニメが作れます。 自分の描いた絵が動くという感動が味わえますし、 ある程度描きなれたなら そちらにもチャレンジする価値アリですよ。
次の『あつまれ どうぶつの森』では早い段階にマイデザイン作成機能が使えます。 過去作をプレイした方は早速ドット打ちに時間を溶かしているのではないでしょうか? 今作からプレイした方も「マイデザインで島を彩りたい! マイデザインでをリメイクに使いたい!」と思うはず! 夢は無限に広がりますが、いきなりドットでデザインを起こせと言われてもどうしたらいいかわからないですよね。 そこで「今から始めるドット打ちのテクニック」を、筆者なりの方法でお伝えできればと思います。 『あつ森』のマイデザインは、 ドットがなめらかになる仕様になっており、意図していない形になってしまうことがあります。 実際にドットを打ちながらどう対処したのかも言及していますので、ぜひ参考にしてください。 確かにうまい人の作品を見て自分もこうなりたいと思うのは大事なことですが、いきなりそこを目指すのではなく、小さい目標を立てていくことが大切です。 そこで初めてのマイデザインに提案するのはオリジナルの 「かべがみ」です。 なぜかべがみなのか、以下に理由を挙げます。 ・実際の壁紙を参考にできる。 ・シンプルなほうが映える。 ・小さい柄でもそれっぽくなる。 ・曲線を使わずに作ることができる。 では作るデザインをイメージしていきましょう。 色数は柄を考えて、最高3色くらいから始めると吉。 いきなり凝った色を使おうとするのではなく、既存の色を使いましょう。 「まとめてカラー変更」で使いたい色があるパレットを選んで、「すべて塗りつぶし」ツールで全体を塗りました。 色がつくだけでイイ感じになった気がしませんか? まず好きな色を塗って想像力を膨らませるとよいかも。 次に模様を入れていきます。 模様は地の色よりやや濃い色を選択し、同じ系統の色で全体の統一感を出します。 柄はいきなり大きいものを描こうとするのではなく、小さくてシンプルなものにしましょう。 四角を並べるだけとか、縦線を引くだけとか、それだけでOK。 最初は柄に凝らず、 修正しやすいものにするのがベスト。 ここでは四角を組み合わせて花柄を作っていきます。 さて、ここで出来上がりイメージを確認。 なめらかに見えるよう自動的に補正がかかるようになっているのです。 なめらか補正を意識しながら、四角の中央に黄色を入れて、花っぽくします。 これで完成です。 実際に壁に貼ってみました。 雰囲気が出たのではないでしょうか? 色を変えるだけでこんなにも部屋の雰囲気が変わります。 元のデザインを残しておきたい場合は、Yでコピーしておきましょうね。 色数もできれば少ないほうがGOOD。 色選びに手間取ると、そこで挫折しかねません。 では描くモチーフを考えます。 筆者は目の前にあった「どうぶつの森」ハンドタオルを参考に、「ベル袋」を書くことに決めました。 オブジェクトを描くときは空想で描くのではなく、 参考になるものを手元に置くとよいでしょう。 「ベル袋」を選んだ理由はいくつかあります。 ・暖色系の色でまとまっていて、色数が少ない。 ・そのためスポイトで色を拾いながら作業がしやすい ・曲線の勉強になる。 ・「円ツール」と「星スタンプ」を使って楽ができる。 ・いろんなところに貼ったら絶対楽しい。 今回は黄色・オレンジ・赤・茶色を使うので、それらが入ったパレットを選択。 もし全部の色がなくても個別に色を調整できるので大丈夫。 より多くの色があるパレットを探しましょう。 画面全体にベースの色を乗せます。 ベル袋は布を縛った部分、ベルが詰まった部分の2つの要素で構成されているので、「四角ツール」を使って青色で大まかなアタリをつけます。 いきなり形を描こうとするのではなく、 面でとらえると描きやすいです。 次に「円ツール」を使い、アタリに沿って楕円を描きます。 袋を縛った部分は「ペン」で描いていきます。 アタリはあくまでアタリなので、とらわれすぎに注意。 「L」+「R」のスポイトや、「-」のやり直しを駆使して形を作りましょう。 できたら「塗りつぶし」ツールで内側を塗ります。 青色のアタリを消して、形を整えます。 ベル袋は下に重心があるので、楕円の上側を少し削り下を増やしました。 左下のキャンバスを見ながら形を整えます。 オレンジ色を選択し影を入れます。 それっぽくなってきましたね! 袋を縛る赤い紐を描きます。 ここは1つ1つドットを打ちながら確認していきましょう。 さて、ここで出来上がりイメージを確認すると、 「なめらか補正」がかかっていることがわかります。 赤色同士がくっつきあってしまったのです。 そこでちょっと一工夫。 赤と赤の間に影で使ったオレンジ色を入れます。 こうすると、なめらか補正でくっついた赤色が離れて表示されるのです。 思ったような形にならないときは、 間に別の色を入れて出来上がりを確認するとよいでしょう。 詳しくはをご参照あれ! いよいよ後半戦。 縛った部分の影を入れて星マークを入れます。 星マークは「星スタンプ」を使って楽しちゃいましょう。 参考にした絵と見比べると星の色が明るすぎたので個別に色を補正します。 まだ使っていない色を選択し、星マークを塗りつぶします。 次にツールの「各カラー変更」を開き、「いろあい・あざやかさ・あかるさ」を調整します。 同じ要領で地面に影をつけます。 ものすごく細かいところですが、影が薄い場合と濃い場合で、赤丸で囲んだ部分の1ドットの見え方が異なります。 これも 「なめらか補正」による見え方の変化と言えるでしょう。 どちらがイメージに合っているか調整しつつ、仕上げていきます。 この段階でもし「全体的にあと数ドット左にずらしたい!」と思ってしまっても大丈夫。 本作から実装された 「全体シフト」を使って位置を調整できます。 最初から位置にこだわり過ぎずに気楽に描くとよいでしょう。 名前を付けて完成です! 試しにお部屋のゆかに貼ってみました。 出来たマイデザインを元に遊びましょう! コピーして背景の色を変えてかべとゆかに貼りました。 金の亡者部屋! 背景を透明にして、影の付き方を修正して…… タイルマットにしました!一つのマイデザインでいろんな遊び方ができます! 《みかめ》.
次の