36 Photoshop Plugins for Web Designers You Need to Check Out

WordPress is not the only software out there offering useful extensions to their core product. Photoshop, one of the go-to tools for web designers around the world also supports this possibility. And like their WordPress counterparts, Photoshop plugins can also add all sorts of new functionality.

Since we know that many of our readers use Photoshop on a regular basis, we thought it a good idea to offer a different kind of plugin list this time. Below you’ll find the best Photoshop plugins we could find on the web.

They enhance the program with all kinds of improvements. From small scripts and shortcuts all the way to entire new modules that will improve your workflow dramatically and make working with Photoshop even easier.

Ready? Then let’s get started.

Photoshop Plugins No Web Designer Should Ignore

Below you find a list of plugins for Photoshop from different categories that can further enhance your favorite piece of software.

Retinize It

• Price: Free
• Available for: CC 2015

In first place, we have a free plugin for quickly creating assets for retina displays. Retinize It adds a new action to Photoshop that lets you export images in their original dimensions or scaled up to double and triple the size.

After installation, you find the new option under Window > Actions. Simply select a layer or group of layers, run the action, name your files and receive the sliced assets. Great for producing retina-ready websites.

Cut&Slice me

• Price: Free
• Available for: CS6

Another plugin to directly export assets from layers. Cut&Slice me automatically trims your images and exports them as PNG files. It can deal with overlapping slices, multiple button states and several resolutions. Unfortunately it’s not quite up to date but still works with older versions of Photoshop.

CSS3Ps

• Price: Free
• Available for: CS3 and later

As the name suggests, this service is able to convert Photoshop layers to CSS3. What’s special about it is that it’s a cloud-based service and free to use.

The plugin supports multiple layers (including text), drop shadows, gradients, border radius and more. In addition to that, it can also deal with SCSS and SASS.

Corner Editor

• Price: Free
• Available for: CC 2015

If you ever need to produce rounded corners, this script is for you. It enhances Photoshop’s abilities to create round corners, works with any polygonal shape, includes multiple corner styles, allows you to edit multiple layers at once and more.

HTML Block

• Price: Free
• Available for: CC 2015 (Mac OS only)

Our next contender allows you to place HTML and CSS right inside Photoshop documents. That way, you are able to create web assets directly within the software and use online assets in your PSD file. The latter includes web fonts, external CSS and more.

Font Awesome PS

• Price: Free
• Available for: CC

Font Awesome is an icon font that’s gaining in popularity and use. For that reason, it only makes sense to include in Photoshop files. Thankfully, this plugin makes that easy as pie. Just download and install for free and you are good to go.

Layrs Control 2

• Price: Free
• Available for: CC, CC 2014

This plugin is a collection of seven scripts that make some of the more annoying aspects of Photoshop easier. It includes a layer name editor, the option to remove unused effects, can automatically delete empty layers, rasterize smart objects, find similar files and more. Free to download and use as you want.

CSS Hat 2

• Price: $39.99
• Available for: CC 2014-2017

CSS Hat automatically translates layer styles into CSS3. That way, you can just copy and paste it instead figuring out how to implement the graphics on site.

The plugin can work with several layers at once, fonts and different font styles and is able to spit out LESS, SASS, Stylus and more. It also has many features you find in code editors such as syntax highlighting. CSS Hat is also available for older Photoshop versions.

Page Layers

• Price: $35
• Available for: Mac OS X only

Many plugins on this list have the goal to make it easier to turn Photoshop files into websites. However, the other way around be just as necessary. That’s what Page Layers is for.

The plugin automatically converts websites to PSD files and saves each page element as a single layer. Open any page in the embedded browser and simply save it to Photoshop. The plugin is not free but sounds like it’s worth the price.

PNG Hat

• Price: $27.99
• Available for: CS5, CS6, CC, CC 2014.1+, CC 2015

Made by the same people as CSS Hat, this plugin enhances Photoshop’s ability to export PNG files. For example, it comes with better compression and can export CSS rules. PNG Hat also comes with a generous money-back policy if you are not satisfied.

Fontself

• Price: 49€
• Available for: CC 2015, CC 2017

Next up is a plugin that lets your make your own font via drag and drop. In an age where typography is getting more and more important on the web, that’s really good to hear. Simply turn (colored) images and vectors into OpenType fonts. Control kerning, ligatures and more. Fontself is also an actively maintained plugin, so owners get new features for free.

Getty Images Photoshop Plugin

• Price: Free
• Available for: CC 2016 and above

Getty images has a huge collection of stock images and a plugin that lets you import them right into Photoshop. Search and filter thousands of high resolution images and sync your purchases with a Getty account.

PSD Cleaner

• Price: $19.99
• Available for: CC 2014.1+

Another plugin by Source that supercharges Photoshop’s layer panel. PSD Cleaner automatically scans your layer structure and shows opportunities for improvement. It will help you find unnamed layers, delete empty ones, find layers that stretch beyond the canvas and more. In short, it will keep you organized.

WebZap

• Price: $19
• Available for: CS5 and above

It might come as a surprise but Photoshop is not actually made for web design. The program started as photo-editing tool and only later added abilities to create layouts.

To make up for that, there’s WebZap. The plugin provides ready-made elements for creating web layout mock ups in no time. It is based on the 960 grid, can create formatted Lorem ipsum text, navigation, buttons and more.

Subtle Patterns

• Price: $17.99
• Available for: CC and upwards

Subtle Patterns is a library of free, tilable texture patterns. The plugin of the same name brings them to your Photoshop dashboard. That’s it.

ScreenSnap

• Price: $9.99
• Available for: CC 2014 or newer

