透過GIFとマット処理

作成:2010/08/13




Photoshop講座へ戻る ホームページへ戻る

改訂履歴 2010/08/13 初版


透過GIF画像の作成

透明な背景の画像を作成し、それを「Webおよびデバイス用に保存...」コマンドで透過GIFにしてみます。

  1. ベクトルシェイプツールで透明な背景(背景レイヤーを非表示にしてもよい)の上に適当な画像を描きます。



  2. [ファイル]メニューから[Webおよびデバイス用に保存...]を選択します。


  3. 「設定」を「GIF64ディザ」にし、「透明部分」のチェックをオンにします。



  4. [保存]ボタンをクリックし、「testfile01.gif」の名前で保存します。


  5. できあがった画像(ここではtestfile01.gif)を表示させるため、次のような内容のHTMLファイル(test.html)を任意のテキストエディタ(メモ帳やテキストエディット)で、画像ファイルと同じフォルダに作成します。これは、背景が真っ黒のページを表示します。

    <HTML>
    <HEAD><TITLE>TestPage</TITLE></HEAD>
    <BODY BGCOLOR="#000000">
    <IMG SRC="testfile01.gif">
    </BODY>
    </HTML>


  6. ブラウザで、作成したHTMLファイルを開いてみます。背景部分が透過されているはずです。



マットカラー処理

ドロップシャドウがあるロゴなどをWebページの背景に溶け込むようにするには、先の透明GIF画像の作成とマットカラー処理を組み合わせると便利です。

  1. 前のステップで作成した画像で、図形を描いたレイヤーをアクティブにしてから、[レイヤー]→[レイヤースタイル]→[ドロップシャドウ...]を選択し、デフォルトの設定で実行します。




  2. ドロップシャドウがある状態のまま、[ファイル]→[Webおよびデバイス用に保存...]を選択します。


  3. 右上の画像を選択してから、「プリセット」を「GIF64ディザ」にします。透明部分が反映されているはずですが、エッジの部分をよくみると、エッジのぼかしのある箇所は白く表示され、透過されていないのがわかります(図は部分拡大したもの)。



  4. 「マット」ドロップダウンリストの「その他...」を選んでから、カラーに赤色(#ff0000)を指定します。
    今度はエッジの透過されていない部分が赤色になります。
    最終的なホームページの背景が赤色である場合は、このまま保存するとうまくなじんで透過しているように見えます。



  5. さらに「透明部分」チェックボックスの下にある「透明ディザなし」を「誤差拡散法透明ディザ」にしてみます。エッジの部分がこまかく透過されます。
    最終的なホームページの背景が写真画像など、複雑な場合は、エッジがかなりスムーズになります。






Photoshop講座へ戻る ホームページへ戻る

www.fmod.jp