2021.01.15
124
7. 「GuideGuide」で面倒なガイド引きを簡単に
プラグインの「GuideGuide」を利用すると、ガイドの位置を自動計算してくれて、簡単にガイドを引くことができます。面倒な計算も必要なく、瞬時にガイドを設定できるため、とても重宝しています。
GuideGuideのインストール
GuideGuideのサイトからファイルをダウンロードして、解凍したらAdobe Extension Managerを起動してインストールします（解凍したファイルをダブルクリックしてもインストールが開始します）。
GuideGuide配布元：GuideGuide
対応バージョン（2015年09月現在）：CS5 / CS6 / CC
GuideGuideの使い方
インストールが完了したら、Photoshopを再起動してください。
「GuideGuide」は、「ウィンドウ」→「エクステンション」→「GuideGuide」で起動します。
インターフェース
- マージン上
- マージン左
- 水平カラム数
- カラムの横幅
- カラム間の左右のマージン
- マージン下
- マージン右
- 垂直カラム数
- カラムの高さ
- カラム間の上下のマージン
- 垂直中心
- 水平中心
- 実行ボタン
- ガイドのクリア
- 新規ガイドセット
グリッドのガイドも簡単に！
試しにグリッドのガイドを引いてみました。カラムを6つ、溝を20px、左右のマージンを20pxに設定し、「GG」ボタンをクリックします。
この通り、面倒なグリッドも計算なしで一発です。1回の設定で一気にガイドが引けるのが嬉しいですね。
8. CSSからカラーを抽出して一発でスウォッチ登録
CCからの機能になりますが、CSSファイルに書かれているカラーコードをそのままスウォッチカラーとして取り込めるようになりました。既存サイトのデザインを修正するときにとても重宝しています。
スウォッチへの登録の仕方
スウォッチパネルのパネルメニューをクリック。
「スウォッチの読み込み」を選択します。
あとはCSSファイルを読み込むだけでOKです。CSSに書かれているカラーコードが一括でスウォッチに登録されます。
PSDからテキストやフォント情報を抽出
コーディングをする際、テキストをPSDから取ってくることも多いと思います。テキストツールを使ってコピペするのは少し面倒ですよね。でもこのスクリプトを使うと、PSDのテキスト情報を抽出してくれるので、コーディングが楽になりますよ。
TextExportToCSVインストール
- 後述するTextExportToCSVのサイトからファイルをダウンロードして、解凍します。
- 「TextExportToCSV.jsx」というファイルがあるので、下記フォルダ内にコピーします。
Windows : C:\Program Files\Adobe\Adobe Photoshop CC\Presets\Scripts
Mac : Macintosh HD/Applications/Adobe Photoshop CC/Presets/Scripts/ - Photoshopを再起動します。
- 「ファイル」→「スクリプト」内に「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を使うデザイナーの方は、ぜひ購入を検討してみてください。
ではまた。