Using Layer Comps For Design In Photoshop

By   |  Stashed in Photoshop Tools

Introduction

In web design, it can be tricky to decide how to present your layout to a client. There are some designers who believe you should skip Photoshop and go straight to coding. I disagree. At the very least you should sketch out your ideas with a pencil and pad before ever opening up a text editor. For me, my workflow is: sketch / Photoshop / code.

Why Photoshop?

Simply because I’m really comfortable with the program. You could also use Fireworks, Illustrator, etc. It’s really whatever you find works the best for you. Regardless, here are some of the reasons I wouldn’t skip straight from sketch to code:

  • Creative Flow - When I’m designing, I want the process to be as free-flowing as possible. There is nothing worse than trying to design, while at the same time fighting with CSS elements. This is why free-writing exercises were so popular amongst your English teachers growing up.
  • Less Time Wasted - If you have to show a client a proof, and he/she doesn’t like it, then it’s back to the drawing board. If you’ve invested extra time to code everything, and you have to redesign all the CSS, that’s a bunch of time lost. Most of the time, your first proof will have to be tweaked, sometimes completely overhauled. Your much better off making those kinds of changes within a design program.
  • Can’t Build A House Without A Foundation - You don’t see home builders putting up a house without a blueprint, do you? Why, then do web designers sometimes feel like they can skip most of the planning? The more preparation you do at the beginning of a project, the better the final result will be.

How To Present Your Design

About a month ago, Jacob Cass of Just Creative Design wrote a very nice article on the subject. With the help of the design community, he described 9 ways to broach the problem. The way that I presented to him is the use of layer comps to produce a PDF slideshow presentation. This tutorial will aim to show you how to create these presentations. It’s a fairly elegant solution to a common design problem.

How Layer Comps Work

Basically, layer comps act as a way to capture your design in different states, based on what layers you have visible. You can then capture these states, in different “layer comps” and export them as a PDF slideshow to present all your designs to your client. Be careful though, keep your options to a minimum. Often times, the more options you show, the more confusing you make things for the client. I always try to keep the options between 2-4.

The Layers

I recently finished a website for the Chalet Fondue restaurant. I figured the design would make a perfect reference for this article.

The key to a good design mock-up with layer comps, is well-organized layers. Notice in the image below how everything is tucked away neatly in layer groups. This allows you to toggle on and off the visibility of the design elements quickly and easily.

The Designs

First off, below are the three designs I’ll be using to make the slideshow.

They are only slightly different, but they should do the trick in helping to explain how to create a simple presentation slideshow. If you’d like to follow along, using the same PSD file, you can download it here.

Step 1

Toggle on/off only the layer groups that you want to keep visible.

Step 2

Open up the Layer Comps window, if it’s not already open, click Window-Layer Comps. Click on the small icon in that window that creates a New Layer Comp (circled in the image below. Rename the comp something applicable and make sure Visibility is checked.

Step 3

Prepare your image for an alternate layer comp by toggling on/off the visibility of the layers you want to show. If you are following along, your layer palette would look like the one below.

Step 4

Make a Layer Comp for your new visible layers, just like you did in step 2.

Step 5

Repeat these steps, until you have three variations within your Layer Comp window. Below is the visible layers I used for comp 3, and the 3 comps within the Layer Comp window.

Step 6

Now that we have our 3 variations on different layer comps, we are ready to make our slideshow. The good news is, this is made tremendously easy through one of Photoshop’s scripts. Click File-Scripts-Layer Comps to PDF. Choose a destination to save the file to, that is easy for you to remember. I almost always save things to the desktop first, and then file things later. Just makes my workflow simplier. You can play with the duration of the images and if you want the show to loop. When you have the settings in order, click Run.

Presentation Time

That’s it, the slideshow has been created for you by the script! Now, you just need to find where you saved it, and give it a test run to make sure everything looks ok. Then it’s time to show the client. You can email it, upload it to a server, or show them it in person. This will give them a chance to pick and choose which elements they like and dislike. Then you can go back in, make some more tweaks, then begin coding. I love this approach, it makes a lot of sense to me!

Conclusion

Of course, their are many ways to present your design to your client. This is merely a suggestion, and how I often go about it. As with most things in the design field, you need to find what works best for you. What are your ideas? What have your experiences been?

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://naldzgraphics.com NaldzGraphics

    nice one Andrew. I find this tutorial very useful.thanks a lot

    Ronald

    NaldzGraphics´s last post was… How to Design an Instant Coffee Sachet in Photoshop

  • http://www.bluesheepstudios.com/blog Alek

    very good article. I might start doing the same thing.

    Alek´s last post was… Blue Sheep getting out there!

  • http://designblurb.com/ Eli

    I’ve never actually used Layer Comps… thanks for the article, I’m gonna use them one day when I come across an opportunity!

  • http://www.sohtanaka.com Soh

    Awesome idea~ Gotta give it a try :-)

    Thanks!

    Soh´s last post was… Cross Browser CSS Fixes, Tools, and Hacks

  • http://www.myinkblog.com Andrew Houle

    So glad you guys are finding this useful! I hope it helps you present your designs to a client in the future :)

  • http://www.1stwebdesigner.com Dainis Graveris

    I totally agree, that You must not to start with coding, if You have time to do all the best as You can. I like Your layer and group organizing, I didn’t use layer comps at all, but looks like I am little bit mistaken not using that toolbox. Thanks!

    Dainis Graveris´s last post was… 300+ Jquery, CSS, MooTools and JS navigation menus

  • http://www.hoerwolle.de Basty

    Hi!

    Whoa, this is really good stuff! Exactly the features, that I missed during my last design for a website – thanks for pointing this out in an easy to understand way! :D

    My new task is a redesign for a ~40 page homepage and I will really save lots of time with this!

    Bye,
    Basty

    Basty´s last post was… Wegen Umzug ne Weile offline

  • http://noeruiz.com Noe Ruiz

    Another great use of layer comps, thanks Andrew!! I have one suggestion that may be of use. Instead of duplicating layers/bins to act as the “alternate” layers, just check the “position” box in the layer comp options. If its just layers your moving around, you can store that position in a layer comp, without having to duplicate layers, thus resulting in a smaller document in file size. Don’t forget it can also save the states of layer styles. I think of a layer comp as a style sheet, you can switch between each style, and still have the same content. Its just the appearance, position, and visibility that changes.

  • http://www.myinkblog.com Andrew Houle

    @Dainis, @Basty Glad you guys found the tut so useful :) I know it’s come in handy for me.

    @Noe Awesome suggestion! Thanks for sharing. I’ll definitely be playing around w/ that functionality the next time I set up layer comps!

  • sunny

    very nice andrew, yesterday I have got one project to work on layer comps, Its very usefull to me.

  • http://www.raymondselda.com/ Raymond Selda

    Very nice tip Andrew. I will definitely incorporate this into my workflow. This will save me a lot of time toggling between layers! Thank you.

    Raymond Selda´s last post was… How I Used AutoViewer with WordPress

  • Jeffrey Henderson

    Yes, this is a great way to present comps to clients. I have been frustrated by the fact that the PDF is not actual screen size (72 ppi) when viewed in REader. I want my clients to see the same to-the-pixel dimensions as my PSD. Any suggestions?

  • Graham

    Hi, I’ve been experimenting with layer comps and find them very useful. Unfortunately, the ‘Layer Comps to PDF’ script is no longer available in CS4, which is a shame as it would be really handy.

    http://help.adobe.com/en_US/Photoshop/11.0/WSCFE49E63-949D-4852-95A7-9F0D91B37460a.html