去年あたりから、ポリゴンスタイルデザインというのが流行っているらしいです。
ホームページを作るネタ帳の記事で読みました。
これを読んで、「そういえば今日は年賀状の発売日、今年の年賀状は、ポリゴンのイラストというのもいいかも！？」と思いつきました。
そこで、紹介されているポリゴン加工ツールを使ってみたら、素人の僕でもポチポチ画像をクリックするだけで5分ほどでポリゴン風イラストが簡単に出来てしまいました。
今回は、その方法の紹介です。
目次
ポリゴンスタイルデザインとは
ポリゴンスタイルデザインというのは、3Dゲーム黎明期に一世を風靡したバーチャファイターのポリゴン描画をデザインに取り込んだようなものです。
（バーチャファイターは描画効率のため基本四角ポリゴン）
今年に入ってから海外では、以下のようなポリゴンロゴも使われるようになってきているそうです。
Polar Dot on Logoturn
ポリゴンスタイルデザインで使用されるのは、三角ポリゴンがほとんどのようです。
その他のデザインを見るには、以下を参照してください。
ポリゴン風イラストを作るには
ポリゴン風イラストを作成するには、通常は3D系のソフトなどで作るそうです。それ以外では、Photoshopやイラストレーターでも作ることができるそうですが、結構な時間とある程度のスキルが必要なようです。
ただ僕は、3Dソフトなんて使ったこともないし、画像編集ソフトなんかも基本的な編集でしか使った事がありません。ですのでPhotoshopなどで作るのも厳しいです。
しかし、そんな人のためにも、写真をポチポチマウスクリックしていけばサクッとポリゴンイラスト（ローポリイラスト）を作成できるtriangulatorというツールがあるようです。
その作成の手軽さは、以下の動画を見ると一目瞭然です。
以下では、このツールを使用し、素人でも適当にポチポチやっていたら、出来てしまうポリゴンイラストの作り方を紹介したいと思います。
ポリゴン風イラストの作り方
ポリゴンイラスト作成の主な手順は以下です。
- 画像を用意する
- triangulatorのダウンロードと使用準備
- 写真をマウスでポチポチしてポリゴンに
- 保存する
1.画像の用意
まずは、画像を用意します。
僕は今回、来年2015年の干支が羊ということでPublic Domain Picturesから子羊の写真を使わせてもらいました。（Public Domain Picturesは、著作権切れ、もしくは放棄された写真のストックサービスなので、自由に使用・加工ができます）
僕は以下の画像をとりあえず選びました。
ここで一つ注意点として、選択した画像があまりにも小さい場合は、ツールでの編集がしづらいです。小さな画像の場合は、横幅を現在使用しているブラウザの幅ぐらいに拡大することをお勧めします。（僕は横幅1280pxにしました。）
2.ツールのダウンロードと使用準備
triangulatorをダウンロードして使用できる状態にします。
triangulatorのダウンロードは、ちょっとわかりづらいのですが、リンク先ページの一番下の部分。
「You can download sources here.」のhereの部分をクリックしてZIPファイルを取得します。
ダウンロードしたフォルダに「triangulator.zip」というファイルが作成されるので、解凍してください。
ファイル構成は、以下のようになります。
この中の「index.html」ファイルをGoogle Chromeにドラッグ＆ドロップしてください。（Firefoxは固まって動かなくなったりするのでイマイチ）
Chromeに「index.html」ファイルを放り込むと以下のような画面になります。画面中央に「Drop your bitmap here」と書かれたエリアがあるので、そこにポリゴン化したい画像をドラッグ＆ドロップします。
「bitmapをドロップしろ」と書かれていますが、JPEGでもPNGでもSVGでも動作します。
画像をドラッグ＆ドロップするとChromeに以下のように表示されます。
3.マウスでポチポチ
表示されている画像の上をマウスで適当にクリックしていくと、その部分からポリゴン化されていきます。
ここらへんは、何回かポチポチやっていれば感覚は掴めてくると思います。
4.完成したら保存
ある程度、ポチポチクリックしていると5分ぐらいでこんな感じになるので、完成したと思ったら保存します。保存を「Export to SVG」のExport部分のリンクをクリックします。
すると「Export to SVG: save this link as file」と表示されるので「this link」部分を右クリックしてファイルを保存します。（※必ず右クリックから保存することをお勧めします。通常のクリックだと画面が変わり編集画面に戻れなくなります。）
保存したファイルが以下のSVGファイルになります。
triangulatorその他の機能
triangulatorには、画像のポリゴン化＆保存をするために4つのみ機能があります。
左から以下のようになっています。
- ポリゴンレイヤーの半透明化機能
- 保存機能（SVGファイル）
- 全ての編集をリセット
- ランダムに25個のドットを打つ
triangulatorでは、編集がしやすいように、ポリゴンレイヤーの透明度を設定できます。
以下のようにポリゴンレイヤーを半透明化し、画像を見ながらドットを打つことができます。
ファイルの保存機能は、先程説明したので割愛します。
「Delete all vertices」をクリックすると、全ての編集点がリセットされるので注意してください。
「Add 25 vertices: randomly」というのは、編集点を25個ランダムに打ちます。この機能を適当に乱打してもある程度のポリゴンはできます。
ただ、意図した点が打てないことと、高いスペックのパソコンでないと動作が止まることを考えると、自力で点を打った方が無難かと思います。
まとめ
今回の方法で、かなり簡単にポリゴン風イラストを作成することができました。（雑ではありますが）
ただやはり、3Dソフト、Photoshop、Illustratorで作成するものには、かなわないと思うので、その他の方法は、以下を参照してください。
やっぱりプロの仕上がりは凄いです。
ただ、triangulatorでも点の打ち方次第で多少は近づけると思うので、ポリゴンデザインに興味のある方は、簡単ですので試してみてください。
毎年恒例かなり高い確率で届く「家族写真年賀はがき」とか「子供写真年賀はがき」がポリゴンできたら結構シュール。
