Advertisement

psscript-ui-top (1)

 

 

海外デザインブログCanva Design School Blogで公開された「Top Photoshop Plugins for UI Designers」より許可をもらい、日本語抄訳しています。

 

Photoshopは発売から20年以上たった今も、デザインの現場でもっともよく利用されているデザイン編集ソフトのひとつです。その中でも、デザイン用途に合わせてカスタマイズできる拡張機能、プラグインは数多く公開されています。

 

 

現在グラフィックデザインにおいて、モバイルアプリやウェブサイトなどのUIデザイン制作は、もっとも成長を見せている分野です。今回は、ウェブサイトやモバイルアプリのUIデザイン作成に効果的な、Photoshop拡張機能プラグインをまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

 

01. Browser Preview

 

Browswer Previewは、作成しているモックアップやデザイン素材を、ローカルサーバーを作成して、ブラウザ画面上にてリアルタイムで確認することができるプラグイン。Photoshop CC 2014+で利用できます。

 

01-browser-preview-big-o

 

 

背景レイヤーを変更すると、ブラウザ上でもすぐに適用されているのが分かります。

 

01-ps-browser

 

 

 

02. Markly

 

Marklyは、デザイン要素の幅や高さ、他の要素までの距離などを直感的に調べ、保存することができる、PhotoshopとSketchにも対応したプラグインです。

 

02-markly-app-plugin-photoshop

 

 

ボタンをクリックするだけで、各要素の詳細サイズなどを知ることができます。

 

02-marky-howto2

 

 

 

03. PS Export

 

PS Exportは、作成したデザインをPNGやJPEG、SVGなど自由な書き出し設定が可能なプラグインです。また、スクリーン解像度に合わせて、@1xから@4xまでボタンひとつのお手軽操作。

 

03-ps-export

 

 

 

04. Resonator

 

Resonator Pluginは、作成したデザイン要素をカテゴリー分けし、手軽にメンテナンスすることができるプラグインです。書き出したいレイヤーを選択し、再生ボタンを押すだけで、各スクリーン解像度に適したパーツが、新しいレイヤーに自動的にまとめられます。

 

04-resonator

 

 

 

05. GuideGuide

 

GuideGuideは、独自のグリッドラインを、簡単な操作パネルの設定だけで実現できる、UIデザインに人気の高いプラグインのひとつです。

 

カラム数や幅、マージンや溝なども細かく調整することができるので、プロジェクトに応じて活用できます。

 

05-guide-guide

 

 

 

06. WebZap

 

WebZapは、UIデザイナーのために作られたプラグインと言っても良く、Phtosohop CS5以降で利用することができます。

 

あらかじめウェブサイトに必要な、スライダーやボタン、入力フィールドなどのコンポーネントが揃っているので、配置したいパーツをパズル感覚で組み合わせ、モックアップを作成することができます。

 

06-webzap-plugin-photoshop

 

 

以下のビデオではすべての機能が、1分ほどの短い動画にまとめられています。

 

 

 

 

07. JetPack

 

JetPackは、アイコン作成に特化したPhotohsop拡張機能で、ラスターイメージをベクターに変換したり、複数のアイコン要素を整列させたり、細かいデザインのしやすいズーム機能が充実しています。

 

07-jetpack-photoshop-plugin

 

 

シンプルなインターフェース画面も魅力的で、作業効率をアップさせてくれるでしょう。

 

 

 

 

08. Perspective Mockups

 

Perspective Mockupsは、作成したUIデザインを立体的なレイアウトを利用して、より魅力的に見せることができる拡張機能です。ボタンひとつで向きや厚さなどを設定でき、アプリのプレゼンテーションにも効果的です。当サイトでも一度紹介しています、こちらも参考にどうぞ。

 

08-perspective-mockups-ui

 

 

 

09. Font Hero

 

Font Heroは、Photoshopのデフォルト文字パネルの使いにくさから生まれた拡張機能で、より分かりやすい書体プレビューや、お気に入りフォント毎にカテゴリ分けし、整理することもできます。

 

