【SVG】ポリゴン楽しい～★

先週末あたりから、急にハマりだしたポリゴンイラスト。
何とか形になるところまで作ることができたので、作り方も含め公開です。

1. まずはコチラのサイトを一度よく読みます

すると、ポリゴンなんかカッコイイ！って感じで、テンションがあがります。

2. 次にポリゴンにしたい対象物を決めます

今回はなんとなくでクジラにしました。このへんはフィーリングです。

3. 対象物の画像を探します

Yahoo でも Google でもいいので、自分のイメージに一番近い状態の画像を探します。一応個人で楽しむ分には大丈夫だろうということで、Yahoo きっず図鑑のザトウクジラさんをお借りしました。

4. illustrator で画像を取り込み、ポリゴン化します

はい、ぶっちゃけ気合です。

まずは画像を配置します。

なんとなく四角と三角で分割してみます。
この時点で、この案は違和感を感じたのでボツ。

立体を意識しながら、ポリ面を作ります。本来は 3D のワイヤーを考えながらするのかもしれませんが、今回は初のイラストなので色の境目をメインに、面が増えすぎないように気を付けつつ、三角形で構成します。四角形が多いとちょっともっさりした感じになります。

5. Photoshop にパスを取り込み、ぬりえをします

illustrator で出来上がったパスを、Photoshop に取り込みます。
illustrator 上でパスをコピーして Photoshop にペーストでいけました。

パスを1つ右クリックして、選択範囲を作ります。

出来上がった選択範囲を、ぼかし（平均）で塗りつぶします。
この際元絵を塗りつぶしてしまうので、コピーしておくことを忘れずに。

ポリ面が1枚出来上がりました。あとは選択したパスに対して、
選択範囲作成　→　ぼかし（平均）→　選択範囲解除
の一連の動作を繰り返してしてひたすら塗りつぶしてください。
アクションに登録しておくと便利です。

はい、こんな感じになりました。

6. illustrator で最終調整して完成

出来上がった画像を再度 illustrator に取り込んで、それぞれのパスにスポイトツールで色を適用していきます。その後元絵と見比べながら色味を調整して完成です！

今回 illustrator のデータにまでおこしたのは一応理由があって、このデータを SVG として Web に取り込んで何かできないかなーと思ったからです。それぞれのポリ面に全部 ID を振れば、CSS で色々と制御ができてハッピーになれそうな気がします。
既にやっている人はたくさん居るとは思うんですが、やっぱり自分でなんでもやってみたい性分なので、これからこれ使って遊ばせてもらいます♪