フォトショップ エレメンツ ビギナーのために
                        Windows編

画像の背景を透明に−クイック選択ツール

ホームページ作成において掲載写真の各種画像編集が必要になります。 当サイトでは、PhotoshopElements初心者を対象として ホームページ作成・運営で必要な各種画像編集を中心とした操作を紹介します。

画像背景の透過・透明に − クイック選択ツール − 概要



画像の全体あるいは一部を編集する時、該当部分の選択範囲を指定しておく必要があります。

このページは、デジカメ画像の背景部分の選択範囲を指定し、その背景部分を透明に透過処理し、他画像との合成操作を説明します。

PhotoshopElementsで選択範囲を指定するには、幾つかのツールが用意されており、その中の「クイック選択ツール」 を使用します。

「クイック選択ツール」 は、同じ様な色・模様・質感により自動的に選択範囲を決めるツールです。
ツール設定・操作などの調整により複雑な範囲でも選択範囲を指定できます。

■ 操作イメージ ■


オリジナル画像
オリジナル画像



こんな画像編集も

こんな画像編集も




  
クイック選択ツール
(選択範囲の指定)



 
 画像編集(合成)







 
 画像編集(合成)


点線部分が選択範囲
  
選択範囲の反転
背景部分の透明化

背景を透明に



画像の背景を透明に − クイック選択ツール − 操作方法


1. モードの確認
モードの確認
モードの確認
Photoshop Elements Editorを起動し、「編集:スタンダード編集」 モードになっていることを確認します。

「編集:スタンダード編集」の起動方法は、「 スタートアップスクリーン 」を参照ください。
2.オリジナル画像を開く
オリジナル画像の表示
オリジナル画像の表示
ファイルの開き方は、「 ファイルを開く 」を参照ください。

以下のクイック選択ツールにてオリジナル画像の 「柿の実」 部分と 「枝の一部」 部分を選択範囲に指定します。

なお、柿の実は2個重なっており、前面にある1個のみを選択します。

3.背景レイヤーの変換

背景レイヤー
パネルエリア(ウインドウ右側)のレイヤーパネルに背景レイヤーが表示されています。
この背景レイヤーを通常のレイヤーに変換します。
背景レイヤーのままであればレイヤーの重なり順の変更、不透明度の変更ができず、後で行う透明編集で「透明」が「白色」になってしまいます。

※レイヤーパネルが表示されていない場合、「メニューバー」→「ウインドウ」の「レイヤー」と「パネルエリア」をチェックします。

背景からレイヤーへ
「メニューバー」→「レイヤー」→「新規」→「背景からレイヤーへ」を選択、あるいは背景レイヤーをダブルクリックします。

レイヤー名の指定
「新規レイヤー」ダイアログが表示され、任意の名前を指定し、OKを選択します。
これで背景レイヤーから通常のレイヤーに変換されます。
4. クイック選択ツールによる選択範囲の指定

(1) クイック選択ツールの選択
クイック選択ツールの選択
クイック選択ツールの選択
ツールボックスから 『クイック選択ツール』 を選びます。

ツールボックスに 「クイック選択ツール」 が表示されていない場合があり、他関連ツール「選択ブラシツール」 が表示されている場合があります。

そのアイコン右下の三角印を数秒間クリックし続けるとプルダウンメニューが表示され、そのメニューから選択できます。

※ツールボックスの各ツールアイコン右下の三角印は、そのアイコンに他の関連ツールが含まれていることを示します。

(2) クイック選択ツール・オプションの設定
クイック選択ツールのオプション設定

クイック選択ツールのオプション設定
クイック選択ツールのオプション設定
オプションバーの左側に選択範囲の追加・削除の指定があります。

 新規選択(初期値)

 選択範囲に追加

 現在の選択範囲から
 一部を削除

この 「・・・追加」 と 「・・・削除」 により選択範囲の調整を行います。

