Photoshopでの作業がはかどる便利なプラグイン・機能拡張のまとめ
Post on:2014年5月22日
sponsors
Illustratorでウェブデザインをおこなう人が増えてきましたが、やはりPhotoshopをベースにしているデザイナーさんが多いと思います。そんなPhotoshopを更に便利にパワーアップするプラグイン・機能拡張を紹介します。
ここで紹介するものは、当方の日本語環境（Win/Mac, CS6/CC）で利用しています。
- 面倒なガイド引きをパワーアップする強力な味方
- 等間隔ではないガイド引きを簡単に設定できる
- 選択範囲やオブジェクトを元にガイドが引ける
- さまざまなオブジェクトのカラーを一元管理できる
- 要素のサイズやエフェクトやフォントなどの情報を書き出す
- PNG画像をより美しく、より軽量に書き出す
- 黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線などを簡単に描く
- Subtle Patternsのテクスチャ素材をPhotoshopから利用できる
- flat iconのアイコン素材をPhotoshopから利用できる
- ビットマップのオブジェクトをベクターに変換
- レイヤーパネルでの作業をいろいろ便利に
- ウェブページのプロトタイプをちゃちゃっと作る
プラグインを利用するには、ダウンロードした.zxpファイルをダブルクリックし、Extension Managerからインストールしてください。
面倒なガイド引きをパワーアップする強力な味方
GuideGuideは当ブログで紹介したことがあり、使用している人もいると思いますが、そのGuideGuideが大きくパワーアップしました。基本的な操作性は変わらずに、さらに使いやすく高性能なガイドが簡単に引くことができるようになっています。
GuideGuide 3.0 (無料）
対応：CS5, 5.5, 6, CC
右側の黒いパネルがGuideGuideの操作パネルで、水平・垂直の中央、カラム分割、溝指定など、ぱっぱっとガイドが簡単に引けます。一度設定したガイドはセットとして保存しておくことも可能です。
上記ページではオンラインデモがあるので、使用感を確かめてみてください！
インストール方法や基本的な使い方は前のと同じなので、下記ページを参考にしてください。
等間隔ではないガイド引きを簡単に設定できる
GuideGuideは基本的には等間隔のガイドが引けますが、このGriddifyは等間隔だけでなく、不等間隔のガイドも引くことができます。
Griddify (無料)
対応：CC (CS5, 6対応予定)
キャプチャにある「80 10 10」は80px, 10px, 10pxの間隔でガイドを引く設定です。ガイドの引き方は、カラムの幅ベース、分割数ベース、囲いができます。
このGriddifyとGuideGuideをPhotoshopで一つのパネルでタブで切り替えるようにしておくと非常に便利です。
GriddifyとGuideGuideを一枚のパネルで
選択範囲やオブジェクトを元にガイドが引ける
選択ツールで範囲を指定した時、そこに沿ってガイドを引きたいと思ったことはありませんか？
QuickGuide (無料)
対応：CC
選択範囲やオブジェクトを元に、上・下・左・右を組み合わせた全9パターンのガイドを1クリックで引くことができます。
また、同サイトのガイドをコピペできる「CopyGuide」も非常に便利です。
さまざまなオブジェクトのカラーを一元管理できる
テキストやボタンなど、さまざまなオブジェクトのカラーを簡単に一括で変更できます。
Prisma (無料)
対応：CS5, 5.5, 6, CC
ドキュメントに配置したテキストやナビゲーションやエレメントなど、さまざまなオブジェクトのカラーをグルーピングして管理することができます。
カラーをいろいろ試したい時、修正が入った時など、ばらばらの全オブジェクトにすぐ適用できます。
要素のサイズやエフェクトやフォントなどの情報を書き出す
これを入れておけば、デザインのガイドラインや指示書の作成が驚くほどはかどります。
ink (無料)
対応：CS6, CC
テキストやエレメントなど、さまざまなオブジェクトのサイズ、形、カラー、エフェクト、フォントの種類・サイズなどの情報を1クリックで書き出します。書き出された情報は別レイヤーでフォルダにまとめられています。
インストール方法や基本的な使い方は、下記ページを参考にしてください。
PNG画像をより美しく、より軽量に書き出す
これは先日、当ブログでプレゼントして好評だった機能拡張。もちろん、僕も使ってます。
PNG Hat (有料)
対応：CS5, 5.5, 6, CC
PhotoshopでのPNG, JPEGの書き出しを強力に最適化する機能拡張で、標準機能に比べ、より美しく、より軽量に書き出せ、スライスなどの作業時間も短縮することができます。お値段は$39.99と安くはありませんが、その効果はそれ以上の価値があります。
インストール方法や基本的な使い方、PNGの美軽量化の仕組みは、下記ページを参考にしてください。他の人のレビューへのリンクもあります。
黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線などを簡単に描く
レイアウトや構図に重要な黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線などのパスを簡単に描くことができます。
Divine Proportions Toolkit (無料)
対応：CS5, 5.5, 6
対応にはありませんが、CCの日本語環境でも問題無く利用できました。
使い方は簡単、パネルにあるさまざまな構図のルールを1クリックするだけです。描くラインのカラーとサイズは、ブラシツールで設定します。
インストール方法や基本的な使い方は、下記ページを参考にしてください。
Subtle Patternsのテクスチャ素材をPhotoshopから利用できる
シンプルで繊細な柄の使いやすいテクスチャ素材が揃ってる「Subtle Patterns」のテクスチャをPhotoshopから簡単に利用できます。
Subtle Patterns Plugin (有料)
対応：CS5, 5.5, 6, CC
380種類のテクスチャ素材がPhotoshopから利用でき、お気に入りをまとめて管理しておくこともできます。さまざまなテクスチャを1クリックで簡単に利用できます。
flat iconのアイコン素材をPhotoshopから利用できる
現在46,000種類以上のアイコンがダウンロードできる「flat icon」のアイコンをPhotoshopから簡単に利用できます。
flat icon plugin (無料)
対応：CS5, 5.5, 6, CC
ピクトグラムベースのシンプルなアイコンで、ウェブページ・アプリによく使うインターフェイス用のものだけでなく、スポーツ、音楽、アート、映画、学校、ファッション、食べ物など多彩なジャンルが揃っています。これらの商用利用無料のアイコンが簡単にパネルから利用できます。
ビットマップのオブジェクトをベクターに変換
ブラシなどで描いたビットマップのオブジェクトをベクターに変換します。
Pixel2Vector (無料)
対応：CS5, 5.5, 6, CC
最近のウェブデザインでは特にベクターデータを扱う機会が多くなってきていると思います。うっかりビットマップで作ってしまったオブジェクトを1クリックで、ベクターに変換します。繊細なビットマップをベクター化するのは難しいですが、アウトラインがしっかりしているものであれば問題なく変換できます。
レイヤーパネルでの作業をいろいろ便利に
レイヤーパネルでの煩わしい操作をいろいろと便利にします。
Layrs Control (無料)
対応：CS6, CC
複数のレイヤーの名前の先頭や末尾に文字を加えたり、置換したり、全てのレイヤーのエフェクトをフラットにしたり、空のレイヤーを1クリックで全て削除したり、スマートオブジェクトを一括でラスタライズしたりなど、レイヤーパネルの操作のかゆいところに手が届く機能拡張です。
インストール方法や基本的な使い方は、下記ページを参考にしてください。
ウェブページのプロトタイプをちゃちゃっと作る
プロトタイプやワイヤーフレームなどに使えるページレイアウトを数クリックでちゃちゃっと作れてしまう機能拡張です。
Velositey (無料)
対応：CS6, CC
ヘッダ、フッタ、コンテンツなど、さまざまなコンポーネントが用意されており、それらを組み合わせて、簡単にページレイアウトを作成することができます。そのままデザインのベースにも利用できてしまうくらいのクオリティです。
インストールは他の機能拡張とは異なり、ダウンロードした「velositey」フォルダをPhotoshop内「plug-ins/Panels」内に移動して、Photoshopを再起動します。
sponsors
