たかがガイド、されどガイド。たかがガイド、されどガイド。Cloud今回は、Web系など、主にPhotoshopでレイアウト作業を行う方向けに、ガイドと整列を取り上げます。大げさなタイトルを付けてしまいましたが、地味ながらも重要なトピック。復習がてら、お読みください。はじめに:クイズ手はじめに、次の穴埋めに挑戦してみてください(回答はこのページの末尾にあります)。)に対して、ワンアクションで4本のガイドを作成することができる。)を対象とすることはできない。選択範囲やシェイプは、ガイドにスナップ(吸着)しますので、適切なガイドを準備することは、レイアウト作業の効率化に直結します。Photoshopでガイドを作成するには、次の4つの方法があります。2014(15.2)からの機能です。それでは順を追ってみていきましょう。[A]ルーラーからドラッグ(手動)ベテランの方には説明不要な基本操作です。ルーラー(定規)を表示し、定規の目盛からドラッグします。上の定規からは水平のガイド、左の定規からドラッグすると、垂直のガイドが作成されます。その際、次のようなオプションがあります。2015.1(16.1)でデザインスペースを有効している場合には、定規の代わりに、カンバスの周辺にマウスオーバーすると表示される青い帯をドラッグします。ガイドのロックPhotoshopのガイドは、デフォルトではロックされていません。意図せず動いてしまうことを防ぐためにロックしておくとよいでしょう。ガイドをロックするには[表示]メニューの[ガイドをロック]をクリックします(すべてのガイドが対象になります)。キーボードショートカットはcommand+option+:/Ctrl+Alt+:。ガイドの移動すでに引いたガイドを移動するには、[移動ツール]でドラッグします。[移動ツール]以外のツールを選択しているときには、commandキー(Ctrlキー)を押しながらガイドをポイントし、マウスポインタが変化したらドラッグします。ドラッグを開始後、optionキー(Altキー)やshiftキーによるオプションは、ガイド作成時と同様です。定規の交差点(左上)は、特別な領域です。0)になるようにリセットされるなお、Illustratorのように、定規の交差点からcommandキー(Ctrlキー)+ドラッグすることで水平/垂直のガイドを同時に引くことはできません(これができると嬉しいのですが...)。[B]新規ガイド(数値指定)[表示]メニューの[新規ガイド]をクリックすると、[新規ガイド]ダイアログボックスが表示されます。「垂直方向、300」に設定すると、カンバスの左から300ピクセルの位置に垂直方向(縦)のガイドが引かれます。0)を変更していてもガイド作成には影響しません。カンバスの中心にガイドを作成する[新規ガイド]ダイアログボックスのデフォルトの値は「mm」ですが、「50%」のように単位付きで入力することで、カンバスの中央に水平(または垂直)のガイドを作成することができます(水平/垂直、それぞれ別途引く必要があります)。カンバスのエッジにガイドを作成するシェイプをドラッグで描くとき、カンバスのエッジにはスナップしてくれません。カンバスサイズに合わせたガイドを引いておくと、この問題を回避できます。カンバスのエッジ(右端、下端)にガイドを作成するには、[新規ガイド]ダイアログボックスで、「0%」や「100%」のように単位付きで入力します。スクリプトを利用カンバスのエッジ(4本)および、中央(2本)にガイドがあると、レイアウトを行う上で重宝します。ドラッグを使ってのガイドの作成時、カンバスのエッジにスナップします。[新規ガイド]を使って数値指定することもできますが、いずれの方法でも、6回行わなければならず、時間も手間もかかります。「乱雑モックアップ」さんが作成されたスクリプト「ステージ枠と中央にガイドを引く.jsx」を利用すると、カンバスの中心とエッジに6本をガイドを1アクションで引くことができます。カンバスのエッジのみに(4本の)ガイドを引くには、Deapsの「外枠にガイドを引くスクリプト」が使えます。Photoshopでスクリプトを利用するにはスクリプトを利用するには、[ファイル]メニューの[スクリプト]→[参照...]をクリックして、ダウンロードしたスクリプト(JavaScriptファイル)を選択します。所定の場所にスクリプトファイルをおいておけば、[ファイル]メニューの[スクリプト]のサブメニューに表示されます。2015¥プリセット¥スクリプト[ファイル]メニューの[スクリプト]のサブフォルダーに表示されるスクリプトには、キーボードショートカットを割り当てることが可能です。[C]シェイプからガイドWebのカンプ作成時には「シェイプにぴったりとガイドを引きたい」というニーズがあります。シェイプに対してガイドを引く場合、「スナップ」こそ効くものの、1本1本引かなくてはなりません。楕円形や複雑なシェイプの場合には、それがすっぽりと入る長方形の領域に対して作成されます。複数のシェイプを選択していても同時に実行可能です。シェイプごとに4本ずつ引かれるので、たくさんのシェイプに対して同時に実行すると、カンバスがガイドだらけになってしまいます。[シェイプから新規ガイド]を実行できるのは、あくまでもシェイプのみ。選択範囲に対して実行することはできません。選択範囲に対してガイドを引くには「乱雑モックアップ」さんの「選択範囲にあわせてガイドを引く.jsx」を使うと選択範囲に対してガイドを引くことができます。単位が「ピクセル」以外になっていると、うまく動作しませんのでご注意ください。有償になりますが、次のような拡張機能があります。QuickGuideGuideGuide[D]ガイドレイアウトガイドレイアウト機能を利用すると、グリッドレイアウト用のガイドをスピーディに作成することができます。ガイドレイアウトを使うには、[表示]メニューの[新規ガイドレイアウト]をクリックして、[新規ガイドレイアウトを作成]ダイアログボックスを表示します。1080)」を選択したときの値です。grids[列]オプションにチェック(行はオフ)「数:12、幅、60px、間隔:20px」[列を中央に揃える]オプションをオン[マージン]にチェックを付け、[左]と[右]に「480」に設定(1,920-1,260-1,120-2*10)[行]をオフにしても、[マージン]の設定で、カンバスの上端、下端にガイドが生成されます。1080px)を選択したときの値です。[列]オプションにチェック(行はオフ)「数:12、幅、70px、間隔:30px」[列を中央に揃える]オプションをオン[マージン]にチェックを付け、[左]と[右]を「345」に設定(1,920-1,270-1,330)[行]をオフにしても、[マージン]の設定で、カンバスの上端、下端にガイドが生成されます。プリセットガイドレイアウトの設定は「プリセット」として保存し、読み込むことができます。ダウンロードなお、ガイドレイアウトを使ってガイドを作成する際、[既存のガイドを消去]オプションをオンにすると、それまでに引いたガイドが消去されます。ガイドの使いこなしガイドの表示/非表示ガイドの表示/非表示は[表示]メニューの[表示・非表示]→[ガイド]でコントロールします。キーボードショートカットはcommandキー(Ctrlキー)+:キーです。2015.1(16.1)のデザインスペースでは、IllustratorやInDesignと同じ、commandキー(Ctrlキー)+;(セミコロン)キーが使われています。ガイドのロックと合わせて、整合性を重視される方は、キーボードショートカットを変更してしまうとよいでしょう。2015.1(16.1)で大幅に強化されています。ガイドに関しても、アートボードに依存する「アートボードガイド」と、アートボードに依存しない「カンバスガイド」の2つの種類になりました。アートボードを選択時には、アートボードガイドが引かれるアートボードを移動すると「アートボードガイド」は追随するアクティブなアートボード以外のアートボードガイドはデフォルトでは非表示。環境設定で[非アクティブなアートボードガイドを非表示]オプションをオンにすると表示されるなお、ガイドのカラーの変更は、環境設定で行います。「カンバスガイド」のカラーは「シアン」、「アートボードガイド」のカラーは「ライトブルー」がデフォルトです。ガイドの表示/非表示のキーボードショートカットを実行すると、次のように順番に切り替わります。次の手順でカンバスのエッジからの距離を計測するスマートガイドが表示されます。先と同じ手順で、レイヤー外のほかのレイヤー上にマウスポインタを移動レイヤーを複製時に計測optionキー(Altキー)を押しながらレイヤーをドラッグしはじめると、元のレイヤーとの距離を計測できます。3つ以上のレイヤーの場合には、間隔を測定してくれます。整列Photoshopは元々オブジェクトベースで何かするアプリケーションではなかったので、整列に関しては、少し弱いです。パネルでなく、オプションバーで操作するため、状況によっては整列ボタンが表示されないキーボードショートカット:デフォルトでは設定されていないキーオブジェクト:できなくはないけれど面倒カンバスの中央(や端)に整列:できなくはないけれど面倒い等間隔に分布:スクリプトを使わないとできない指定間隔で分布:スクリプトを使わないとできない整列コマンドのキーボードショートカットPhotoshopで整列を行うには、オプションバーのボタンを利用します。長方形などのライブシェイプを[パスコンポーネント選択ツール](黒い矢印)で選択すると、オプションバーではアイコンをひとつのアイコンにまとめられ、さらに、グレーアウトしてしまいます。整列を実行するには、[カンバスで揃える]オプションを選択する必要があります。整列コマンドにキーボードショートカットを設定すれば、[パスコンポーネント選択ツール]を選択していても整列を実行できます。キーボードショートカットの設定方法[キーボードショートカット]ダイアログボックスを開き、整列の[上端]、[垂直方向中央]、[下端]、および、[左端]、[水平方向中央]、[右端]にキーボードショートカットを設定します。設定すると、メニューバーに(も)表示されます。キーオブジェクト整列を行うとき、移動させたくないオブジェクトに設定するのが「キーオブジェクト」です。IllustratorやInDesignでは、オブジェクトを選択後、キーオブジェクトに設定したいオブジェクトをクリックするだけですが、Photoshopでの操作手順は大きく異なります。Photoshopでキーオブジェクトを設定するには、[レイヤー]パネルでそのオブジェクトのサムネールをクリックして、選択範囲を作成します。すると、[レイヤー]メニューの[整列]は、[レイヤーを選択範囲に整列]に変わり、選択範囲がキーオブジェクトとして扱われます。この要領でカンバス全体を選択範囲にしておくと、レイヤーがひとつでも中央揃えや上ソロエ、左ソロエなどが可能になります。Photoshopでは一部のレイヤーをロックしておくと、そのレイヤーには整列を実行できません。整列をパネルを行いたい高橋としゆきさんが制作されている[整列]パネルを使うと、IllustratorやPhotoshopのようにパネルのボタンをクリックして操作できます。カンバス全体に対してのソロエをもっとラクに行うことができます。Add-ons等間隔に分布Photoshopには、Illustratorの[整列]パネルでいう[等間隔に分布]と[整列](の対象の選択)がありません。等間隔に分布を実行するのには、スクリプトに頼る必要があります。Morris氏のスクリプトが有名です。0-2-0.jsx」を使います(2つのスクリプトを使い分けます)。Vertical指定間隔で分布こちらはLIGブログで公開されているスクリプト「Margin」を使います。株式会社LIG整列と併せて、キーボードショートカットを設定しておくとよいでしょう。まとめとクイズ(回答)冒頭のクイズの回答です。ガイドの作成やガイドレイアウトなど、Photoshopの機能強化も見逃せませんが、スクリプトや拡張機能を利用することで、より効率的な作業が可能になります。2014以降、(シェイプ)に対して、ワンアクションで4本のガイドを作成することができる。(選択範囲)を対象とすることはできない。たかがガイド、されどガイド。