ここではPhotoshopでの画像の位置合わせによく利用される、ガイドとグリッド、および画像を複数に分割するスライスの機能と、ものさしツールについて、実習を交えて紹介します。

• ガイド、グリッド、スライスとは？
• ガイドの操作方法
• グリッドの操作方法
• スライスの操作方法

グリッド：方眼紙のように、均等なマス目を画像に設定できます。標準で機能していますが、ふだんは見えない状態になっています。

スライス：ひとつの画像を複数の画像に分割したもの。各部分ごとに最適な画像形式を設定し、Web用に保存できるようになります。

ガイドの操作方法

ガイドを使うと、画像の正確な位置に選択範囲やレイヤー画像を配置することが可能になります。

1. Photoshopを起動し、新規ファイルを作成します。ここでは、200×200ピクセル、72dpiのファイルを作成しました。
   
   
   
   
2. ［ビュー］メニューから［定規］を選択します。この操作で、画像の上端と左端に目盛りのついた定規が出てきます。
   
   
   
   
3. 移動ツール（）を選択し、左側の（縦型の）定規の適当な位置から、右方向へマウスをドラッグします。細い青線がでてきます。これがガイドです。
   
   
   
   
4. 今度は、上端の（横型の）定規の適当な位置から、下方向へマウスをドラッグします。
   先ほどと同じように、青線が出てきます。
   
   
   
   
5. 先の操作を繰り返して、合計４本のガイドを引いてみてください（位置は必ずしもこの図のとおりでなくてもかまいません）。位置を変えるときは、青線の上をドラッグします。
   
   
   
   
6. ガイドの効果をためしてみます。
   楕円形選択ツール（）を選択し、先のガイドで囲まれた中央部分に、ゆっくりと選択範囲を作ってみてください。選択範囲は自動的にガイドに沿っていくはずです。
   
   
   
   

   ヒント：［ビュー］メニューの［新規ガイド...］を選択すると、定規がなくても特定の位置にガイドを設定できます。

   
   
   
7. ガイドを戻すには、移動ツールで、縦方向のガイドは左の定規の上、横方向のガイドは上の定規までドラッグしてください。
   
   

   ヒント：［ビュー］メニューの［ガイドを消去］を選択すると、すべてのガイドを一気に消去することが可能です。

   
   

   ヒント：［ビュー］メニューの［表示］にある［スマートガイド］をオンにしていると、シェイプや選択範囲、スライス（後述）の作成や移動時に自動的に特殊なガイドが表示されます。

   シェイプの移動時に表示されたスマートガイド（マゼンダ色の線）

   
   
   

グリッドの操作方法

1. Photoshopを起動し、新規ファイルをします。ここでは、200×200ピクセル、72dpiのファイルを作成しました。
   
   
   
   
2. ［ビュー］メニューの［表示］から［グリッド］を選択します。この操作で、方眼紙のような目盛線が画像全体に出てきます。
   
   
   
   
3. 楕円形選択ツール（）を選択し、グリッド線の近くでドラッグしてみます。
   自動的に、グリッドに沿うように選択範囲ができます。
   
   
   
   
4. ［ビュー］メニューの［表示］から［グリッド］を選択すると、グリッド表示は消えます。
   
   
   

   ヒント：グリッドのサイズは、環境設定（Mac:［Photoshop］→［環境設定］、Windows:［編集］→［環境設定］）で、［ガイド・グリッド・スライス］で指定可能です。

   
   

スライスの操作方法

1. Photoshopを起動し、任意の既存のファイルを開きます。ここでは、別途Photoshopで作成しておいた画像を用意しました。
   
   
   
   
2. スライスツール（）で画像の適当な位置をドラッグします。画像にドラッグしたところを中心とした区切り線が出てきます。
   このとき、それぞれが四角形の複数の部分になっていて、その左上端に番号があるのがわかります。これが「スライス」です。今回は、合計で５つのスライスができました。
   
   
   
3. このままの状態から、［ファイル］メニューの［Webおよびデバイス用に保存...］を選択します。
   プレビューの中にスライスが表示され、一部はうっすらと表示されています。
   
   スライスはそれぞれ個々の画像形式が設定できるようになっており、同じPhotoshop画像内のべた塗りの多い場所はGIF、写真やグラデーションがある部分はJPEGというふうに、最適なパターンを適用して書き出すことができる利点があります。
   
   
   
   
4. ［保存］ボタンをクリックして保存します。フォーマットに「HTMLと画像」を選択して保存します。
   
   
   
   
5. 保存されたファイルを確認すると、Photoshopファイル名と同じHTML、imagesフォルダ（中にスライスされた複数の画像ファイルがある）が作成されているのがわかります。
   実際にホームページなどで使うには、このHTMLファイルを取り込んで利用すれば簡単です。
   
   
   

   ヒント：ガイドがある状態からスライスツールを選択すると、［ガイドに沿ってスライス］ボタンでスライスを作成できるようになります。スライスツールに慣れないうちは、［ガイドに沿ってスライス］を使用した方が簡単だと思います。 また、複数レイヤーがある画像の場合、［レイヤー］メニューの［レイヤーに基づく新規スライス］を選択すると、レイヤーの透明部分を自動的に切あり落とすようにスライスが作成されます。

   ［ガイドに沿ってスライス］ボタン ［レイヤーに基づく新規スライス］で作成されたスライス

   
   

   ヒント：スライスツールを選択すると、自動的に（スライスが作成されていなくても）スライス番号が表示されます。 これは、［ビュー］メニューの［表示］から［スライス］を選択することで消去できます。

   
   

• ガイド、グリッド、スライスとは？
• ガイドの操作方法
• グリッドの操作方法
• スライスの操作方法