【Photoshop】ガイド使ってる？便利な使い方を画像で解説

こんにちは！
しがない雑食系クリエイターのはまやんです！

Photoshopをお使いの皆さん「ガイド」を使っていますか？
Photoshopにおけるガイドとは、文字や画像やシェイプなどを揃えて配置する為の機能です。

ガイドがあるのと無いのとではデザインに微妙な違和感が出てしまいます。
WEBデザインではアイコンやバナーの並びもガタガタになってしまうので、すごく見辛いデザインになってしまいますよね！

今回はガイドの使った整列のやり方から便利な使い方までご紹介します！

ガイド機能を使うメリット

ガイド機能を使う事でテキスト文字や画像などを正しく整列したり、配置する事が可能です。
例えば下記の画像をご覧ください。

どうですか？わかりやすくラインを引いてみます。

Aと書いた部分は左右の余白が違っています。
Bと書いた部分は上下の余白が違い、Cの部分はロゴと文字の間の余白が上下の文字で違っていますね。

こういう形で適当に配置してしまうと、不揃いな感じがしますよね？

そして配置した要素ではなく余白部分に目が行ってしまいます。

そうなると、それはデザイナーが意図していない「余計な情報」として処理されてしまって内容を把握するのに邪魔になってきます。
なので、ガイドを引いて配置し直してみました。

どうですか？整列されているので統一感が出て、デザインの内容に入っていきやすいですよね？

また、文字の強弱をつけようとして文字サイズを一部変更した時にただ単に文字サイズだけ変更してしまうとこうなります。

これも無意識に「あ、ズレてるな」と感じて「余計な情報」になってしまいます。
ガイドを引いて直しちゃいましょう！

こういった細かい部分を統一させる事で、見る人にストレスなく見てもらう事が出来ますね！

ガイドの引き方

では実際にガイドの引き方について解説していきます！
Cmd(Ctrl)+Rで定規を表示させます。

定規が画面の上部と左側に表示されますので、それぞれの定規の部分でマウスをドラッグするとガイドが出てきます。
そして必要なところでドロップすればガイドが引けます。

もちろん一度引いたガイドは移動する事も出来ますし、必要なければ削除も可能です！

移動させる場合は、引いたガイドにカーソルを合わせてドラッグするだけです。
削除する場合は、ガイドを持って定規のところで離すと削除されます。

ガイドが引けたところで、お好みの場所に文字や画像などの要素をガイドに沿って配置していきましょう。

ガイドが引けたことによって整列しやすくなりましたね！
もちろん、ガイド機能はPhotoshopの表示機能のひとつなので、jpg画像に書き出した時にはガイドは非表示にされて書き出されます！

ガイドの便利な使い方

ここからはもっと使いやすくなるガイドの便利な使い方を2つほどご紹介していきます！
このあたりを覚えるとWEBページ制作やバナー作成などに活用できますよ！

表示・非表示の切替え
配置させる要素が多くなればなるほどガイドの数も必然と増えてきます。
なので現在の仕上がりイメージを確認する時にはガイドは邪魔になりますよね？

そんな時はCmd(Ctrl)+：(コロン)で表示・非表示の切替えができます！

これで都度デザインの確認が簡単に出来ますね！

ガイドレイアウト作成
ガイドを引く時に上下左右の余白を単位で合わせて引きたかったり、均等な幅でガイドを引きたい時ってありますよね？
でも手動でやるとズレが起きたりしますし、結構手間がかかる…
そんな時は「ガイドレイアウトを作成」しちゃいましょう！

すると別画面が出てき、細かく数値に合わせてガイドを引く事が出来ます。

列：縦のガイド担当。「数」でガイドで分けられる列の数、「幅」はガイド同士の空き、「間隔」は数で引いたガイドから次のガイドまでに余白を足したガイドを追加出来ます。

行：横のガイド担当。「数」でガイドで分けられる列の数、「幅」はガイド同士の空き、「間隔」は数で引いたガイドから次のガイドまでに余白を足したガイドを追加出来ます。

マージン：カンバスの端から入力した数値分のガイドを引く事が出来ます。

例えばWEBページであればYouTubeみたいにサムネイルをババーっと並べたい時にガイドレイアウトを使用すると簡単に均等なガイドを引く事が出来ます。
使いこなせたら、この機能が無いと震える体になってしまうぐらい便利な機能です！

いかがでしたか？
ガイド機能は初心者からプロまで利用する機能です。
ずっとお世話になる機能ですので、この機会にガンガン使い方をマスターしちゃいましょう！
それでは良いPhotoshopライフを！