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

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

こんにちは!
しがない雑食系クリエイターのはまやん(@hama_paz)です!

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

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

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

  • ガイドを使ったことがない人
  • ガイド機能をどんどん活用していきたい人
はまやん
僕の人生にもガイドを引いて欲しいヨー!
スポンサーリンク

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ガイドの引き方

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

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

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

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

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

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

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

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

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

ガイドの便利な使い方

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

表示・非表示の切替え

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

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

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

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

ガイドレイアウト作成

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

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

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

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

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

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

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

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

Photoshopを学べるオススメ書籍

当ブログの管理人がオススメするPhotoshopを学べる書籍をご紹介します!
ポイントをわかりやすく押さえて解説されてますので、すぐに実践したくなりますよ!

ズボラPhotoshop

デザイナーのトミナガハルキさん著書のズボラPhotoshop!
「デザイナーなのにズボラするなんて…どうなの?」と思われるかもしれませんがそれはノンノンです!

「簡単なのにカッコイイ、オシャレ」「作ってて楽しい」を元に手順を出来るだけ簡略化した55のテクニックをご紹介しています!
デザイン初心者さんの悩みの1つである「カッコイイものを作りたいのにどうやって作ればいいかわからない」を解消する事間違いなしですよ!

ガイドの使い方のまとめ

Photoshopのガイド機能の使い方の内容を以下にまとめました。

  • 文字や画像をキレイに配置したい時はガイド機能を利用しよう
  • Cmd(Ctrl)+Rで定規を表示してガイドを引こう
  • 一気にガイドを引きたい時は「ガイドレイアウト」を利用しよう

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

はまやん
それでは良いPhotoshopライフを!
【Photoshop】ガイド使ってる?便利な使い方を画像で解説
Twitterやってるのでフォローしておくんなまし!