Here at Green Chameleon we’re always on the lookout for new tools and methods to help us work more efficiently. Over the years we’ve spent a lot of time refining the way in which we run projects, everything from initial project specs to client presentations, bug tracking, support requests, version control, design feedback – you name it, we’ve thought about it. Ask me about our process in a years time and I’m sure you’ll get a wholly different answer but, for now it works.

Whilst our client side/management processes have evolved I feel that my own personal workflows and methods could do with a little whipping into shape, first and foremost being every designers right hand man, Photoshop. I’ve been using the software for coming up to a decade and although I’ve got a real solid understanding of it, there have been so many new versions and features released since I learnt the basics which makes me wonder if there are better ways of working. I think it really boils down to sticking to what I know to get the job done, whereas there are probably many new features to help get it done in a more efficient manner.

The Problem

This leads me on to what I consider to be one of the most annoying parts of designing a website – that ‘fist through the screen’ scenario when you have a homepage signed off so move on to put together all the inner pages, only to find that for whatever reason you need to make a change to the nav bar that you’ve just included in your 10 inner page PSDs so have to go through one by one and update them. Well, behold, there is a solution and it comes in the form of ‘Smart Objects’, these are basically layers that contain nested layers or shapes in an external Photoshop or Illustrator file. In a nut shell this means you could create a ‘Navigation’ smart object and place that file into all your page designs and any time you update the smart object, the changes will be reflected across all of your pages automatically. It’s very much like the process of coding up a entire site in just HTML (yep, that used to happen) and having to go through and fix a spelling mistake in the nav bar on every single page because it is hard coded into that individual page, then learning PHP and the wonder of the ‘Include’ function!

Step By Step

So with all that in mind I thought it would be useful to share my new workflow and ‘Smart template’ set up when progressing through site’s inner page design.

    1. Finalise your homepage design and make sure common elements such as navigation and footer are neatly grouped
  1. Move one of your ‘common element’ groups to a new Photoshop document and save out as a .PSB file (I like to put these into a folder called Smart Objects just to keep it neat). Photoshop likes to refer to .PSB as ‘Large Document Format’ so look out for that in the format dropdown. Then delete this group from the original PSD.
  1. On the original PSD go File > Place Linked (Photoshop CC) and drop in your new .PSB file.
  1. Double click on the Smart Object to open the linked .PSB.  Now make a change in the .PSB file and hit save. Sit back and let Photoshop do it’s thang, you should now see the updates in your original PSD.
  1. Rinse and repeat for all common elements. I usually go for Navigation and Footer as a minimum but depending on your layout style this might be sidebars etc.
  1. The final step is to create a ‘Smart template’, essentially an empty template that just contains the common elements in smart object form (usually a max of about 4 layers).

Now any time you start a new page design, duplicate it from the smart template and you can get straight into design work. Essentially each page should only actually include the layers that are unique to that individual page, everything else is handled by the smart objects. Voila!

Maybe I’m just behind the times but this has really improved my workflow and makes a heck of a difference when working on large sites with 20+ pages, all of which require in depth reviews and sign off. I’d be keen to hear how many of you have been using this already and if there are any down sides that I just haven’t come across yet? Let me know on Twitter.