解 説

PhotoshopでWebの素材を作成するときに、ピクセルが小数単位になると素材の境界線のにじみの原因になります。
その原因として、そもそもガイドの位置が小数単位の位置にあることです。
Webの場合は、ガイドは必ず整数のピクセル単位でなければなりません。
けれどもこれは結構面倒ですし、ついつい見落とすこともあります。
その解決方法として、ガイドそしてコンテンツを整数のピクセルにしか移動できないようにすることです。

ガイドをピクセルにあわせる方法

ガイドをピクセルにあわせて移動させるには、あらかじめ環境設定を行います。
環境設定のダイアログボックスで「ガイド・グリッド・スライス」の項目から「グリッド数」と「分割数」を決めます。
グリッド数とはグリッド線を表示させる範囲のグリッドの数のことです。10pixelとすれば10ピクセルごとにグリッド線が引かれます。100pixelとすれば100ピクセルごとにグリッド線が引かれます。細かい作業をする場合は10、大きなコンテンツを使う場合は100にするなどグリッド数は用途に応じて決めますが、きりの良い数字にすると見やすいです。
grid1
分割数はグリッド数を更に何分割するか決めるものです。ポイントは「分割数」を「グリッド数」と同じ数字にすると1ピクセルずつ分割されます。
grid2
さらに必ずメニューの「表示」から「スナップ先」の「グリッド」にチェックを入れておきます。これでガイドやオブジェクトもピクセル単位のグリッドに吸着してくれます。

「グリッド数」が10px、「分割数」も10として、「スナップ先」を「グリッド」に設定するとガイド線は1ピクセルごとに引く事ができます。
grid4

さらに、分割数をグリッド数の半分の数字にすると一つのピクセルの単位が2ピクセルになります。2ピクセル単位でコンテンツを作成すると当然ですが必ず偶数単位のコンテンツができあがりますので、最小単位を2ピクセルにして使うことも多いです。

簡単な設定で済むことです。まず最初に環境設定を整えておきましょう。

「グリッド数」と「分割数」を同じ数字にすると1px単位
「分割数」を半分の数字にすると2px単位

Webデザインの現場ですぐに役立つ Photoshop仕事術は、Webデザインの現場で特にカンプ作成に役立つ情報が満載です。