Photoshopでグリッドを表示させる方法【初心者向け】
Photoshop（フォトショップ）で【グリッドを表示させる方法】を初心者向けに解説した記事です。基本的な表示方法から、色や間隔を変更する設定方法まで紹介していきます。サイズの変更はWebデザインの制作にも便利です。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
Photoshopでグリッドを表示させる方法を初心者向けに解説した記事です。
「グリッド」機能は、文字やオブジェなどの配置を揃えてレイアウトしたい時に便利です。マス目の大きさもpixel等の単位で細かく指定することができるため、Webデザインの制作時にも利用できます。
なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。
(※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)
今回はグリッドを使ってみよう。
田島メンター！！グリッドというのは何ですか～？
グリッドは画面上に表示される格子状の線だよ。線といっても実際に描画されているわけではなくて、長さを測ったり縦横の配置を揃えたりするためのガイドとして使うんだ。
なるほど、便利そうですね。やってみます！
目次
本記事では下記の2つの流れで紹介します。
まずは基本的な表示方法を理解した上で、細かな設定をしてみましょう。
グリッドを表示させる
まず、グリッドを表示させたい画像を開いた状態で上メニューの「表示」をクリックします。
ここで「表示・非表示」から「グリッド」を選択します。
画像の上にグリッドが表示されます。グリッドを非表示にする場合は、同じく「表示」→「表示・非表示」から「グリッド」のチェックを外すだけです。
グリッドを表示させる方法はこれだけです。
グリッドは表示できたかな？
出てきましたけど、なんだか細かすぎて見づらいような……あと色も元画像とかぶっていて分かりづらい感じがします。
グリッドは格子の幅や分割の数、線の色まで細かいところを全部自分で設定できるんだ。実際にやってみよう。
はい！
グリッドを設定する
グリッドは単純に表示させるだけでなく、間隔・色などの設定を変更して自由に作成することが可能です。
設定を変える時は、まず上メニューの「編集」をクリックします。
「環境設定」から「ガイド・グリッド・スライス」を選択します。
環境設定のウィンドウが開いて、「グリッド」の欄から設定の変更ができます。(「ガイド」「スマートガイド」「スライス」の部分はここでは使用しません)
設定変更ができる内容は下記の通りです。
カラー：グリッドの線の色を指定します。「カスタム」の部分をクリックすると指定の色から選ぶことができます。また、「カスタム」のままにしておくと右の四角（ここではグレーに指定されているところです）をクリックすることによって好きな色に変更することができます。
スタイル：線の種類を指定します。「実線」「点線」「破線」の三種類から選べます。
グリッド線：グリッドの間隔です。画面で「mm」となっている所の単位はpixel、inchなどに変更することができます。
分割数：グリッド内の分割の数です。
変更が完了したら「OK」を押します。
今回は試しにグリッド線を55mm、分割数を5とし、カラーを青に変更してみました。スタイルは実線のままです。
するとこのように表示されました。
グリッド線は実線で表示され、分割の部分は点線で表示されています。また、ここでは55mmの間隔のグリッド線の中を縦横5つに分割する線が引かれていることになります。
うまくできましたか？
ぜひ自分のニーズに合わせてグリッドを設定してみてください。
グリッドの表示・非表示は「Ctrl＋@」(Macの場合は「command＋@」)が初期設定でショートカットに設定されているよ。
これを使うと簡単に表示の切り替えができるんですね。
画面内の要素を均等に配置したり、比率を合わせたりするときにグリッドは非常に便利なので、どんどん使ってみよう。
分かりました！挑戦してみます！
さらにPhotoshopを使いこなしたい場合は、Photoshopのバッチでファイルを一括で処理する方法も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
