PhotoshopでWebデザインを効率化するための便利な使い方

7. 「GuideGuide」で面倒なガイド引きを簡単に

プラグインの「GuideGuide」を利用すると、ガイドの位置を自動計算してくれて、簡単にガイドを引くことができます。面倒な計算も必要なく、瞬時にガイドを設定できるため、とても重宝しています。

GuideGuideのインストール

GuideGuideのサイトからファイルをダウンロードして、解凍したらAdobe Extension Managerを起動してインストールします（解凍したファイルをダブルクリックしてもインストールが開始します）。

GuideGuide配布元：GuideGuide

http://www.guideguide.me/

対応バージョン（2015年09月現在）：CS5 / CS6 / CC

GuideGuideの使い方

インストールが完了したら、Photoshopを再起動してください。
「GuideGuide」は、「ウィンドウ」→「エクステンション」→「GuideGuide」で起動します。

インターフェース

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

グリッドのガイドも簡単に！

試しにグリッドのガイドを引いてみました。カラムを6つ、溝を20px、左右のマージンを20pxに設定し、「GG」ボタンをクリックします。

この通り、面倒なグリッドも計算なしで一発です。1回の設定で一気にガイドが引けるのが嬉しいですね。

8. CSSからカラーを抽出して一発でスウォッチ登録

CCからの機能になりますが、CSSファイルに書かれているカラーコードをそのままスウォッチカラーとして取り込めるようになりました。既存サイトのデザインを修正するときにとても重宝しています。

スウォッチへの登録の仕方

スウォッチパネルのパネルメニューをクリック。

「スウォッチの読み込み」を選択します。

あとはCSSファイルを読み込むだけでOKです。CSSに書かれているカラーコードが一括でスウォッチに登録されます。

PSDからテキストやフォント情報を抽出

コーディングをする際、テキストをPSDから取ってくることも多いと思います。テキストツールを使ってコピペするのは少し面倒ですよね。でもこのスクリプトを使うと、PSDのテキスト情報を抽出してくれるので、コーディングが楽になりますよ。

TextExportToCSVインストール

1. 後述するTextExportToCSVのサイトからファイルをダウンロードして、解凍します。
2. 「TextExportToCSV.jsx」というファイルがあるので、下記フォルダ内にコピーします。
   Windows : C:\Program Files\Adobe\Adobe Photoshop CC\Presets\Scripts
   Mac : Macintosh HD/Applications/Adobe Photoshop CC/Presets/Scripts/
3. Photoshopを再起動します。
4. 「ファイル」→「スクリプト」内に「TextExportToCSV」と表示されていればインストール成功です。

TextExportToCSV配布元：TextExportToCSV

http://blog.fenrir-inc.com/jp/2013/05/psd_text_export.html

使い方

試しに下記のテキストデータを抽出してみましょう。

「ファイル」→「スクリプト」→「TextExportToCSV」を選択。任意の名前を付けて、CSVにテキストデータを書き出します。

こんな感じに抽出されました。
テキストのみでなく、「フォント名」「サイズ」「カラーコード（16進数/RGB）」などのテキスト情報まででてくるのでとても便利です。

おまけ・とても大事な初期設定について

今更ですが、あなたのPhotoshopは、初期設定のままないがしろになっていませんか？

Photoshopに限らずですが、初期設定は非常に大事です。自分にあった設定をすることで使いやすさが格段にアップします。初期設定のまま使っている方は、今すぐにでも設定しましょう。

単位は「pixel」に

「編集」→「環境設定」→「単位・定規」を選択して環境設定ダイアログを開きます。

「定規」「文字」を「pixel」に、「プリント解像度」「スクリーン解像度」を「pixel/inch」に設定し、OKをクリック。

カラーを設定

「編集」→「カラー設定」を選択します。

作業スペースの「RPG」は使用中のモニターに、「グレー」はWindows初期値の「Gray Gamma」を選択します。
プロファイルの不一致は「開くときに確認」にチェックを入れます。

作業用グリッドの設定

「編集」→「環境設定」→「一般」を選択して環境設定ダイアログを開きます。

オプションの「ベクトルツールと変形をピクセルグリッドにスナップ」にチェックを入れます。

左のメニューから「ガイドグリッド」を選択し、「グリッド線」を「100」「pixel」に、分割数を「20」に設定します。こうすることで、5px（100÷20px）ずつスナップするようになります。

使いたいときは、「表示」→「表示・非表示」→「グリッド」にチェックを入れると、シェイプがグリッドにスナップします。

レイヤーを設定

「レイヤー」パネルから「パネルオプション」を選択します。

レイヤーのサムネイルを表示していると、その分RAMが消費されるため、サムネイルは「なし」か「一番小さいサイズ」に設定。
「コピーしたレイヤーとグループに「コピー」を追加」のチェックを外します。

動作を軽快にするために

WEBサイトによっては膨大なレイヤー数になることも少なくありません。

「編集」→ 「環境設定」→ 「パフォーマンス」で、メモリの使用容量を調整し、ヒストリー&キャッシュの値はできるだけ小さくしましょう。

メモリはPhotoshopメインで作業する場合は70～90%、他のソフトもいくつか立ち上げている場合は50%くらいに割り当てます。
※パフォーマンスが落ちるので、「推奨範囲」以上には設定しないでください。

対象ドキュメントは「小さくて複雑」に、「ヒストリー数」は最小限の値に、「キャッシュタイルサイズ」は「128K」に設定します。
レイヤーの数が少なく高精細の画像の場合はキャッシュレベルを上げ、小さい画像やレイヤーが多い場合はキャッシュレベルを1、2まで下げます。

さいごに

いかがでしたでしょうか？　
今回の記事で、忙しいデザイナーさんのお仕事が、ほんの少しでも楽になれば幸いです。

ちなみに、参考文献として、こちらの書籍「神速Photoshop [Webデザイン編]」を利用しました。

現場で使える80本超のテクニックが収録されています。Photoshopを使うデザイナーの方は、ぜひ購入を検討してみてください。

ではまた。