デザイン

【備忘録】Photoshopのノックアウトオプションでレイヤーを切り抜く方法

  • このエントリーをはてなブックマークに追加

こんにちは!

今月行くはずだったライブが中止になってしまい、しょんぼり中のワタナベです。
来月も行く予定のライブがありますが、どうなるかわかりませんね…(´・ω・`)

今回は最近知ったPhotoshopの小技の備忘録をば。

ノックアウトオプションという機能でレイヤーの切り抜きをすることができます。

ノックアウトオプションとは?

ノックアウト(抜き)オプションを使用すると、あるレイヤーを「切り抜き」して他のレイヤーの内容が見えるようにできます。例えば、ある画像の上にカラー調整レイヤーが重なっている場合、カラー調整レイヤーの上にノックアウトするテキストレイヤーを作成して、カラー調整されていない画像が見えるようにすることができます。

ノックアウト効果を作成するには、ノックアウト(抜き)を設定するレイヤー、切り抜かれるレイヤーおよび表示するレイヤーが必要になります。背景以外のレイヤーを表示する場合は、使用するレイヤーをグループまたはクリッピングマスク内に配置できます。

引用:Adobe ノックアウトして他のレイヤーからコンテンツを表示

 

実践

↓の画像の文字の部分を切り抜きたいと思います。

切り抜きたいレイヤーをダブルクリック、もしくは「レイヤースタイルを追加」→「レイヤー効果」をクリック

ノックアウト(抜き)を「浅い」に設定

最後に、「塗り」を0%にすると切り抜き完了

 

背景レイヤー以外で切り抜きたい場合

グループ化する

切り抜いた部分に背景レイヤーを表示させたい場合は↑のやり方で十分ですが、背景レイヤー以外を表示させたい場合、以下のようにグループ化させる必要があります。(青レイヤー部分)

ちなみにグループ化していないと、↑のようになります。(写真まで透けちゃった…!)

クリッピングマスクする

クリッピングマスクする方法もあります。見た目的にはこちらの方が分かりやすいかも?

 

以上です。

こういう感じのは今までラスタライズして切り抜いていました………(笑)
これからはノックアウトオプションも活用したいと思います…!

ノックアウトオプションの存在はいつもお世話になってるWebクリエイターボックスさんで知りました。ありがとうございます!

 

それではまた次回。

ご閲覧ありがとうございました。

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