「Webおよびデバイス用に保存...」コマンドの操作

作成：2007/07/20
改訂：2007/09/24
使用Photoshopバージョン：CS3


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

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

改訂履歴：2007/09/24「Web用画像の作成」にプリセットのヒントを追記しました。

もくじ

「Web用およびデバイス用に保存...」コマンドとは？
［ファイル］メニューの［Web用に保存...］コマンドは、Photoshop画像から比較的簡単な操作で、Web用またはモバイル機器用の画像（GIF、JPEG、PNGなど）を書き出すことができます。

Web用画像の作成
  1. Photoshopを起動し、適当な画像を開きます。できれば、写真などが操作による画面の変化がわかりやすいでしょう。この時点では、画像はGIFやJPEGでなくてもかまいません。



  2. ［ファイル］メニューから［Web用およびデバイス用に保存...］を選択します。次のようなダイアログボックスが表示されます。



  3. ダイアログボックスの上にある「４アップ」タブをクリックします。この画面では、ひとつの画像を４つの状態それぞれでシミュレーションしてみることができます。



  4. 右上の画像をクリックして選択し、「プリセット」をクリックして変化を観察してみます。
    ここでは、ファイルに適用するファイルの種類で、画像の表示状態やファイルサイズがどのように変化するかシミュレーションできます。
    「４アップ」の状態では、４コマそれぞに同様の操作が可能です。



  5. ［保存］ボタンをクリックすると、その画像は保存されます。


    ヒント：「Webおよびデバイス用に保存...」では、もとの画像（このダイアログボックスが表示される前のPhotoshop画像）の表示状態をそのまま引き継ぎ、コピーとして保存します。

    このため例えば、非表示になっているレイヤーがあると、そのレイヤーの画像は出力対象とはなりません。


    ヒント：ダイアログボックス内の「プリセット」の部分では細かな設定で、画像のクオリティとファイルサイズをコントロールできるようになっています。この部分の状態は選択した画像形式（GIFやJPEGなど）によって変化します。以下は、GIF画像の例です。

    （１）「劣化」では、画像を劣化度合いを調整します。数値を大きくすると、画像は劣化しますが、ファイルサイズは小さくなります。

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

    （３）「カラーテーブル」では使用されている色を（４）追加、または（５）削除できます。


    横に小さな○印があるものは、クリックしてマスクを指定し、効果の影響範囲をコントロールできます。


透過GIF画像の作成

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

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



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



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





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


  5. 右上の画像を選択してから、「設定」を「GIF64ディザ」にし、「透明部分」のチェックをオンにします。



  6. ［保存］ボタンをクリックし、「testfile01.gif」の名前で保存します。


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

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


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

マットカラー処理

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

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




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


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



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



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

デバイスセントラル

デバイスセントラル（DeviceCentral）は、Photoshopの画像をケータイやモバイルデバイス向けに作成する際、その機種に応じたシミュレーションを行う機能です。

  1. Photoshopを起動し、適当なファイルを開きます。



  2. ［ファイル］メニューの［Webおよびデバイス用に保存...］を選択し、表示されるダイアログボックスの右下にある［Device Central..］ボタンをクリックします。



  3. 次のようなダイアログボックスが表示されます。



  4. 左下の「使用可能なデバイス」から適当な製品をダブルクリックで選択します。
    画面にはその製品の画像処理の仕様が表示されます。



  5. ダイアログボックスの上のほうにある「エミュレータ」タブをクリックします。
    画像のシミュレーションが表示されます。



  6. 右側の各種パラメータでは、デバイス側の設定をシミュレートできます。
    たとえば、バックライトの設定が低くなっている場合、どのようなコントラストになるのか確認できます。



    ヒント：デバイスの情報の最新版を得るには、インターネットに接続し、デバイスセントラルを起動している状態から、メニューバーの［デバイス］→［デバイスアップデートを確認...］を実行します。

    アドビのサイトに接続して、デバイス情報のダウンロードができます（初回使用時にメールアドレス等の登録が必要です）。


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


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