The 27 Best Free Photoshop Plugins for Web Designers

The 27 Best Free Photoshop Plugins for Web Designers

Create amazing images and designs with this selection of Photoshop plugins available. The plugins are useful, creative, time-saving and effective for designers or photographers.

Photoshop is a powerful and creative platform that capable of producing sublime images, high-quality video and also create very passable 3D renders. The tool using plugins can help to extend its capabilities and use it to its full potential. While using an add-on can help you perform difficult tasks in a more efficient manner and also enabling you to spend more time on design.

There are thousands of plugins available on the market today, but many are outdated and no longer work with updated versions of Photoshop. In this article, we’ve collected the best free Photoshop plugins for designers. You just download, install and start using right away.

We are focusing on a variety of free Photoshop plugins best suited to web and graphic design, to speed up workflow. The plugins can help with a range of functions, including layer control, icon exploration, exporting assets, guides and fonts.

1. CSS3Ps


CSS3Ps is a free cloud-based Photoshop plugin that converts your layers to CSS3, SCSS and SASS syntax in seconds. This plugin is easy to use. Just select your corresponding layers for the object and click the CSS3Ps button, then it will be redirected you to the CSS3Ps webpage where the output is generated.

The plugin features a text layers, border radius, multiple layers, stroke, evidence, size, gradient overlay, inner glow, outer glow and drop shadow. In addition, CSS3Ps also added the vendor prefixes for cross-browser compatibility. It is worth noting that in order for the plugin to convert appropriately, make sure you need to use the correct Photoshop effects. This plugin is available for Photoshop CS3 up to the latest Photoshop CC.

2. GuideGuide


GuideGuide is a simple free Photoshop plugin which makes it easy to create a grid system in your Photoshop document. GuideGuide provides pixel accurate columns, rows, midpoints, and baselines can be created based on your document or selection with the click of a button. The plugin works with Photoshop CS5, CS6 and CC.

You can use the plugin to measure exactly how wide a navigation element should be to fit evenly across the width of a site, creating baseline grids and element padding, too. You can also save your favorite grids as sets so you can use them whenever you need them.

3. Social Kit


Social Kit is a free Photoshop plugin that provides customizable templates for four of the biggest social networks like Facebook, Twitter, YouTube and Google+ along with a variety of social buttons. The plugin has fully sliced and customizable templates, and the plugin automatically updates when there’s a minor change to the social sites’ designs. The plugin works with Photoshop CS5, CS6 and CC. You can see your design changes right when you make them, as well as you can add contributors to projects to help improve it.

4. Cut&Slice Me

Cut Slice me - free-photoshop-plugin-04

Cut&Slice Me is an easy to use Photoshop extension for simplifying the process of cutting and slicing design. The plugin lets you export your assets to different devices like iPhone, Android or Desktop devices in seconds and improve your workflow by just renaming your layers. Initially, you have to organize your layer objects into folders as Cut&Slice Me checks only group names, and also you need to add the “@” symbol at the end of the layer group name you want to export.

You can cut and export files in PNG format, trimming unneeded pixels or specifying you size you require as well as exports your button states. Exported files have unsupported characters in the file name removed, with support for .hdpi, .ldpi, .mdpi and .xxdpi. While Photoshop hasn’t changed the way, it exports for the web for years, but Cut&Slice Me offers new capabilities, allowing overlapping slices, multiple button states and even exporting different resolutions of the same assets to cater for different screen sizes and devices.

5. Griddify


Griddify is a tiny Panel in Photoshop that helps you to compose custom grid systems. Griddify is a tiny, fast and small plugin/extension for Photoshop CC and CS6. The extension adds an intuitive panel to Photoshop that includes three simple, but wide-ranging, options like Griddify, Divide, and Wrap.

First option is vertical, left to right, just enter a pixel value and hit ‘Griddify’ and a guide will be added at intervals matching the value you entered. Yet you can enter too many numbers, giving you the option to create columns and gutters. Next click the orientation button and add guides horizontally to create your baseline.

Then Divide option, which is excellent for laying out responsive sites. It splits the selected area into the specified number of sections. Last, the wrap option adds guides to the edge of your selection.

6. Velositey

Velositey - free-photoshop-plugin-06

Velositey by designers Dan Ross and Kieran Black is a completely free Photoshop Plugin to help you Prototype the design of your website in seconds in Photoshop. Velositey specifically aimed at teams of designers and developers — spend more time perfecting the details and styling and less time on all that boring stuff. It comes with a pre-generated 1170 grid system and comes loaded up with standard elements to get you started quick – including five headers, six sliders, five content areas, 11 footers and eight single modules.

7. Layrs Control 2

Layrs Control 2 - free-photoshop-plugin-07

Layrs Control 2 is a free plugin that houses a collection of scripts that make the tedious job easier. The plugin has 7 main features, including a layer name editor to rename layers and folder, remove unused effects, and flatten all layer effects. It also includes delete empty layers, rasterize smart objects, find similar files/folders and convert to smart object.

8. Random User Generator

Random User Generator - free-photoshop-plugin-08

When designing, you might need some placeholder faces or random names to be included in your design. Random User Generator is a Photoshop extension that will generate a random face and name for you in one click, and then you can copy and paste onto your canvas.

9. Interface Tools

Interface Tools - free-photoshop-plugin-09

Interface Tools is a little free plugin from Elliot Jackson takes all that annoyance away. Turn snapping on and off, trim a document or “save for web” with one click. From having all the interface tools in one easy to navigate panel to adding some great shortcuts, this plugin has everything. It has some great time savers as well as having access to all necessary tools and quick shortcuts all in one place. The plugin works with Photoshop CS6 and CC.

10. BlendMe.In

BlendMeIn - free-photoshop-plugin-10 is an extension for both Photoshop and Illustrator that allows you search thousands of assets (including popular icon packs) that you can simply drag and drop into your canvas and continue work. All of the icons are vectorial and have been inserted as smart Photoshop objects and are infinitely scalable. They are provided under a Creative Commons Attribution 3.0 Unported License, so you can use them in your personal and commercial projects.

11. Flaticon

Flaticon - free-photoshop-plugin-11

Flaticon is a free plugin for designers and developers, especially web designers, will use daily. The largest database of free vector icons, it allows you to download all of its thousands of icons in SVG, PSD or PNG formats. The plugin lets you quickly find all the icons without leaving your working environment, and you can also convert icons into web fonts.

All icons are vector shapes, so you can resize and edit them without losing quality. You have instant access to more than 60,000 icons. The plugin works with Photoshop CS5, CS6, CC and CC 2014, and it’s compatible with both Windows and Mac OS X.

12. Transform Each 2.0

Transform Each 2 - free-photoshop-plugin-12

Tranform Each 2.0 is a completely free powerful plugin with a lot of features and controls. It is a handy Photoshop script that allows you to make individual transformations with a group of layers. The plugin is great to re-sizing multiple elements without having to re-position them each time. They added option to select the anchor point — point around which all transformations will be made. You can choose one of the nine positions, including top left corner, middle center, bottom right corner etc.

Several issues that existed in previous versions of Tranform Each might be fixed here, and it now works correctly with layers inside different groups, and also you can now undo all script actions in one click. The plugin is tested in Adobe Photoshop CS5, CS6, and CC.

13. LayerCraft

LayerCraft - free-photoshop-plugin-13

LayerCraft is a free Photoshop plugin to automatically export UI assets from layers to all iOS and Android sizes (@1x to @3x and mdpi to xxxhdpi). The plugin allows you to trim down transparent pixels, cut-out selected layers and duplicate as new doc. If you find it useful, its creator Ray appreciates if you buy him a coffee in return. The plugin is compatible with Photoshop CC.

14. WebFont

Web Font Plug-in  - free-photoshop-plugin-14

The Web Font Photoshop plugin lets you instantly install and use Google Web Fonts inside Photoshop. It works in combination with professional font manager Suitcase Fusion 5 and web font service WebINK. Google Font connection gives you access to more than thousand font families for use on the web. You can preview any font while you’re working on a design. For Google Fonts, you do not need to download the font, click the add to collection button for each font, and then activate it you just click the use button to generate the CSS code for your site.


Skeuomorphismit  - free-photoshop-plugin-15

With the explosion of the flat design trend, skeuomorphic websites should have been trouble while transforming their designs to be flat. But with, lets you transform your skeuomorphic PSD layout to a flat design. It is a simple Photoshop extension that allows you to remove gradients and create flat design within minutes.


renderly - free-photoshop-plugin-16 will automatically exports screens, manage assets and detailed design specs, all of them with a one click. Its technology is smart enough to export only those elements that have changed. All you need to do is use a proper prefix and the plugin will do the rest.

Create a group for each variant you must have a “+” in front of the layer name. will automatically export as many screens or variants you have. Each top level group is treated as a separate screen, so you can build your entire app or website in one PSD file. To keep your icons as vectors, simply add a prefix of “ico” and to export images, add “img” as a prefix and the image will be exported as a raster graphic.

