絶対ドヤ顔できる!超便利なPhotoshopプラグインベスト10

Pocket

Web制作に関わるなら、なくてはならないPhotoshop。非常に高機能で、写真の加工からグラフィックデザイン、Webデザインまでこれ1本でなんでもできるすごいヤツです。

Web制作では、デザイナーさんからもらったPSDから画像やアイコンをスライスしたり、コーディングする際に要素のスペースをとったりするときに必要になってくるんですよね。

このようなときにプラグインを使うことで便利な機能を追加し作業を効率良く進めることが可能。ここでは数多く公開されているPhotoshopプラグインの中から特にオススメなものを10本厳選して紹介します。

Photoshopプラグインベスト10

フリーで使えるプラグイン

CSS3Ps
Photoshopで作ったオブジェクトはスライスして画像として使うことが多いでしょう。ところがこのプラグインを使うとそれらのオブジェクトをCSS3で書き出してくれるもの。
Photoshopで使える便利なプラグインCSS3Ps

Cut&Slice me
このプラグインはレイヤーのスライスを便利にしてくれます。通常はPCサイズのみの書き出しをスマホ用、レティナ用に最適化して書き出してくれます。モバイル制作するなら絶対入れておきたいプラグイン。
Photoshopで使える便利なプラグインCut_Slice_me

BlendMe
BlendMeは世界中で公開されているフリーアイコンやUIkitをPhotoshop内から取得できるようになるプラグイン。わざわざブラウザで検索することなく、簡単に使えるのでものすごく便利!
Photoshopで使える便利なプラグインBlendMe

Layers
こちらはレイヤー操作を便利にしてくれるPhotoshopプラグイン。レイヤー名を簡単に変更したり、未使用の効果を削除してくれたりと面倒な作業を簡単にしてくれます。
Photoshopで使える便利なプラグインLayrs

GuideGuide
このプラグインはカラム数やカラム幅を指定するとボタン一発でガイドを作成してくれる便利なもの。Web制作ではよくガイドを使いますが、このプラグインで自動化してみましょう。
Photoshopで使える便利なプラグインGuideGuide

Render.ly
こちらは複数のスクリーンやボタンのステートを簡単に作成、管理できるプラグイン。いつもは手作業で細かくレイヤー名を分類していたり、パターンごとにファイルを作ってましたが、これ1つで作業がかなり捗ります。
Photoshopで使える便利なプラグインRender_ly

Long Shadow Generator
意外と作るのが面倒なロングシャドウですが、このプラグインを使えば1クリックで自動生成してくれるので大変便利。
Photoshopで使える便利なプラグインLong_Shadow_Generator

Web Font Plug-in
Googlefontを簡単に取り込むことができるプラグイン。webサイトでGoogleフォントを使う予定ならこちらのプラグインがおすすめ。
Photoshopで使える便利なプラグインWebFontPlug-in

有料だけど便利すぎるプラグイン

Specctr
オブジェクトの幅や高さ、オブジェクト間のスペースなどを自動的に計算して表示してくれるプラグイン。Webサイトを作る上で各要素のスペースは重要ですが、これなら簡単に取得可能です。
Photoshopで使える便利なプラグインSpecctr

WebZap
Webサイトのレイアウトはもちろん、ログインフォームなどのUIもパーツを選んで少し修正するだけで簡単につくれます。これまで数時間かかってたことを数分で終わらせるような感じ。価格も19$と安めです。
Photoshopで使える便利なプラグインWebZap