3

Webサイト制作に役立つPhotoshopの拡張機能・プラグイン20個


Webサイトを制作する際、画像編集は切っても切り離せない項目ですよね。
さらにボタンやアイコン、背景色、サイトそのものをデザインする上でも
Photoshopを使用する機会は多々あります。
そこで、Photoshopに拡張機能・プラグインを追加してさらにパワーアップ
しましょう。

CSS3

CSS3
http://css3ps.com/

Photoshopで描いた角丸、楕円などのシェイプやペイント色、グラデーション、
ドロップシャドウなどレイヤーやレイヤースタイルでの描画内容をCSS3で
書き出してくれるプラグイン。
CSS3プラグインパネルのロゴ部分をクリックするだけの簡単操作で規定に
設定しているブラウザに書き出されます。

 

Skeuomorphism.it

Skeuomorphism
http://skeuomorphism.it/

PSDファイルのすべてのレイヤー効果を隠すことでシンプルなフラット
デザインに変えるプラグイン。
Skeuomorphismプラグインパネルを起動し、「Work the Magic」ボタンを
クリックするとレイヤーを装飾するスタイルがすべて隠れます。
(「レイヤー」→「レイヤースタイル」→「すべての効果を表示」で元に
戻ります)

 

Long Shadow Generator for Photoshop

Long Shadow Generator
http://lab.rayps.com/lsg/

フラットデザインでよく見かける45度傾斜の長い(グラデーションなどではない)
単一色のシャドウ作成ツール。
「Long Shadow Generator」プラグインパネルを起動し、影の長さ、不透明度、
ベース色(黒/白)を設定できます。

 

SuperPNG

SuperPNG
http://www.fnordware.com/superpng/

PNG保存はファイルサイズが大きくなりがちですが、PNG保存の際の
ファイルサイズを調整できます。
プラグイン追加後、保存形式に「SuperPNG」が追加され、選択すると
ダイアログが起動し、調整できます。

 

ICOFormat

ICOFormat
http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat

Photoshopのデフォルト環境ではicoファイルを書き出すことが出来
ませんが、「ICOFormat」プラグインを追加すると保存のファイル
形式にICOが追加され、ico形式での保存が可能になります。
Webサイト用のファビコン作成などに便利です。

 

Cut&Slice Me

Cut&Slice Me
http://www.cutandslice.me/

スライスを使わずにレイヤーの書き出しが行えるプラグイン。
書き出しを行わないものは制御でき、大きさの指定、ボタンのルール
付けなどを行った状態で一気に書き出しが行えます。
PC、Android、iPhoneに合わせた解像度の画像のを一括自動書き出しも
できるのでスマホ用に別途保存する手間も省略できますね。

 

Layer Guides Photoshop Extension

Layer Guides Photoshop Extension
http://gastonfig.com/2013/05/layer-guides-extension/

簡単なボタン操作で正確なガイドが引けるプラグイン。
アクティブレイヤー周辺にボタン一つでガイドを引くことが出来ます。
「Layer Guides」パネルを表示し、6つのボタンをそれぞれクリック
すると、左・上・右・下・縦中央線・横中央線のガイドが引けます。

Layout Wraper for Photoshop

layoutwrapper
http://blog.kam88.com/en/layout-wraper-for-photoshop.html

PhotoshopでデザインしたWebページの内容をそのままSafariブラウザで
表示したように変換してくれるプラグイン。
コーディング前に実際のブラウザで見た印象を確認できますし、
デザインのプレゼンなどにも使えそうですね。

 

Interface Tools Plugin

Interface Tools Plugin
https://dribbble.com/shots/1160621-Interface-Tools-Photoshop-Plugin

ペンツールやシェイプ、フォントや移動ツールなどデザインをする際によく
使用するツールをパネル化したプラグイン。
ガイドの表示や中央揃え、PNGへの書き出しなどもボタンクリックで行う
ことができます。

INK

INK
http://ink.chrometaphore.com/

レイヤーの情報を書き出してくれるプラグイン。
「INK」パネルを表示したら、情報を表示したいレイヤーをアクティブにし
ロゴマークのボタンをクリックするだけの簡単操作でレイヤーのカラー、
サイズ、フォントの種類、ドロップシャドウやグラデーションなどの情報
が書き出されます。

Lighten / Darken Color

Lighten / Darken Color
http://blog.kam88.com/en/lighten-darken-color-script.html

