• 更新日:
  • 公開日:

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

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

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

1.ポリゴンとは

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

polygon

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

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

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

2.ポリゴン風デザイン

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

Snap.svg

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

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

polygon_site1

株式会社ギアエイト/

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

polygon_site2

VAGRANT

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

polygon_site3

heteml

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

polygon_site4

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

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

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

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

PR

Photoshop しっかり入門 増補改訂 第3版 [Mac & Windows対応]

Photoshop しっかり入門 増補改訂 第3版 [Mac & Windows対応]

\毎月11日と22日はゾロ目の日 クーポン争奪戦/Yahoo!ショッピングで価格を見る

ビッグセール情報

  • ビッグセール情報

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

Step1.画像を用意する

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

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

sunflower

Step2.画像を開く

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

photoshop_file_open

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

photoshop_file_open_after

Step3.画像を複製する

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

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

photoshop_replication

Step4.45°に変形する

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

Free_deformation

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

Free_deformation2

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

polygon_style_texture1

Step5.モザイクをかける

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

Mosaic

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

Mosaic

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

polygon_style_texture2

Step6.-45°に変形する

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

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

Free_deformation3

-45°に傾けました。

polygon_style_texture3

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

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

photoshop_opacity

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

polygon_style_texture4

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

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

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

Free_deformation5

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

polygon_style_texture5

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

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

polygon_style_texture6

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

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

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

Free_deformation6

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

polygon_style_texture7

4.便利な無料ツール

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

triangulator

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

DMesh

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

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

Image Triangulator App

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

Image_Triangulator_App

5.まとめ

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