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

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

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

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

このうち、ガイドとグリッドは、Photoshopのほぼ全てのバージョンで使用可能となっています（表示させるコマンドの位置はバージョンによって少し異なります）。
スライスは原則的に6.0以上（Photoshop5.0以前にはなく、5.5ではImageReadyのスライスによる）の機能となっています。

ガイドの操作方法

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

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

   
   
9. ［ビュー］メニューから［定規］を選択して、定規を消去しておいてください。
   
   
   

グリッドの操作方法

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

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

   
   

   ヒント：ガイドやグリッドはこのページの例で使用した選択ツールだけでなく、例えばレイヤーの画像にも同じように働きます。

   
   

   さらにヒント：ガイドやグリッドに沿わせるかどうかは［ビュー］メニューの［スナップ］で切替可能です（さらに［スナップ先］で沿わせる先を設定できます）。

   ［スナップ先］のサブメニュー

   
   

スライスの操作方法

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

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

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

   
   

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

   
   

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