フォトショップで背景を透明にする3つの技をスイスイ理解できる!

デザイン

2017/05/08

デザイン

アイコンやイラストなど、背景を透明なまま保存したいケースはありませんか?

画像を合成する際にも使うことができます。

そこで今回は、フォトショップを使用して、背景を透明にして保存する3つの方法を解説します。

フォトショップで背景を透明にして保存する方法

まずは背景を透明にして保存する方法を説明していきます。透明なキャンバスに絵を描きたいときには、オススメの方法です。

これは、新規ファイルを作成するときに、あらかじめ背景を透明にしておけばいいのです。

「ファイル」→「新規」を選択し、新規ファイルを作成します。その際、カンバスカラーで「透明」を選択してください。(選択肢に「透明」が出てこない場合は、「詳細オプション」をクリック後、カンバスカラーをクリックしてください)

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8150

OKをクリックすると、背景色が透明な画像が作成されます。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8151

そのキャンバスに、ブラシなどで絵を書きます。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8120
イラストなどを作成後、画像ファイルに書き出せば完成です。書き出しの方法は後述します。

 

フォトショップで画像を切り抜いて背景を透明にする方法

続いて、切り抜きたい画像の背景を透明にする方法を解説します。

まずは背景を透明にしたい写真を用意します。

image_bf0cf3d今回はこちらの画像を使用していきます。ゴルフクラブの周りを透明にしていきたいと思います。

フォトショップで画像を開くと、レイヤーが「背景」になっている場合があります。その際は、レイヤーを右クリックし、「背景からレイヤーへ」を選択してください。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8124
そうすると、新しいレイヤーが作成されます。

次に左のメニューから選択ツールアイコンを右クリックして「クイック選択ツール」を選びます。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8126

その状態で切り抜きたい画像に沿って、ドラッグしていきます。

なお、失敗してしまった際には、Alt+ドラッグで選択範囲を消去することができます。

人物の切り抜きで髪の毛などは、「レイヤーとマスク」内の「境界線調整ブラシツール」等でこの選択範囲を微調整していく必要があります。

 

画像の選択が完了したら「選択範囲」→「選択範囲を反転」をクリックします。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8130

背景が選択されている状態になったら、「編集」→「消去」をクリックします。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8131

これで、背景を透明にして画像を切り抜くことができました。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8132

背景を消去する以外にも、選択範囲(ここではゴルフクラブ)にレイヤーマスクをかけてもOKです。

マジック消しゴムツールで背景を透明にする方法

最後に、「マジック消しゴムツール」を使って、背景を透明にする方法について解説します。

「マジック消しゴムツール」は、クリックでした箇所の色(と類似した色)が消去されるツールです。

記号や文字列などのはっきりした画像で、背景が単色の場合などにはかなり使えるツールですので、覚えておきましょう。

今回はこの画像を例にします。

udemy_logo_large_greenフォトショップで開いたら、左のメニューバーから「マジック消しゴムツール」を選択します。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8140

この状態で背景部分をクリックすると、一気に背景が消去されます。(下図の状態です)

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8141

しかし、この状態だと、「d」と「e」の中心に色が残ってしまいます。

そこで、メニュー上部の「隣接」のチェックをはずして、もう一度やってみます。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8143

すると今度は1回ですべての背景が透過状態になりました。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8142

「マジック消しゴムツール」では、「隣接」の使い方を覚えておいてくださいね。

・隣接にチェックを入れる→同色の隣接した部分のみ透過になる
・隣接のチェックを外す→同色であれば隣接していなくても透過になる

背景を透明にした画像の保存方法

透明を保持して保存できるファイル形式はGIFまたはPNGになります。上記の方法で背景を透明にしたフォトショップのデータは、「ファイル」→「書き出し」→「WEB用に保存」で、GIFまたはPNGで書き出してください。

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8122

 

その際に、必ず「透明部分」にチェックが入っていることを確認してください。(そうしないと白い背景で保存されてしまいます。)

%e3%82%b9%e3%82%b1%e3%83%83%e3%83%8152

これで背景が透明な画像の完成です。

いかがでしたか?背景を透明にする3つの方法は理解できましたか?

写真を合成する時などに役立ちますので、おすすめです。

udemyでは、フォトショップ初心者でも確実にスキルアップできる講座を用意しています。

プロのデザイナーが丁寧に教えてくれるとても売れている講座なので、ぜひこれを機にフォトショップをマスターしてみてはいかがでしょうか?

WEBデザイン学習者が学ぶべきスキルセット

UXデザインツールAdobeXDの講座が遂に登場!

通る企画が作れるように!デザイナーの教える企画のコツ

UI設計からデザインまで アプリ・WEBデザイナーで人気沸騰中の新ツールSketchを学ぶ

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事