99%実体験に基づく生々しい情報を発信中
  • twitter

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

吹き出しくん

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

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

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をWEB向けに設定して効率的に作業していこう!

以上でWEB向けPhotoshopの初期設定が完了です。
最初は本記事の設定でやっていき、徐々に使いやすい設定に調整していきましょう。

WEB向けの初期設定まとめ

  • STEP①:新規ドキュメントを作成する
  • STEP②:環境設定をする
  • STEP③:WEB用にワークスペースを調整する

高機能なツールなので、色々と触りながら機能を覚えていきましょう。

それではここまで。