Home
  • home

  • face race

  • blog

  • client work

  • contact

« Screencast 4: Making Skins & Themes with Photoshop Slices

Now taking client work »
Screencast 5: Variations of a graphic with layer comps
Mike Berg
04
Aug 2010

Do you save out multiple variations of a graphic by setting layer visibility? Ever wish there was a faster way to do that whenever that graphic needed to be updated?

The latest entry in my iDevBlogADay “Photoshop for Devs” series, I show you how to use Layer Comps to save layer visibility settings so can easily switch between visibility “states” for multiple layers (and even layer styles) at once. This saves you from having a separate document or layer group for each instance of your graphic, and makes your source PSD’s easier to update.

Helping iPhone developers hate using Photoshop a little less with simple tricks that make workflows more efficient. View the rest of the screencasts in the “Photoshop for Devs” series.

  • Create broad layer comps to set overall visibility settings for multiple layers at once.
  • Fine-tune your layer comps so that you have a comp for every instance of the graphic you are editing.
  • Learn how adding and deleting layers affects layer comps.


Addendum:

I realized after recording that I sort of left you hanging with an alternate art style (the blue version) and didn’t really give a way to manage that. Here’s how:

  • Right-click on the “1″ layer comp and duplicate it:
  • Rename the layer comp to “1-normal blue”.
  • Change the visibility settings so that your blue layer is turned on.
  • Right-click on the layer comp again and select “Update Layer Comp” and you’re done:

Download the finished Photoshop file that was created in this screencast.

Recorded, edited and uploaded with Screenflow.

This post is part of iDevBlogADay, a group of indie iPhone development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

Category: Blog, idevblogaday, Photoshop for Devs, Resources  Tags: iDevBlogADay, layer comps, Photoshop, screencast
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
  • Owen Goss

    Hey Mike:
    Great tutorial, this is a really handy technique for managing game art files that I'm going to put to immediate use. :) One question: is there a way to build layer comps that work together? For example, is it possible to have one layer comp that switches between the read and blue die, and then turn on additional layer comps for the pips? That way instead of having separate comps for each state, you combine major states? I just wondered if that's possible?

    Thanks,
    Owen

  • http://weheartgames.com WeHeartGames

    As far as I know, it's not possible to “parent/nest” layer comps like this, unfortunately. Would be pretty sweet, though.

  • http://twitter.com/MindJuiceMedia Ken Carpenter

    Thanks again Mike. This is yet another feature I had never heard of, but can instantly use!

    Ken

« Screencast 4: Making Skins & Themes with Photoshop Slices

Now taking client work »

    Follow on:

    RSS | Twitter | YouTube

latest blog posts

  • Setting the default file format for new slices in Photoshop
  • How to export Flash SWF animations to PNG sequences
  • Photoshop for devs: Required reading
  • New t-shirt: Boost Greed
  • Rush City icon time lapse

Buy it now
on the App Store

A camera-based
party game for iPhone

© 2012 - We Heart Games Inc. All rights reserved.