Next on our list of Photoshop plugins is ScreenSnap. The program allows you to create screenshots from PSD files, either of the full document or from selected area. No need for cropping or saving manually, just select a folder, click one button and you are good. Great for sharing your work with others, even in retina size.

Duplllicator

• Price: Free
• Available for: CC, CC2014

Here we have an extension to quickly clone layers and groups of layers when you need several of the same object. Just pick how many copies you need and how you want them spaced apart.

Perspective Mockups

• Price: $19
• Available for: CC 2017

As you can see from the screenshot, the plugin homepage contains lots of swear words. Aside from that, this plugin makes perspective mockups of your design. That way, you can better understand how they look on a phone or tablet from the outside. The plugin has many presets but is also fully editable.

Size Marks PS

• Price: Free
• Available for: CC 2014

Size Marks allows you to add labels of an object’s size or distance between objects with the marquee tool. Each label is saved in a new layer and completely customizable. This is super helpful when adding specs for the person who will turn the PSD into a website.

Fontea

• Price: Free
• Available for: CC 2014, CC 2015

For anyone dissatisfied with Photoshop’s default offering of fonts, Fontea includes all web fonts available on Google Fonts (currently 800+). The plugin also keeps up to date with the online repository and allows you to set up collections of your favorite fonts.

Pixabay

• Price: $4.99
• Available for: CC 2015 and higher

This plugin is like the Getty image plugin mentioned earlier, however, for the Pixabay image library. It contains hundreds of thousands of free stock images that you can now add with a single click. The plugin also includes powerful search options and all images are CC0 licensed. Plus, it’s very affordable.

There are more plugins like that for other stock photo libraries like Shutterstock and Pexels.

LayerCraft

• Price: Free
• Available for: CC, CC 2014

Another plugin to export UI assets from Photoshop layers. LayerCraft has the ability to scale your images upon export, can trim transparent pixels and export in different sizes for retina display.

Lorem Ipsum Generator

• Price: Free
• Available for: CS 5/6, CC

As the name suggests, this is a plugin to create Lorem ipsum placeholder text. That way, you don’t need to copy it from external sources anymore. The generator offers customizable output, the ability to copy to your clipboard with one click and is actively maintained.

LoremPicsum

• Price: Free
• Available for: CS, CC

This one is similar to the Lorem ipsum version, however, it creates random images instead of text. Select an area, pick a cartoon and you got yourself a placeholder image. Fun gimmick: images come from popular TV shows and films like Futurama, The Simpsons, Finding Nemo and Up.

Social Kit Pro

• Price: $9.99
• Available for: CC 2015+

And another Source plugin. This one aims to improve everything social media. It contains templates for creating ads on mobile and desktop, cover photos and profile images. You can even live preview the results inside Photoshop.

Layer Guides

• Price: Free
• Available for: Unknown

Guides are an important tool within Photoshop to keep everything structured. However, they can be annoying to handle.

This plugin hopes to alleviate that. It adds new buttons to add guides on the sides of layers as well as through their horizontal and vertical center. No more need to drag, just click and you are good.

Long Shadow Generator

• Price: Free
• Available for: CS6, CC

The plugin name basically says it all. Long Shadow Generator helps you create long shadows in Photoshop. You can control shadow length and opacity, color, gradient and angles. Then just add them with one click.

TinyPNG

• Price: $50
• Available for: CS5, CS6, CC and upwards

TinyPNG is an online service I often recommend for optimizing images before uploading them to WordPress. It compresses JPG and PNG files to make them as small as possible.

The site also offers a Photoshop plugin to do the same inside the image-editing software. It lets you preview and save directly, scale, use partial selection and more. If their site is any indication, the plugin is well worth the money.

Glifo

• Price: $19
• Available for: CS5, CC

Glifo adds the option to export vector icons from Photoshop as icon web fonts. Sounds like a great addition to the Font Awesome plugin.

specKing

• Price: $19
• Available for: CS5, CS6, CC 2014 and upwards

Another plugin to add measurements and design specs to Photoshop files, however, this time as a premium version. Measure sizes, margins and fonts and automatically create specs in editable overlays. Looks super simple and comfortable to use.

Export Kit

• Price: $19.33/month
• Available for: CS6 and upward

This Photoshop plugin lets you convert PSD files to HTML, CSS, WordPress, iOS, Android and more. It also contains collaboration features. Looks very powerful, however, it comes with a monthly license and is not entirely cheap.

Photoshop Social Share Plugin

• Price: Free
• Available for: Unknown (Mac OS only)

The next item on our list adds important sharing functionality to Photoshop. It allows you to share and publish files directly from inside the program via email, social networks and other platforms. Just pick a format and you are good to go.

Transform Each

• Price: Free
• Available for: CS5, CS6, CC

Transform Each is a script that allows you to transform several objects at once without changing their position. What that means is best exemplified by the GIF below. Pick your anchor points, the transformation you want to achieve and it will get you there with one click.

ToonIt!

• Price: $129
• Available for: Photoshop CS and later

A fun one at the end. In case you ever think about creating an online graphic novel, this service will be of great help. It turns regular photos into cartoons, has many presets and mature technology. A bit on the pricey side though.

Photoshop Plugins in a Nutshell…

Photoshop is a wonderful tool for web designers. It is powerful, packed with features and constantly updated.

However, sometimes we wish it had some additional features or easier ways to accomplish tasks. That’s where Photoshop plugins come in.

As you have seen from the list above, plugins can add lots of different functionality. From shortcuts to entirely new functions.

And that’s only the ones that are useful for web design. There are many more out there, especially for image retouching. Do you have anything to add?

Do you know additional Photoshop plugins that you like and recommend? Please share in the comments section below!

Article thumbnail image by VectorsMarket / shutterstock.com