• WEB

Photoshopで簡単にガイドを等間隔でひく方法!エクステンション、GuideGuideの使い方

  • さむ
    さむ デザインちーむ
  • このエントリーをはてなブックマークに追加
Photoshopで簡単にガイドを等間隔でひく方法!エクステンション、GuideGuideの使い方

どうも、デザインちーむのさむです。

adobe系のソフトは未だに苦手意識が過剰に有りますが先日、便利なエクステンションを発見したので自分メモもかねてブログに残します。
知ってる人はスルーで。

GuideGuide

まずは下記サイトでファイルをダウンロードします。
cs5,cs6,ccバージョンがあるようです。

GuideGuide

GuideGuide

ダウンロードしたファイルを解凍しAdobe Extension Managerを利用してインストール作業に入ります。

Adobe Extension Managerを起動して右上のインストールボタンをクリックしダウンロードしたファイルを指定しインストールを進める。

Adobe Extension Managerを起動

インストールが完了し項目が表示されます。

インストールが完了し項目が表示されます

これでインストールは終了。
Photoshopを再起動。

使い方

Photoshopの[ウインドウ]-[エクステンション]から起動。

Photoshopの[ウインドウ]-[エクステンション]から起動

GuideGuideの画面操作

GuideGuideの画面操作

①のエリア:上下左右のパディングみたいなのを設定
②のエリア:縦横のカラム数を設定
③のエリア:カラムの幅、高さを設定
④のエリア:縦横のカラムの溝の設定
⑤:中央の水平線
⑥:中央の垂直線
⑦:ガイドのクリア
⑧:新規ガイドセット

中央下にあるGGボタンが実行ボタン。

使ってみよう!

最後に使ってみましょう。

例えば幅1000pxにli要素を5個入れるとします。
そして各liの間に20pxあける。
1個のliは184pxですね。
下記のように入力。

値を入力したら真ん中のGGボタンを押す

値を入力したら真ん中のGGボタンを押すと、、、。

あら簡単、ガイドがきれいにひけてますね!

あら簡単、ガイドがきれいにひけてますね!

まとめ

こういった単純作業を簡単にできるエクステンションは日々の作業効率化に是非みなさんも使ってみてはいかがでしょうか。

このエントリーをはてなブックマークに追加

さむが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