ブラシサイズを設定します。選択範囲を広範囲に指定する場合、大きな値を設定し、微調整する時には小さな値を設定します。

上記、「・・・追加」、「・・・削除」 とブラシサイズの設定により複雑な範囲でも選択できます。
(3) クイック選択ツールによる選択範囲の指定
クイック選択ツールの実施
クイック選択ツールによる選択範囲の指定
オプションバーの設定を 「新規選択」 にし、次ぎの様に選択範囲を指定します。

選択する部分を大ざっぱにドラッグします。

例では、「柿の実」 の左上から右下に向かってブラシサイズ:5pxにてドラッグしています。
ドラッグするに従い選択範囲の境界線(点線)が広がります。
またドラッグは、直線的でも曲線的のどちらでもOKです。
選択範囲
クイック選択ツールによる選択範囲
不要部分が選択されてしまった!
ドラッグすると同じような色・模様・質感により自動的に選択範囲の境界線が広がります。

例では、白の点線が選択範囲の境界線です。。。が 「後ろの柿の実」や「葉」 の不要部分まで選択されてしまいました。

次にこの不要部分を削除します。
(4) クイック選択ツールによる選択範囲の一部削除
現在の選択範囲から一部削除を選択
「現在の選択範囲から一部削除」を選択
オプションバーの設定から 「現在の選択範囲から一部削除」 を選びます。

選択範囲の削除
選択範囲の削除(境界線を前面の柿のみに)
不要な部分の境界線を本来の選択範囲位置までドラッグします。

この時、表示倍率を大きく、またブラシサイズを小さな値にすると、見易く微妙な調整ができます。

例では、前面の柿と背面の柿が同じ色のため見づらく削除調整しずらいため、150%程度に拡大表示、またブラシサイズを2px程度にし、境界線を少しづつ削除調整しています。
(5) クイック選択ツールによる選択範囲の追加
柿の実部分の選択範囲
柿の実部分の選択範囲の完了 次に枝部分を・・・
前面の 「柿の実」 部分の選択範囲が指定できました。

次ぎは 「枝」 部分に選択範囲を広げます。
「選択範囲に追加」を選択
「選択範囲に追加」を選択
オプションバーの設定から 「選択範囲に追加」 を選択します。


選択範囲の追加
選択範囲の拡大
境界線をドラッグし、選択範囲を広げます。

複雑な画像の場合、ブラシサイズを大きくすると余分な部分が選択され易くなります。

この時、(4)の選択範囲の一部削除と同様に表示倍率を大きく、かつブラシサイズを小さな値にすると、見易く微妙な調整で選択範囲を広げることができます。

例では、150%程度に拡大表示、またブラシサイズを2px程度で境界線を少しづつ広げています。

選択範囲の追加
選択範囲の拡大
境界線をドラッグし選択範囲を少しづつ広げます。

余分な部分が選択された場合、(4)の「選択範囲から一部削除」 にて削除、あるいは 「クイック選択の取り消し」 にて削除・やり直しします。

クイック選択の取り消しは、「メニューバー」 → 「編集」 → 「クイック選択の取り消し」を選択します。

(6) 選択範囲の指定 完了!!!!
選択範囲の完了
選択範囲の指定が終了!!
柿の実と枝部分が選択できました。

とりあえず ご苦労様でした。


ここで選択された範囲は、境界線(点線)の内側です。
この状態でコピーし、他画像へペーストすると、境界線内イメージが他画像へペーストされます。
 こんな画像の
 できあがり。



※メニューバー→編集→コピーし、
 他画像へペースト

また透明の白紙画像にコピー&ペストすると、この方法でも背景が透明の画像ができます。
 背景が透明な
 画像。
 ※背景は、
   格子模様

※透明の白紙画像:メニューバー→ファイル→新規→白紙ファイルでカンバスカラーを透明で作成
5. 背景を透明に

(1) 選択範囲の反転
「選択範囲を反転」を選択
選択範囲を反転
選択された範囲は、境界線(点線)の内側です。
これを反転し、境界線の外側を選択します。

