スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Web用のイメージの保存方法

Web用のイメージの保存方法

投稿日:2006年5月30日   レベル:初級    ソフトウェア:PhotoShopImage-Ready


1. Photoshop5.5以降、ImageReadyに新しい機能が追加されています。しかし、Adobe Photoshop自体にも、ある程度までのイメージの最適化を行うツールは備わっています。ウェブページでのローディング時間を減らしていくための方法を少しずつ紹介していきます。最初に、ウェブサイト用にこのイメージを使います。これは私がずいぶん昔にデザインしたもので”Field of Visions”というものです。

200_201_005_1.jpg

2. さて、ウェブダイアログボックス(ファイル>ウェブ用に保存、もしくは、Ctrl+Alt+Shift+sかマックではCommand+Shift+Ctrl s)を立ち上げてみましょう。これでとても大きなダイアログボックスが出てくるはずです。

200_201_005_2.jpg

3. ウィンドウの上にあるタブを見てください。4つのタブがあるはずです。現在のイメージ、最適化されたイメージ、2-up、4-upは2Windows、4Windowsの最適化画面です。これらはイメージを2もしくは4つの異なった最適化イメージに自動的に置き換えてくれれます。ここでは4-upを使っていきます。素早くロードされる最適なイメージを選択しましょう。それぞれの四角は何色のカラーを使っているか、モデムの設定において、どのぐらいの時間でロードされるかを示してくれます。

200_201_005_3.jpg

4. 多くの人にGIF形式がウェブで最適だと言われています。ここでも、私の使用する形式にGIFを使います。写真などを取り扱う場合には少なくもと256色を使います。他の場合においては、ウェブ上ではきれいにみることができないのです。ウェブスナップしてはいけません。ディーザーを90%程度まで下げましょう。また、これらはイメージに対しては行っていません、gif形式と混ぜていくのがベストでしょう。

200_201_005_4.jpg

5. GIFがウェブサイトで最適なイメージだといわれていますが、それが間違いであることを証明します。JPEGがPhotoshopを正しく使えれば、ファイルも軽く最適な形式であるといえます。まず、私のJEPGイメージのフォーマットを見てください。設定を高画質にします。プログレッシブボックスにチェックをいれてください。

200_201_005_5.jpg

6. ここで重要なのは、画質です。70-60ぐらいに設定します。以上で終わりです。ブラーが0であることを確認してください。BAUDレイトを56Kモデムにしてください。こうすればGIFに比べてJPEGの方がダウンロードが早くなります。私のイメージでは4秒しかダウンロードにかかりません。

200_201_005_6.jpg

もう一つだけ、モデムのダウンロード速度は変えることができます。矢印ボタンを下げることで最適な変更をおこなってください!

200_201_005_7.jpg


引用:Web Design Library著者:dreaminfinity翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング