Skip to main content

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

Webデザインに使うPhotoshopの初期設定 (六月 2026)

Webデザインに使うPhotoshopの初期設定 (六月 2026)
Anonim

グラフィックデザイナーまたはウェブデザイナーは、ウェブサイトやバナー広告用の写真など、ウェブ対応の画像を配信するよう求められます。 Web用Photoshop Saveツールは、Web用のJPEGファイルを簡単に準備することができ、ファイルサイズと画質のトレードオフを助けます。

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

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

ほとんどのWeb対応グラフィックスは共通の特徴を共有します:

  • 解像度は72 dpiです。
  • カラーモードはRGBです。
  • ファイルの読み込み速度が速いため、ファイルのサイズが小さくなります。
01/01

イメージを開く

Web用に保存ツールを使用して練習するには、Photoshopで画像を開きます。

クリック ファイル> 開いたコンピュータ上の画像を参照し、をクリックします。 開いた。練習目的のためには、どんな種類の画像でも写真はうまくいきます。

ウェブサイトで使用できる小さなサイズに写真のサイズを変更します。これを行うには、をクリックします。 画像> 画像サイズ幅フィールドに新しい幅を入力し、幅ピクセル。この場合、400ピクセルを入力してをクリックします。 OK.

02の07

Webツール用に保存を開く

誰かが400ピクセル幅の写真をウェブサイトに掲載する準備ができていると仮定したとします。

クリック ファイル > Web用に保存 を開く Web用に保存 ダイアログボックス。 (Photoshopのそれ以降のバージョンでは、パスは次のようになります。 ファイル > 輸出する > Web用に保存.)

ウィンドウ内のさまざまな設定とツールを参照してください。

03/07

比較を設定する

最上部に Web用に保存 ウィンドウには一連のタブが表示されます 元の, 最適化された, 2-Up、および 4-Up。これらのタブをクリックすると、元の写真の表示、最適化された写真の保存、Web設定の保存の設定、または写真の2つまたは4つのバージョンの比較を切り替えることができます。

選択する 2-Up イメージの横並びのコピーを示すことによって、元の写真と最適化された写真とを比較することができる。

04/07

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

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

05/07

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

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

07年6月

JPEG品質を編集する

右の列の最も重要な設定は、 品質 値。画質を落とすと、画像は濁って見えますが、ファイルサイズが小さくなり、ファイルサイズが小さくなれば、Webページの読み込みが高速になります。

品質を 0 左右の写真の違いや、写真の下にある小さなファイルサイズに気づくでしょう。

目標はファイルのサイズと品質の間に幸せな媒体を見つけることです。 40〜60の品質は、ニーズに応じて、通常は良い範囲です。プリセット品質レベルを使用してみてください(JPEG媒体例えば、時間を節約するために)。

07/07

イメージを保存する

右の写真に満足したら、 保存する ボタン。ザ 最適化された名前で保存 ウィンドウが開きます。ファイル名を入力し、コンピュータ上の目的のフォルダを参照し、をクリックします。 保存する。これで、ウェブ対応の最適化された写真が完成しました。