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

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

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

関連記事

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …

no image

Facebookで友達が始めたアプリのリクエストをブロックする方法

この記事は約 1 分で読めます。 Facebookで友達が何かのアプリを始めた時、関係のない自分にまでリクエストがくる事があります。 よく言われる「スパムアプリ」なんだけれど、最近特に多いのが「マイカ …

no image

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りをしています。 今回は、前回の【準備編】の続編です。 ※(x)html+cssの知識がある事が前提で書いています。 前回までで …

no image

s3Slider.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのよ …

no image

Creative Cloud デスクトップアプリケーションが「サインアウトしています」と表示し、サインインできないとき

この記事は約 1 分で読めます。 時々、Adobeのソフトは使える状態なのに、Creative Cloudにデスクトップアプリケーションにサインインできないことがあります。 私の場合は、「サインアウト …