Photoshopを使う時に欠かせない、絶対オススメのプラグイン・機能拡張のまとめ

Photoshopはデザインに欠かせない便利なツールですが、そのまま使っているだけではもったいないです！
Photoshopでの作業がさらに捗る便利なプラグイン・機能拡張を紹介します。

ここで紹介するものは、当方の日本語環境（Win/Mac, CC 2015）で利用しています。

• よく使うドキュメントはテンプレートとして管理
• レイヤー数が多くても目的のレイヤーにすぐにアクセス
• ガイド引きの定番「GuideGuide」は大幅バージョンアップ
• ガイド引きは「QuickGuide」も欠かせない
• スクリーントーンや集中線を生成する「Comic Kit」
• 磨りガラスのようなエフェクトを与える「Blur Like Jony」
• カラー・テキスト・フォントサイズなどに変数が使える「Ditto」
• ガイドライン作成に欠かせない「Ink」も大幅バージョンアップ
• 複数の要素を変形させる時に位置はそのままで
• レイヤーパネルでの作業をいろいろ便利に
• ビットマップのオブジェクトをベクターに変換「Pixel2Vector 2」
• PSD上に、HTMLとCSSのコードでエレメントを作成できる
• CC2015対応の黄金比ツール

プラグインを利用するには、ダウンロードした.zxpファイルをダブルクリックし、Extension Managerからインストールしてください。
※インストール方法が異なるものは、別途記しています。

よく使うドキュメントはテンプレートとして管理

Photoshopで作業をはじめる時、よく使うドキュメントがあると思います。サイズや解像度の設定であれば、Photoshopの標準機能でテンプレートを管理できますが、この「Templay」はPSDファイルのあらゆる状態からテンプレートを作成できます。

Templay（無料）
対応: Photoshop CC2014+

左は登録したテンプレートの一覧で、右は各テンプレートをクリックした状態で、「Create」でPSDファイルが作成されます。テンプレートの登録は「+」ボタンで、既存のPSDや現在開いているPSDから作成できます。

インストール方法

ダウンロードしたファイルを解凍し、Photoshopの「ファイル::スクリプト::参照」から「Installer.jsx」を選択します。インストール後は「エクステンション」から利用できます。

レイヤー数が多くても目的のレイヤーにすぐにアクセス

レイヤー数が多くなると、目的のレイヤーを探すのが大変です。レイヤーをブックマークのように登録できる「LayerAccess」が便利です。

LayerAccess（無料）
対応: Photoshop CC, CC2014, CC2015

LayerAccessはレイヤーをパネルに登録し、そのパネルからすぐに目的のレイヤーにアクセスできる機能拡張です。機能は非常にシンプルですが、それがいいですね。
最大登録数は、256個です。

ガイド引きの定番「GuideGuide」は大幅バージョンアップ

GuideGuideは当ブログで紹介したことがあり、使用している人もいると思いますが、そのGuideGuideが大きくパワーアップしました。基本的な操作性は変わらずに、さらに使いやすく高性能なガイドが簡単に引くことができるようになっています。

GuideGuide 4.x（有料・無料デモ有り）
対応: Photoshop CC

ドキュメント全体・アートボード・選択範囲を対象に、水平・垂直の中央、カラム分割、溝指定など、ぱっぱっとガイドが簡単に引けます。一度設定したガイドはセットとして保存しておくことも可能です。
上記ページではオンラインデモがあるので、使用感を確かめてみてください！

GuideGuideは4.xにアップデートされ、有料（$10）になりましたが、無料のデモ版も利用できます。
僕はCreative Marketのセール中に購入しましたが、MightyDealsで1/31迄$5のセールをしています。しかも5人まで利用できるライセンスなので、かなりお得だと思います。

ガイド引きは「QuickGuide」も欠かせない

「GuideGuide」にはない便利機能が備わっている「QuickGuide」も欠かせません。

QuickGuide（無料）
対応: Photoshop CC2015

オブジェクトや選択範囲を元に、上・下・左・右を組み合わせた全9パターンと天地・左右、天地左右の中央にガイドを1クリックで引けます。ほかにもガイド関係の便利機能が満載です。

• オブジェクトや選択範囲を元に、上・下・左・右を組み合わせた全9パターンのガイドを1クリックで引ける
• 天地・左右、天地左右の中央にも1クリックでガイドが引ける
• ガイドをコピーし、別ファイルへガイドをペースト
• ガイドのロック、消去、可視不可視

スクリーントーンや集中線を生成する「Comic Kit」

マンガで使われるスクリーントーンや集中線・スピード線を豊富なパラメータでカスタマイズして生成できます。

Comic Kit（無料）
対応: Photoshop CC2015

Comic Kitの使い方は、ドキュメントを開いた状態で、Photoshopの「編集::塗りつぶし」から「内容: パターン」「スクリプトをチェック」し、プルダウンから「Screen_Pattern_ex」「Speed_Lines_ex」を選択し、「OK」をクリックします。

「Comic Kit」の起動

インストール方法

「Comic Kit」から、Creative Cloud経由でインストールします。同期を「オン」にしておく必要があります。

Creative Cloudの設定

磨りガラスのようなエフェクトを与える「Blur Like Jony」

iOSで見かける磨りガラスのようなエフェクトを簡単に与えることができます。

