Webの記録

Photoshopでレイアウト設計をする時に便利なエクステンション「GuideGuide」を試してみた

投稿日:

この記事は約 2 分で読めます。

guideguide

日頃、WebページのデザインはPhotoshopを使っています。何か便利なツールないかなぁ~と思っていたところで知ったエクステンション。

Photoshopでレイアウトを設計する時にガイド引きが少し楽になる、便利なエクステンション「GuideGuide」がありました!

とても便利そうだったので、早速試してみました。

1)「GuideGuide」対応バージョン(2014.2現在)

CS5 / CS6 / CC

2)導入方法

「GuideGuide配布元」:http://www.guideguide.me/

「Photoshopの面倒なガイド引きを楽チンにするエクステンション -GuideGuide」| colisを参考に、インストールして使ってみました!

少し古い記事のようなので、対応バージョンは変わっているようです。(2014年2月現在)

3)使い方

Photoshopを開いて、「ウィンドウ」→「エクステンション」→「GuideGuide」で起動します。

g1

インターフェース

マージンやカラム数などを入力して、青い「GG」ボタンを押してガイドを引きます。

g2

  1. マージン上
  2. マージン左
  3. 水平カラム数
  4. カラムの横幅
  5. カラムとカラムの間の横のマージン
  6. マージン下
  7. マージン右
  8. 垂直カラム数
  9. カラムの高さ
  10. カラムとカラムの間の垂直(上下)のマージン
  11. 垂直中心
  12. 水平中心
  13. 実行ボタン(実行する時にクリック)
  14. ガイドのクリア
  15. 新規ガイドセット

とりあえず、横だけガイドを引いてみたらこんな感じになりました。

g3

1回の設定で一気にガイドが引けるのが嬉しいです!

指定したところの中心にガイドを引いたり、均等に引いたりが出来るようなので、かなり便利そうです。

かなり前からある有名なエクステンションですが、今まで使わず時間を費やしていたのが勿体ないですね。便利なものイロイロ見つけていかねば!です。

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPressが勝手に挿入する「pタグ」を自動挿入させない方法

この記事は約 1 分で読めます。 WordPressには「auto paragraph」という、自動でpタグを挿入してくれる機能があります。 そのため、意図しない見た目になってしまうことが、時々起きて …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

Twitterのフォロミーバッチにチャレンジ♪

いろんなサイトの横側に見掛ける「Twitterのフォロミーバッチ」。
どんな風に作られているか気になっていたので、私もチャレンジしてみました。

no image

WordPressがいきなり真っ白になった時。

この記事は約 1 分で読めます。 WordPressでこのサイトを作って、約2年になります。 地道に継続していて、当たり前に使っていたのに・・・。 ある日、ブラウザに表示させてみると・・・真っ白になっ …

no image

WordPress記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …