
It also has many features you find in code editors such as syntax highlighting. 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. That way, you can just copy and paste it instead figuring out how to implement the graphics on site. CSS Hat 2ĬSS Hat automatically translates layer styles into CSS3. 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.

This plugin is a collection of seven scripts that make some of the more annoying aspects of Photoshop easier. Just download and install for free and you are good to go. Thankfully, this plugin makes that easy as pie. For that reason, it only makes sense to include in Photoshop files. Font Awesome PSįont Awesome is an icon font that’s gaining in popularity and use. The latter includes web fonts, external CSS and more. That way, you are able to create web assets directly within the software and use online assets in your PSD file. Our next contender allows you to place HTML and CSS right inside Photoshop documents. 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. If you ever need to produce rounded corners, this script is for you. In addition to that, it can also deal with SCSS and SASS. The plugin supports multiple layers (including text), drop shadows, gradients, border radius and more. What’s special about it is that it’s a cloud-based service and free to use. CSS3PsĪs the name suggests, this service is able to convert Photoshop layers to CSS3. Unfortunately it’s not quite up to date but still works with older versions of Photoshop. It can deal with overlapping slices, multiple button states and several resolutions. Cut&Slice me automatically trims your images and exports them as PNG files.

Cut&Slice meĪnother plugin to directly export assets from layers. Great for producing retina-ready websites. Simply select a layer or group of layers, run the action, name your files and receive the sliced assets. 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.Īfter installation, you find the new option under Window > Actions. In first place, we have a free plugin for quickly creating assets for retina displays. Photoshop Plugins No Web Designer Should Ignoreīelow you find a list of plugins for Photoshop from different categories that can further enhance your favorite piece of software. 1 Photoshop Plugins No Web Designer Should Ignore.
