WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： はーちゃん
カテゴリー： デザイン >Photoshop

ファッション雑誌やアート系のサイトのメインビジュアルなどで、紙が破れたようなデザインを見たことはありませんか？
今回はPhotoshopのマスクとフィルターを使って、リアルな紙が破れた質感の効果をつける方法をご紹介します。

画像を用意する

まずは写真を用意します。
ファッション雑誌っぽさを出したかったので、かっこいい女性がモデルの写真を選びました。

破れた部分の画像を用意する

今回は破れていない部分にカラー写真、破れた部分からはモノクロ写真が見えるようにしたいので、彩度を下げてモノクロ写真を作っていきます。
さきほど用意した写真レイヤーを選択し、「Ctrl ＋ J」で複製します。

複製した写真レイヤーを選択した状態で、「イメージ → 色調補正 → 色相・彩度」をクリックします。

「色相・彩度」パネルが表示されるので、「彩度：-100」と設定して「OK」をクリックします。

すると、複製した画像がモノクロになりました。

紙が破れたような加工をつける

ここから、破れている部分のみからモノクロの写真が見えるように調整していきます。

レイヤーパネルでモノクロの写真を選択した状態で、ツールバーから「多角形選択ツール」を選択し、以下のようにクリックして角をつけながら破りたい部分を囲んでいきます。

この状態で、レイヤーパネル下部にある「レイヤーマスク」をクリックします。
すると、「多角形選択ツール」で選択した部分だけがモノクロ写真で表示されるようになりました。

次に、レイヤーパネルでカラー写真を選択した状態で、「多角形選択ツール」を使い、さきほど選択した範囲よりも少し外側を囲むように選択していきます。

この状態で、レイヤーパネル下部にある「塗りつぶし → べた塗り」をクリックします。

べた塗りのカラーピッカーパネルが表示されるので「#ffffff（白）」を設定して、「OK」をクリックします。

すると、境目に紙の切れ端のような白い部分を作ることができました。

ここから、白い部分をより紙っぽく見えるように加工していきます。

レイヤーパネルからべた塗りレイヤーのマスク部分を選択した状態で、「フィルター → ピクセレート → 水晶」をクリックします。

水晶パネルが表示されるので、「セルの大きさ：5」に設定して「OK」をクリックします。

すると、白い部分の外側に細かいジグザグがついて、紙がビリビリ破れたような加工をつけることができました。
モノクロ写真のマスクに対しても同様の設定をすることで、白い部分の内側にも紙が破れたような加工をつけることができます。

今回水晶パネルで設定した「セルの大きさ」は、使用する画像の大きさなどによっても変わってくるので、好みの値に調整してみてください。

次に、より立体感が出るように影をつけていきます。
レイヤーパネルからモノクロ写真をダブルクリックし、レイヤースタイルパネルを開きます。
「光彩（内側）」にチェックを入れ、以下の内容を設定して「OK」をクリックします。

影をつけることで、奥行きが出てより立体的に見えるようになりました！

こちらも使用する画像の雰囲気によって影のつけ方が変わってくると思うので、ぜひいろいろな設定を試して合うものを探してみてください。

このままでもだいぶ紙が破れたように見えるのですが、よりリアル感を出すために、最後に白い部分に紙のテクスチャをつけていきます。

べた塗りレイヤーの上に来るように、紙のテクスチャの画像ファイルをドラッグ＆ドロップして挿入し、テクスチャ画像レイヤーを右クリックして「クリッピングマスクを作成」を選択します。

すると、白い部分にだけ紙のテクスチャをつけることができました！
こちらで完成です！

まとめ

今回は紙が破れたようなデザインの作り方をご紹介しました。
モノクロ写真とカラー写真の位置を入れ替えてみたり、破れた部分と破れていない部分で全く違う写真を使ってみても面白いと思うので、皆さんもぜひいろいろ試してみてください！