ポリゴンスタイル・ローポリイラストのデザイン作成方法・参考サイト集

藤田


ポリゴンスタイル・ローポリイラストのデザイン作成方法・参考サイト集

初めまして、新入社員のデザイナーの藤田です。

2013年最も目立ったWEBデザインのトレンドといえばフラットデザイン。
そのフラットデザインと相性がよく、徐々に目にするようになったポリゴンスタイルをご存知ですか?

どのように作るのかと疑問に感じている方も多いと思うので今回はポリゴンスタイルの作成方法をご紹介致します。

ポリゴンスタイルの作成方法

使用ソフトについて

もちろんPhotoshopやIllustratorでもポリゴンスタイルを作成する事は出来ますが、時間がかかってしまうので今回は簡単に写真をローポリイラストに変換してくれる『triangulator』を使用します。


『triangulator』の使用イメージはこちらをご覧下さい。

どうですか?簡単そうですね!

triangulatorの使用方法

triangulatorの紹介ページの一番下、「You can download sources here.」からダウンロードしたファイルの中身にある「index.html」をモダンブラウザにドロップしてください。
すると、

使用画像2
このような画面が開くので、「Drop your bitmap here」と描いてある枠の中に変換したい画像をドロップしてください。
 

使用画像3
一番右の「Randomly」リンクをクリックするとパスが出現!
 

使用画像4
一番左のバーをドラックすると透明度を調整出来るので、画像の境界線に沿ってポイントをクリックしたり、ドラックすると徐々にローポリイラストになっていきますね。

やり直す時は「Delete All Vertices」をクリック。
 

使用画像5 画像が完成したら .svg形式で保存できます。「Export」リンクをクリック。表示された「this link」テキストを右クリックして、「リンク先を保存」します。

保存したsvgファイルをIllustratorで開くと一つ一つのパスとなっているので、色や形の調整を行ったら完成です。
 
使用画像1
どうでしたか?

ポリゴンスタイルを取り入れているサイト

それでは、実際にポリゴンスタイルを取り入れている参考サイトをご覧下さい。

★Made by Vadim★

使用画像6

http://madebyvadim.com/

MIDORI AOYAMA

使用画像7

http://midoriaoyama.jp/

株式会社Gear8

使用画像8

http://gggggggg.jp/

BRAND TOKYO

使用画像9

http://brandtokyo.net/

Nobuaki Honma

使用画像10

http://rbv.me/

まとめ

やはりポリゴンスタイルを取り入れているサイトはまだまだ少なく、前衛的なイメージの物が多いですが、アイキャッチや画像の背景に敷いてみたりする等の使い方をしてみると面白いかもしれません。
是非皆様も挑戦してみてください。

藤田
この記事を書いた人
藤田

デザイナー

関連記事