WEB

PhotoshopとIllustratorで画像をポリゴン風に加工する方法

PhotoshopとIllustratorで画像をポリゴン風に加工する方法

こんにちは、デザイナーの白浜です。
今回は人気のポリゴンスタイルの画像をPhotoshopとIllustratorで作成する方法をご紹介したいと思います。

参考サイト

まず初めに今回の参考サイトから。

【Photoshop講座】人物をポリゴンスタイル風に加工する

こちらの動画を参考にしました。
パペットワープのキャプチャを撮って塗り分けに使うというかなり斬新なやり方で、サクサクっとポリゴンスタイルを取り入れることができる素晴らしいチュートリアルです。
今回パペットワープは使っていませんが、アクションを使った塗り分けの手法を参考にさせていただきました。

それでは具体的な製作過程をご紹介したいと思います。

写真を元にIllustratorでポリゴンのラインを描く

1. 塗り分けの準備

まず初めに元になる写真をPhotoshop上で開いて、サイズを決めます。
今回はブログのアイキャッチ用の画像なので655×437にしました。

次にCtrl+Aで全選択してIllustratorにコピー&ペーストします。
のちのちPhotoshopに持ってくるときに楽なので今回はIllustrator上でも等倍で作業しますが、いきなりIllustrator上に写真配置して作業しても大丈夫かと思います。

01

塗り分けの線がわかりやすいように、不透明度を50%にしてレイヤーをロックしておきます。

2. ペンツールで線画を描く

写真を元に線画を三角形と四角形で区切っていきます。
サンプルはよくよく見ると結構多角形になっちゃってる部分もありますが……基本は三角形と四角形で区切っていきます。
初めにアウトラインを直線でつないで、その中のアンカーポイントとアンカーポイントをつないでいくとやりやすいです。

03

「表示」→「スマートガイド」にチェックをいれて、「アンカー」と表示されるポイントをつないでいくと仕切りやすいです。
とにかく隙間を開けないように仕切っていくことがポイントになります。隙間があると、塗り分ける時に選択範囲がうまくとれなくなります。

仕切りのコツ

04

のちにPhotoshopで塗り分ける際には、Illustratorのパスを元に作成した選択範囲を使って色を塗りつぶしていきます。色の切り替わりでポリゴンを仕切っていくと、塗り分けた時にいい感じに影がついて立体感のあるポリゴンに仕上がります!

くぎってくぎって……。

05

写真を非表示にすると、こんな感じになりました。アンドロイドのようですね。

パスをPhotoshopに読み込む

ここから先はPhotoshopで作業をしていきます。

Illustrator上で先ほど描いた線画を“塗りなし”、“線なし”にしてからコピーします。

06

次にポリゴン加工する写真のレイヤー上で、「パス」を選択してペーストします。

07

パスをペーストしたら、こんな感じで読み込んだパスと写真をピタッと合わせます。

写真を塗り分ける

ペーストしたパスを元に写真を塗り分けていきます。

塗り分けには、こちらの効果を使っていきます。

フィルタ > ぼかし(平均)
選択範囲の平均値のカラーで塗りつぶす効果

ダイレクト選択ツールを使って、ポリゴンのパス1つを選択します。
次に右クリック→「選択範囲を作成」で選択範囲を作ります。

08

09

ぼかし半径は0、アンチエイリアスはオンにしておいてください。

10

このように、ポリゴン一個分の選択範囲がとれたら、次に「フィルタ」→「ぼかし」→「平均」をかけます。

すると……

11

このように、平均値のカラーで選択範囲が塗りつぶされました。

ここまでの一連の流れをアクションに登録します。

パスを1個選択したら、
[記録開始→右クリック→選択範囲作成→フィルタ→ぼかし(平均)記録終了]
の順番でアクションが再生されればOKです。

任意のファンクションキーを割り当てたら、ひたすらパスをクリック→キーを押してアクション再生を繰り返し、ポリゴンを塗りつぶしていきます。

12

打つべし打つべし打つべし……

13

塗り終わるとこんな感じになりました。

塗りつぶされた色が気に入らなかったら、もう一度選択範囲をとって新しい色を流しこむか、Ctrl+Uで色調補正→色相・彩度をいじるなどをして好きな色に整えてください。

14

背景を入れて完成!

この方法だと色をあんまり悩まずサクサクそれっぽい画を作ることができます!

おまけ

自動でポリゴン加工してくれるツールもご紹介します。

DMesh

15

ツール紹介記事:秘かに流行っているらしいポリゴンデザインが簡単に作れる無料アプリが本当に簡単すぎた! | ビットエーブログ – 株式会社BITA

http://bita.jp/blog/polygon_application

triangulator

16

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

http://liginc.co.jp/web/design/other-design/68957

自分で作成するスキルも身につけつつ、上手にツールを使いこなせるようになりたいですね!
 

【姐さんのデザイン講座】

Photoshopのハイパスフィルタを使った凄いレタッチの紹介

Illustratorでオリジナルの消しゴムハンコ風デザインを作成しよう

Photoshopを使ってシネマグラフを作る方法

Photoshopでジグソーパズル風のデザインを作る方法

Photoshopであっという間に芝生を型抜きしたような文字を作る方法

この記事を書いた人

姐さん
姐さん デザイナー 2010年入社
デザイナーの白浜です。ウェブデザイナーとして日々修行中。マンガと音楽とお米が好きです。よろしくお願いします。

こちらもおすすめ

世界一わかりやすいPhotoshop 操作とデザインの教科書 (世界一わかりやすい教科書)

世界一わかりやすいPhotoshop 操作とデザインの教科書 (世界一わかりやすい教科書)

  • 著者柘植 ヒロポン,上原 ゼンジ,吉田 浩章,大西 すみこ,坂本 可南子
  • 価格¥ 2,462(2015/12/28 14:33時点)
  • 出版日2014/01/23
  • 商品ランキング3,471位
  • 大型本288ページ
  • ISBN-104774162590
  • ISBN-139784774162591
  • 出版社技術評論社