Photoshopの面倒なガイド引きを楽チンにするエクステンション -GuideGuide
Post on:2012年1月11日
sponsors
ウェブページのレイアウト用にグリッドを設計したり、エレメントの中心をだしたり、余白を確保するなど、Photoshopのガイド引きを楽チンにするエクステンションを紹介します。
この機能はデフォルトで実装してほしいですね。
以前、紹介した時に比べてバージョンアップし、使い勝手がよくなりました。
[ad#ad-2]
GuideGuideの対応バージョン
- Photoshop
-
- Photoshop CS4
- Photoshop CS5
- OS
-
- Windows(32bit)
- Windows(64bit)
- Mac OS
CS5+Mac OSX Lionでは「Patch」が必要です。
GuideGuideのインストール
GuideGuideのインストールは簡単です。
ここでは、Windows版を例に説明します。
GuideGuideのサイトにアクセスし、ファイルをダウンロードします。
CS4用とCS5用があります。
[ad#ad-2]
ダウンロードしたファイルを解凍し、Adobe Extension Managerからインストールをします。
Adobe Extension Managerからインストール
Adobe Extension Managerを起動しインストールボタンをクリックし、ダウンロードした「guideguide-cs5.zxp」を指定します。
インストールボタンをクリック
あとは、画面に従ってクリックします。
承諾画面
インストールはすぐ終了します。
インストール完了画面
インストールが完了すると、GuideGuideが登録されています。
GuideGuideが登録されたら無事完了
GuideGuideの使い方
GuideGuideのインストールが完了したら、Photoshopを再起動してください。
GuideGuideは[ウインドウ]-[エクステンション]から起動できます。
PhotoshopからGuideGuideを起動
GuideGuideのインターフェイス
アイコンで直観的に分かると思うので、簡単に。
- マージン：上
- マージン：下
- マージン：左
- マージン：右
- カラム数：水平
- カラム数：垂直
- カラムのサイズ：幅
- カラムのサイズ：高さ
- カラムの溝：水平
- カラムの溝：垂直
- 中心：垂直
- 中心：水平
- GGボタン：ガイドを実行
- ガイドのクリア
- 新規ガイドセット
グリッド
まずは、ドキュメントにグリッドを設計してみます。
カラムを3つ、溝を20px、左右のマージンを20pxに設定し、「GG」ボタンをクリックします。
GuideGuideで簡単にグリッドのガイドが設置できました
中心
真ん中にガイド引くのも簡単です。
「中心：水平」ボタンをクリックします。
※垂直方向の真ん中は一番左のボタンです。
真ん中にグリッドを配置するのも1ボタンで
指定した範囲の真ん中にも簡単にガイドが引けます。
任意の範囲の真ん中も簡単
ナビゲーションの設計
ナビゲーションを指定した幅で均等にフィットするようにガイドを引きます。
サイトの幅を選択し、カラムの数を入力し、「GG」ボタンをクリックします。
指定範囲の均等分割
エレメントのパディング
エレメントの四辺に余白を設定する場合は、各マージンにマイナスの値を指定します。
余白の確保
ベースラインのグリッド
ベースラインのグリッドを設定する場合は、line-heightのサイズを設定します。
ベースラインに合わせてエレメント設置
sponsors
