Top 21 Photoshop Plugins and Extensions for Designers and Developers

Top 21 Photoshop Plugins and Extensions for Designers and Developers
Posted on 5/05/14 in

The further you get into using Photoshop, the more you begin to wonder how you can save some time and speed up your workflow.

Photoshop has a ton of built in tools, but there are plenty of plugins and extensions, both paid and free, that will make your life as a designer or developer easier.

Here is a list of the best Photoshop plugins and extensions for designers and developers, along with a short description of what they each do. If you have some favorites of your own, leave them in the comments and we'll check them out.


1. SpecKing

Top 21 Photoshop Plugins and Extensions for Designers and Developers

SpecKing is a VERY popular plugin for developers. That's because it's arguably the best way to spec your designs.

You can easily add measurements in one click for size, margins, and even font properties. It works not only with PSD files, but flat images as well.

There's also some video demonstrations and tutorials on the product page.

Download SpecKing Here


2. GuideGuide

Top 21 Photoshop Plugins and Extensions for Designers and Developers

GuideGuide makes the built in Photoshop guide tools look foolish.

This extension allows you to make pixel accurate columns, rows, midpoints, and baselines based on your document or selection with the click of a button. No more dragging and snapping from the rulers.

The best part is that it's free.

Download GuideGuide Here


3. TinyPNG

Top 21 Photoshop Plugins and Extensions for Designers and Developers

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files with any visible loss in quality. It's available as a free online tool, or as a paid Photoshop plugin.

I use TinyPNG EVERY time I save PNG files for the web. It can reduce the file size by 70-80%, which is huge when it comes to server bandwidth.

Download TinyPNG Here


4. CSS3Ps

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Photoshop layer styles are a great way to style text and buttons for the web. Most of the included effects can be reproduced using nothing but modern CSS, but coding things by hand isn't nearly as easy or fun.

CSS3Ps lets you automatically converts layer styles, plus a few extras, into CSS code. Design in Photoshop and deploy to the web, simply by copying and pasting the code.

You can use CSS3Ps as a cloud-based service, or free download.

Download CSS3Ps Here


5. TypoPainter!

Top 21 Photoshop Plugins and Extensions for Designers and Developers

TypoPainter! makes it possible to create typography-based illustrations automatically.

You can choose your source image, your tpeface, font size, and a whole lot more. It's very easy to use and creates effects that would take hours to make by hand.

Download TypoPainter! Here


6. Layrs Control

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Layrs Control adds a few handy layer editing options that should probably already be included in Photoshop.

It includes 5 different tools: Layer Name Editor, Remove Unused Effects, Flatten All Layers Effects, Delete Empty Layers, and Rasterize Smart Objects.

Some of these might sound the same as what's already included in Photoshop, but behave a little differently.

Download Layrs Control Here


7. Flaticon

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Flaticon is a completely free compilation of over 45,000 vector icons that you can use in your designs. Before this plugin was made, you would have to go online, search for an icon, and then download it to your computer.

With the plugin, you can search for an icon directly in Photoshop and you load it into your document as a vector shape. Fast, easy, helpful, and free.

Download Flaticon Here


8. Super Spray

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Super Spray lets you spray PNG objects on your canvas, using a black and white image as a mask. That way, you can define the exact areas you want your objects to display.

There's a lot of small nuances that make this plugin wonderful, so check out the details on the product page.

Download Super Spray Here


9. Save Panel

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Save Panel is a simple, but time saving plugin. It allows you to save images with preset settings, all while skipping the usual dialog boxes.

I use the same settings to save thousands of JPG files, and waiting for the Save for Web dialog to open every time wastes hours of my time every year. Save Panel changes that.

It's "pay what you want", so you can get it for free, or donate some cash to support the creator.

Download Save Panel Here


10. Renamy

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Renamy makes it easy to rename multiple layers at once. It supports all kinds of properties like prefixes and suffixes, find and replace, as well as regex renaming.

Download Renamy Here


11. Pixel Dropr

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Pixel Dropr is an extension that allows you to create your own collections of pixel elements and instantly deploy them within any Photoshop document.

If I had to describe it in simple terms, I would say that it is a browser that lets you save and load collections of Smart Objects without having to open other PSD files.

It's a simple idea, but well executed and very handy.

Download Pixel Dropr Here


12. PNG Express

Top 21 Photoshop Plugins and Extensions for Designers and Developers

This plugin provides a ton of useful features for designers and developers. You can slice and export individual layers with a single click, automatically create iOS, Retina, and Android sizes at once, and label your work with design specs like font size and color, margins, and more.

If you design for any type of mobile device, or have to pass your work off to a developer at some point, this plugin is a must have.

Download PNG Express Here


13. DevRocket

Top 21 Photoshop Plugins and Extensions for Designers and Developers

DevRocket is a great tool for developing iOS software. It includes templates and tools to layout, preview, and mockup iOS apps for any Apple device.

Visit the product page to see a video demonstration.

Download DevRocket Here


14. WebZap

Top 21 Photoshop Plugins and Extensions for Designers and Developers

WebZap is an unbeatable mock up and wire framing tool for designing websites. It helps streamline the process of going from Photoshop design to working website.

It's hard to explain in words just how useful this plugin can be, so visit the product page for a video demonstration.

Download WebZap Here


15. CSS Hat

Top 21 Photoshop Plugins and Extensions for Designers and Developers

CSS Hat is another great option for turning Photoshop layer styles into CSS code. It includes advanced features like preprocessors (LESS, SCSS, and SASS), as well as syntax highlighting.

It's the perfect companion for more tech saavy designers.

Download CSS Hat Here


16. PNG Hat

Top 21 Photoshop Plugins and Extensions for Designers and Developers

PNG Hat is the ultimate tool for slicing and exporting layers in both PNG and JPG format.

You can export files at multiple resolutions for multiple platforms, all with transparency and built in image optimization to shrink PNG files without losing any quality.

Download PNG Hat Here


17. Social Kit

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Social Kit is a free plugin that will automatically generate up-to-date templates for Facebook, Google, Twitter, and YouTube profiles.

There's no faster way to create new social media profiles, and certainly nothing cheaper.

Download Social Kit Here


18. Subtle Patterns

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Subtle Patterns is the standard when it comes to seamless patterns. Instead of having to visit the website, find the pattern you want, and download it to your computer, this plugin makes all that possible directly inside of Photoshop.

This plugin is well worth the small price tag, not only for the time it saves you, but for the quality of the resources you get.

Download Subtle Patterns Plugin Here


19. Pixel 2 Vector Converter

Top 21 Photoshop Plugins and Extensions for Designers and Developers

If you've ever used Illustrator, you know how useful the Live Trace function can be. If only there was something like that for Photoshop.

Now there is, and it's free!

Download Pixel 2 Vector Converter Here


20. Velositey

Top 21 Photoshop Plugins and Extensions for Designers and Developers

Velositey is a website prototyping tool for Photoshop. It allows you to create a ton of different layouts and variations quickly and easily so you can focus on creativity instead of the tedious tasks.

Oh yeah, this one is free too.

Download Velositey Here


21. Transform Each

Top 21 Photoshop Plugins and Extensions for Designers and Developers

This script makes it possible to resize multiple objects while retaining their own centerpoints. This is helpful if you have things lined up in a grid and want to resize them without moving them from their individual positions.

Transform Each is completely free.

Download Transform Each Here


What do you think of this list? Do you have any favorite plugins or extensions that aren't listed here?

Let us know in the comments!