Top Photoshop Plugins for UI Designers

Adobe Photoshop is still the premiere editing suite for most graphic designers. It’s been around for over 20 years and has a massive library of Photoshop plugins for all types of creative work.

But of all the graphic design disciplines it seems UI design is one of the fastest-growing markets. This is why I’ve collected the most significant Photoshop plugins as they pertain to interface designers for web & mobile apps. You’ll find 20 recommendations of both free and premium plugins to dramatically improve your typical Photoshop UI design workflow.

Also if you’re a Sketch user then take a look at our list of Sketch plugins made specifically for UI designers.

1. Browser Preview

browser preview plugin

Web designers will truly appreciate the value of Browser Preview for mockup design. This plugin can pull any mockup and display a sample preview in your browser window.

Note that this doesn’t just run a simple copy on disk. It actually creates a local server to run the image through and display updates live via Photoshop. This only runs in Photoshop CC 2014 or newer so unfortunately CS6 and below won’t be able to use this incredible plugin.

2. Markly

markly app plugin

Measuring and coordinating a layout design is tough. But Markly can save you time with its enhanced features made to run in both Sketch and Photoshop.

With Markly you can build dynamic specs which display the distance between elements or text blocks on the page. You’ll be able to rearrange items based on pre-defined specifications which can make it easier to achieve symmetry(or asymmetry).

If you’re curious to learn more take a peek at the Markly video on YouTube.

3. PS Export Panel

photoshop export panel

So many people have worked to refine the export process because it’s always such a hassle. But with PS Export Panel it’s much easier to slice objects and define custom output formats including PNG, JPEG, and even SVG.

Another feature of PS Export is the ability to define retina sizes. You can set graphics to export at sizes ranging from @1x to @4x for various screen densities. Mobile app designers will really appreciate this feature since it hasn’t been found in Photoshop up until this plugin.

4. Resonator

photoshop resonator

The Resonator plugin is made for Photoshop CC users who want to categorize and maintain their elements. You’ll be able to make collections of different elements from the mockup based on their relationship(ie. header, CTA box, etc).

These collections can also be exported through Resonator which allows all graphics to be grouped together. Developers can then receive .zip files with relevant graphical elements tied together neatly.

5. GuideGuide

guideguide plugin photoshop

Most Photoshop users already know about GuideGuide, one of the best plugins available for UI designers. This makes use of Photoshop’s existing grid/guide system to automate the task of grid creation.

GuideGuide will auto-generate guides for any grid structure based on input settings. You select your own columns, gutters, and other similar grid values. Then sit back and let GuideGuide work its magic.

6. WebZap

webzap photoshop plugin

Another well-known plugin is WebZap made specifically for UI designers. WebZap is a powerful Photoshop plugin that supports all versions from CS5-CC.

It allows designers to generate layouts without constructing individual elements from scratch. WebZap comes complete with text box styles plus common page items like sliders, buttons, and input fields. The WebZap homepage includes a few demo videos that show the true power of this plugin.

7. JetPack

jetpack photoshop plugin

Interfaces aren’t just about buttons and textures, they often require individual graphics like icons. And icon designers working in Photoshop love the functionality of JetPack.

The plugin comes equipped with instant templates for re-creating icon styles, plus raster-to-vector conversion capabilities. It even helps to align icons to a grid based on the current layout at hand. Very convenient for anyone building custom icons in Photoshop.

8. Perspective Mockups

perspective mockups

The trend of perspective mockup design has become the norm for digital presentation. And now with the Perspective Mockups plugin it’s even easier.

Photoshop CC users can run this plugin to dynamically export mockups in perspective. These can be used as presentation assets to showcase how an interface might look on a real device. Certainly not necessary for day-to-day design work, but quite useful as a visual enhancement tool.

9. Font Hero

font hero plugin

Let’s face it: the Photoshop Character panel is far from perfect. This is why Font Hero was created and has since drawn an incredible amount of attention from Photoshop users.

