WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >Photoshop

複数の要素を決まったスペース内にて等間隔に並べる方法について、便利なものを見つけましたので、ご紹介します！
Photoshopのもともとの機能を使ってできること、追加機能を使ってできることがあります。

要素は等間隔に並べる

上のように、基本的に同じレベルの要素が縦や横に並ぶときには、等間隔で並ぶように配置すると綺麗にまとまります。
昔、簡単に横幅と余白を計算してくれるサイト（5年も前の記事ですが、サイトはまだまだ使えます！）にてご紹介したサービスなどを利用して作るのが間違いのない方法ではありますが、ものによっては計算しにくいこともあります。例えばテキストです。
シェイプなどの図形では、「横幅○pxで作る」と決めたらその通り作れば良いのですが、テキストの場合はなかなか正確な横幅で作るのは難しいです。
そこで、photoshopの「均等分布機能」を利用します。

垂直方向分布と水平方向分布

3つ以上の要素（レイヤー）を選択した状態で画面上部を見ると、下のようなボタンがあります。

以前、PhotoshopとIllustratorの「整列」機能を使いこなそう☆にてご紹介した、串団子アイコンの右半分を利用します。

使い方は簡単です。水平分布を例に説明します。

まず、3つ以上ある要素の左端と右端の位置を決めます。そうしたら、先ほどのアイコンのうちの、下のアイコンをクリックします。「水平方向中央を分布」です。

すると、選択していた要素の端は動かず、内側の要素が移動して、均等に分布されました。

垂直分布も、やり方は同じです。最近のグローバルナビは、シンプルにテキストのみで置かれているものも多いので、そんなときに重宝するのではないでしょうか。

デフォルト機能でうまくいかないとき

ところがこの機能、実際に使おうと思うとちょっと問題があります。
上の説明では、要素の文字数が同じだったため横幅もほぼ同じでした。そのためデフォルト機能でうまくいったのですが、ではそれぞれの文字数が異なる場合はどうでしょうか？試してみました。

全然そろっていないですね…。どうしてなのでしょう？

要素の端ではなく、中央を基準にそろえている

デフォルト機能では、実は要素の中央どうしが均等に配置されるように並べられるようです。そのため、横幅が違うものどうしだとずれてしまうのです。
実際、計ってみると中央どうしの間隔はそろっています。

同じ文字数のものが必ずしも並ぶとは限らない…というより、そのほうが少ないです。文字数が同じでないと使えないとなると、あまり実用的ではないですね…。

追加機能をphotoshopに入れる

デフォルト機能ではうまくいかない、そんなときは、jsxというものを入れます。
この「jsx」とはphotoshop専用のJavaScriptファイルで、これを決まったフォルダ内に入れるだけで機能を追加できます。

今回は、下記のサイトのスクリプトを使います。

http://morris-photographics.com/photoshop/scripts/distribute-horizontally.html

サイトへ行ったら、「Photoshop CS3+」というリンクの上で右クリック→「名前を付けてリンク先を保存」を選ぶと、必要なjsxがダウンロードできます。

ダウンロードができたら、このjsxをphotoshopに入れます。入れる場所は、下記です。

[それぞれのPCをご確認ください]＞Adobe＞Adobe Photoshop ○○＞Presets＞Scripts

こちらに、先ほどダウンロードしたjsxファイルをそのまま置いてください。準備はこれだけです！

スクリプトを使ってみよう

そろえたい3つ以上の要素のレイヤーを選択した状態で、上部のメニューから「ファイル」→「スクリプト」→「Distribute Layer Spacing Horizontal 0-2-0」を選択します。

そろいました！今度は中央ではなく両端を基準にそろえてくれているので、等間隔で並べることができました。

グループレイヤーではできないみたい

この機能とても便利なのですが、単独のレイヤー同士でないと使えないようです…。グループを選択しても、その中のレイヤー1つ1つを独立したものとして巻き込んでしまいます。
そのため、実際は今回の例のようにテキストの間隔をそろえるときに使うことが多いかと思います。

ボタンやボックスなら同じ横幅で作ることが多いので、最初に紹介したデフォルト機能で事足りそうです。

最近のシンプルなデザインでも使えることが多いと思いますので、ぜひ使ってみてくださいね！