Photoshopの面倒なガイド引きを楽チンにするエクステンション -GuideGuide

ウェブページのレイアウト用にグリッドを設計したり、エレメントの中心をだしたり、余白を確保するなど、Photoshopのガイド引きを楽チンにするエクステンションを紹介します。
この機能はデフォルトで実装してほしいですね。

サイトのキャプチャ

GuideGuide

以前、紹介した時に比べてバージョンアップし、使い勝手がよくなりました。

GuideGuideの対応バージョン

Photoshop
  • Photoshop CS4
  • Photoshop CS5
OS
  • Windows(32bit)
  • Windows(64bit)
  • Mac OS

CS5+Mac OSX Lionでは「Patch」が必要です。

GuideGuideのインストール

GuideGuideのインストールは簡単です。
ここでは、Windows版を例に説明します。

GuideGuideのサイトにアクセスし、ファイルをダウンロードします。
CS4用とCS5用があります。

サイトのキャプチャ

GuideGuide

ダウンロードしたファイルを解凍し、Adobe Extension Managerからインストールをします。

Adobe Extension Managerのキャプチャ

Adobe Extension Managerからインストール

Adobe Extension Managerを起動しインストールボタンをクリックし、ダウンロードした「guideguide-cs5.zxp」を指定します。

Adobe Extension Managerのキャプチャ

インストールボタンをクリック

あとは、画面に従ってクリックします。

Adobe Extension Managerのキャプチャ

承諾画面

インストールはすぐ終了します。

Adobe Extension Managerのキャプチャ

インストール完了画面

インストールが完了すると、GuideGuideが登録されています。

Adobe Extension Managerのキャプチャ

GuideGuideが登録されたら無事完了

GuideGuideの使い方

GuideGuideのインストールが完了したら、Photoshopを再起動してください。
GuideGuideは[ウインドウ]-[エクステンション]から起動できます。

Photoshopのキャプチャ

PhotoshopからGuideGuideを起動

GuideGuideのインターフェイス

アイコンで直観的に分かると思うので、簡単に。

GuideGuideのキャプチャ
  1. マージン:上
  2. マージン:下
  3. マージン:左
  4. マージン:右
  5. カラム数:水平
  6. カラム数:垂直
  7. カラムのサイズ:幅
  8. カラムのサイズ:高さ
  9. カラムの溝:水平
  10. カラムの溝:垂直
  11. 中心:垂直
  12. 中心:水平
  13. GGボタン:ガイドを実行
  14. ガイドのクリア
  15. 新規ガイドセット

グリッド

まずは、ドキュメントにグリッドを設計してみます。
カラムを3つ、溝を20px、左右のマージンを20pxに設定し、「GG」ボタンをクリックします。

Photoshopのキャプチャ

GuideGuideで簡単にグリッドのガイドが設置できました

中心

真ん中にガイド引くのも簡単です。
「中心:水平」ボタンをクリックします。
※垂直方向の真ん中は一番左のボタンです。

Photoshopのキャプチャ

真ん中にグリッドを配置するのも1ボタンで

指定した範囲の真ん中にも簡単にガイドが引けます。

Photoshopのキャプチャ

任意の範囲の真ん中も簡単

ナビゲーションの設計

ナビゲーションを指定した幅で均等にフィットするようにガイドを引きます。
サイトの幅を選択し、カラムの数を入力し、「GG」ボタンをクリックします。

サイトのキャプチャ

指定範囲の均等分割

エレメントのパディング

エレメントの四辺に余白を設定する場合は、各マージンにマイナスの値を指定します。

サイトのキャプチャ

余白の確保

ベースラインのグリッド

ベースラインのグリッドを設定する場合は、line-heightのサイズを設定します。

サイトのキャプチャ

ベースラインに合わせてエレメント設置

top of page

©2017 coliss