チュートリアルのブログ

はあなたのイメージWeb - Readyの?

2008年11月19日Carma Leichty - 5コメント Twitterの投稿 ポストヤフーにバズ ポストDiggに ポストRedditに ポストStumbleUponのに




私たちの目標は、ときにWebページ上のように、ファイルを作成し、イメージを配置可能な限り画質を損なうことなく小型。 この記事では、お客様のイメージをウェブにする手順を通過するWeb - Photoshopの内部に精通した機能を使用する準備ができて。

ただ、JPGまたはGIFファイルを使用してファイルを保存するには魅力的です/ Photoshopの中にオプションとして保存して、イメージをウェブ対応を呼び出します。 ただし、この方法でそれを、私たちはイメージを利用して欠場- toolsの縮小のみ、Photoshopの"Web"のダイアログボックスに保存内のデータが見つかりました。 これらの機能をご罰金を聞かせ、画像の保存のチューニングも、小さいファイルサイズの画像品質を損なうことなく、結果。

Web用の画像を保存するための手順を議論する前に、2つの最も一般的に使用されるフォーマットを見てみましょう:JPEGやGIF。 一方のGIF最高の固体の色と反復的な色の画像を使用されてJPEGの色の広い範囲のことができます。 私は、写真やラインアート、ロゴのGIFのJPEG、およびいくつかのイラストを使用します。 もし私は、高品質な画像を必要とファイル内の目的の品質結果をJPEGファイルとしては大きすぎてそれを保存私も、PNG形式を使用することがあります。 (つまりあまりにもダウンロードに時間所要)

あなたのイメージをウェブ対応にするための手順を行ってみましょう。

設定する解像度と画像サイズ
ファイルを保存する前に、私はいつも72にモニタ用(標準解像度)の解像度を設定し、私は、Webページ上にイメージをサイズに合わせてイメージのサイズを設定します。 これらの両方のオプションの画像サイズ]ダイアログボックス内に設定されます。 画像を選択"画像のサイズ。

画像サイズ]ダイアログボックス

画像サイズ]ダイアログボックス

保存、Webおよびデバイス用
保存、Webおよびデバイス用のPhotoshopの[ファイル]メニュー内の機能をご罰金に保存処理を調整私たちは最善のファイルのサイズを与えることができます。 また、このオプションを視覚的にファイルを保存する前に、さまざまな設定を比較してくれます。

ファイルを選択後、"保存、Webおよびデバイスは、次のダイアログボックスを開くもの:

保存、Webおよびデバイスのダイアログにボックス

保存、Webおよびデバイスのダイアログにボックス

このウィンドウでは、4アップ]タブウィンドウの上部に選択します。 これは私たちに加えて(で異なる設定を元)で、画像の3つの異なる映像を提供します。 はこのダイアログボックスで詳しく見てみましょう。

上部には、画面のツールが残っている。 私は使用することが唯一のツールは、ツールズームレンズです。 これは、Photoshopのツールズームと同様に動作します。 センターパネルのさまざまな設定では、イメージの視覚的な表現を示します。 右側のパネルでは我々のいずれかの画像の中央のパネルで、さまざまなオプションを設定しています。 1つの画像の周りの青の境界ボックスは、選択した画像です。

私は、各画像の下にあるファイル情報を見てすべての変更を行う前に。

画像情報

画像情報

この情報を私(JPEG準拠)、ファイルのサイズファイル形式、および指示はどのくらいにダウンロードして、特定の速度でかかります。 (右クリックの速度情報を別のダウンロード速度を選択します。)我々は、ほとんどのファイルのサイズに興味を持っています。

この情報の右側には、'品質'のパラメータです-品質が低いほど、圧縮が高くなります。 としての質の低下は、視覚的な表現も減少します。 我々はディテールを失うことがあります。 または、画像のあいまい検索を開始することがあります。 私たちの目標は、イメージの視覚的な表現を損なうことなく、低品質のイメージを使用することです。

ファイル形式と品質設定

右側のパネルの調整

右側のパネルの調整

ファイル形式(JPEG、GIFなど)と品質は、右側のパネルの上部に変更することができます。 また、他のパラメータと同様ですが、これらの2つに焦点を当てます。 センターパネルでは、画像を選択するには、目的のファイルサイズに近いですが、視覚的な整合性を保持します。 これにより、アクティブなイメージになります。 我々は、右側のパネルで行うすべての変更は、このイメージに適用されます。

品質分野では、右矢印をクリックして品質のスライダを開きます。 までは、最小のファイルサイズが可能にし、目的の品質は、品質をダウンさせるがそのまま残っています。 場合は、視覚面でのさまざまなオプションを並べて比較するには、他の2つの画像のような調整をします。

イメージが必要な視覚的な整合性を最小のファイルサイズが可能で、するために、画像を選択されますが、アクティブな画像を保存]をクリックします。 これは、最適化された保存]ダイアログボックスを開きます。 ここでは、ファイルを保存するに移動します。 ことを確認しますSave Asをタイプ]オプションを画像にのみ設定されます。 をクリックして保存します。

保存画像のみ

保存画像のみ

ファイルを作成したら、イメージの準備ができて、ウェブページ上で使用される保存されます。 あなたは、画像品質を損なうことなく、最小のファイルサイズが保証されることができます。 あなたのイメージがウェブ対応です。



コメント

あなたのイメージWeb"は5レスポンス- Readyの?"
  1. アダム- http://www.21gunstudios.com さんの意見:

    それらのJPGを使用する私は、画像ウェブ準備ができていると感じていません。 PNGは、新しい標準的なはずなのに...が、なぜ、このチュートリアルのためのJPEGを選んだ理由は何ですか?

  2. ロバート- さんの意見:

    アダムは、あなたのJPEGを使用している写真用、およびGIFの代わりに他の種類のPNGです。

    そしてそれは非常に色の同期プロファイル(何らかのなし)ではなく、Adobe RGBは、それ以外の彩度をJPEG画像をsRGBのカラープロファイルを使用して、輸出に非常にSafariブラウザで異なることが重要だ。

  3. 明確なWebホスティング- http://www.definitehosting.co.za さんの意見:

    非常に興味深い記事。 写真はいつも私はあなたの方法で遊んではスペースと帯域幅を使用します。

  4. のSD - さんの意見:

    @アダムは、h *北韓あなたが何を話しているの? PNGのいくつかの色を使用して画像に最適です。 のJPG写真に最適です。
    [OK]を24ビットPNGをも写真やアルファに最適ですが、非常に非常に大きくなります。

  5. laseddinquisa - http://tinyurl.com/56gm9y さんの意見:

    ハイテクがある!
    私はPhotoshopのアニメーションMySpaceの写真を使った。
    それらを見ている:
    http://tinyurl.com/5ajypv
    あなたのウェブサイトいただき、ありがとうございます :-) xoxo

チュートリアルのブログ