「Web用に保存...」コマンドの操作

作成：12.06.2003
改訂：09.24.2007
使用Photoshopバージョン：7.0


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

ここではPhotoshopの「Web用に保存...」コマンドの使用方法について紹介します。

もくじ

「Web用に保存...」コマンドとは？
［ファイル］→［Web用に保存...］コマンドは、Photoshop5.5から追加された機能で、Photoshop画像から比較的簡単な操作で、Web用の画像（GIF、JPEG、PNG）を書き出すことができます。
これ以前のPhotoshopでのWeb画像の操作はこちらを参照ください。

基本的な操作方法
  1. Photoshopを起動します（ここでは、Photoshop7.0のMacintosh版を使用しています）。適当な画像を開きます。できれば、写真などが操作による画面の変化がわかりやすいでしょう。画像はGIFやJPEGでなくてもかまいません。
    （ロケ地：京都府立植物園（京都市））



  2. ［ファイル］→［Web用に保存...］を選択します。次のようなダイアログボックスが表示されます。



  3. ダイアログボックスの上にある「４アップ」をクリックします。
    画面が４分割され、それぞれの下部にファイル形式などの情報が表示されているはずです。



  4. 右上の画像をクリックして選択します。


  5. 右側の「設定」クリックして、いったん「GIF32ディザなし」にしてから、「JPEG高」にします。このとき、画面下部の情報表示が切り替わるのを確認します。



  6. 再び「GIF32ディザなし」を選択します。



    前のステップで設定を変更した画像（JPEG高）と見比べると、その状態が少し異なり、特に水面の部分など、画像の質が劣化しているはずです。


    ヒント：「Web用に保存...」では、もとの画像（このダイアログボックスが表示される前のPhotoshop画像）の表示状態をそのまま引き継ぎます。
    例えば、非表示になっているレイヤーがあると、そのレイヤーの画像は出力対象とはなりません。


    ヒント：このダイアログボックスでは、様々な設定で画像のクオリティを変更し、サイズを調整することが可能です。以下は、GIF形式での例です。

    （１）右上「劣化」では、画像を劣化度合いを調整します。数値を大きくすると、画像は劣化しますが、ファイルサイズは小さくなります。
    横の小さな○をクリックすると、あらかじめ設定されたアルファチャンネルをマスクとして劣化の影範囲をコントロールできます。

    （２）左中「ディザ」では、色の境目のギザギザの出現具合を調整します。「ディザなし」では、境目が目立ちますが、ファイルサイズは小さくなります。

    （３）下「カラーテーブル」では使用されている色を削除できます。特定の色を選択して、ゴミ箱ボタンで削除すると、ファイルサイズが小さくなります


    ヒント：画像の下部に表示される情報は、画像の右上端にある、三角マークをクリックして表示されるメニューで調整できます。


透明GIF画像の作成
  1. Photoshopを起動し、200×200pixcel、72pixcel/inchで新規ファイルを作成します。



  2. ベクトルシェイプツールで適当な画像を描きます（この操作で、背景レイヤーの上に、ベクトルシェイプレイヤーができます）。



  3. レイヤーパレットで、「背景」レイヤーの目玉マークをクリックして非表示にします。背景がなくなるので、うしろの格子柄がみえてきます。





  4. ［ファイル］→［Web用に保存...］を選択します。


  5. 右上の画像を選択してから、「設定」を「GIF64ディザ」にし、「透明部分」のチェックをオンにします。透明部分が反映されているはずです。



  6. 今度は、「設定」を「JPEG高」にします。透明部分は無視され、背景は白くなります。これは、JPEG形式自体が色を透明にする、いわゆる透過（トランスペアレント）形式を扱えないためです。



  7. もう一度、「GIF64ディザ」にしてから、「保存」ボタンをクリックし、「testfile01.gif」の名前で保存します。



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

    <HTML>
    <HEAD><TITLE>透明テスト</TITLE></HEAD>
    <BODY BGCOLOR="#000000">
    <IMG SRC="testfile01.gif">
    </BODY>
    </HTML>


  9. ブラウザで、作成したHTMLファイルを開いてみます。「Web用に保存...」ダイアログボックスで透明だった部分は、ここでも透過されているはずです。

マットカラー処理

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

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




  2. ドロップシャドウがある状態のまま、［ファイル］→［Web用に保存...］を選択します。


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



  4. 「マット」ドロップダウンリストの「その他...」を選んでから、カラーに赤色（#FF0000)を指定します。



  5. 今度はエッジの透過されていない部分が赤色になっているのがわかります。
    最終的なホームページの背景が赤色である場合は、このまま保存しても大丈夫です。



  6. Photoshop7.0以上の場合、さらに「透明部分」チェックボックスの下にある「透明ディザなし」を「誤差拡散法透明ディザ」を選択してみます。エッジの部分がこまかく透過されるのがわかります。
    最終的なホームページの背景が、写真画像などの場合、このようにして保存すると、かなりスムーズになります。

★今回のまとめ★
「Web用に保存...」のコマンドは、簡単な操作でWeb用画像の出力時のイメージ確認と、その保存ができます。
今回は次のような基本操作を実習しました。


［Photoshop講座へ戻る］ ［ホームページへ戻る］
www.fmod.jp