Optimise your Photoshop workflow

Oct 21, 2013

Table of contents:

1. Setting the canvas
2. Using a grid
3. Organising your layers
4. Exporting assets
5. Saving web images
6. Conclusion

For a long time, Adobe’s Photoshop has been one of the most popular design applications for creating websites, mobile applications and just about everything in between. Whilst this is a little bit strange seeing as through it is predominately a photo editor, I think you will be pushed to find a young professional graphic designer that did not learn her craft in a cracked version of Photoshop.

These days there are also many new competitors to Photoshop in the form of vector based design applications like Sketch or responsive focused applications like Webflow.

However I think Photoshop is still by far the most used application for designing websites and web applications today.

In this tutorial I’m not going to teach you any specific Photoshop techniques as there is already an abundance of these types of guides online. Instead I’m going to walk you through my workflow of design in Photoshop and how I prepare my files.

To be honest, I think getting a good workflow down is much more important than any specific technique. The best techniques need to be discovered through usage and experimentation, and any particular style tutorial will be out of fashion as soon as I hit publish.

However, nailing a good workflow will not only make your time in Photoshop quicker and more enjoyable, but it will also prepare you for working with other designers or developers within a project or a company.

Setting the canvas

When creating a new Photoshop document, the first thing you need to do is to create a new canvas.

If you choose Web from the preset drop down list, this should give you a good starting point. Normally I will set the width and the height to the size of a screenshot on the computer I’m working on. So for example, I’m using a retina Macbook Pro, so my width and height would be 2800 x 1800.

The Resolution of the canvas should be 72 pixels / inch. If you come from the world of print based graphic design, you might be inclined to increase this number. However, resolution is only relevant if you are going to be printing. For example, if you were editing a leaflet in Photoshop that you were going to print, you would need to increase the resolution. However, because we a designing for the screen, the resolution makes no difference at all.

Finally you need to ensure that the Color Profile is set to sRGB IEC61966-2.1. Again because you selected Web from the preset drop down box this should already be selected. If you have ever saved an image out of Photoshop and then noticed that it looks different it is because of the colour profile.

So now that we have got everything set up, it’s time to organise our new workspace.

Using a grid

One of the first lessons of design is that you should use a grid. A grid ensures you bring order to your design and every element fits with the predefined structure. This not only brings semblance to your design, but it also maintains the same spacing and rhythm of your elements to create an overall cohesive design.

When starting a new project, setting up the grid should be the first thing you do.

In the past I’ve used GuideGuide, a Photoshop plugin that makes it really easy to set up a grid. Here is a really good tutorial for setting up and using GuideGuide.

These days I usually just wing it by creating layers of vertical and horizontal stripes. Basically just jumping to step 8 in this tutorial.

Of course the grid is not going to be part of your final end product, and so it doesn’t really matter what method you choose.

Organising your layers

One of the most annoying things about working with other people’s Photoshop files is when they don’t organise their layers correctly.

Even if you don’t plan on collaborating with anyone, you make it much harder to come back to your design months down the line if you don’t stay organised from the beginning.

You should always give your layers a descriptive name. Having endless layers named “Layer N” is not going to make your life any easier when you need to find a particular layer amongst hundreds of others.

Secondly always group your elements into folders. Create subfolders within folders if you have elements that group logically together or if you need to create multiple identical elements.

This might seem a little bit OCD, but trust me, it will make your life easier should you come back to your project. It should also go without saying that you keep your work organised, particularly if you are going to be giving these files to other designers, developers or clients.

Exporting assets

Exporting assets from Photoshop has traditionally always been a pain. Historically you would have to slice the image and then export the slices. This would become painful if you needed to be constantly changing your design, re-slicing and re-exporting again and again.

Slicy changed all that by allowing you to automatically slice your file without having to go through the manual process. It works by grouping and naming your layers and then simply dropping the file into Slicy. Slicy will automatically detect your slices from your layer names and then export the individual files.

If you happen to be using Photoshop CC, this functionality is built right into the application. See this page for further details.

Saving web images

If your website includes images, particularly photos, they are likely going to have a big impact on how fast your website loads. We might have the luxury of super fast broadband in our homes or offices, but you should still always try to get your website’s footprint to be as low as possible.

Optimising your images is a big step towards reducing your footprint, and it seems like it is something that a lot of people neglect. Making your website load as fast as possible is something that you should be constantly trying to improve, but luckily there are some best practices that you should follow to ensure your images are as optimised as possible.

Firstly, you should always save your images in Photoshop using the File >Save for Web item menu.

Next choose JPEG High as the preset.

You are now faced with two options, Progressive or Optimised.

Progressive images load in a series of scans that increase in quality. If you have ever been on a website where the images seem fuzzy at first, but then become clear when the website is finished loading, those are Progressive images.

Baseline images are loaded from the top to the bottom. You will know it’s a baseline image because the image will usually force other elements into their place when it is finally fully loaded.

You should choose the Progressive option when saving your images. This allows the image to appear to have loaded instantly and it won’t force the other elements of the page to move around as the image finishes loading. Your image will look lower quality at first, but your user will perceive that your website is loading quicker than it actually is.

To further optimise your images you can also use a tool like ImageOptim or CodeKit. In a couple of weeks I will also be showing you my preferred technique of using Grunt to have images optimised automatically.

Conclusion

Individual design techniques and trends come and go, but one thing that will make you a better and more proficient designer is getting your Photoshop workflow down.

Staying organised when in Photoshop might seem unnecessary, especially when you are on a tight deadline, but there are many reasons why you should keep yourself organised. There really is no choice in the matter if your Photoshop file is going to be worked on by another designer or a developer.

Photoshop is a massive application and it takes years to fully understand what each tool and option does. However, understanding a handful of options and techniques will go along way in making you a better and more efficient designer who can create work of a higher quality.

This is a series of posts on building an entire Open Source application called Cribbb. All of the tutorials will be free to web, and all of the code is available on GitHub.