Advertisement

guideguide_top

 

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は終了しておくことを忘れないようにしましょう。

howto1

[warning_box]Mac OSXでPhotoshop CS5を利用されている方は、Adobe Extension Manager Patchのインストールが必要となります。[/warning_box]

 

 

インストール後、プラグインGuideGuideを画面に表示しましょう。

メインメニューより「ウィンドウ」>「エクステンション」>「GuideGuide」をクリックすれば完了です。

howto3

 

 

 

Step 2 : グリッドレイアウトを作成しよう

 

今回作成するグリッドレイアウトは、960 Grid SystemをベースにしたWebデザイン制作となります。

新規ファイルを開き、幅960px、高さ1050pxとして新しいカンバスを開きましょう。

howto5

 

 

定規を表示(「表示」>「定規」)し、カンバスの端に2本のガイドラインを作成しましょう。

howto6

 

 

では実際にGuideGuideプラグインを使って、グリッドガイドラインを作成します。

それぞれの項目の詳細についてはサムネイルを参考にして、以下のように設定します。

howto7

 

 

グリッド作成開始ボタンを押すと、自動的にグリッドガイドラインが作成されます。

howto8

 

 

 

Step 3 : カラムを色付けして分かりやすくしよう

 

Webデザイン制作をよりスムーズに行うために、カラムごとに色付けをしておきましょう。

新しいレイヤーを一番上に作成、ツールボックスより「長方形選択ツール」を選択し、一番左カラム部分を選択します。

つづけて描画色「ピンク色」(#ff0084)で塗りつぶしましょう。この時にカラム全体が選択されているか確認しておきましょう。

howto9

 

 

同じ要領ですべてのガラムをピンク色でペイントしましょう。

最後にペイントしたすべてのレイヤーを選択し、右クリックで「レイヤーを結合」を選択し、結合したレイヤーの不透明度を10%に設定しましょう。

howto10

 

 

 

Step 4 : 垂直方向のベースラインを作成しよう

 

今回はテキストサイズ14pt、行間150%でデザイン制作することを前提に行なっています。

メインメニューより「編集」>「詳細設定」>「ガイド・グリッド・スライス」を選択したら、以下のように設定しましょう。

howto11

 

 

設定が終了したら、再度カンバスに戻りグリッドガイドを表示(Ctrl+@)します。これで14ptのテキストサイズにぴったりな垂直ベースラインを作成することができました。

howto12

 

 

 

Step 5 : ベースラインを色付けしよう

 

ガイドを表示した状態では、作業しにくい場合もあるので、こちらもグリッド同様に色付けします。

今回はテキストサイズが14ptなので、高さはテキストの半分「7px」となり、以下のように設定して新規ファイルを開きます。

howto13

 

 

描画色「黄緑色」(#00ff12)を使い、1x1pxでカンバス下を塗りつぶしましょう。

続けてメインメニューより「編集」>「パターンを定義」を選択し、作成したパターンを保存します。

howto14

 

 

再度カンバスに戻り、新しいレイヤーを一番上に作成し、「垂直ベースライン」に名前を変更します。

メインメニューより「編集」>「塗りつぶし」を選択し、先ほど作成したパターン素材を利用してペイントしましょう。

howto15

 

 

これで水平、垂直方向ともにベースガイドラインを作成することができました。

howto16

 

 

 

Step 6: カンバスサイズを広げよう

 

さらにデザイン作業環境を整えるために、カンバス幅を以下のように変更します。

howto17

 

 

こうすることで、Photoshopを使ってピクセル単位のWebデザインを制作することが可能となります。

色々なプロジェクトで活用してみてはいかがでしょうか。

howto18

 

 

参照元リンク : Setting a Baseline Grid with GuideGuide for Photoshop – Webdesigntuts+