Photoshopでグリッドを表示させる方法【初心者向け】

Photoshop(フォトショップ)で【グリッドを表示させる方法】を初心者向けに解説した記事です。基本的な表示方法から、色や間隔を変更する設定方法まで紹介していきます。サイズの変更はWebデザインの制作にも便利です。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

Photoshopでグリッドを表示させる方法を初心者向けに解説した記事です。

「グリッド」機能は、文字やオブジェなどの配置を揃えてレイアウトしたい時に便利です。マス目の大きさもpixel等の単位で細かく指定することができるため、Webデザインの制作時にも利用できます。

 

なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。

(※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)

 

20163020-2

 

今回はグリッドを使ってみよう。

 

20160620

 

田島メンター!!グリッドというのは何ですか~?

 

20163020-2

 

グリッドは画面上に表示される格子状の線だよ。線といっても実際に描画されているわけではなくて、長さを測ったり縦横の配置を揃えたりするためのガイドとして使うんだ。

 

20160620

 

なるほど、便利そうですね。やってみます!

 

 

目次

本記事では下記の2つの流れで紹介します。

まずは基本的な表示方法を理解した上で、細かな設定をしてみましょう。

 

 

グリッドを表示させる

まず、グリッドを表示させたい画像を開いた状態で上メニューの「表示」をクリックします。

psgd_1

 

ここで「表示・非表示」から「グリッド」を選択します。

psgd_2

 

画像の上にグリッドが表示されます。グリッドを非表示にする場合は、同じく「表示」→「表示・非表示」から「グリッド」のチェックを外すだけです。

psgd_3

グリッドを表示させる方法はこれだけです。

 

20163020-2

 

グリッドは表示できたかな?

 

20160620

 

出てきましたけど、なんだか細かすぎて見づらいような……あと色も元画像とかぶっていて分かりづらい感じがします。

 

20163020-2

 

グリッドは格子の幅や分割の数、線の色まで細かいところを全部自分で設定できるんだ。実際にやってみよう。

 

20160620

 

はい!

 

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

グリッドを設定する

グリッドは単純に表示させるだけでなく、間隔・色などの設定を変更して自由に作成することが可能です。

設定を変える時は、まず上メニューの「編集」をクリックします。

psgd_4

 

「環境設定」から「ガイド・グリッド・スライス」を選択します。

psgd_4_2

 

環境設定のウィンドウが開いて、「グリッド」の欄から設定の変更ができます。(「ガイド」「スマートガイド」「スライス」の部分はここでは使用しません)

設定変更ができる内容は下記の通りです。


カラー:
グリッドの線の色を指定します。「カスタム」の部分をクリックすると指定の色から選ぶことができます。また、「カスタム」のままにしておくと右の四角(ここではグレーに指定されているところです)をクリックすることによって好きな色に変更することができます。

スタイル:線の種類を指定します。「実線」「点線」「破線」の三種類から選べます。

グリッド線:グリッドの間隔です。画面で「mm」となっている所の単位はpixel、inchなどに変更することができます。

分割数:グリッド内の分割の数です。

 

変更が完了したら「OK」を押します。

psgd_5

 

今回は試しにグリッド線を55mm、分割数を5とし、カラーを青に変更してみました。スタイルは実線のままです。

psgd_7

 

するとこのように表示されました。

グリッド線は実線で表示され、分割の部分は点線で表示されています。また、ここでは55mmの間隔のグリッド線の中を縦横5つに分割する線が引かれていることになります。

psgd_8

 

うまくできましたか?

ぜひ自分のニーズに合わせてグリッドを設定してみてください。

 

20163020-2

 

グリッドの表示・非表示は「Ctrl+@」(Macの場合は「command+@」)が初期設定でショートカットに設定されているよ。

 

20160620

 

これを使うと簡単に表示の切り替えができるんですね。

 

20163020-2

 

画面内の要素を均等に配置したり、比率を合わせたりするときにグリッドは非常に便利なので、どんどん使ってみよう。

 

20160620

 

分かりました!挑戦してみます!

 

 

さらにPhotoshopを使いこなしたい場合は、Photoshopのバッチでファイルを一括で処理する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。