Blur Like Jony（無料）
対応: Photoshop CC2015 for OS X

「Blur Like Jony」はインストールするとフィルターから利用でき、Dark, Light, Extra Lightの3種類のブラーが用意されており、手軽に美しいエフェクトを利用できます。

カラー・テキスト・フォントサイズなどに変数が使える「Ditto」

Photoshopで変数が使えたら便利なのに、と思ってた人に朗報です。

Ditto（無料）
対応: Photoshop CC2015

Photoshopのレイヤー上のカラー・テキスト・フォントサイズ・フォントカラー・ラインハイト・可視・不可視・配置（x, y）に変数を利用することができます。キャプチャはテキストと塗りを変数で管理しているとこです。

インストール方法

ダウンロードしたファイルを解凍し、Photoshopの「ファイル::スクリプト::参照」から「Installer.jsx」を選択します。インストール後は「エクステンション」から利用できます。

ガイドライン作成に欠かせない「Ink」も大幅バージョンアップ

ガイドライン作成に欠かせない「Ink」も去年、大幅にバージョンアップしました。

Ink（無料）
対応: Photoshop CS6, CC, CC2015

テキストやエレメントなど、さまざまなオブジェクトのサイズ、形、カラー、エフェクト、フォントの種類・サイズなどの情報を1クリックで書き出します。書き出された情報は別レイヤーでフォルダにまとめられています。

インストール方法や基本的な使い方は、下記ページを参考にしてください。

• Webサイトのガイドライン作成に欠かせないPhotoshopの機能拡張が嬉しいバージョンアップ！アートボードにも対応 -Ink

ガイドライン系のプラグインは、下記も便利です。

• Size Marks（無料）

  エレメントのサイズ、マージンのサイズを書き出します。

• Markly（有料）

  このツールはSketchにも対応しており、サイズ変更時の値変更にも対応しており、かなり高機能です。

複数の要素を変形させる時に位置はそのままで

複数の要素を拡大・縮小させる時に、位置も拡大・縮小されてしまい、困ったことはありませんか？

Tranform Each（無料）
対応: Photoshop CC2014, CC2015

「Tranform Each」は変形させる際に、その拡大・縮小、回転、変形させる時の位置を設定できます。

インストール方法

ダウンロードした「.jsx」ファイルを「Adobe Photoshop CC 2015/Presets/Scripts」内に移動すると、Photoshopの「ファイル::スクリプト」から起動できます。
キーボードショートカットを割り当てておくと便利です。

レイヤーパネルでの作業をいろいろ便利に

レイヤーパネルでの煩わしい操作をいろいろと便利にします。

Layer Control 2（無料）
対応: Photoshop CC, CC2014

複数のレイヤーの名前の先頭や末尾に文字を加えたり、置換したり、全てのレイヤーのエフェクトをフラットにしたり、空のレイヤーを1クリックで全て削除したり、スマートオブジェクトを一括でラスタライズしたりなど、レイヤーパネルの操作のかゆいところに手が届く機能拡張です。

ビットマップのオブジェクトをベクターに変換「Pixel2Vector 2」

「Pixel2Vector 2」も去年バージョンアップし、ピクセルのレイヤー、レイヤーグループ、スマートオブジェクトをベクターに変換します。

Pixel2Vector 2（無料）
対応: Photoshop CS5, CS6, CC2014, CC2015

バージョンがアップしても、古いPhotoshopに対応しているとはさすがです。
もちろん機能もアップ！ 使用感としてはより精度がアップし、滑らかなベクターに変換されます。

インストール方法

ダウンロードしたファイルを解凍し、Photoshopの「ファイル::スクリプト::参照」から「pixel2vector-2-installer.jsx」を選択します。インストール後は「エクステンション」から利用できます。

PSD上に、HTMLとCSSのコードでエレメントを作成できる

PSDがエディタになって、デザインができるだけでなく、外部スタイルシートやiframeやWebフォントなども読み込めます。

HTML Block（無料）
対応: Photoshop CC2015 for OS X

Webkitエンジンを利用して、HTMLとCSSのコードでエレメントを作成できるちょっと変わったプラグインで、左パネルがエディタに見えるかもしれませんが、Photoshop上でのHTML Blockです。

コードで作成した要素はOS Xのネイティブな要素で表示され、サイズ変更可能な要素は自動的に再レンダリングされます。外部スタイルシートに対応しているので、自分で作成したものを適用したり、BootstrapなどのCDNのCSSファイルを適用することもできます。

CC2015対応の黄金比ツール

以前使っていた黄金比のツールがCC2015で利用できなくて、困ってませんか？

Golden Ratio（無料）
対応: 不明（CC2015で利用できます）

Webページのレイアウト、写真やイラストの構図に黄金比のパネルを重ねて確認できます。黄金比のパネルはスマートオブジェクトなので、比率を維持したままサイズを変更できます。

インストール方法

下記ページの「GoldenRatio.jsxbin」のURLをコピペし、アクセスします。
※「Golden Ratio」のボタンではないので、注意。

Golden Ratio

表示されたコードを保存し、「GoldenRatio.jsx」にリネームします。あとは、Photoshopのアプリケーションフォルダ内の「Presets\Scripts」内にファイルを移動します。これでPhotoshopの「ファイル::スクリプト」から利用できます。