Photoshopでグリッドの設定と表示をさせる方法

Photoshopには、キャンバスや画像上にグリッドを表示させることができる機能があります。グリッドを表示させることで、オブジェクトやテキストを簡単に正確に配置することが可能です。

綺麗なレイアウトを作るには不可欠な機能なので、使い方を覚えておくと良いでしょう。今回は、Photoshopでグリッドを表示させる方法について、紹介します。

グリッドを表示させる

Photoshopで画像を開くか、新規ファイルを作成したら、メニューバーの表示をクリックし、表示・非表示からグリッドを選択してください。

screenshot 672

グリッドを表示させることができました。

screenshot 673

グリッドの設定を行う

メニューバーのPhotoshopを押して、環境設定からガイド・グリッド・スライスを選択してください。

screenshot 633

環境設定のウインドウが開きます。グリッドの項目をみると、線の色、種類などが変更できます。ガイドと併用する場合は、それぞれ判別しやすいように、色が同じにならないようにしましょう。線の種類は、実線・破線・点線の3種類から選べます。

screenshot 674

カラーをサーモンピンク、線を1px、スタイルを点線に設定してみると画像のようになります。1pxにするとWebデザイン制作に便利ですね。

screenshot 675

破線だと下図のようになります。画像のものは500pxの分割数が4になっています。線の設定はリアルタイムでプレビューされるので、画像や背景の色に合わせて、見やすいグリッド設定にカスタマイズして使ってください。

screenshot 676

まとめ

グリッドの設定と表示方法について、紹介してきました。このグリッドを参考にガイドラインを引いて、オブジェクト配置などを行えば、作業も効率的になります。グリッドを上手く活用していきましょう。

ガイドについては、以下の記事を参考にしてください。

Photoshopでガイドを作成する方法


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて