owned mediaウェブ制作に役立つコンテンツを発信中!

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

最終更新日: Update!!
今回のワークショップでは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のアクション機能は、よく使う一連の流れを記録し、再生するだけで一連の流れが適用されるという、同じ動作をくりかえす場合にはとても便利な機能です。今回だけでなくいろんな場面でも結構使えるテクニックです。   いかがでしょうか、慣れてしまえばかなりのスピードで仕上げることも可能です。ぜひポリゴンのデザインを取り入れる時に参考にしてみてはいかがでしょうか。  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram