36 Photoshop Plugins for Web Designers You Need to Check Out

Last Updated on January 6, 2023 by 8 Comments

Editorial Note: We may earn a commission when you visit links on our website.
36 Photoshop Plugins for Web Designers You Need to Check Out
Blog / Resources / 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

retinize it photoshop plugins

  • 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

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

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

html block photoshop plugins

  • 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

font awesome ps photoshop plugins

  • 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

layrs control

  • 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

css hat

  • 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

page layers photoshop plugins

  • 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

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

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

web zap

  • 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

screen snap photoshop plugins

  • 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

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

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

free 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

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

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

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

glifo photoshop plugins

  • 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

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

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

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

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Top Features Of Divi Dash For Busy WordPress Agencies

Top Features Of Divi Dash For Busy WordPress Agencies

Posted on October 17, 2024 in Resources

Running a WordPress agency isn’t a walk in the park. It’s a juggling act of keeping clients happy, staying on top of changes, managing your team, building killer websites, and maintaining them — all while trying to stand out in a crowded market. But what if you had a tool to help...

View Full Post
WordPress vs Medium (2024) — Where Should You Blog?

WordPress vs Medium (2024) — Where Should You Blog?

Updated on February 14, 2024 in Resources

If there is one question that goes back to the very beginning of blogging, it’s “what blogging platform should I use?” Everyone asks this question (to Google, most likely), and everyone gets bombarded with a thousand different answers. That’s primarily because there are so...

View Full Post
9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Updated on January 23, 2023 in Resources

There are lots of nonprofit organizations across the globe. Just about every one of them needs a well-designed website to tell their story and receive donations to help their causes. Divi is an excellent theme for nonprofits such as charities. Fortunately, you don’t have to start from scratch for...

View Full Post

8 Comments

  1. Thanks for sharing. Bxcel web development company is of one the best company in London, United Kingdom. We also offer fixed-price web design, as well as customized web design to meet your needs.

  2. Thanks Nick, much appreciated for the share. Real handy tools to make the design side of development easier.

  3. Lorem ipsum can be generated by PS in the current version.

    If you duplicate a layer (or layer group), select the layers or groups in the layers panel and choose Export as from the right-click menu in the layers panel, you can choose to export each ‘object’ (layer or group) as its own file. You can set each file’s settings (file type, compression etc) and scale to create proper retina images.

    I haven’t checked the entire list, but the above shows two plugins you don’t need because PS doesn’t have a certain feature.

    It’s nice to know there are plugins that can make life easier if you have to do something all the time, but often it’s just as easy to do these things by hand and save a couple of bucks for other (more useful) software.

  4. The Pixabay tool is no longer available. I purchased it ages ago and have not been able to use it.
    Click on the buy now button and it says”This offer has sold out”

  5. Really appreciate this list of plugins. Never heard of Screen Snap before but that looks a very useful addition to some of my day to day design work.

  6. Some of these I was aware of but some are new to me AWESOME post thank you

  7. Thanks Nick,

    Many we knew of many however not heard of TinyPNG.

    Just done some testing using their online tool and it is amazing!!!

    We optimize images using PS and then in WP using a Plugin and this does a pretty good job however to reduce size first using TinyPNG and ‘then’ optimize further is even better.

    Thanks for this 🙂

  8. @ Nick

    Wonderful collection!

    Thanks for it and happy to use it. 🙂

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Get Started With Divi