08の01
Web対応のグラフィックス
グラフィックデザイナーとして、ウェブサイトやバナー広告用の写真など、ウェブ対応の画像を配信するよう求められることがよくあります。 Photoshopの「Web用に保存」ツールは、Web用のJPEGファイルを作成する簡単で簡単な方法で、ファイルサイズと画質のトレードオフを助けます。
注:このチュートリアルでは、 JPEG画像の保存を検討しています 。 Web用に保存ツールは、GIF、PNG、およびBMPファイルを保存するために作成されています。
どのようなグラフィックを「Web対応」にするか?
- 解像度は72 dpiです
- カラーモードはRGBです
- Webページの読み込み速度を向上させるためにファイルサイズが一般に縮小
08の02
イメージを開く
「Web用に保存」ツールを使用して練習するには、Photoshopで画像を開きます。 [ファイル]> [開く]をクリックし、コンピュータ上の画像を参照して[開く]をクリックします。このチュートリアルでは、どのような種類の画像でも写真はうまくいきます。 ウェブサイト上で使用できる小さなサイズに写真のサイズを変更します。 これを行うには、「画像>画像サイズ」をクリックし、「ピクセルサイズ」ボックスに新しい幅を入力して(400回)「OK」をクリックします。
03/08
Webツール用に保存を開く
さて、誰かが400ピクセル幅のこの写真をウェブサイトに投稿する準備をしてくれたとしましょう。 [ファイル]> [Web用に保存]をクリックして[Web用に保存]ダイアログボックスを開きます。 ウィンドウ内のさまざまな設定とツールを参照してください。
04/08
比較を設定する
Save for Webウィンドウの左上隅には、Original、Optimized、2-Up、4-Upというラベルの付いた一連のタブがあります。 これらのタブをクリックすると、元の写真の表示、最適化された写真(Web用の保存設定が適用された状態)、または写真の2つまたは4つのバージョンの比較を切り替えることができます。 「2-Up」を選択すると、元の写真と最適化された写真を比較できます。 あなたは今あなたの写真の横並びのコピーを見るでしょう。
08の05
元のプレビューを設定する
左側の写真をクリックして選択します。 [Web用に保存]ウィンドウの右側にある[プリセット]メニューから[オリジナル]を選択します(まだ選択されていない場合)。 これにより、未編集の元の写真のプレビューが左側に表示されます。
06の08
最適化されたプレビューを設定する
右側の写真をクリックして選択します。 プリセットメニューから「JPEG高」を選択します。 最適化された写真(最終的に最終ファイルになります)と左側のオリジナルとを比較することができます。
07/08
JPEG品質を編集する
右側の列の最も重要な設定は「品質」値です。 画質を落とすと、画像は「濁っている」ように見えますが、ファイルサイズが小さくなり、ファイルが小さくなるとWebページの読み込みが高速になります。 画質を「0」に変更して、左右の写真の違いや、写真の下にある小さいファイルサイズに気を付けてみてください。 Photoshopでは、ファイルサイズよりも小さい読み込み時間が表示されます。 最適化された写真のプレビューの上にある矢印をクリックすると、この読み込み時間の接続速度を変更できます。 ここでの目標は、ファイルのサイズと品質の間に幸せな媒体を見つけることです。 40〜60の品質は、ニーズに応じて、通常は良い範囲です。 時間を節約するために、プリセット品質レベル( JPEG Medium)を使用してみてください。
08の08
イメージを保存する
右の写真に満足したら、「保存」ボタンをクリックしてください。 [最適化して保存]ウィンドウが開きます。 ファイル名を入力し、コンピュータ上の目的のフォルダを参照して[保存]をクリックします。最適化されたWeb対応の写真が作成されました。