見出し画像

【PhotoShop】背景透過の方法

画像をいち早く使いたいとき、背景が色付きなのを避けて透明を選びたいと思いませんか?

photoshopでそれが簡単に実現できます。

参考にさせていただきました!ありがとうございますm(_ _)m

背景を透明にする

手順として以下になります。

1.新規作成にて右側のプリセット詳細にて「カンバスカラー」の透明を選ぶ
※幅や高さについて、同じくプリセット詳細にて調整してください。

スクリーンショット 2021-03-12 15.24.45

2.加工したい画像をphotoshopの編集画面にドラッグ&ドロップで流し込む
※画像のモデルは禰󠄀豆子ちゃんに抜擢しました😊

スクリーンショット 2021-03-12 15.30.08

3.左ツールバーの「オブジェクト選択ツール」で範囲選択をする
禰󠄀豆子がいる場所の周りを左上から右下にいつものように範囲選択します。
すると、自動検出で白い点線が浮かび上がります。

スクリーンショット 2021-03-12 15.32.04

4.上ツールバーの「選択とマスク...」をクリック
※この画像は「選択とマスク...」をクリックした後になります。

スクリーンショット 2021-03-12 15.33.04

一気に編集画面ぽくなりましたね😳✨

5.左ツールバーの「クイック選択ツール」で判定しきれなかった部分をざっくり調整
※今回はそこまで細かく調整する場所もないため画像を省きます。

たまに、範囲選択されていないと白い点線が及んでいないところが出てくるので、「クイック選択ツール」で消しゴムで削るかのように上からなぞってあげると選択してくれます。

6.右側の属性欄にて、「表示モード」の表示にある画像の↓ボタンをクリック

スクリーンショット 2021-03-12 15.35.58

7.中から白黒を選択

スクリーンショット 2021-03-12 15.37.14

シルエットで禰󠄀豆子ちゃんですね笑

8.属性欄の下部、「出力先」にて「新規レイヤー」をクリック

スクリーンショット 2021-03-12 15.38.20

9.「OK」をクリック

スクリーンショット 2021-03-12 15.39.10

ファイルの保存の注意点

保存時、フォーマットを選ばなければ画像の拡張子を指定しても形式としては初期設定のphotoshopのままになりますのでご注意を!

そのため、画像としてパソコン上では表示できますが、コーディングとして読み込ませようとしてもエラー表記で読み込めません。

また、そのような画像をWebで読み込ませると白色の四角があるだけなので、その場合はフォーマットの選択を見逃している場合が多いです。

ぼくの場合、フォーマットの存在を知らずいつも通り拡張子は.jpegで。
と思い、直接ファイル名から書き直してエラーになって焦りました笑

まとめ

いかがでしょうか。

背景の透過はとても簡単に行えちゃいます!
photoshopは有料ということもあり少し抵抗はあるかと思いますが、その分凌ぎのない活用力を見せてくれるので、ぜひ使ってみましょう!

ありがとうございました!(^^)/

この記事が気に入ったらサポートをしてみませんか?