Photoshopを使ってWebデザインを制作するときに、まず必要となるのがピクセル単位で引かれたグリッドガイドラインです。
グリッドレイアウトを利用することで、コンテンツをすっきり見やすく並べるだけでなく、デザイン作業を直感的に行うことができます。
海外デザインブログWebdesigntuts+で、Photoshop用プラグインGuideGuideを利用したWebデザイン制作用のガイドラインの設定方法を解説したチュートリアル「Setting a Baseline Grid With GuideGuide for Photoshop」が公開されていたので、今回はご紹介します。
詳細は以下から。
Webデザインに必要なガイドラインを作成するPhotoshopチュートリアル
Step 1: プラグインGuideGuideをインストールしよう
今回はPhotoshopエクステンションプラグインGuideGuideを利用したチュートリアルとなります。
あらかじめプラグインをこちらよりダウンロードして、Adobe Extension Managerを開き、インストールしましょう。この時にPhotoshopは終了しておくことを忘れないようにしましょう。
[warning_box]Mac OSXでPhotoshop CS5を利用されている方は、Adobe Extension Manager Patchのインストールが必要となります。[/warning_box]
インストール後、プラグインGuideGuideを画面に表示しましょう。
メインメニューより「ウィンドウ」＞「エクステンション」＞「GuideGuide」をクリックすれば完了です。
Step 2 : グリッドレイアウトを作成しよう
今回作成するグリッドレイアウトは、960 Grid SystemをベースにしたWebデザイン制作となります。
新規ファイルを開き、幅960px、高さ1050pxとして新しいカンバスを開きましょう。
定規を表示（「表示」＞「定規」）し、カンバスの端に２本のガイドラインを作成しましょう。
では実際にGuideGuideプラグインを使って、グリッドガイドラインを作成します。
それぞれの項目の詳細についてはサムネイルを参考にして、以下のように設定します。
グリッド作成開始ボタンを押すと、自動的にグリッドガイドラインが作成されます。
Step 3 : カラムを色付けして分かりやすくしよう
Webデザイン制作をよりスムーズに行うために、カラムごとに色付けをしておきましょう。
新しいレイヤーを一番上に作成、ツールボックスより「長方形選択ツール」を選択し、一番左カラム部分を選択します。
つづけて描画色「ピンク色」(#ff0084)で塗りつぶしましょう。この時にカラム全体が選択されているか確認しておきましょう。
同じ要領ですべてのガラムをピンク色でペイントしましょう。
最後にペイントしたすべてのレイヤーを選択し、右クリックで「レイヤーを結合」を選択し、結合したレイヤーの不透明度を10%に設定しましょう。
Step 4 : 垂直方向のベースラインを作成しよう
今回はテキストサイズ14pt、行間1５０％でデザイン制作することを前提に行なっています。
メインメニューより「編集」＞「詳細設定」＞「ガイド・グリッド・スライス」を選択したら、以下のように設定しましょう。
設定が終了したら、再度カンバスに戻りグリッドガイドを表示（Ctrl+@)します。これで14ptのテキストサイズにぴったりな垂直ベースラインを作成することができました。
Step 5 : ベースラインを色付けしよう
ガイドを表示した状態では、作業しにくい場合もあるので、こちらもグリッド同様に色付けします。
今回はテキストサイズが14ptなので、高さはテキストの半分「7px」となり、以下のように設定して新規ファイルを開きます。
描画色「黄緑色」(#00ff12)を使い、１ｘ１ｐｘでカンバス下を塗りつぶしましょう。
続けてメインメニューより「編集」＞「パターンを定義」を選択し、作成したパターンを保存します。
再度カンバスに戻り、新しいレイヤーを一番上に作成し、「垂直ベースライン」に名前を変更します。
メインメニューより「編集」＞「塗りつぶし」を選択し、先ほど作成したパターン素材を利用してペイントしましょう。
これで水平、垂直方向ともにベースガイドラインを作成することができました。
Step 6: カンバスサイズを広げよう
さらにデザイン作業環境を整えるために、カンバス幅を以下のように変更します。
こうすることで、Photoshopを使ってピクセル単位のWebデザインを制作することが可能となります。
色々なプロジェクトで活用してみてはいかがでしょうか。
参照元リンク : Setting a Baseline Grid with GuideGuide for Photoshop – Webdesigntuts+
