Illustratorでドット絵&レゴブロック風 | 3倍早くなるためのDTP講座

3倍早くなるためのDTP講座

DTPの作業を早くするためのテクニックを綴っていこうと思っています。




24時間Illustratorイベントも無事終わりましたね。

いやいや見応えのあるイベントでした(まだ全部観られていませんが)。まだ見ていない人は要チェック!

Ai-1ファイトの優勝者はまだ見ていない人のためにネタバレしませんが、納得の完成度でした。素晴らしい! パチパチパチパチ。

他にも三階ラボさんのお話は、私の効率化に対する考え方とベクトルが一致していてとても面白かったです。ただ、極めすぎていて私ですら若干引き気味になったところも参考になりました^^

サキミタマ先輩は、AdobeからIllustrator愛を試される試練を乗り越えるという感動作。そこにいるのにポエム割愛など笑いもあり。

まだチラ見しかしていませんが鱗粉あすさんのペンツールさばきに驚愕、あれだけのイラストをライブで完成していくなど見所満載。

私もあかつきさんのお声がけでネタ出しなどちょっとだけお手伝いするつもりでしたが、出演者の皆様はIllustratorのプロフェッショナルばかりなので、実際はほとんど何もしていません^^

せっかくなので、そのときにちょっと考えたネタを再構築して公開いたします。
題して「どっと絵を描いてそれをブロック風にするー」です。

↑タイトル画像の拡大図

いや、どっーと絵は描きません、ドット絵です。ファミコンとか‥知らない?
そう、パックマンとかマリオとか。



ちがう、パックマンといったらコレ↓、それ↑じゃない。




えっと、スーファミ、ゲームボーイ、メガドラ…、はあ、知りませんか。

PCのアイコン!そうっ!それ、どっとえ…。



…えー、ピクセル数の少ない画像、通称「ドット絵」を作ります。







●まずドット絵を描きまーす

ドット絵は専用エディタを使うと簡単ですが、Illustrator上で書けるんですよ、ベクトル描画で。だから何だと言われても困りますねえお客様。

と、ここで24h Illustratorで偶然にも高橋としゆきさんがエディタを作るのに最適なテクを披露していたので盗…、お借りしましょう。

①適当に正方形を描く




②オブジェクト>パス>段組設定で分割数を決める。ここでは16×16にしておく。後々ブロックを作る際に数値合わせをしたいので、1コマを8mmにしておく


※手元のCS5では段組のUIに不具合がありますが、CS6では改善されています。



③塗りを無しにしてシフト+L(ライブペイントツール)でクリック



そう、段組だとライブペイント化のコマンドが不要でドット数を指定できる。いいなこれ。 大ざっぱ&古い考えの私は思いつきもしませんでした(私のネタでは適当に直線をひいて適当数複製してから回転複製するというおおざっぱなもの)。

塗りはスウォッチライブラリから塗ることもできますが、色は後で調整できるので塗り分け以外はあまり神経質にならなくて大丈夫。


④ドット絵が出来たらライブペイントを拡張

↑おことわりしておきますが、似てるけどアイツじゃないよ


⑤線を1本選んで共通>線幅で同一線を選択して消去



これで、ドット絵完成! どーです早いでしょ。

もし元絵があるようでしたらこちらの記事を参考にドット化しましょう。
ただしパスファインダーで合体はしないでください。



●ブロック風に加工しまーす

①全選択してグループ解除×2

②効果>形状に変換>長方形で値を追加に-0.1mmずつ




③レイヤーパネルのターゲット(○)をクリック

④効果>3D>押し出しで角度を調整する。厚みはレゴに合わせて9.6mmとする。このとき遠近はつけない。

↑イイ感じの角度に調整する




⑤レイヤーを複製し元レイヤーをロック。




⑦全選択して効果>形状に変換>楕円形で高さと幅を調整する。レゴに合わせて値を指定で5mmずつ。



↑ポッチが長い


⑤レイヤーターゲット(●)をクリックしてからアピアランスパネルの押し出しの奥行きを1.7mmに減らす

↑こんな感じですよね



⑥適当な位置に移動して完成(このアバウトさが嫌いだけど仕方ない)


・色替え
使用カラーをグローバル化すれば、スウォッチの数値を変えるだけで色を変更できます。

↑青スウォッチをタブルクリックして




完成度を上げるならば、ここから拡張してグラデかけたりいろいろやらなければなりませんが、そこは各自でがんばりましょう。

一連の作業を動画にしましたので参考にしてください。





さて、完成まで駆け足で説明しましたが、構造をわかっていないと修正などができません。ドット絵までは大体理解できていると思いますが、その先はアピアランスの知識が必要になります。

でも力尽きたので解説は次回そのうち。