コンテンツ
GIFなどの透明画像を使用すると、Webページ上のコンテンツやテキストを背景画像を通して表示できます。たとえば、Webデザイナーは青い背景のWebページに車の画像を配置できます。画像の背景は透明なので、青い色で囲まれた車は1台だけです。 Photoshopを使用して、画像の白い部分を透明な部分に変えることで、同様の効果を生み出すことができます。
説明書
-
Photoshopを起動して、白い領域を含む画像を開きます。最良の結果を得るには、白い背景の濃いものを選択してください。
-
ツールボックスの「魔法の杖」ツールをクリックします。
-
画像の白い部分をクリックしてください。 Photoshopはこの白いトーンを含むすべての領域をハイライトします。 「背景消しゴム」ツールをクリックして選択します。
-
Photoshopウィンドウの上部にある[オプション]バーを見つけます。 「画像」という単語の下にある矢印をクリックします。オプションを含むダイアログボックスが表示されます。
-
チェックマークを付けるには、「アンチエイリアス」チェックボックスをクリックします。 [許容値]テキストボックスは、デフォルト値の[32]のままにします。
-
[サイズ]ボックスの小さい四角形をクリックし、マウスの左ボタンを押したままバーを右いっぱいにスライドさせて、背景消しゴムツールのサイズを最大にします。
-
画像内の任意の場所をクリックしてください。 Photoshopは選択された白い領域を削除します。残っている場合は、ツールバーの[オプション]の下にある[許容値]テキストボックスの値を大きくして、もう一度画像をクリックします。プログラムは追加の白い領域を選択します。透明にしたくない領域を選択する場合は、 "Ctrl"、 "Alt"、および "Z"キーを同時に押して変更を元に戻し、許容値を減らして、もう一度画像をクリックして白い領域を選択します。透明にする部分だけを選択するまで、これらの手順を繰り返します。
-
[画像]、[モード]、[インデックスカラー]をクリックして、[インデックスカラー]ウィンドウを開きます。
-
[透明]をクリックしてチェックボックスをオンにし、[OK]をクリックしてウィンドウを閉じます。
透明度を追加する
-
「ファイル」をクリックしてメニューを開きます。
-
[Webとデバイス用に保存]をクリックします。 [Webとデバイス用に保存]ウィンドウが開きます。
-
[Save]をクリックして[Save Optimizes As]ウィンドウを表示します。
-
[ファイル名]フィールドにファイルの名前を入力して[保存]をクリックします。 Photoshopはファイルを透明GIFとして保存します。
画像を保存する
どうやって
- 白い色が透明であることを確認するには、Webページの1つに画像を追加してブラウザで開きます。白い色が存在する場所では、画像は透明に見えます。
お知らせ
- 背景消しゴムツールは、マジックワンドツールを使用して選択したものと色が一致するすべての白いトーンを削除します。たとえば、写真の誰かが背景色と一致する白いシャツを着ている場合、Photoshopもそれを透明にします。この方法を使用するときは、他のオブジェクトの色と一致しない、均一な白い背景色を持つ画像を選択してください。