CATEGORY

SVG

SVG】ポリゴン楽しい~★

POLYGON

1,616 PV

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

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

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

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

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

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

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

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

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

illustratorに取り込んだ状態のイラスト

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

 

色の具合を見ながらパスを作っていく

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

 

よし、このラインでいこう!

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

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

パスをPhotoshopに取り込む

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

 

パスから選択範囲を作成

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

 

選択範囲を平均でぼかす

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

 

ポリゴン面が一枚完成

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

ぼかし塗り完了

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

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

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

完成図

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

 

CATEGORY : SVG

TAGS : | |

GO TOP