コンテンツ
GIFなどの透明な画像を使用すると、Webページのコンテンツとテキストを背景画像を通して表示できます。たとえば、Webデザイナーは青い背景のWebページに車の画像を配置できます。画像の背景は透明なので、青色で囲まれた車が1台だけ表示されます。 Photoshopを使用して同様の効果を作成し、画像の白い領域を透明にすることができます。
透明度を追加する
ステップ1
Photoshopを起動し、白い領域を含む画像を開きます。最良の結果を得るには、背景が純色のものを選択してください。
ステップ2
ツールボックスの「魔法の杖」ツールをクリックします。
ステップ3
画像の白い領域をクリックします。 Photoshopは、その白の陰影を含むすべての領域をハイライトします。 「背景消しゴム」ツールをクリックして選択します。
ステップ4
Photoshopウィンドウの上部にある「オプション」バーを見つけます。 「画像」という単語の下の矢印をクリックします。オプションを含むダイアログウィンドウが表示されます。
手順5
「アンチエイリアス」チェックボックスをクリックして、チェックマークを追加します。 「許容値」テキストボックスはデフォルト値の「32」のままにします。
手順6
「サイズ」オプションの小さな四角をクリックし、マウスの左ボタンを押したままバーを右端までスライドさせて、「背景消しゴム」ツールのサイズを最大化します。
手順7
画像の任意の場所をクリックします。 Photoshopは選択された白い領域を削除します。残っている場合は、ツールバーの[オプション]の下にある[許容差]テキストボックスの値を増やし、画像をもう一度クリックします。プログラムは追加の白い領域を選択します。透明にしたくない領域を選択した場合は、「Ctrl」、「Alt」、「Z」キーを同時に押して変更を元に戻し、許容値を減らし、画像をもう一度クリックして白い領域を選択します。透明にする領域のみを選択するまで、これらの手順を繰り返します。
手順8
[画像]、[モード]、[インデックスカラー]の順にクリックして、[インデックスカラー]ウィンドウを開きます。
手順9
「透過性」をクリックしてチェックボックスをオンにし、「OK」をクリックしてウィンドウを閉じます。
画像を保存する
ステップ1
「ファイル」をクリックしてメニューを開きます。
ステップ2
「Webおよびデバイス用に保存」をクリックします。 [Webおよびデバイス用に保存]ウィンドウが開きます。
ステップ3
「保存」をクリックして、「オプティマイズに名前を付けて保存」ウィンドウを表示します。
ステップ4
「ファイル名」フィールドにファイルの名前を入力し、「保存」をクリックします。 Photoshopはファイルを透明GIFとして保存します。
