ガイドを配置する
ガイドとは、目安のための補助線のことです。詳細は後述しますが、Photoshopでの作業では何枚ものレイヤーを使います。ガイドを配置することで、レイヤー上の画像などをガイドに沿ってそろえて配置することができるので便利です。
ガイドを正しく引くためには、グリッドとスナップ機能を使わなければなりません。
実際にやってみましょう。
ファイルを開く
作成済みのファイルをPhotoshopで開きます。手順は以下の通り。
デスクトップの保存したフォルダ（homepage）をダブルクリック→[保存したファイル]をダブルクリックします。
定規を表示させる
まず、［ビュー］→［定規］をクリックして、定規をチェックします。
Ctrl+Rでも定規を表示/非表示させることができます。R=Ruler=定規と覚えましょう。
画像の上端と左端に目盛りのついた定規が出てきます。
定規の上で右クリックして、単位をpixelにします。
定規を消すには、［ビュー］→［定規］をクリックして、チェックを外します。
グリッドを表示させる
次に、グリッドを表示させます。グリッドは、方眼紙（grid sheet）のことです。
［ビュー］→［表示］→［グリッド］をクリックして、グリッドをチェックします。
Ctrl+@でもグリッドを表示/非表示できます。@は何を意味しているのだろう？
方眼紙みたいな目盛線が画像全体に出てきます。
グリッドを消すには、［ビュー］→［表示］→［グリッド］をクリックして、チェックを外します。グリッドが表示された状態で、Ctrl+@でグリッドを消すこともできます。
続いて、グリッドの目盛単位を設定します。
[編集]→[環境設定]→[ガイド・グリッド・スライス・カウント]をクリックします。
グリッド線を10pixelにします。10pixelごとに方眼紙の線が引かれます。
ガイドを引く
移動ツールを選択し、画面左の縦型定規の適当な位置から右方向へマウスをドラッグします。ポインタは縦型定規の目盛の上ならどこに合わせても大丈夫です。そのままグイーっとドラッグしましょう。どこまでドラッグするかも、適当でOKです。後で、位置を調整しますので。
細い青線がでてきます。これがガイドです。
先ほど、設定したグリッド幅10pxでスナップ(=整列)してガイドが表示されます。
まずは、基準線となるガイドを引きます。
「ページの幅を決める」で余白を両側に50pxずつ取ったので、左右両端から50pxの位置にガイドを配置しましょう。グリッドの目盛が10pixelになっているので左右両端から5本目の実線が50pxの位置というわけです。
横のガイド（水平方向のガイド）を引く場合は、画面上部の横型定規の適当な位置から、下方向へマウスをドラッグします。
先ほどと同じように、青線が出てきます。
ホームページの上下方向は、上詰めにしますので基準線は無しです。
ガイドを戻すには、移動ツールを選択し、縦方向のガイドは左端の定規の目盛表示まで、横方向のガイドは上にある定規の目盛表示までドラッグしてください。
ガイドを消すには、［ビュー］→［表示］→［ガイド］をクリックして、チェックを外します。Ctrl+:でもガイドを消すことができます。
作成したラフを元にガイドを引いていきます。
全てのガイドを引くには、次の「要素を配置する」を行いながらやると解りやすいです。
スナップとは、位置を合わせるために必要な機能です。これは、グリッドやガイド、または、レイヤーなどに位置を揃える機能です。
| ガイド | レイヤー上の画像などを揃える基準線です。任意の位置に設定できます。 |
|---|---|
| グリッド | 方眼紙のように、均一なマス目を画像に設定出来ます。 |
| スナップ | 画面上のガイドやグリッドなどに整列する機能です。 |
