CATEGORY
SVG
【SVG】ポリゴン楽しい~★

1,616 PV
先週末あたりから、急にハマりだしたポリゴンイラスト。
何とか形になるところまで作ることができたので、作り方も含め公開です。
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 で色々と制御ができてハッピーになれそうな気がします。
既にやっている人はたくさん居るとは思うんですが、やっぱり自分でなんでもやってみたい性分なので、これからこれ使って遊ばせてもらいます♪
CATEGORY : SVG