Join Jan Kabili for an in-depth discussion in this video Creating web buttons as Smart Objects, part of Photoshop CS5 for the Web.
Photoshop's Smart Object technology offers an efficient and flexible way to create a matching set of navigation buttons. You can use Smart Objects to make buttons that are linked to one another, so that a change to one will affect all of them. I'll start with the simple button that I made with the Ellipse Shape tool, and to which I added a few layer effects that you can see over here on the button shape layer in the Layers panel. I'm going to convert this button to a Smart Object by Ctrl+clicking on the button layer, that's right-clicking on a PC, and choosing Convert to Smart Object.
This icon on the layer thumbnail identifies this as a Smart Object layer, and you can no longer see the layer effects on this layer. But they are still there. They are just bundled up inside of this Smart Object layer, and I'll show you where they are in just a moment. But first, I want to duplicate this Smart Object layer to make another button. So again, I'll Ctrl+click on a Mac or right-click on a PC on the button shape layer, and I'm going to choose Duplicate layer. It's important not to choose New Smart Object Via Copy.
That would make a copy of the button, but that copy would not be linked to the original. And I want the buttons to be linked, so that when I make a change to one, that change would ripple through all the buttons. So I'll choose Duplicate layer, and I'll click OK. I can't see that duplicate layer here in the image, because it's right on top of the original layer. So I'll get the Move tool, I'll hold the Shift key to constrain vertical movement, and I'll drag to the right, moving my duplicate button. I'd like to make two more Smart Object buttons that are copies of these.
There is another way that I can do it that's even faster, and that is to select both of the Smart Object layers by holding the Command key on the Mac or the Ctrl key on the PC and clicking on them both. And then with the Move tool in the image, I'll hold down the Option key on the Mac, that's Alt on the PC, to copy, along with the Shift key to constrain vertical movement, and I'll drag to the right. So that's a quick way to make four matching buttons. Each of the buttons is on a separate Smart Object layer.
And all these Smart Object layers are linked together, so that if I make a change to one of these buttons, all of the buttons will update with that same change. To show you that, I'll select the first layer, the button shape layer. Let's say that I want to make a change to one of the layer effects that I put on this layer. Well, I can't do that from here. In fact, I can't do anything to a Smart Object layer that involves changing its pixels. So, for example, if I get the Brush tool, and I try to paint on this layer, I just get a cancel symbol. In order to change the pixels on this layer, I need to open up the Smart Object.
To do that, I'll double-click on the thumbnail of the button shape layer. I'll click OK, and that opens a brand-new file, button shape1.psb. This is the original content of the Smart Object. To prove that, if you take a look at the Layers panel, you'll see those original layer effects on the button shape layer that I showed you before I made this into a Smart Object. Here in the PSB file, I can make changes to the appearance of the button. For example, I can change the layer effects. To do that, I'll double-click this Effects layer, and that opens the Layer Style dialog box.
I'd like to change the color overlay effect on this button. So I'll select that in the list on the left, and then here in the center, I see options for the Color Overlay effect. I'll double-click the Color field there, and I'm going to choose another color as my color overlay effect. I'll click OK. And I'll click OK to close the Layer Style dialog box. And that's not all that I can do to this button in the PSB file. For example, I could change its shape. To do that, I'll go to the Edit menu and down to Free Transform Path.
That brings up this bounding box, and I'm just going to make the button a little narrower by dragging the top and bottom borders of the bounding box. And then I'll click the check mark. Now I need to save and close this PSB file, and it's important to save over the original PSB file, rather than to choose Save As or Save with another name or save somewhere else. To make sure that happens, I'm going to choose Close from the File menu, and then I'll click Save, and that takes me back out to my PSD file, where the changes that I just made to the Button Shape layer have automatically updated the other three Smart Object button layers.
So the lesson to take from this exercise is that using Smart Objects to make a set of matching buttons ensures that they'll all be the same to start with, and makes it a snap to change just one of the buttons and have the rest automatically update.
- 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