ガイドの作成がめちゃ楽になるphotoshop plugin Griddifyの使い方と紹介

photoshop

photoshopでの作業する際に、ガイドを作成していく作業って何気に時間がかかりますよね。
【全体幅は1280pxで、ここの幅は320pxでmarginがサイドに10pxで・・・】
こんな感じでモックアップデザイン作る時なんかは、正確な数値でガイドを作成していかないとスライス時に面倒な事になるので、メニューバーの新規ガイドから数値を入力して今までガイドを作成していたんですが、このGriddifyを使うと、かなりガイドを作成する時間が短縮できるようになりました。

・無料plugin
・photoshopの対応バージョンはCS6以降

インストール方法

上記公式サイトより
Photoshop CCの場合は、2のDownloadリンクからダウンロード後、エクステンションマネージャーでインストールできるみたいです。

Griddifyダウンロード
Griddifyダウンロード

自分はPhotoshop CS6なので【here】のリンクからダウンロードしました。

Griddifyインストール
Griddifyインストール

zipファイルを解凍したら中にGriddifyCS6というファイルがあるので、photoshopのPlugins/Panelsの中にフォルダーごと入れる。

これで後はphotoshopを起動するだけです。

Griddifyの使い方

photoshop起動後にメニューバーから【ウィンドウ】→【エクステンション】に【GriddifyCS6】が追加されているので表示する。

Griddifyの操作パネルの概要は以下の通り。

Griddify操作パネル概要
Griddify操作パネル概要

操作パネルが直感的に操作できるUIになっているので、扱いに慣れるのは直ぐだと思います。
それではどのような動作になるのか確認していきましょう。

Griddifyの動作

Griddifyの動作画像
Griddifyの動作画像

入力値100でガイドの方向は左から右の設定で動作させるとこのようになります。
左から100pxごとにガイドが作成されます。これは縦方向の場合も同様です。

Griddifyの動作2
Griddifyの動作2

複数値を入力した場合の動作です。
100 50 25 の複数の値で動かしたら、指定順にガイドが繰り返し作成されるようです。
試しに20個の複数値でやっても動作したので、複数入力の上限値は無いと思います。

Divideの動作

簡単に3分割や16分割が出来るので、この機能何気にお気に入りです。
分割方法も縦、横、縦横両方と選べます。

Divideの動作
Divideの動作

ガイドを作成するのが面倒な16分割の場合でもこのように一瞬で作成可能。

Wrapの動作

Wrapは外側から入力値分のピクセル部分にガイドを作成します。
入力値20px 縦横両方の指定での出力結果です。

Wrapの動作
Wrapの動作

どうですか?これも中々便利ですよね。
0px指定だとカンパスサイズにガイドが作成されます。

選択範囲からもガイドを作成できる

選択範囲からのガイド作成
選択範囲からのガイド作成

このように選択範囲からもガイドが作成できます。
素晴らしいpluginなので是非使ってみてくださいね。

公式サイトの動画でも分りやすい説明がされているので見ておくといいかもしれません。

オープンソースで公開されていてgithubでコードなども見ることが出来ます。
pixana/griddify · GitHub

この記事が気に入ったら
『いいね』しよう!