カラーの明度を調整する拡張機能。
スクリプトをPhotoshopに追加すると、「ファイル」→「スクリプト」に
「[KAM]Color Lighten」と「[KAM]Color Lighten」が表示され、クリックする
ごとに描画色の色の明度が10%ずつ変更します。

Size Marks

Size Marks
https://github.com/romashamin/Size-Marks-PS

画面上のオブジェクトの大きさやオブジェクト間の距離をピクセル
表示する拡張機能。
スクリプトをPhotoshopに追加すると、「ファイル」→「スクリプト」に
「Size Marks」が表示されます。
選択範囲で囲い、「スクリプト」の「Size Marks」をクリックすると
画面上にサイズが表示されます。
(長方形選択ツールの長い辺の距離を表示)

FREE PIXEL TO VECTOR CONVERTER V.2

VECTOR CONVERTER
http://www.the-orange-box.com/

ピクセルシェイプをベクターシェイプに変換するプラグイン。
またカスタムシェイプを自由変形することもできます。
「Pixel2vector-v2」パネルを表示し、ピクセルシェイプを
ベクターシェイプにする場合は上のボタン、シェイプを自由
変形したいときは下のボタンをクリックします。
(変形はペンツールで行うことが出来ます)

Free Lorem Ipsum Generator

Free Lorem Ipsum Generator
http://www.layerhero.com/lorem-ipsum-generator/

文章を自動作成するプラグイン。
Webサイトをデザインする段階ではコンテンツが準備段階や未確定の
場合もよくあるもの。段落、文、文字の数を設定して仮表示させて
おくダミーテキストが作成できます。

LAYRS CONTROL 2

LAYRS CONTROL 2
http://madebyvadim.com/layrs/

レイヤーに関する操作を簡単にしてくれる拡張機能。
画像編集や加工を行う際、頻繁に使用するレイヤーの作業が手早く
行えると作業自体の時短になります。
(PhotoshopCC & CC 2014では7項目のversion 2が使用でき、CS6は
5項目のバージョンになります。)

Color Parser

Color Parser
http://blog.kam88.com/en/parsing-colors-from-image-in-photoshop.html

画像(選択範囲)を構成する色を抽出してスウォッチに登録する作業を
行うプラグイン。構成している色の数や抽出したい色が少なければ、
スポイトツールで十分ですが、複数の色を一気に抽出・登録する際にも
手軽に行うことが出来ます。

Transform Each2.0

Transform Each2.0
http://blog.kam88.com/en/transform-each-20.html

複数のレイヤーに対して、同じサイズや角度などの変更を行える
プラグイン。レイアウトを変更すると複数のレイヤーに同じ変形が
必要になることも多いですが、何度も同じ作業を繰り返さずに
済み、時短になります。

 

PS_BRAMUS.TextExport 1.3

PS_BRAMUS.TextExport
https://www.bram.us/2008/03/16/ps_bramustextexport-13-automatically-export-all-text-layers-from-photoshop-psd-to-a-text-file/1

PSDファイルに書かれたテキストレイヤーをテキストファイルに
書き出す拡張機能。テキストファイル(メモ帳)は「画像名.txt」
の形でマイドキュメントに保存されます。
漢字も含め日本語のテキストレイヤーでも書き出し可能です。

 

Griddify

Griddify
http://gelobi.org/griddify/

数値で間隔を設定し、異なった間隔で縦横にガイドラインが引ける
プラグイン。画像やテキストなどを配置していなくても数値で間隔を
把握できるので、Webデザインのレイアウト作成や雛形づくりなどに
重宝しそうです。

Corner Editor

https://photoshopscripts.wordpress.com/2013/02/03/corner-editor-photoshop-script/
https://photoshopscripts.wordpress.com/2013/02/03/corner-editor-photoshop-script/

シェイプで作成した四角形、多角形、角丸長方形、直線の角をアレンジ
できる拡張機能。角丸では角ごとにバラバラの数値を設定することも
できます。また、角丸以外にも3つのスタイルが用意されていて、様々な
アレンジが可能です。

まとめ

いかがでしたか?
今回ご紹介したプラグイン・拡張機能はすべて無料で利用できて
操作も簡単なものばかりです。
ぜひいろんなものを試してWebサイト制作にお役立てください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【2015年版】冬にぴったりな無料のイラスト素材50選