「WEB制作」「マーケティング」「生き方」などを発信中
  • twitter
  • instagram
  • facebook

【WEB向け】Photoshopのおすすめ初期設定を紹介【初心者向けに解説】

吹き出しくん

Photoshopを導入したけど、初期設定がわからない・・・。WEB向けの初期設定をサクッと教えて欲しい。

このような方向けの記事になります。

デザイン用にPhotoshopを導入したけど、初期設定などが難しくて放置している方はも多いはず。

そこで本記事ではWEB制作歴3年以上の僕が「WEB向けにPhotoshopのおすすめ初期設定」を解説します。

もくじ

この記事を読む事でWEB用にPhotoshopの設定をできます。これからPhotoshopを使ってWEBデザインを始めたいという方は参考にしてみてください。

※Photoshop2021を使用して解説しています。バージョンが違う方は若干見た目が違うかもです。

STEP①:Photoshopで新規ドキュメントを作成する

まずはPhotoshopで作業するためのドキュメントを作成します。

作成手順は下記の通り。

  • 手順①:新規作成をクリック
  • 手順②:ドキュメントを作成する
  • 手順③:ドキュメントの完成

順番に解説します。

手順①:新規作成をクリック

手順①:新規作成をクリック

Photoshopを起動すると上のような画面になると思います。

新規ドキュメントを作成するので【新規作成】をクリックしましょう。

手順②:ドキュメントを作成する

手順②:ドキュメントを作成する

ドキュメントの設定をして作成をします。

操作の順番は下記の通り。

  • ①【Web】をクリック
  • ②【Web中】を選択
  • ③プリセット詳細を設定
  • ④【作成】をクリック

【Web中】を選択してますが、こちらは制作物に応じてサイズを変更しましょう。

プリセット詳細も上の画像と同じで問題なし。知識が身についたら自分なりに設定してみてください。

最後に【作成】をクリックしましょう。

手順③:ドキュメントの完成

手順③:ドキュメントの完成

以上でWEB用のドキュメントの作成は成功です。
こちらのドキュメントからWEB用にバナーや画像を制作できます。

Photoshopで作業する場合に必須の作業なので、覚えておきましょうね。

STEP②:Photoshopの環境設定をする

STEP②:Photoshopの環境設定をする

Photoshopの環境設定していきます。
上の画像を参考に環境設定画面を開きましょう。

設定する項目は下記の通り。

  • 設定①:インターフェイス
  • 設定②:パフォーマンス
  • 設定③:単位・定規

順番に解説します。

※こちらは一度設定したら変更する必要はないので、初めに行っておきましょう。
※必須の項目のみ解説します。
※細かい設定は実際に使いつつ調整してみて下さい。

設定①:インターフェイス

設定①:インターフェイス

Photoshopの操作画面の色を変更できます。
用意されてるカラーテーマは4つです。

僕は暗めのテーマを使用してます。

こちらはご自身の好みで設定しておきましょう。

設定②:パフォーマンス

設定②:パフォーマンス

Photoshopで使用するメモリ容量を調整できます。

数値が高い程パフォーマンスは向上しますが、PCスペックによっては重たくなる原因になる。

「Photoshopが重たいな」と感じた方はこちらの数値を低くして、調整してみてください。僕は70%で設定しており、消費メモリは8586MBです。

6746~8831MBの範囲が推奨されているので、下げすぎないように注意しましょう。

設定③:単位・定規

設定③:単位・定規

単位の設定をします。
上の画像を参考に【単位】を【pixel】に変更しましょう。

Web上の単位は【pixel】になりますので、Photoshop側も合わせる必要があります。

制作物に応じて、こちらの単位を変える必要があるので覚えておきましょうね。

以上でWEB向けの環境設定は完了です。

STEP③:WEB用にPhotoshopのワークスペースを調整する

STEP③:WEB用にPhotoshopのワークスペースを調整する

最後にワークスペースをWEB用に調整していきます。
ワークスペースとは上の画像の赤枠の部分です。

基本は【グラフィックとWeb】でOK

基本は【グラフィックとWeb】でOK

Photoshop初心者の方は上の画像を参考に【グラフィックとWeb】にしておけば問題なし。

具体的な変更手順は下記。

  • ①【ウィンドウ】をクリック
  • ②【ワークスペース】を開く
  • ③【グラフィックとWeb】を選択

Web用の基本的な機能が備わってるので、初心者の方に使いやすい設定です。

ワークスペースはアレンジが可能

ワークスペースはアレンジが可能

ワークスペースは自分用にアレンジが可能です。
上の画像のように【ウィンドウ】からアレンジできます。

初めは難しいと思うので、少しづつ触って機能を覚えていきましょう。

ゴチャゴチャしてもリセット可能

ゴチャゴチャしてもリセット可能


色々アレンジしてゴチャゴチャになってしまった場合も、上の画像のように設定をリセットできますので、どんどんイジっても問題なし!

アレンジしたワークスペースは保存可能

アレンジしたワークスペースは保存可能

良い感じのワークスペースができたら、保存する事ができます。

上の画像のように【新規ワークスペース】をクリックしましょう。
すると下記のようになります。

保存する

こんな感じで【名前】と【オプション】を選択して【保存】をクリックして保存できます。

簡単に選択できる

簡単に選択できる

保存したワークスペースは【ワークスペース】から簡単に呼び出せます。こんな感じで自分なりのワークスペースを作っていきましょう。

以上でWEB向けPhotoshopの初期設定が完了です。
高機能なツールなので、色々と触りながら機能を覚えていきましょうね。

それではここまで。