Join Jan Kabili for an in-depth discussion in this video Creating rollover graphics from styles and layer comps, part of Photoshop CS5 for the Web.
A quick way to make different versions of the same button for rollovers is with layer styles and layer comps. Use layer styles to create different looks for the different states of a button, and use layer comps to save multiple versions of multiple buttons all in a single Photoshop file. Here's how it's done. I'm starting this lesson with a simple navigation bar. If you don't have access to the exercise files for this course, I suggest you go back and listen to the movie on creating a simple navigation bar. In a nutshell, I made these buttons using the Rounded Rectangle tool.
I dragged out one button, duplicated that button layer three more times, and I moved the buttons apart with the Move tool. Then I added some Type layers with the text for each button. The first step in making these buttons into rollover graphics is to slice them so that each button will generate independent graphic files. Because I made each button on a separate layer, which you can see here in the Layers panel, I can take advantage of automatic layer based slicing, a subject I covered in the last chapter. To apply layer based slicing, I'll select all four button layers by selecting the top one, holding the Shift key and selecting the bottom one.
Then I'll go to the Layer menu, and I'll choose New Layer Based Slices. That creates a layer based slice around each of the buttons and some auto slices with these gray identifiers around my layer based slices. The next step is to set up the way that I want each button to look in its normal, or resting state. A quick way to do that is to apply one of the prebuilt layer styles to my buttons. I have my Styles panel open here. If yours isn't open, you can go up to the Window menu and open it from there.
This is the default set of prebuilt styles. I really don't see any here that I want to use in this project, so I'm going to load another set of styles by going to the Styles panel menu and going down to Web Styles. Another set of styles that ships with Photoshop. I'll click OK to replace the default styles with the Web Styles. I'll start out by styling the normal state of my buttons with this clear gel style. Before I do that, I'll make sure I have all four of the button layers still selected in the Layers panel. Then I'll click the Clear Gel Style.
The style is quickly applied to all four buttons, as you can see in the Document window, and under each of the button layers, you can see the list of effects that make up this particular clear gel style. If I scroll down, you can see that all four buttons have that same list of effects. The effects are taking up a lot of space in the Layers panel, so I'm going to collapse them by going to each of the button layers and clicking this arrow on the far right. Now I can better see all four of the button layers here in the Layers panel. The next step is to save the way that the buttons currently look with this Clear Gel Style as the normal state of the rollovers, and this is where layer comps come in.
My Layer Comps panel is open down here. If yours isn't, go up to the Window menu and choose Layer Comps. I'm going to give some more room to the Layer Comps panel by moving my mouse over the border at the top of that panel and dragging up. I'm going to make my first layer comp to memorize the way that the buttons currently look with the Clear Gel style. To do that, I'll go to the bottom of the Layer Comps panel, and I'll click the Create New Layer comp icon here. That opens the New Layer Comp dialog box, where I can give this layer comp a name. I'll call it normal.
These three check boxes: Visibility, Position and Appearance, tell me the properties that layer comps can memorize. Layer comps can keep track of whether layers are visible or not, the position of the content of layers, and if appearance is checked, whether your layers have a layer style, blending mode or an opacity change applied to them. In this case, Appearance is the property that's most important because that's what I'm going to use to vary the appearance of my buttons, different layer styles. But I usually just leave all three of these properties checked to be safe, and I'll click OK.
That creates my first layer comp, my normal layer comp, here in the Layer Comps panel. Next I'm going to go ahead and change the appearance of these buttons to make them the way I want them to look in the over state, in other words when a viewer hovers their mouse over one of them. I'll check that all four button layers are still selected in the Layers panel. Then I'll go back up to the Styles panel, and I'll click another style. I use the Clear Gel Style with Drop Shadow. That changes the appearance of the buttons here in the document, and it also expands these layer based slices, which is one of the advantages of layer based slicing over manual slicing, as I explained in the last chapter.
Now I'm going to set up another layer comp to memorize the way that the buttons look now in their over state. So I'll go back to the Layer Comps panel, and again, I'll click on the Create New Layer comps icon at the bottom of the Layer Comps panel. And in the New Layer Comp dialog box, I'll name this layer comp "over," for the overstate. I'll leave all three of the properties checked, and I'll click OK. That creates the over layer comp here in the Layer Comps panel. I can cycle through the two layer comps by just clicking in the box to the left of each. So now, we're looking at the over layer comp.
If I click to the left of the normal layer comp, the buttons change appearance. Another way to cycle through the layer comps is to use these arrows here. Now these layer comps aren't set in stone. I can change my mind about the appearance of the button layers on either, or both of these layer comps and then update the layer comps to reflect the changes. So, for example, let's say that I decide I really don't like gel buttons. I think they're kind of old-fashioned. I'd like some flatter buttons instead. I'll start by changing the appearance of the buttons on the normal state.
I'll cycle to the normal state in the Layer Comps panel, and then I'll double check the Layers panel to make sure that I have all four of the button layers still selected. Then I'm going to go up to the Styles panel, and I'm going to click on a different style. I'll try this White Stripes style. Now to update the normal state with that change, I need to go down to the bottom of the Layer Comps panel and click the circular arrows, and that updates my normal layer comp. So now if I cycle between the normal and the over layer comps, you can see the difference. The over comp still has the gel style with drop shadow; the normal layer comp has the White Stripes style.
I'd also like to update the over state. So I cycle to the over state by clicking in the field to the left of the over state, and then I'll make sure I have all four of my buttons still selected in the Layers panel, and I'll try a different style. I'll use this darker stripes style for the over state. I have to update my over state, by making sure it's still selected in the Layer Comps panel, and then going to the circular arrows at the bottom of the Layer Comps panel and clicking. Now I can cycle between the over state and the normal state, and I have this new look to my two button states.
At this point, I would save my document with these changes by pressing Command+S on the Mac or Ctrl+S on the PC. So that's how to use the Layer Comps panel, along with layer styles, to create different looks for a set of rollover buttons in their normal state and their over state. If I wanted, I could add some other states, as well, like a down state in another layer comp, or an out state in yet another layer comp. After I have created all the different versions of my rollover graphics and memorized those as layer comps, the next step is to name and optimize my button slices, and that's what I'm going to show you how to do in the very next movie in this chapter.
- Customizing a web workspace
- Coloring web graphics
- Optimizing images as JPEG, GIF, or PNG files
- Creating background graphics for sites
- Working with transparency
- Building navigation bars, buttons, and rollover graphics
- Designing web page mock-ups
- Adding animation
- Automating web-related tasks in Photoshop
- Integrating with the rest of the Adobe Creative Suite