Photoshopでグリッドを表示させる方法【初心者向け】
Photoshop（フォトショップ）で【グリッドを表示させる方法】を初心者向けに解説した記事です。基本的な表示方法から、色や間隔を変更する設定方法まで紹介していきます。サイズの変更はWebデザインの制作にも便利です。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
監修してくれたメンター
関谷 純
Photoshopの初心者向けに「グリッド」の活用方法を解説した記事です。
グリッド機能は、文字や画像などの配置を揃えてレイアウトしたい時に便利です。
マス目の大きさもpixelなどの単位で細かく指定することができるため、Webデザインの制作時にも利用できます。
(※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています)
目次
今回はグリッドを使ってみよう。
田島メンター！！グリッドというのは何ですか～？
グリッドは画面上に表示される格子状の線だよ。
線といっても実際に描画されているわけではなくて、長さを測ったり縦横の配置を揃えたりするためのガイドとして使うんだ。
なるほど、便利そうですね。
やってみます！
グリッドを表示させる
まず、グリッドを表示させたい画像を開いた状態で、上メニューの「表示」をクリックします。
表示メニューの中から「表示・非表示」→「グリッド」を選択します。
以上の手順を行うと、画像の上にグリッドが表示されます。
グリッドを表示させる方法は以上です。
グリッドを非表示にする場合は、「表示」→「表示・非表示」→「グリッド」のチェックを外すします。
グリッドは表示できたかな？
出てきましたけど、なんだか細かすぎて見づらいような……あと色も元画像とかぶっていて分かりづらい感じがします。
グリッドは格子の幅や分割の数、線の色まで細かいところを全部自分で設定できるんだ。
実際にやってみよう。
はい！
グリッドを設定する
グリッドは単純に表示させるだけでなく、間隔・色などの設定を変更することが可能です。
設定を変える時は、上のメニューの「編集」をクリックします。
編集メニューの中から「環境設定」→「ガイド・グリッド・スライス」を選択します。
環境設定のウィンドウが開きました。
「グリッド」の欄から、グリッドの設定変更ができます。
手始めにグリッドの色を変更してみましょう。
「カラー」右側の「カスタム」と書かれている部分をクリックします。
プルダウンの中から「サーモンピンク」を選択しましょう。
サーモンピンクを選んだ段階で、グリッドの色が変更されました。
さらにグリッド線を100、分割数を10にします。
作業を終えたら環境設定ウィンドウ右上の「OK」をクリックして、変更を反映します。
変更を反映したグリッドは、下の画像のようになります。
グリッド線は実線で表示され、分割の部分は点線で表示されています。
今回の設定では100mmの間隔のグリッド線の中を、縦横に10分割する点線が引かれています。
グリッドの単位はmm以外にも、pixelやinchなど一般的な単位が用意されています。
以上がグリッド設定の変更手順でした。
画像に合わせて色や大きさを変更し、作業しやすいグリッドの環境を整えましょう。
グリッドの表示・非表示のショートカットは「Ctrl＋@」(Macの場合は「command＋@」)だよ。
ショートカットを使うと簡単に表示の切り替えができるんですね。
画面内の要素を均等に配置したり、比率を合わせたりするときにグリッドは非常に便利なので、どんどん使ってみよう。
分かりました！挑戦してみます！
Photoshopを学習中の方へ
これで解説は終了です、お疲れさまでした。
- Photoshopを調べたけど分かりづらい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？
テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
