Photoshopを使ったポリゴンスタイルテクスチャの作り方

2014年、フラットデザインの次に流行すると噂される『ポリゴンスタイル』をご存知でしょうか？ポリゴン風デザインやローポリデザインとも呼ばれているものです。最近では、webサイトの背景などに多角形の幾何学模様が使われていることを目にしたことがあるかもしれません。

今回は、Photoshopを使って写真をポリゴンスタイルに加工するチュートリアルをご紹介します。

1．ポリゴンとは

某ポ○モンに出てくるキャラではありませんよ（汗）

wikipediaを見ると下記のように書かれています。

ポリゴン（polygon）とは、元々は多角形という意味であるが、主に3次元コンピュータグラフィックスにおいて、三角形や四角形（ソフトによっては五角形以上も扱える）の組み合わせで物体を表現する時の各要素を指す。

う〜ん、言葉だけだとうまくわからないですね…。まずは実例を見ていくことにしましょう。

2．ポリゴン風デザイン

まずポリゴンスタイルって何？という方のために
実際にポリゴン風デザインを取り入れているwebサイトをご紹介します。

Snap.svg

Adobeがオープンソースとして公開しているSVG用JavaScriptライブラリーのサイトです。

フラットデザインと合わせてポリゴンデザインを使用しています。ヘッダー画像やロゴ、ワニのイラストもポリゴンスタイルです。

株式会社ギアエイト/

WEB制作会社のギアエイトさんのサイトです。イメージスライダーに使われる背景画像がポリゴンスタイルになっています。動物との相性も良さそうです。

VAGRANT

仮想環境構築ツール『Vagrant(ベイグラント)』のサイトです。
ロゴがポリゴン風デザインになっており、立体感が際立っています。

heteml

レンタルサーバー会社『heteml（ヘテムル）』のサイトです。背景の宇宙がポリゴン風になっています。
パララックスになっておりいろいろな仕掛けがあるので楽しいです。個人的にはBack to Topがお気に入りです。

一通りポリゴンスタイルを使用しているサイトを見てきました。多角形で構成されているのがお分かりいただけたと思います。

このような感じのデザインがポリゴンスタイルになります。

それでは、実際にポリゴンスタイルを作成する方法をみていきましょう！

このページを見ている人におすすめの商品

3．写真をポリゴンスタイルに加工する方法

Step1．画像を用意する

まずは、ポリゴンスタイルに加工したい画像を用意します。

今回は、無料の写真素材『PAKUTASO』さんから向日葵畑をダウンロードして使用していきます。

Step2．画像を開く

メインメニューから[ファイル > 開く]を選択し、ポリゴンスタイルに加工したい画像を選びます。

下記のようにカンバス上に画像が表示されました。

Step3．画像を複製する

開いた画像を選択した状態で[Ctrl + J(Mac：Command + J)]を押して2つ複製します。

「レイヤー１」と「レイヤー１のコピー」という２つのレイヤーが追加されました。

Step4．45°に変形する

一番上のレイヤー（レイヤー１のコピー）を選択した状態で、メインメニューから[編集 > 変形 > 自由な形に]を選択します。

オプションパネルバーのHに[45]を入力します。

画像が45°に変形しました。

Step5．モザイクをかける

一番上のレイヤー（レイヤー１のコピー）を選択した状態で、メインメニューから[フィルター > ピクセレート > モザイク]を選択します。

セルの大きさはプレビューを見ながら調節します。
今回はセルの大きさを[20]平方ピクセルに設定しました。

モザイクがかかりました。

Step6．-45°に変形する

一番上のレイヤー（レイヤー１のコピー）を選択した状態で、メインメニューから[編集 > 変形 > 自由な形に]を選択します。

今度はオプションパネルバーのHに[-45]を入力します。

-45°に傾けました。

Step7．不透明度を50%にする

一番上のレイヤー（レイヤー１のコピー）の不透明度を[50%]に設定します。

うっすらとモザイクがかっているのが分かると思います。

Step8．上から２番目のレイヤーを-45°に変形する

上から２番目のレイヤー（レイヤー１）を選択した状態で、メインメニューから[編集 > 変形 > 自由な形に]を選択します。

オプションパネルバーのHに[-45]を入力します。

上から２番目のレイヤーを-45°に傾けました。

Step9．上から２番目のレイヤーにモザイクをかける

上から２番目のレイヤー（レイヤー１）を選択した状態で、[Ctrl + F（Command + F）]を押すとStep5でかけたモザイクがかかります。これはPhotoshopが最後にかけたフィルターをメニューの一番上に記録してくれるおかげです。便利ですね！

Step10．上から２番目のレイヤーを45°に変形する

上から２番目のレイヤー（レイヤー１）を選択した状態で、メインメニューから[編集 > 変形 > 自由な形に]を選択します。

オプションパネルバーのHに[45]を入力します。

写真をきれいなポリゴンスタイルに加工することができました！

4．便利な無料ツール

Photoshop以外にもポリゴンスタイルを作成することができる無料ツールをご紹介します。

triangulator

HTML5で作られたツールでローカルにダウンロードして使用します。使い方はデモ動画を参考にしましょう。直感的にポリゴンスタイルを作成することができるツールになります。

DMesh

読み込んだ画像を分析してポリゴンスタイルを自動生成するMacアプリです。

DMesh
カテゴリ: グラフィック&デザイン
現在の価格: 無料
サイズ: 1.1 MB

Image Triangulator App

Mac用、Windows用が用意されているポリゴンスタイル作成ソフトです。

5．まとめ

Photoshopでポリゴンスタイルテクスチャの作り方をご紹介しました。webサイトで使われているのを見て作るのが難しそうと思っていた方でも意外と簡単だったのではないでしょうか？
変形とモザイクぐらいしか使っていないので覚えるのも楽だと思います。
Photoshop以外にもポリゴンスタイルを作成できるツールもご紹介しました。場合によって使い分けるのがいいでしょう。