[初回公開] 2011年03月25日
ウェブサイトに掲載する画像や店内のメニューやポップなどで手書き感を演出したい場合に紙の質感がある背景に文字などを配置する手法があり、紙に皺が付けるなどリアルな質感を出す中で紙を手で破ったような効果を Photoshop で行う方法を紹介する。
このページの目次
1.紙を手で破ったような効果とは
紙を手で破ったような効果とは、下図のように断面が不規則なギザギザになるとともに、その断面に陰影がある様子である。
カフェのメニューやポップ、ヴィンテージ商品を扱う店舗のウェブサイトなどで利用すると無機質にならずに温かみがある印象を与えやすい。
実際に紙を破いて撮影した写真を素材として利用されることもあるが、意図的に破いた形状を作り出すのが難しい場合は Photoshop などソフトウェアを使って写真を加工することがある。
背景には写真やノートの切れ端を素材として掲載する場合に活用されることが多く、破られた紙質の上に手書き風のフォントを利用するとより手作り感を演出することができる。
2.Photoshop で紙を手で破ったような効果を出す方法
Photoshop で紙を手で破ったような効果を出す方法としては、消しゴムツールとレイヤー効果を使いながら、次の 4 つの工程を経て実現することができる。
2-1.編集する画像を読み込む
まず最初に紙を手で破ったような効果を与える画像を Photoshop に読み込む。
今回は下図のイラストを用意した。
2-2.レイヤーを追加する
次に画像を読み込んだ直後はレイヤーが「背景」になりロックされて編集できないことがある。
そのため、画像を配置したレイヤーをダブルクリックして下図のように編集可能な状態にする。
また、手で破った効果がわかりやすくなるように画像を読み込んだレイヤーの下の層にもう一つ新規でレイヤーを追加しておく。
2-3.消しゴムツールで消す
画像を手で破ったようにするために、破り取る箇所を消しゴムツールを利用して削除する。
この時、利用するブラシの形状は一般的な円形のものではなく、分散状のブラシを利用することで消しゴムツールを使った箇所の断面がギザギザになり、不規則な欠損を表すことができる。
分散状のブラシを選択した後は破り取りたい箇所をマウスで小刻みに動かしながらドラッグさせる。
これも直線的にマウスを動かしてしまうと紙が破れたときのように不規則性を出すためである。
2-4.レイヤーにドロップシャドウの効果を与える
最後に、消しゴムツールで削除した画像のあるレイヤーを選択した状態で、上部メニューより「レイヤー -> レイヤースタイル -> ドロップシャドウ」を選択する。
「ドロップシャドウ」を選択して表示されたウィンドウ内にあるボタン「OK」をクリックすると、消しゴムツールで削除した箇所に影が付いて破ったような効果を与えることができる。
ドロップシャドウの設定ウィンドウでは不透明度や距離など特に数値を変更しなくても前述の図のように黒い影が付いた効果を与えることができる。
Photoshop のバージョンが古い場合はドロップシャドウの設定が異なっており、上部メニューより「レイヤー -> 効果 -> ドロップシャドウ」を選択すると、設定するウィンドウが表示される。
関連記事
Chrome の詳細設定画面(chrome://flags)を瞬時に開く方法
日頃利用しているアプリやソフトウェアはセキュリティ向上や機能追加のため頻繁にアップデートされるが、特にブラウザはアップデートされると設定がリセットされて毎回画面を表示する手間を減らすために、Chrome…
【YouTube も録画可能】Screen Recorder でデスクトップを録画する方法
パソコンのデスクトップを録画して動画ファイルに残すソフトウェアを利用することでパソコンを操作する流れを教育用に用意したり、デスクトップに表示させた複数台の監視カメラで行動履歴を残すことができ、録画…
Windows11 へ無償アップグレードできるかの調査方法と Windows10 のサポート終了日
2021年10月05日に Windows11 がリリースされ Windows10 を利用しているユーザは無償でアップグレードできるようになったが、スペックを満たさないパソコンはアップグレードできないため、アップグレードできるかの…