The 6 Most Useful Free Photoshop Plugins for Web Designers
Tuesday 18 November 2014, by Lewis Swift
If you’re using Photoshop to create designs for websites and web applications, or to create digital elements like icons and buttons, you could benefit from using certain plugins to speed up your workflow.
This list here will help you review some of the best free Photoshop plugins available and to choose ones that are right for you and your projects.
If you’re creating any kind of design, one of the first things you’ll need to choose is the grid system that will underpin the rest of your design decisions. Fortunately, the GuideGuide plugin is available for free to help you quickly experiment with grids when designing with Photoshop.
To learn more about using grids in your design work, you can take a look at some additional free resources on TheGridSystem.org and at articles like this one on DesignersInsights.com. Grids can be a powerful tool to bring cohesiveness to the design of the pages of your website or app while still allowing you to arrange your content in engaging and interesting ways.
This plugin allows you to quickly access any of Google’s Web Fonts to add to your design from within Photoshop. This is really useful because it means you don’t have to visit Google’s Web Fonts page in your browser to choose, select and download web fonts and then install them on your computer in order to use them in Photoshop - the process is now much quicker, which makes experimenting (a key part of design work) much easier.
Even though Google’s Web Fonts are free, there are still many popular and good-quality fonts to be found there. To help you choose fonts, you might want to check out resources like ‘Beautiful Web Type’ or this ongoing font-pairing project.
And if you want to learn more about the fonts being used on different sites while you’re browsing the web, try a browser extension or bookmarklet like WhatFont, which will show you the fonts used on a page at the click of a button.
Just as the plugin above allows you to access Google’s web fonts from directly within Photoshop, this one lets you access over 60,000 icons to experiment with in your designs without interrupting your workflow.
You’ll be able to search through the icon database and import the ones you want to include in your design with just a click or two. The icons are available in vector format, which means that they are easy to modify within Photoshop (or Illustrator) - although this does mean that you may need to take some extra steps to create SVG icons or an icon font to be ultimately used in your website or app.
SVG icons and icon fonts have the additional advantage of rendering correctly and cleanly on different devices no matter what the resolution of the screen being used to view the site is. Vector icons are fine for use in Photoshop designs, but not so flexible once the project has moved into the development stage.
If you do decide to use SVG icons or an icon font when building your website or app, check out the following additional free resources to learn more:
This plugin will help you quickly export the various elements of your finished design (such as buttons, icons and logos) as individual image files ready for use in the website’s development phase.
You can export these images in multiple sizes at once so that you have various versions available to suit different screen resolutions. To learn more about the different image versions that you need to include when building a website to stop its images from looking blurry on high-res screens, you could start with this article about double-size images and media queries.
Additionally, the links in the section above about SVG images might be helpful as they are always crisp on any screen due to the way they are rendered.
If you want to use the CutAndSlice plugin, you’ll need to follow certain layer naming conventions and it will export the graphics in PNG format. This plugin may not be suitable for every workflow, therefore, so do also have a look at articles like this one that covers some alternative exporting workflow options.
Described by its creator as the ‘ultimate diptych, triptych & ntych automation tool for Photoshop’, this plugin can make it easier to create interesting image layouts (such as the one at the top of this post, or like the example below).
This plugin offers so many layout options that you could even use it to inspire your web layouts, but it’s primary purpose is to allow you to bring several images together in an appealing collection, perhaps for illustrating blogposts and/or social media sharing.
The last plugin on our list here is highly-focused on just one task: optimising PNG files when exporting images in that format from your Photoshop designs.
It gives you additional options when exporting PNGs, such as variable compression (to get smaller files if you need to, or to save a higher-quality file if the larger filesize is not a problem) and alpha channel control (for choosing how to handle transparency).
The developers of this plugin also offer the J2K plugin, which offers similarly-advanced features for optimising your JPG image exports.
If you’re already using one of these plugins, or if you know about another free plugin that helps you design for the web in Photoshop, let us know in the comments. Are there any plugins that don’t exist yet that you think would speed up your workflow even more?