Tres Innovation

2017年07月31日

【Photoshop活用術】めんどくさがりでも簡単に出来る背景切り抜き方法!

Pocket

 

 

 

こんにちは!WEBデザイン担当している昔宮です。

 

突然ですが私は切り抜きが苦手です!

デザインを作っている上で避けて通れない道ではありますが

極度のめんどくさがりなので切り抜きが苦手なのです。

せめて背景が一色、白バックだと良いのですが、

背景ぐちゃぐちゃなやつは出来れば切り抜きたくない!(笑)

 

なので今回はどうにか簡単に切り抜き出来ないかなーと考えていて、

私なりにやりやすいと思った切り抜き方法を紹介させていただきます。

 

 

 

マスクを使用した複合技

 

 

日頃切り抜きをしていて最後に失敗していた、、、。

元に戻せない、、、。

 

なんて二度手間になることをやりたくないので

私は絶対にレイヤーマスクを使用します!

 

 

ただ、元画像を保持したまま作業をする事になるのでデータは重くなります。

切り抜きが完成した際スマートオブジェクトに変換した方がいいかもしれません。

私は心配性なのですべての制作が終了して、クライアントさんに出すなど

データが軽い方がいいと言う時にスマートオブジェクトに変換します。

 

 

 

使用しているツール

 

 

  • パス(ペンツール)
  • ブラシツールと消しゴムツール

 

 

 

パスの切り抜きのみの場合

 

 

基本的にパスは変形利用が多いかと思いますが

パスが苦手な私にはつらいので(笑)

歪なカーブが少なく直線や緩やかなカーブが多い場合に使用します。

物撮り切り抜きが最適!マグカップやお皿など正円ではないものに使えます。

 

 

 

手順

 

 

1,切り抜きたい画像をPhotoshopで開きます。

 

 

cut5

 

 

2,レイヤーの背景を右クリックで「レイヤーを複製」します。

 

 

3,複製したレイヤーにペンツールで切り抜きたい対象物に

パス(アンカーポイント)を引いていきます。

 

 

cut4

 

 

4,パス(アンカーポイント)が引き終わったら右クリックで

「ベクトルマスクを作成」して切り抜き完成!

 

 

 

POINT

 

あまりアンカーポイントを多く作らないことです。無駄にアンカーポイントを多く作ると

今回のように直線や緩やかなカーブに対しての切り抜きだと歪みの原因になります。

もしパスが一発でうまくいかなかった場合は「アンカーポイントの切り替えツール」や

「パス選択ツール」できれいに修正をします。

 

 

 

メリット

 

直線が多いプラス一辺に曲線があるときにすぐに切り抜ける。

 

 

デメリット

 

洋服のしわなど形が歪でカーブなどが多いとアンカーポイント多くなり時間と手間がかかる。

 

 

 

パス(ペンツール)ブラシツールと消しゴムツールの場合

 

 

パス(ペンツール)でざっくり切り取った後にブラシを利用して切り取ります。

背景に対して対象物が小さいまたは切り抜き対象が複雑な時に使用します。

切り抜いた対象物を違う画像に加工合成する場合、

境界線を均等+まだらにぼかすことができます。

 

 

 

手順

 

 

1, 切り抜きたい画像をPhotoshopで開きます。

 

1

 

 

2,レイヤーの背景を右クリックで「レイヤーを複製」します。

 

3,複製したレイヤーに「ペンツール」で切り抜きたい対象物にパスを引いていきます。

 

 

2

 

 

4,パス(ペンツール)が引き終わったら右クリックで「ベクトルマスクを作成」します。

 

↓ここからがブラシ利用の手順

 

5,レイヤー下にあるレイヤーマスクのアイコンをクリックし追加します。

 

3

 

 

※ざっくり切りすぎて気に入らなかった場合パスを調整します。

 

6,レイヤーマスクに対して「ブラシツール(色は黒)」で消したいところをなぞっていき切り抜き完成!

 

 

4

 

 

 

5

 

 

POINT

 

ブラシサイズを切り抜き対象物に対してコロコロ変える。

右クリックでブラシサイズやブラシの種類を変更できるので

切り抜く場所により大きくしたり小さくしたりする。

切り抜いた対象物の境界線を均等+まだらにぼかす際は、

右クリックでブラシ種類を変更し、不透明度も調整する。

 

 

メリット

 

パスでザックり切った後に残った部分をブラシでさらっと消せる。

ブラシには直径サイズ・ブラシのパターンを変更できるため

切り抜き対象物にあわせて変更可能。

また、あとから切り抜き失敗に気づいても消しゴムで元通りに復元出来る!

 

