2015.01.07

Photoshop 画像をポリゴン風に加工するテクニック!

あけましておめでとうございます。

最近忙しくて、すっかりブログをおさぼりしていた雪乃です。
今年はもっと更新できるように頑張ります!!

さて、今回はPhotoshopで画像をポリゴン風にする方法を紹介したいと思います。

webサイトでたまに見かけますね~ポリゴン風デザインは人気があるようなので、いまさらやってみました。

Windows8 を使用しています。
Photoshop CS6 を使用しています。

Photoshopに画像を読み込む

ポリゴン風に加工した画像を用意して、Photoshopで開きます。

取り込んだ画像

グリッドを表示する

「メニューバー」「表示」「表示・非表示」「グリッド」を選択します。

グリッドメニュー

下図のようにグリッドが表示されます。

グリッド表示

グリッドの設定

「メニューバー」「表示」「スナップ先」「グリッド」を選択します。

グリッドにスナップ

「メニューバー」「編集」「環境設定」を選択します。
環境設定の「ガイド・グリッド・スライス」を選択します。

環境設定1

ポリゴン風にしたい画像のサイズや色に合わせて、作業しやすい設定を選択します。今回は下図のように設定しました。

グリッドの設定

マグネット選択ツールで選択範囲を作成して色を付ける

「ツールバー」「多角形選択ツール」を選択し、三角形の選択範囲を作成します。

選択範囲

背景の選択範囲部分をコピーした、新規レイヤーを作成します。

新規レイヤー

コピーしたレイヤーのサムネイルをctr+クリックをして、コピー部分の選択範囲を作成します。

サムネイルから選択範囲

「ツールバー」「フィルター」「ぼかし」「平均」を選択します。

フィルターぼかし平均

フィルターをかけると、下図のように選択部分のカラーの平均値で塗りつぶされます。

カラーの平均値で塗りつぶし

アクションに記録

一連の作業をアクションに記録します。最初に多角形ツールで三角形の選択範囲を作成します。
次に「アクションバー」「新規アクションを作成」アイコンをクリックして新規アクションを作成します。

アクションに記録1

背景の選択範囲部分をコピーした、新規レイヤーを作成します。

新規レイヤー

背景を選択します。

背景選択

選択範囲をコピーしたレイヤーを作成します。

選択範囲をコピーしたレイヤー

コピーしたレイヤーのサムネイルをctr+クリックで、選択範囲を選択します。
「ツールバー」「フィルター」「ぼかし」「平均」を選択し、カラーの平均値で塗りつぶします。

カラーの平均値で塗りつぶし

ctr+Dをクリックして、選択範囲を解除し、アクションバー「再生/記録を停止」をクリックして記録を終了します。

カラーの平均値で塗りつぶし

アクションオプションファンクションキーを設定します。設定するとファンクションキーをクリックすることで、登録したアクションが実行されます。

アクションオプション

完成

後は選択範囲作成ファンクションキー(アクション再生)を繰り返して、画像をポリゴン風にしていきます。

囲む際のコツ

  • 各ブロックを隙間なく丁寧に囲む。
  • 目など細かく表現する部分小さく、それ以外は大きく囲む。
  • 色の違う部分を区切りにして囲む。

背景画像を消して、任意の背景を作成して完成です。

完成画像

今回は多角形ツールでポリゴン風の画像を作成しましたが、PhtoshopIllustratorのパスを利用した方法もあります。
自動でポリゴンスタイルにしてくれるツールもあります。使い分けると便利ですね~
ホームページ作成は八戸(青森)のホームページ制作会社 北の国ウェブ工房へ。

青森県内全域、特に八戸市近郊の南部町、階上町、十和田市、三沢市、また青森県内だけでなく岩手県、秋田県などの地域に対応いたします。どうぞ、お気軽にご相談ください。

私、雪乃はPhotoshop中心にブログを更新していま~すぜひ見てくださいねぇ。