また、GoogleウェブフォントやAdobeのTypekitなどの、クラウドフォントにも対応しています。

 

09-layer-hero-font-panel

 

 

 

10. Divine Proportion Toolkit

 

Divine Proportion Toolkitは、デザインにおいてよく利用される比率「黄金比」を、ボタン一つで描くことができるプラグインです。どんなレイアウトサイズにも対応し、無料という点もポイントです。

 

10-divine_proportions_toolkit_01

 

 

 

11. UberSpacer

 

UberSpacerは、選択した複数のデザイン要素の幅を統一してくれる、作業効率をアップさせる拡張機能です。揃える幅は自動および手入力を選択することも可能です。

 

11-uber-space

 

 

 

12. Griddify

 

Griddifyは、カスタムグリッドを自由に作成することができる、Photoshop代替プラグインです。UIデザインだけでなく、雑誌などのプリント媒体のマージンも、柔軟に設定することができます。

 

12-griddify-plugin

 

 

 

13. Pixelator

 

Pixelatorは、正確にはプラグインではなくアクション素材で、選択した範囲をオシャレなモザイク状に仕上げてくれます。オリジナル画像に手を加えない、非破壊編集なのでいつでも再編集できます。

 

13-pixelator-pixel-photoshop-actions

 

 

 

14. TemplateGen

 

TemplateGen Scriptは、こちらも自由なグリッドを描くことができるプラグインで、特にファイルを新規作成するときに、数字を入力するだけで、手軽にグリッドを作成できます。無料プラグインという点もポイント。

 

14-templategen

 

 

 

15. Photoshop Color Wheel

 

Photoshop Color Wheelは、配色を決めるのにいつも悩んでしまう、という人にオススメしたいプラグイン機能です。色の基本原則をベースに、美しい素敵な配色をスピーディーに実現します。

 

15-color-wheel

 

 

 

16. SplashHolder

 

SplashHolderは、ライセンス表記不要で商用利用できる、フォトストックサイトUnsplashから選択しし、自由に利用することができるプラグインです。デザイン性の高いダミー用画像として活用できる、無料プラグイン。

 

16-splash-holder-api-photos

 

 

 

17. Titlemizer

 

Titlemizerは、通常のダミーテキストを進化させた拡張プラグインです。見出しタイトルや段落、リスト形式などさまざまな文字テキストを、ボタンひとつで変更することが可能です。

 

17-title-mizer-plugin

 

 

 

18. Layer Guides

 

Layer Guidesは、選択したレイヤーをより自由に、より直感的に配置することができる、無料拡張プラグインです。天地中央などデフォルトではむずかしい配置も、ボタンのみで行うことができます。

 

18-layer-guides

 

 

 

19. Subtle Patterns for PS

 

Sublte Patterns for PSは、高品質なシームレスパターンを配布しているSubtle Patternのコレクションを、Photoshop内で選択、利用できるプラグインです。

 

お好みのパターンをパレットより選ぶだけで、自由に選択範囲のテクスチャを変更することができるので、制作時間の短縮にもつながります。

 

19-subtle-pattern

 

 

 

20. Prisma

 

Prismaは、利用する配色パレットをカラースォッチとして、プロジェクトやファイルごとに保存することができる拡張機能です。デザインで頭を悩ますことの多い配色を、より効果的に選択することができます。

 

20-prisma

 

 

 

さいごに、。

 

用途に応じたPhotoshopの拡張プラグインを探すのは、なかなか大変な作業です。今回ご紹介したプラグインを利用して、作業時間の短縮や効率化を目指しましょう。

 

また、当サイトではこれまでにも、作業効率をアップするプラグインを定期的に紹介しています。こちらも参考にどうぞ。

 

PS拡張プラグインまとめ

 

参照元リンク : Top Photoshop Plugins for UI Designer – Vandelay Design