「メニューバー」 → 「選択範囲」 → 「選択範囲を反転」 を選びます。
選択範囲の反転
選択範囲を反転する
画像の外側に新たな境界線(点線)が表示され、内側と外側の境界線の間が選択範囲になります。

例では、「柿の実と枝」 以外の範囲が選択されます。

(2) 背景を削除
背景の削除
背景の削除    ※格子模様:透明部分を表す
「Deleteキー」 押下すると選択範囲部分が削除され、背景部分が透明になります。
この背景を透明にした画像により色々な加工編集ができます。


※「3.背景レイヤーの変換」にて通常レイヤーに変換せず背景レイヤーのままであれば背景は透明ではなく白色です。
(3) 画像の背景を透明に 完了!!!!

背景が透明に
画像の背景を透明にできました。


なお 「選択範囲を反転」 せず 「Deleteキー」 を押下すると境界線の内側(柿の実と枝部分)が削除され、透明になります。






画像の背景を透明にする操作は、ここで終了です。

※ ファイルの保存形式について
 JPEG形式では、透明色がサポートされておらず、そのままJPEG保存すると透明部分が白色になります。
 作業途中など透明色のまま保存する場合には、PSD形式(フォトショオ゚エレメンツ用)で保存できます。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
以下は、その背景を透明にした画像と別画像の合成操作です。

6. 画像編集 (背景が透明な画像と他画像の合成)

   この画像編集では、上記の背景を透明にした画像と別画像の合成を行います。

(1) 別画像ファイルを開き、コピー

別画像ファイルを開く
別の画像ファイル(背景イメージに使用する画像)を開き、画像イメージをコピーします。

@ ファイルを開く
A 選択範囲の指定(画像全体)
「メニューバー」→「選択範囲」→「すべてを選択」にて画像全体を選択範囲とします。
B 画像イメージのコピー
「メニューバー」→「編集」→「コピー」にて画像イメージをコピーします。
(2) 背景を透明にした画像にペースト

背景が透明な画像
「背景を透明にした画像」ウインドウをアクティブ(クリック)します。

レイヤーパネルには、一つのレイヤーが表示されています。
このレイヤーは、「3.背景レイヤーの変換」にて通常レイヤーに変換されたレイヤーです。

背景が透明
別画像のイメージをペーストします。

「メニューバー」→「編集」→「ペースト」にて別画像イメージを「背景を透明にした画像」にペーストします。

レイヤーパネルには、ペーストにて新たなレイヤーが追加され、計2つのレイヤーが表示されます。
しかし画像イメージは、背景用の「空」のみが表示され、「柿」は表示されていません。
これはレイヤーの重なり順によるものです。
(3) レイヤーの重なり順の変更

レイヤーの重なり順
画像の見え方は、レイヤーパネルの「上」から順に「下」へレイヤーを見ています。

この例では、1番目の「レイヤー1」、2番目の「透明画像」の順になっており、1番目のレイヤーは全面画像(空)のため、2番目のレイヤー内容(柿)が見えません。

レイヤー重なり順の変更
2番目のレイヤー(透明画像)をドラッグし、1番目の上に移動します。

画像の見え方が1番目の「透明画像」、2番目の「レイヤー1」の順に入れ替わります。

※「3.背景レイヤーの変換」にて通常レイヤーに変換せず背景レイヤーのままであればレイヤーの重なり順を変更できません。

透明部分が透けて見えた
「柿」イメージが見え、さらに 透明部分が透けて「青空」イメージが見えます。


(4) 2つの画像の合成 完了!!

背景が透明
背景を透明にした画像と別画像の合成ができました。


なお 「5.選択範囲を反転」 せず柿の実を透明にした画像と別画像を合成すると次ぎのイメージができます。



7. 画像ファイルの保存

   ファイルの保存は、「 ファイルを保存 」 または 「 Web用に保存 」を参照ください。