0%

Designデザインワークショップ

Posted:2016.06.09

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

今回のワークショップではPhotoshopを使って、写真をポリゴンで加工したようなデザインに仕上げていきたいと思います。一見難しそうですが、Photoshopを使えば単純な作業の繰り返しでポリゴン風のデザインが出来上がってしまいます。

 

また今回はポリゴン風に仕上げていく方法に合わせて、決まった作業を繰り返す時に便利なPhotoshopの機能であるアクション機能についても触れています。

 

今回の素材となる写真はこちら

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

では、早速始めていきたいと思います!

 

STEP1.ポリゴンの面になる部分を描画する

 

1. ベースとなる背景写真をコピーしポリゴン加工用のレイヤーを用意します

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

2. ポリゴンの面が隙間なく埋まるようにグリッドを設定しグリットに合わせてスナップするようにします

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

3. 多角形選択ツールで背景の面に合わせて三角形(もしくは四角形)の選択範囲を作成します

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

4. 選択範囲に対してぼかしフィルターの平均を適用させる

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

5. 作成したポリゴンの面に対して隙間なく隣り合うよう新たに選択範囲を作成する

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

STEP2.繰り返す作業をアクション機能へ登録し再生する

 

1. 選択範囲が作成されている状態でアクションウィンドウから新規アクションセットを作成する

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

2. アクションセットの作成後それに紐づく新規アクションを登録する

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

3. アクションが作成されアクション記録中の状態になっているのでぼかしフィルターの平均を適用させアクションに記録させる

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

4. ぼかしフィルターの平均の適用が完了したらアクション停止ボタンを押しアクション記録を終了する

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

5. 以降は選択範囲を作成したのち登録済みのアクションを再生しながらポリゴンの面を描画していく

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

6. 色の差や表面の凹凸具合を参考にしながら三角形と四角形のポリゴン面を構成していく

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

 

完成するとこんな感じです!

 

【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる

 

ポイントとしては、あまり細かく面を作り込みすぎると雰囲気が出ないように思います。ある程度大雑把に作成する方がわかりやすいかもしれませんね。凹凸の頂点に面の角を合わし、なだらかな部分は四角形で、そうでない部分は三角形で構成するのがベターです。

 

途中に登場したPhotoshopのアクション機能は、よく使う一連の流れを記録し、再生するだけで一連の流れが適用されるという、同じ動作をくりかえす場合にはとても便利な機能です。今回だけでなくいろんな場面でも結構使えるテクニックです。

 

いかがでしょうか、慣れてしまえばかなりのスピードで仕上げることも可能です。ぜひポリゴンのデザインを取り入れる時に参考にしてみてはいかがでしょうか。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】