Pixil.info

Coming up on today’s epsiode:

We take a look at using layer comps to change the overall looks of a layout.

In a past episode, we talked about using layer comps to save time when building out websites. Today we going to take a closer look at layer comps, and how they can change the entire look of your project.

Alright so lets say your client likes the layout… but ask you to change the color scheme. Lets also say our client doesn’t know exactly which colors to choose. Instead of picking just one, our client suggests several color schemes. So the best way to do this… in a non-destructive way, is to use Layer Comps.

Step 1: Create a new layer comp.

First, save our project’s current state, so lets open up the layer comps palette and click the create new button. Lets go over these three check boxes.

• Visibility keeps track of what layers turned on or off
• Position stores the location of your layers.
• and Appearance holds all of your layer style information.

So depending on how drastic you want your layout to change, you’ll need to check the appropriate boxes. In this example all use all three.

Step 2: Changing your layout.

Now that we’ve saved our current state, lets start changing stuff around! First I’ll start with changing the colors. I’ll be using layer styles to do this. So once the color is changed on this first layer, we’ll copy that layer’s “layer style” and paste it on other layers with similar attributes. Check out how I can change all of these text layers at one. To do this, I’m using the cmd+shift while clicking on each layer. Right click, and paste the layer style. Works great in situations like this.

Alright next, I’m going to flip the sidebar and content. I’ll need to change the position of the gradient on the sidebar background color. Next, Lets switch to the header image to something more appealing. Just turn this one on… and the other one off.Alright, once your happy with your changes, lets save it out as a new layer comp. So in the layer comp palette, create new, leave those boxes checked and okay!

Now lets switch between these two colors. Okay looks pretty good, so now lets setup another color. So just repeating the same steps from before. Alright here we are….. It’s pretty amazing switching thru layer comps like this. Sorta resembles Javascript Style Sheet switching.

Alright so with all that done. Let’s export these out. I’ll be using the “Layer Comps to Files” export script. If your on CS4, you’ll notice adobe added a few new file formats. Alright and with that, you’ve just created an advanced layer comp workflow. Take a moment to play around with the position and appearance, try to create something totally different!