Webデザインにつきもの「Photoshopのガイド引き←ダルい><」を救う小さなテクニック。

Author: ウェブさえ |
2017年7月12日
カテゴリー ツール
本ページに記載の商品・サービスはプロモーションを含みます。
B!

ガイド引きを楽にするPhotoshopプラグイン

かったりぃ。

が、口癖のヒトがバイトに入ってきました。むかしの話です。

あまりに「かったりぃ」言い過ぎるので、こっちまでかったりぃ気分に。もはや職場全体の雰囲気がかったりぃに。かったりぃは伝染します。幸いなことに彼はすぐ辞めちゃいました。職場の雰囲気も元どおりに。

そんなことがあったなあ。あの人はいまもどこかで「かったりぃかったりぃ」言ってるのかなあ。と、Photoshopでガイドをチマチマ引きながらふと思い出したわけです。それにしても、

ああガイド引くの、ダルい><

ダルいもかったりぃ同様に伝染する恐れがありますが、僕は一人で働いているので大丈夫。けれど、もし他人と職場をともにするWebデザイナーさんがいたら、ぜひ今回紹介する五個のエクステンションをPhotoshopに突っ込んでおくことをおすすめします。ガイド引きがうんとラクになるテクニック。職場のかったりぃ&ダルい汚染も防げます。

ウェブさえプロフィール画像

著者情報:この記事を書いた人

ウェブさえ x facebook 株式会社ウェブさえ 著者のプロフィール

web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。

1. 複雑なガイド引きもうんとラクに! 『Griddify』

Griddify

こんなガイドも一瞬で引けます。

PhotoshopでWebデザインするとき。最初はガイドを引いてレイアウトを組むところから始めることが多いですよね。そんな地味な作業を一刻も早く終えて、クリエイティブな作業へ移りたい。そのための『Griddify』。一度使うと、もう手放せません。

上記リンク先からエクステンションファイルをダウンロード。Photoshopへインストールするとこんなパネルが追加されます。

ガイドをコントロールするパネル

このパネルに数字を入力してガイドを引きます。数字を組み合わせることによって、どんな複雑なガイドも可能に!

試しに等間隔で幅100ピクセルのガイドを引いてみます。

100を入力後ボタンをクリック

すると…

100ピクセルごとのガイドが出現!

左端から100ピクセルごとにガイドを引けました。ラクちんです。

例えば「100 10」と数字を複数入力すれば、入力した数字幅のガイドが入力した順番で引けます。

100px 10pxごとのガイドが出現!

拡大の図。入力した順番で、100ピクセル、10ピクセル幅のガイドが引かれてますね。

方向も自由

今度は方向を変えて100ピクセル、10ピクセルのガイドを引いてみました。これもクリック一発。

分割

今度は幅ではなく分割する数を指定してガイドを引いてみます。試しに8を入力。

分割

つまり8分割になります。

範囲を指定して分割

範囲を選択して、分割することもできます。

メニュー作るときとか便利

メニューボタンをデザインするときとか便利ですね。「横幅ピクセル÷ボタンの数」みたいな面倒な計算はもう不要です。

左右の余白

Webサイト用のレイアウトをするときは、マージンやパディングのような余白もあらかじめ考えておく必要があります。それも簡単。ピクセルで入力すればokです。

2. 『GuideGuide』も便利

guideguide

『GuideGuide』も『Griddify』と同じく複数のガイドを一瞬で引けます。パネルで位置、分割数、ガイド幅を指定するだけです。一度引いたガイドの設定を保存することもできます。

3. レイヤーごとにガイドを引きたいときは『Layer Guides』

レイヤーを選択後ガイドの引き方を選ぶ

上の図では、四枚の写真が別々のレイヤーで存在してます。それぞれをWeb用に書き出すには、通常一枚ずつスライスしますが、その準備としてガイドをひきます。色々とメンドクサイな。

そこで『Layer Guides』の出番です。レイヤーを選択して、ボタンをクリックするだけ。あとは勝手にガイドを引いてくれます。

ガイドを引き終わった図

その後のスライスも簡単。ガイドに沿ってピピピっと。

スライスに便利。書き出しもラク!

これも一度使うと、Webデザイナーには手放せません。いわゆるゾッコンLOVEです。

4. 選択範囲やオブジェクトごとにガイドを引きたいときは『QuickGuide』

レイヤーではなく、選択した範囲やオブジェクトごとにガイドをひきたいときはquick guideを使います。便利すぎてテンション上がります。

  • 選択範囲やオブジェクトに 1Click でガイドを追加する Extension「QuickGuide」を作成しました。 | Guchitaka(現在リンク切れ)

5. ガイドをコピーできる『CopyGuide』

Copyguide

同じレイアウトを別のプロジェクトで利用したいとき。ガイドをコピーできたら便利ですね。それを可能に。素敵!

  • Photoshopのガイドをコピペできる Extension「CopyGuide」を作成しました。 | Guchitaka(現在リンク切れ)

以上!

いままでどれだけ無駄な労力をかけていたのだ、俺は! と愕然しますよ。ぜひお試しを。

ほな、ごゆるりとー

読み終わったらシェア!

B!

ウェブさえの無料サービス

どちらでもお好きな方を。もちろん両方でも。

ダウンロード
Top
ウェブさえ
@websae2012
ウェブさえマガジン
>詳しくはこちら