ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

webデザイン

前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合には、Photoshopのレイヤーマスクを上手く活用することで、ほぼイメージ通りの表現が可能になります。

ここでは、デザインの現場でかなり役立つレイヤーマスクの活用方法を解説します。(※選択したレイヤーそのものではなく、別のレイヤーにマスクを追加するのがポイントです。この方法は一度覚えてしまえば活用範囲がグンっと広がります)

Photoshopで文字を切り抜いて影を付ける方法

任意のテキストを入力します

drop-shadow14-5

切り抜きたいテキストレイヤーをShiftを押しながらすべて選択し、メニューバーのレイヤー 》レイヤーを総合します。

drop-shadow15

① 新規レイヤー作成ボタンをクリック
② 白でべた塗りする

drop-shadow160

統合したテキストレイヤーの“サムネイル部分”をCtrlキーを押しながらクリックすると、輪郭が選択された状態になります。

drop-shadow17

icon-bullhorn 今選択したレイヤーではなく、新規で“白のベタ塗りをしたレイヤー”を選択した状態でレイヤーマスクボタンをクリック

drop-shadow180

すると、テキストの輪郭どおりのレイヤーマスクが追加されました(ここでテキストレイヤーはお役御免なので削除するか、目のマークを外して非表示にしておきます。)

現状は、白い部分が表示されていて、黒い部分がくり抜かれて背景画像が見えている状態なので、レイヤーマスクをダブルクリックしてウィンドウを立ち上げ反転させます

drop-shadow190

これで、背景の画像の前面に紙や壁があり文字の形に切り抜かれたような状態になったので、ドロップシャドウを適用します

drop-shadow20

レイヤーマスクに真っ黒なブラシグランジ系icon-download)で塗れば、その部分がどんどん切り抜かれていきます。

drop-shadow21

さまざまな形状のブラシで試してみると面白いですよ!

文字を切り抜いて影が付きました

drop-shadow3

スリームデザイン

4,687,555 views

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとマーケティングと玄米ご飯。 フリーランス時代に独学で身に...

プロフィール

ピックアップ記事

関連記事一覧

小笠原広記

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインと玄米ご飯。

 

フリーランス時代に独学で身に付けた技術を活かし、世界規模のデザインコンテストで日本人初の大賞を受賞&Photoshopの専門書を出版。

 

ブログ集客のエキスパートとして企業や個人のコンサルティングをしながら、コンテンツマーケティングやコピーライティングを手掛けるブログマーケターである。