【デザインワークショップ】vol.8 写真をポリゴンデザインに仕上げてみる
最終更新日: Update!!
今回のワークショップではPhotoshopを使って、写真をポリゴンで加工したようなデザインに仕上げていきたいと思います。一見難しそうですが、Photoshopを使えば単純な作業の繰り返しでポリゴン風のデザインが出来上がってしまいます。
また今回はポリゴン風に仕上げていく方法に合わせて、決まった作業を繰り返す時に便利なPhotoshopの機能であるアクション機能についても触れています。
今回の素材となる写真はこちら
では、早速始めていきたいと思います!
2. ポリゴンの面が隙間なく埋まるようにグリッドを設定しグリットに合わせてスナップするようにします
3. 多角形選択ツールで背景の面に合わせて三角形(もしくは四角形)の選択範囲を作成します
4. 選択範囲に対してぼかしフィルターの平均を適用させる
5. 作成したポリゴンの面に対して隙間なく隣り合うよう新たに選択範囲を作成する
2. アクションセットの作成後それに紐づく新規アクションを登録する
3. アクションが作成されアクション記録中の状態になっているのでぼかしフィルターの平均を適用させアクションに記録させる
4. ぼかしフィルターの平均の適用が完了したらアクション停止ボタンを押しアクション記録を終了する
5. 以降は選択範囲を作成したのち登録済みのアクションを再生しながらポリゴンの面を描画していく
6. 色の差や表面の凹凸具合を参考にしながら三角形と四角形のポリゴン面を構成していく
完成するとこんな感じです!
ポイントとしては、あまり細かく面を作り込みすぎると雰囲気が出ないように思います。ある程度大雑把に作成する方がわかりやすいかもしれませんね。凹凸の頂点に面の角を合わし、なだらかな部分は四角形で、そうでない部分は三角形で構成するのがベターです。
途中に登場したPhotoshopのアクション機能は、よく使う一連の流れを記録し、再生するだけで一連の流れが適用されるという、同じ動作をくりかえす場合にはとても便利な機能です。今回だけでなくいろんな場面でも結構使えるテクニックです。
いかがでしょうか、慣れてしまえばかなりのスピードで仕上げることも可能です。ぜひポリゴンのデザインを取り入れる時に参考にしてみてはいかがでしょうか。

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




STEP2.繰り返す作業をアクション機能へ登録し再生する
1. 選択範囲が作成されている状態でアクションウィンドウから新規アクションセットを作成する






sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories