icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

Photoshopの初心者向けに「グリッド」の活用方法を解説した記事です。

グリッド機能は、文字や画像などの配置を揃えてレイアウトしたい時に便利です。

マス目の大きさもpixelなどの単位で細かく指定することができるため、Webデザインの制作時にも利用できます。

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

目次

1時間でできる無料体験!

 

田島悠介

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

大石ゆかり

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

田島悠介

グリッドは画面上に表示される格子状の線だよ。

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

大石ゆかり

なるほど、便利そうですね。

やってみます!

 

グリッドを表示させる

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

 

表示メニューの中から「表示・非表示」→「グリッド」を選択します。

 

以上の手順を行うと、画像の上にグリッドが表示されます。

グリッドを表示させる方法は以上です。

グリッドを非表示にする場合は、「表示」→「表示・非表示」「グリッド」のチェックを外すします。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

実際にやってみよう。

大石ゆかり

はい!

 

グリッドを設定する

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

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

 

編集メニューの中から「環境設定」→「ガイド・グリッド・スライス」を選択します。

 

環境設定のウィンドウが開きました。

「グリッド」の欄から、グリッドの設定変更ができます。

 

手始めにグリッドの色を変更してみましょう。

「カラー」右側の「カスタム」と書かれている部分をクリックします。

プルダウンの中から「サーモンピンク」を選択しましょう。

 

サーモンピンクを選んだ段階で、グリッドの色が変更されました。

 

さらにグリッド線を100、分割数を10にします。

 

作業を終えたら環境設定ウィンドウ右上の「OK」をクリックして、変更を反映します。

 

変更を反映したグリッドは、下の画像のようになります。

 

グリッド線は実線で表示され、分割の部分は点線で表示されています。

今回の設定では100mmの間隔のグリッド線の中を、縦横に10分割する点線が引かれています。

 

グリッドの単位はmm以外にも、pixelやinchなど一般的な単位が用意されています。

 

以上がグリッド設定の変更手順でした。

画像に合わせて色や大きさを変更し、作業しやすいグリッドの環境を整えましょう。

 

田島悠介

グリッドの表示・非表示のショートカットは「Ctrl+@」(Macの場合は「command+@」)だよ。

大石ゆかり

ショートカットを使うと簡単に表示の切り替えができるんですね。

田島悠介

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

大石ゆかり

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

 

[PR] Webデザインで副業する学習方法を動画で公開中

Photoshopを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • Photoshopを調べたけど分かりづらい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

Photoshopの学習や情報収集をしていて、このように思ったことはありませんか?

テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」

こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する