デメリット

 

パスとブラシを使うのでパスが得意な人からしたら工数が増える。

ブラシが苦手な人は不向き。

 

 

 

シェイプを使用して切り抜き

 

 

この切り抜きたい画像正方形なんだよな、、、

微妙に歪んでる丸なんだよな、、、

シェイプで同じ形してるの見たことある!

 

元からPhotoshopにあるシェイプを利用して切り抜けたら楽!って時に使います!

ただ、こちらもマスクを基本使用と同じように

元画像を保持したままなのでデータは重くなります。

 

 

 

Photoshopにあるシェイプ利用の場合

 

 

切り抜き対象物がPhotoshopにあるシェイプに当てはまるときに使用します。

正方形や長方形、正円や楕円、多角形は最高に便利です。

カスタムシェイプツールに自分でシェイプを登録しておくともっと便利です。

 

 

手順

 

 

1,切り抜きたい画像をPhotoshopで開きます。

 

 

s1

 

 

2,レイヤーの背景を右クリックで「レイヤーを複製」します。

 

↓ここからがシェイプ利用の手順

 

3,切り抜きたい対象物と同じ大きさや種類でシェイプを引きます。

 

 

s2

 

 

4,レイヤーの順番を切り抜きたい画像レイヤー→シェイプとシェイプを下にします。

 

5,切り抜きたい画像レイヤを選択し「Ctrl+Alt+G」または

右クリックで「クリッピングマスクを作成」で切り抜き完成!

 

※ショートカットキーはWindows版です。

 

 

POINT

 

切り抜き対象物がシェイプと同じ形かと大きさを合わせる。

 

 

メリット

 

切り抜き対象物がPhotoshopにあるシェイプに当てはまるとき

工数が少なく一発できれいに切り抜けます。

 

 

デメリット

 

少しでも切り抜き対象物がPhotoshopにあるシェイプに当てはまらないと

きれいに切り抜きができません。

そして切り抜き対象物が正方形などPhotoshopにあるシェイプに当てはまっても

写真の撮り方などで歪んでいると使用が難しくなります。

 

 

 

Photoshopにあるシェイプ利用からシェイプを変形させる場合

 

 

Photoshopにあるシェイプからシェイプ自体を変形させて

切り抜き対象物に合わせて利用。

基本的には上記「Photoshopにあるシェイプ利用の場合」の

デメリット要素が強かった場合使用します。

若干の歪みとか!シェイプ自体をパスにしていますので、

一からパスを引くのが嫌な場合も使えます。

 

 

 

手順

 

 

1,切り抜きたい画像をPhotoshopで開きます。

 

 

cut3

 

 

2,レイヤーの背景を右クリックで「レイヤーを複製」します。

 

3,切り抜きたい対象物と同じ大きさや種類でシェイプを引きます。

 

4,レイヤーの順番を切り抜きたい画像レイヤー→シェイプと、シェイプを下にします。

 

 

cut2

 

 

5,切り抜きたい画像レイヤを選択し「Ctrl+Alt+G」または

右クリックで「クリッピングマスクを作成」

 

↓ここからがシェイプを変形させる手順

 

6,シェイプを選択し「パス選択ツール」にツールを持ち替えます。

 

7,「パス選択ツール」でシェイプをクリックするとアンカーポイントが表示されます。

 

 

cut1

 

 

8,切り抜き対象物に合わせてアンカーポイントを動かしたり

「アンカーポイント追加・削除ツール」でアンカーポイントを調整すれば切り抜き完成!

 

※ショートカットキーはWindows版です。

 

 

POINT

 

「アンカーポイント追加・削除ツール」の使い方できれいに切り抜けます!

切り抜き対象物がシンプルな形であるものに使用した切り抜き方法なので

パス(ペンツール)と同じくあまりアンカーポイントを入れると切り抜きがガタつきます。

 

メリット

 

あと少しで切り抜き対象物がPhotoshopにあるシェイプに当てはまるとき

工数が少なく一発できれいに切り抜けます。

シェイプ自体をパスにしてしますので、自分次第で自由自在。

 

デメリット

 

上記で記載したブラシツールの併用ができない。

(切り抜きたい画像は消せてもクリッピングマスをしたシェイプが見えてしまう。)

切り抜き対象物が複雑な形の時にはただ工数増えるだけになってしまいます。

 

パス(ペンツール)を引いてしまった方が早いでしょう。

 

 

c3

 

 

c1

 

 

c2

 

 

 

 

以上、私が普段使用している切り抜き方法でした!

 

 

 

 

 

 

この記事を書いた人

I hope share!この記事をシェアする