Photoshop CS6で快適にWEBデザインするテクニック vol.2

Photoshopで快適にWebデザインをするためのテクニックを紹介するこの連載。第2回のお題は「レイアウト」です。

おさらい
【レポート】Photoshop CS6で快適にWEBデザインするテクニック vol.1

Photoshopのレイアウトは「数値」が重要

制作現場で新人Webデザイナーが犯しがちなミスのひとつに、数値を疎かにして生じるレイアウトミスがあります。例えば「ここの座標だけ、1pixelズレてるぞ」とか、「各要素間の空き幅が、等間隔じゃないぞ」などと注意されてしまうわけです。

今回は、上記のようなミスを防止して、レイアウト作業を円滑にする初心者～中級者向けの便利な設定を紹介します。

配置時には「エクストラ」を表示しよう

Photoshopの「エクストラ」という機能群は、レイアウト作業時に役立つ補助線を表示するものです。レイアウト作業には取りかかる際には、必ず表示しましょう。

■定規を表示する

「エクストラ」機能の説明に入る前に、それらと組み合わせると便利な機能のひとつである「定規」の表示方法を紹介します。「表示＞定規」をONにして、チェックマークを表示した状態にしましょう。すると、キャンバスの上辺側と左辺側に、「定規」が表示されます。

この定規の上で右クリックすると、単位の設定が表示されます。前回もご説明した通り、Webデザインの際は「pixel」を選択して作業しましょう。ほとんどの場合「pixel」で作業すれば円滑に進みますが、たとえば各要素がキャンバス上に占めている面積の割合が確認したければ、"％"に切り替えて確認するのも、ひとつの手です。

■ガイド(基準線)を表示する

複数の要素を整列させて表示させるには、様々な方法があります。その中のひとつとして、エクストラの「ガイド(基準線)」を利用する方法があります。

まず「表示＞エクストラ」 をONにし、チェックマークを表示しましょう。そして「表示＞表示・非表示＞ガイド」をONにします。これで、キャンバス上に「エクストラ」の「ガイド」を表示することができます。

他の「エクストラ」を表示・非表示する際も、同様に「表示＞表示・非表示」の中から項目を選択します。作業の段階に応じて、表示エクストラを使い分けるのが良いでしょう。 それでは、さっそくガイドを配置してみましょう。「表示＞新規ガイド」を選択すると、「新規ガイド」のポップアップが表示されます。配置したい方向と位置を数値入力すると、指定した座標にガイドが作成されます。

先ほど表示させた「定規」の数値を利用して、より視覚的にガイドを配置することも可能です。定規上にマウスカーソルを持っていき、そこからドラッグしてみてください。すると、マウスカーソルにガイドが追従して表示されます。ここにガイドを引きたいという場所でドロップすると、そこにガイドが作成されます。

■グリッド(升目)を表示する

次は、グリッドを表示してみましょう。まず「表示>表示・非表示>グリッド」をONにします。すると、画像のようにキャンバス上にグリッドが表示されます。

ここで一度、環境設定画面を開きたいと思います。「Photoshop>環境設定>ガイド・グリッド・スライス>グリッド」で下図のような表示が出ます。ここで、グリッド線のサイズ・単位と、その分割数を設定できます。

いくつか例をみてみましょう。例に出している図は、1,000pixel×500pixelの画像です。

グリッド線と、分割数の関係、ご理解いただけたでしょうか。

このように、初めは大まかに、徐々に細かに……といった具合で、作業に応じて、グリッドのサイズを変更することが可能です。その際の不変の目印として、ガイドを適宜配置しておくのが便利でしょう。

ちなみに、「表示>表示・非表示>ピクセルグリッド」をONにすると、キャンバスを拡大した際に、1ピクセル毎にグリッド線が表示されます。例えば「一見グリッドやガイドに揃っているようにみえるけど、拡大してみたら1pixelズレていた……」といった、細かな確認に使えます。