Photoshop for Webツールを使用する方法

08の01

Web対応のグラフィックス

PeopleImages / DigitalVision / Getty Images

グラフィックデザイナーとして、ウェブサイトやバナー広告用の写真など、ウェブ対応の画像を配信するよう求められることがよくあります。 Photoshopの「Web用に保存」ツールは、Web用のJPEGファイルを作成する簡単で簡単な方法で、ファイルサイズと画質のトレードオフを助けます。

注:このチュートリアルでは、 JPEG画像の保存を検討しています 。 Web用に保存ツールは、GIF、PNG、およびBMPファイルを保存するために作成されています。

どのようなグラフィックを「Web対応」にするか?

08の02

イメージを開く

写真を開きます。

「Web用に保存」ツールを使用して練習するには、Photoshopで画像を開きます。 [ファイル]> [開く]をクリックし、コンピュータ上の画像を参照して[開く]をクリックします。このチュートリアルでは、どのような種類の画像でも写真はうまくいきます。 ウェブサイト上で使用できる小さなサイズに写真のサイズを変更します。 これを行うには、「画像>画像サイズ」をクリックし、「ピクセルサイズ」ボックスに新しい幅を入力して(400回)「OK」をクリックします。

03/08

Webツール用に保存を開く

ファイル> Web用に保存を選択します。

さて、誰かが400ピクセル幅のこの写真をウェブサイトに投稿する準備をしてくれたとしましょう。 [ファイル]> [Web用に保存]をクリックして[Web用に保存]ダイアログボックスを開きます。 ウィンドウ内のさまざまな設定とツールを参照してください。

04/08

比較を設定する

「2アップ」比較。

Save for Webウィンドウの左上隅には、Original、Optimized、2-Up、4-Upというラベルの付いた一連のタブがあります。 これらのタブをクリックすると、元の写真の表示、最適化された写真(Web用の保存設定が適用された状態)、または写真の2つまたは4つのバージョンの比較を切り替えることができます。 「2-Up」を選択すると、元の写真と最適化された写真を比較できます。 あなたは今あなたの写真の横並びのコピーを見るでしょう。

08の05

元のプレビューを設定する

「Original」プリセットを選択します。

左側の写真をクリックして選択します。 [Web用に保存]ウィンドウの右側にある[プリセット]メニューから[オリジナル]を選択します(まだ選択されていない場合)。 これにより、未編集の元の写真のプレビューが左側に表示されます。

06の08

最適化されたプレビューを設定する

"JPEG High"プリセット。

右側の写真をクリックして選択します。 プリセットメニューから「JPEG高」を選択します。 最適化された写真(最終的に最終ファイルになります)と左側のオリジナルとを比較することができます。

07/08

JPEG品質を編集する

ファイルサイズと読み込み速度。

右側の列の最も重要な設定は「品質」値です。 画質を落とすと、画像は「濁っている」ように見えますが、ファイルサイズが小さくなり、ファイルが小さくなるとWebページの読み込みが高速になります。 画質を「0」に変更して、左右の写真の違いや、写真の下にある小さいファイルサイズに気を付けてみてください。 Photoshopでは、ファイルサイズよりも小さい読み込み時間が表示されます。 最適化された写真のプレビューの上にある矢印をクリックすると、この読み込み時間の接続速度を変更できます。 ここでの目標は、ファイルのサイズと品質の間に幸せな媒体を見つけることです。 40〜60の品質は、ニーズに応じて、通常は良い範囲です。 時間を節約するために、プリセット品質レベル( JPEG Medium)を使用してみてください。

08の08

イメージを保存する

写真に名前を付けて保存します。

右の写真に満足したら、「保存」ボタンをクリックしてください。 [最適化して保存]ウィンドウが開きます。 ファイル名を入力し、コンピュータ上の目的のフォルダを参照して[保存]をクリックします。最適化されたWeb対応の写真が作成されました。