Font Hero is an enhanced way to browse through fonts and preview letter styles. Font Hero displays preview text for each font and even has categories to organize your favorites.

10. Divine Proportions Toolkit

divine proportions toolkit

The golden ratio is a big part of design and art. This ratio can be applied to every type of interface to follow common design trends & patterns.

However it can be difficult to build this ratio by hand. Thus the Divine Proportions Toolkit was made and released for free on GitHub.

Photoshop CS5 & CS6 users have access to this free plugin which auto-generates divine proportions for any layout size. It can be used for web and mobile, or even abstract interfaces like game design.

11. UberSpacer

uberspacer plugin

UberSpacer is a very affordable plugin for Photoshop CC that creates natural space between selected elements. You can define space based on custom inputs and the plugin only runs based on selected layers or layer groups.

12. Gridify

griddify plugin

Griddify is the perfect alternative plugin for managing custom grids dynamically in Photoshop.

It’s a super small plugin with a tiny palette of features. You can define grids in multiple directions & styles which makes it great for digital interfaces and print design. Visit the Griddify homepage to check out the live preview video on how it works.

13. Pixelator

pixelator plugin

Pixelator isn’t exactly a plugin but instead a set of actions that can be run on a layer in Photoshop. Pixelator will auto-pixelate a photo or design based on custom settings. The actions run dynamically and they’re non-destructive so it’s very simple to revert back whenever you choose.

14. TemplateGen

templategen beta photoshop

The TemplateGen script for Photoshop is another grid-based plugin for customizing new documents. When making a new file in Photoshop you simply append numbers to the end of the file to auto-craft guides and rulers.

Not all users will want to go with TemplateGen over similar options. However it is 100% free which is a bit more enticing.

15. Photoshop Color Wheel

photoshop ps color wheel

The Layer Hero team has built many custom plugins and one of my favorites is Photoshop Color Wheel. It’s only made to run with CC but it’s an excellent tool for everything from UI design to icons and vector artwork. If you prefer to visualize your color choices then this is a fantastic investment for your Photoshop workflow.

16. SplasHolder

splasholder plugin

Free stock photo sites have become much more popular with a rise of creative commons licensing. But instead of using your web browser for photos, why not just rely on a plugin like SplasHolder? It’s completely free and pulls all resources directly from Unsplash.

17. Titlemizer

titlemizer

When Lorem Ipsum just isn’t enough there’s Titlemizer. This plugin will auto-generate web copy for everything from titles, paragraphs, testimonials, lists, and anything else you might need.

Check out screenshots and further details on Creative Market to see how it works.

18. Layer Guides

ps layer guides extension

Layer Guides is a fun, free, and aptly named plugin for Photoshop users. It creates a little palette with buttons to generate grid guides around a document, or placed 50% vertical/horizontal.

You can download Layer Guides completely free from GitHub to give it a shot. There’s no specific info regarding which versions are supported but it’s safe to assume CC users will be OK.

19. Subtle Patterns for PS

photoshop subtle patterns

All of the free patterns found on Subtle Patterns are phenomenal. They tile perfectly and offer an incredible resource for designers.

Now Subtle Patterns has a custom Photoshop plugin for users who want access to all patterns without moving to the browser. With this plugin you can save favorites, build collections, and even apply auto-repeating patterns to any layout.

20. Prisma

prisma plugin

Prisma is perhaps the best color plugin for UI designers. It allows you to save global color swatches to be applied over numerous mockup designs.

By saving a Prisma color scheme you can also update colors with one panel. Connect elements, text, and backgrounds into the color scheme to auto-update element colors in unison.

Closing

Custom Photoshop plugins add functionality into the software couldn’t be found elsewhere. If you’re a UI designer looking to expand Photoshop’s capabilities then I hope this list can offer something of value to improve your daily creative routine.

Also check out these similar posts for more Photoshop resources:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.