For buttons, name a group with “btn” and create a state (e.g., add “:hover”) at the end of the name inside that group.

17. Composer

Composer - free-photoshop-plugin-17

Composer is a free plugin that allows you to update multiple layer comps in Photoshop with just one click, which means less maintenance and more designing. You can select any layers or groups to which want to apply changes and use one of the four commands to update the selected layers (Update Layer Style, Update Visibility, Update Position and Update All). Composer works with Photoshop CS5, CS6 and CC.

18. SuperPNG

SuperPNG - free-photoshop-plugin-18

If you are a regular user of the PNG format then you will know that Photoshop can sometimes struggle a bit to render PNGs quickly. SuperPNG is specially designed to fix this by offering more control over your PNG output. It has more comprehensive support for a balance between speed and file size and control over the alpha channel and meta data.

19. Breeezy

Breezy - free-photoshop-plugin-19

Breeezy is a free Photoshop plugin that adds multilayer export functionality to Photoshop. The plugin allows you to export multiple graphic elements from your PSD in one click. The plugin features an ability to save a layer’s transparency when exporting; passes layer names to files, and organizes all exported files and assets in one folder. The plugin works with Photoshop CS5 and higher on both Windows and Mac OS X.

20. Prisma

Prisma - free-photoshop-plugin-20

Prisma lets you to link all layers which share a same color preference. As a web designer, be sure to frequently change your color scheme. For example, if you switch from green to yellow, you have to change all the buttons colors, accent borders, links colors and other elements colors into yellow.

Prisma aims to fix this by offering you to link all these layers and connect them into a “context” with a specific color. Later, when you want to change the last color option, you only need to change the specified color in the “context”, and all the linked layers’ color will change immediately. This plugin is still in Beta phase and available for free. It works on Mac and Windows with Photoshop CS5 or higher.

21. Save Panel

Save Panel - free-photoshop-plugin-21

Save Panel is a Photoshop plugin that optimizes file saving, meaning you can configure the buttons to save documents with your favorite settings. The plugin comes with features, including the ability to customize the destination folder, image dimensions, file type and filename. Use Save Panel together with Dropbox to effectively share images with other people from within Photoshop. It is easy to configure and there is no limitations on how many buttons you can create and customize.

22. Font Awesome PS

FontAwesomePS -  free-photoshop-plugin-22

Font Awesome PS is a free plugin that allows you to search for a Font Awesome icons right inside Adobe Photoshop. The plugin makes to create a new layer shape which you can easily edit, especially all you need to do in order to have access to the amazing selection of free Font Awesome icons. The plugin works with Photoshop CC 14.2 and Photoshop CC 2014 on Mac and Windows.

23. LiveShare PS

LiveShare PS - free-photoshop-plugin-23

LiveShare PS is a free Photoshop plugin lets you presenting high-fidelity designs or just talking through some rough concepts with one click. You can now broadcast any Photoshop document to as many people as you want through an instant LiveShare meeting. When you want to make a change to your Photoshop document, they will instantly see your changes in the LiveShare meeting, meaning that you don’t even have to hit the save button. LiveShare PS is only compatible with the latest version of Photoshop CC 2014, on OS X.

24. Bounce

Bounce - free-photoshop-plugin-24

Bounce lets you watch the game while you design. Bounce is a free plugin that integrates and connects the Dribbble design community into the Adobe design applications you love to build with every day. The plugin makes you check out the latest popular shots, keep track of your activity feed and likes, all without leaving the design app you’re currently working in.

25. Cell

Cell - free-photoshop-plugin-25

Cell is a set of scripts they have created to manipulate multiple smart objects in a quick and easy way. The Plugin comes with features, including compress multiple selected layers to multiple smart objects, break multiple smart objects to layer groups and save smart objects directly as .png assets.

26. Adobe Color CC Panel

Adobe Color CC Panel - free-photoshop-plugin-26

Adobe Color CC Panel is a free plugin lets you create color themes in a fresh new way. Capture colors anywhere with a snap of your iPhone camera, then you can customize themes any way you choose, and use them instantly in Photoshop to enrich your designs. The plugin is compatible with Photoshop CC 2014, on Mac and Windows.

27. Long Shadow Generator 2

Long Shadow Generator 2 - free-photoshop-plugin-27

Long Shadow Generator 2 is a free Photoshop extension to create long shadow with one click. It provides five main features, including shadow length, shadow opacity, flatten or gradient shadow, black or white shadow and shadow angles.