The 6 best Photoshop tools for web designers

Speed up your web design work by letting these handy Photoshop plugins and other tools take the strain.

Photoshop is a powerful tool to have in the field of web design, especially if you have the right plugins to help you with your workflow. Here is a list of the best Photoshop plugins and tools for you to help you with creating websites.

After utilising just a few of these, you'll see just how different your Photoshop experience can be. No longer are you bound by the confines of a photo editor. These manipulations help save you time and open up font and colour possibilities that would have been hard to achieve otherwise. The sign of a pro is one who won't be controlled by the way a tool was intended to be used. Rather, they transform their tools to fit their needs. Here goes...

01. Renamy 4.0

Rename multiple layers at once

If you often need to rename a lot of layers this one will save you some time. Renamy lets you select multiple layers and rename the lot in one go - you can even find and replace for layer names. Nice. 

02. CSS Hat 2

Generate CSS automatically

CSS Hat accurately generates CSS code for the selected layer so you don't have to. It automatically measures layer sizes, detects font-family, font-weight, font-size etc, and there's a live preview so you can see immediately how the code's going to look in the browser. 

03. GuideGuide

Sort out your guides

With GuideGuide you can create Photoshop guides for web in seconds. The plugin creates the guides from the selections that you make. You also have the option of choosing template guides for your layouts. This is a really helpful plugin that saves time.

04. Web Zap

Fast mock-ups

Create website mock-ups in Photoshop super fast with this great plugin. Web Zap allows you to drag and drop website elements from and library of thousands of styles and components. It's great for building and editing fast mock-ups for clients, and costs $19 ($99 for team bundle of 10).

05. SpecKing

Generate design specs

A very essential tool to have in Photoshop, SpecKing quickly and easily creates specs of your design and annotates them. It is an important productivity tool to have as it creates measurements throughout your documents, and costs $19.

06. Subtle Patterns

Photoshop tools

Good background textures

Subtle Patterns is a great collection of beautifully applied textures and patterns, both sophisticated and contemporary. At the bottom of the page, creator Atle Mo gives you the option to download all of them as a .pat file to import right in to Photoshop. It's like he knew we'd be so lazy to have to import each one. Try using them subtly and in various combinations. I find it hard not to use them.

Contributions: Nick Hiley and Dan Rose

This is an updated and extended version of an article that previously appeared on Creative Bloq.

ABOUT THE AUTHOR

Tom May is a freelance writer and editor specialising in design and technology. He was previously associate editor at Creative Bloq and deputy editor at net magazine, the world's best-selling magazine for web designers. Over two decades in journalism he's worked for a wide range of mainstream titles including The Sun, Radio Times, NME, Heat, Company and Bella.