めくれた紙のPhotoshopチュートリアル

Photoshop

2009.05.25

紙を使用したサイトデザインをする際に気を付けたいのは安っぽくならないことです。
ワンポイント表現として、紙をめくれあがった感じにすると雰囲気が出ます。

紙の質感をだす

まず初めに四角の新規レイヤーを作成します。
新規レイヤー追加
レイヤースタイル[光彩(外側)]に[描画モード:通常][不透明度:20%][色:#000000]を指定し、エレメントは[サイズ:5%]にします。
次にグラデーションを上の方だけにグレーを敷き、質感を表現します。
グラデーション
こんな感じになります。
レイヤースタイル後

めくれた感じを表現

出来上がったレイヤーの端を三角形にカットし、新規レイヤーにコピーします。
このレイヤーがめくれた部分になります。
端を切り取る
三角形を自由変形で反転させ、紙レイヤーの内側に配置します。
反転
このままだと直線すぎるので、左端を楕円形に削除します。
ペンツールを使用すれば微妙なラインを描けます。
楕円形に削除
レイヤースタイル[光彩(外側)]に[描画モード:通常][不透明度:20%][色:#000000]を指定し、エレメントは[サイズ:5%]にします。
グラデーションの角度135°にし、色の付け具合を根元から段々白色にしていきます(下図参照)。
質感を表現するのに、ここが重要になります。
グラデーション
かなりいい感じになりました。
全体図

最後の仕上げ

めくれあがった背景にシャドウを作成します。
ペンツールで左端のカーブと同じくらいの角度を描き、新規レイヤーを作成します。
めくれた背景のパス
シャドウレイヤーのレイヤースタイルは[塗りの不透明度:0%]にして[光彩(外側)]に[描画モード:通常][不透明度:20%][色:#000000]を指定します。
[カラーオーバーレイ]に[色:#000000]を指定して[不透明度:20%]にします。
サイズや形を微調整して下図のようになればOK!
全体図
さらに質感を高める為に、めくれた三角形の端にシャドウを作成します。
パスツールで端を覆うようにパス描き、新規レイヤーを作成します。
レイヤースタイルは前回のシャドウと同じように[塗りの不透明度:0%][光彩(外側)][描画モード:通常][不透明度:20%][色:#000000]。[カラーオーバーレイ][色:#000000][不透明度:20%]にします。
めくれた端背景のパス
これで完成です!
完成

デザイン用途例

これでデザインにワンアクセントを加えることが出来ます。
ただ写真を掲載するのではなく、こんな感じにすれば面白いのでは?
使用例

  1. Web-Parkのホーム > 
  2. Photoshop > 
  3. めくれた紙のPhotoshopチュートリアル
オススメ本(既読)
読んでみたい本(未読)

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT!!

COMMENT PLEASE!!

トラックバック

「めくれた紙のPhotoshopチュートリアル」のトラックバックURL

Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/photoshop/paper090522.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook