画像の背景を透明にするやり方

Pocket

Web上のものにしても印刷物を作るにしても、背景をなくしたい、透明にしておきたい時ってありますよね、それってどうだっけ?え?あれ?ってなったりしてません?

私は以前よくなってました笑

なので今回まとめておこうと思います

画像の背景を透明にする

〜〜項目〜〜〜〜〜〜

❤︎1、背景を透明にできるファイル形式

❤︎2、PSDで背景を透明にする

❤︎3、PNG・GIFで背景を透明にする

❤︎4、EPSで背景を透明にする

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

 

❤︎1、背景を透明にできるファイル形式

背景を透過処理にできる画像ファイル形式というのがあります

例えばjpgではできないんですよね、、チェッて感じですが笑

ま、できないんだからしょうがないですよね笑

 

で、できるファイル形式は、PSDPNG/GIFEPSです

 

透過処理、背景を透明にできるファイル形式は、
PSDとPNG/GIFとEPSですねぃ

あともちろんaiもですがこれは通常イラレないと開けない
PSDも基本的にはフォトショのファイル形式

その他にもそのソフトのファイル形式で可能なのがあるのかと思いますが,,,,

上記のファイル形式は一般的によく知られる形式で透過処理できるものです

 

❤︎2、PSDで背景を透明にする

写真画像はまずは背景を透明にする(なくす)処理を先にしないとならない

イラレで作ったアイコン画像などはすぐにそのままPNGなどにすれば良いですが写真画像なんかはそうもいかない

写真画像の背景を透明にするにはフォトショなどのそれ用のソフトで背景を消すことがまず必要になる

今回はフォトショ(Photoshop)での手順です

PSDファイルでレイヤーがすでにあり、背景レイヤーもある場合は背景レイヤーの目のマークをクリックして背景レイヤーをミュートしたり、背景レイヤーを削除すれば背景は透明になります

写真画像のようなレイヤーが背景と別れてない場合背景を抜く必要がありますよね、、まずはそのやりかたです

 

❶必要な部分か、背景を選択して抜き出す、または背景を削除する
どっちか選択しやすい方を自動選択ツールなどで選択して選択を反転させて背景を消してもいいし、必要な部分を抽出して新規作成でも良い

02_BASS

 

❷今回は抽出して新規で作りました
必要な部分、背景以外の部分を選択ツールで選択→コピー→新規作成→ペースト

03_BASS

ここまで出来たら一度そのままレイヤーを統合せずにPSDで保存しとくと良いと思う

これでこのままイラレに配置しても背景は透明のままいけるので、PSDを配置して良い印刷屋さんに入稿するならこれが一番簡単w

 

ただ、PSDで配置しないでくださいとか、PSDを配置するならなるべく統合してくださいなど言う印刷屋さんもいる

 

PSDで配置NGの場合は、クリッピングパスで抜いてEPS保存しても背景の透過処理はされたまま保存できるのでくっきりした抜きで背景を透明にするならそれでいける(詳しくはこのページの後半の❤︎4、EPSで背景を透明にするwを参照)

ふわっと曖昧な境目にしたいならもう仕上がり絵図の背景ごと画像にしてしまうしかないと思う

 

PSDの統合は、”画像の統合” をしてしまうと、背景は白くなってしまう

んが、レイヤーが分かれたままカラーモードをRGBとかCMYKにしようとすると

“レイヤーを結合” しますか?と尋ねられます

その際、はい にすると、背景は透明のままレイヤーは結合される

なので最後に画像サイズも決まり、リサイズする時にカラーモードをCMYKに変換し、その時不要なレイヤーは削除して更にレイヤーの結合をすれば良いと思う

 

その紙面全体を画像にしてしまえば良いというかそうするしかない

更に、抽出はどのように選択ツールを使うのかによってキレイさや速さが変わってきます

そのシーンにあった選択ツールを活用することがカギです

 

選択ツールの活用の仕方、抽出などにもかかわることは下記のページの内容も知っておくと便利w ↓

Photoshopのツール全内容とよく使うパネル

 

フォトショクイック選択ツールの動作が異常に重い場合の対処法

 

 

 

❤︎3、PNG・GIFで背景を透明にする

Web上で使う場合はPSDのままだとどうにもならない。。。。

でもPNGやGIFにすればOK

 

まずはPNGやGIFにしたい場合ですがこれは一番簡単。。。

さっきPSDで保存しておいた画像からすぐできる

背景なしにしたPSDファイルを、
ファイル>Web用に保存>

Webように保存

 

で、右上のプルバーでPNGとかGIFを選択して保存すればOK

PNG GIF

 

ちなみに下図は背景を抜いたpngです笑
雑ですまみせん。。。。。

(‾ェ(‾ェ‾)ェ‾)v

背景透明PNG

 

 

 

❤︎4、EPSで背景を透明にする

EPSはWeb上で使うものには別に必要ないけど印刷物にするなら結構使う

入稿データの配置画像は全部EPSでwって指定の印刷屋さんも多い

そんな場合、背景透明にしたPSDのままだとマブイ いや マズイw

ってことで

EPSで背景を透明に!

 

これはレイヤーが分かれたままの状態でEPSで保存すると背景は透明を維持できる

あとはくっきりした輪郭で背景を抜くなら、パスでを作成してやるのも良いでしょう

 

手順❶まずはやはり背景を削除してPSDファイルにしておくとか使う部分を抽出しておく、、、、
それは上記の手順です

で、

パスパネルを開き、パスパネルの下にある“選択範囲から作業用パスを作成”できるタブをクリック(なんか宇宙っぽいアイコンのやつ)

パスパネルがない場合は、上部バーのウィンドウ>パスで開ける

パスパネルの下にある"選択範囲から作業用パスを作成"

 

❷さらにパスパネルの右上にある三角のタブを開き、パスを保存

パスを保存

 

 

❸さらに”クリッピングパス”をクリック

クリッピングパス

 

❹で保存

クリッピングパス保存

 

❺これでファイル>別名で保存>EPSで保存すればOK

 

で、イラレに配置する場合は最初に解像度350,CMYKカラーに変換しておくこともお忘れなくw

 

そんなところです

 

ってことでたのしいくりえいてぃぶらいふあれ!

しゃらんるわあぁああ♥

Rh.jam pj / あなたのクリエイトをサポートします

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤Twitter, Facebook, G+, Feedly にて当サイト更新情報配信中です
宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

 Twitter   asset.f.logo.lg   btn_g_red_normal.png-34

follow us in feedly

 

関連コンテンツ

(-v-)b

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

thirteen − five =