GuideGuide

Photoshopで効率的にガイドラインを引く

Webサイトを作る時に最初にする作業として、作りたいサイトののワイヤーフレームを作ります。
ほとんどの場合Photoshopで作っていくのですが、そんな時に便利なツールを教えてもらいました。

「GuideGuide」というPhotoshop機能拡張なんですが、これはPhotoshopでレイアウトしていく時にとっても効率よくガイドラインを引くことが出来ます。

まずはこちらから使っているPhotoshopのバージョンに合わせたファイルをダウンロードします。
解凍すると zxp という聞き慣れないファイルが出来ると思いますが、これを開くと Adobe EXTENTION MANAGER というのが起動してインストール出来るようになります。
これで準備完了。
Photoshopを起動して、「ウィンドウ」→「エクステンション」に「GuideGuide」が追加されているので選択すると横の画像のようなウィンドウが出てきます。

以下使い方。

  1. から入力したピクセル数分のところにガイドラインを引く
  2. から入力したピクセル数分のところにガイドラインを引く
  3. から入力したピクセル数分のところにガイドラインを引く
  4. から入力したピクセル数分のところにガイドラインを引く
  5. キャンバス全体を入力した数に縦分割したガイドラインを引く
  6. キャンバス全体を入力した数に横分割したガイドラインを引く
  7. 左から入力したピクセル数毎にガイドラインを引く
  8. 上から入力したピクセル数毎にガイドラインを引く
  9. 7番と組み合わせて、入力したピクセル数分の余白ガイドラインを引く
  10. 8番と組み合わせて、入力したピクセル数分の余白ガイドラインを引く

数値を入力して青いGGボタンを押せばガイドが引かれます。

青いボタンの左右に並ぶ4つのボタンは左から、
  • キャンバスの上下中央にガイドラインを引く
  • キャンバスの左右中央にガイドラインを引く
  • ガイドラインを消去
  • 入力した数字を記憶させてセットを作る
となっています。

「横幅1200pxで、ヘッダが120px、フッタが80pxで3カラム」なんて時のガイドが一発で引けるのでとっても便利です。
Webだけでなくバナーなどのレイアウトにも使えますね。

GuideGuide

コメントを残す