5分でできる!Photoshopでシェイプを切り抜いてのぞき窓みたいにしたい

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年1月17日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

サイトでノウハウ的ページを作っていて、画像を使う時に「ここを目立たせたいな」と思う時があります。
赤枠で囲うだけでもいいんですが、元の画像の情報量が多くてゴチャゴチャしている場合、もう少し分かりやすくさせたい時はどうするか。

私がよく使ったのは、「半透明のシェイプをかぶせて、目立たせるところだけ切り抜く」というやり方です。

難しくはないんですが、いざやろうと思った時に結構迷うので、メモがてら書き留めておこうと思います。

  1. まず、元の画像の上に半透明のシェイプをぴったり被せます。
    170109ps01
  2. 次に、切り抜きたい形のシェイプを上に乗せます。
    170109ps02
  3. 1と2で追加したシェイプの両方に、レイヤーマスクを追加します。
    170109ps03
  4. 切り抜く形のほうのレイヤーマスクを選択(白枠が付いた状態)してctrl+Cでコピーし、抜かれるほうのレイヤーマスクにctrl+Vで貼り付けます。
    170109ps04
  5. レイヤーウィンドウを「パス」に切り替え、パスを選択範囲として読み込み(下の点線でできた○をクリック)ます。
    170109ps05
  6. 切り抜く形のパスが選択状態になるので、「Delete」キーを押します。
    170109ps06
  7. レイヤーを非表示にすると、目立たせたいところだけ切り抜かれています!
    170109ps07

やってみると簡単なんですが、「レイヤーマスク」の使い方がよく分かっていない頃は結構悩みました…。

PR