グラデーションをかけて、紙がめくれたようなデザインにしてみよう

【Photoshop】グラデーションをかけて、紙がめくれたようなデザインにしてみよう


写真やイラストを床に置いたり、壁に貼ったようなデザイン、
よく見かけますよね。画像の角を浮かせて、めくれたようにすると、
立体感が出て、無作為な雰囲気を出したり、アクセントをつける
ことが出来ます。
この画像を「紙がめくれたように」デザインする方法をご紹介
します。

紙がめくれたようなデザインで立体感を出そう

画像にふちを付ける

画像を写真らしく見せるため画像にふちを付けます。

 

<手順>
1.任意の画像をPhotoshopで開き、[ウィンドウ]でレイヤーパネルを
表示します。
2.開いた画像を[レイヤー]→[新規]→[背景からレイヤーへ]で
レイヤーにします。
3.[レイヤー]→[新規]→[レイヤー](Shift+Ctrl+N)で新規レイヤーを
作成し、レイヤーの重ね順を元の画像のレイヤーの下にします。

画像にふちを付ける

4.新規レイヤーをアクティブにし、カンバスサイズを元のレイヤーより
少し大きくします。(図例では上下左右に各+5px)
5.大きくしたレイヤーを[編集]→[塗りつぶし](Shift+F5)でダイアログ
を起動し白で塗りつぶします。
6.元画像のレイヤーとふち部分のレイヤーを結合します。

画像にふちを付ける

画像に背景を作る

画像を立体的に見せるために、接地面(背景)を作ります。

<手順>
1.カンバスサイズを大きくします。
([イメージ]→[カンバスサイズ](Alt+Ctrl+C)でダイアログを起動し
任意の数値を入れてサイズに変更します。

画像に背景を作る

グラデーションでハイライトを入れる

グラデーションで紙がカールした際に出来るハイライトを入れます。

<手順>
1.[レイヤー]→[レイヤースタイル]→[グラデーションオーバーレイ]で

レイヤーにグラデーションをかけます。
白~透過となるグラデーションカラーにして、モードを[スクリーン]に
スタイルを[反射]にします。
2.めくれてカールする部分にグラデーションのスクリーンが当たるよう
角度を調整します。

グラデーションでハイライトを入れる

グラデーションで接地位置を暗くする

紙がめくれて高くなっている位置と逆にあたる位置、つまり地面(壁)に
接している位置を少し暗くするとより立体感が出ます。

 

<手順>
1.レイヤーの上に新規レイヤー(Shift+Ctrl+N)を作成し、クリッピング
マスクを作成します。
(レイヤーをアクティブにし、右クリック→クリッピングマスクを作成)

グラデーションで接地位置を暗くする
2.作成したクリッピングマスクをグラデーションで塗りつぶします。
[レイヤー]→[新規塗りつぶしレイヤー]→[グラデーション]で描画モードを
「乗算」にしてダイアログを起動します。
3.グラデーションの塗り色は黒白にし、スタイルは「線形」、角度は紙の
めくれた位置に対し、接地に当たる位置が暗くなるよう角度を調整します。
極端に真っ暗にすると不自然になってしまうので、不透明度を下げて若干
暗くなっている程度で調整します。(図例では不透明度50%)

グラデーションで接地位置を暗くする

紙と地面(壁)に出来る影を作る

紙がめくれて浮いた位置から見える影を作ります。

 

<手順>
1.画像のレイヤーをアクティブにし、レイヤーを複製します。(Ctrl+J)
2.複製したレイヤーにクリッピングマスクが掛かりますので、重ね順が
下となる複製元のレイヤーを[レイヤー]→[レイヤースタイル]→[カラー
オーバーレイ]で黒に塗りつぶします。
(描画モード:通常、不透明度100%)

紙と地面(壁)に出来る影を作る
3.[フィルター]→[ぼかし]→[ぼかし(ガウス)]でぼかします。
レイヤーの不透明度で影の色の濃さは調整できます。

紙と地面(壁)に出来る影を作る

めくれた形にワープで変形する

ハイライトを入れた位置を紙がめくれたように見える形に変形します。

<手順>
1.画像のレイヤーをアクティブにし、[編集]→[変形]→[ワープ]を
選択すると、画像を囲むようにバウンディングボックスが表示されます。

めくれた形にワープで変形する

2.バウンディングボックスをドラッグすることで自由に変形が出来ます
ので、めくれる位置をめくれる方向へドラッグします。
ハイライトの位置や強さによって度合いを調整します。

めくれた形にワープで変形する

微調整とグループ化

実際にめくれた形に変形した後に、影の位置や濃さ、形などを微調整します。
影もレイヤーなので移動はもちろん、ワープで変形でき、レイヤーの不透明度で
色の濃さも調整できます。

<手順>

1.影のレイヤーをアクティブにし、形や色、位置を調整します。

影のレイヤー調整
2.紙と影の位置が自然になったら「影」「画像」「グラデーション」のレイヤーを
Ctrlを押したままクリックして選択し、グループ化します。(Ctrl+G)
3.グループ化した3つのレイヤーは移動や回転などを一緒に行うことが出来ます。

レイヤーをグループ化

まとめ

いかがでしたか?
今回は写真で加工を行いましたが、イラストやシェイプなどを使うと
シールやステッカーが剥がれているように見せることも出来ますよ。
いろんなデザインに応用してみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Illustrator】初心者でも簡単に使える機能を使ってロゴを作成してみよう