Smart Objects and Web Design

Note: This tutorial was done using Adobe Photoshop CS2

With the introduction of Smart Objects in Photoshop CS2, designing websites became a lot easier than before. You don't have to change the objects one by one, smart objects are especially useful when you are editing the same type of images, for example buttons for your navigation. With the help of Smart Objects you now have to edit only one button and all the rest will reflect your latest changes. Sounds interesting huh? OK then let's start.

1. Open a new window with WIDTH 400, HEIGHT 100, and white background. Create another layer on top of the background by going to Layer>New>Layer (Shift+Ctrl+N). Draw a rectangle or rounded edge button on this new layer.

2. Now Right Click on this layer and convert it to Smart Object by choosing Group into New Smart Object.

3. OK, we are done! ;) Just kidding... we are almost done though. As you can see now your layer has turned into a different state with small icon attached to it.

4. Ok now go ahead and dublicate 3 or 4 copies of this layer. We want to have many buttons, one for "Home" another for "About Us" section... etc. Arrange them side by side so that they do not cover each other.

5. Here comes the interesting part, we designers all know that when we are coming up with the mock we do lots of changes to the images and layout of the design. Let's say you didn't like the "Red Buttons", suddenly you want them to be "Blue". In previous version of Photoshop, this task would include actions like deleting all the buttons and creating a new ones from scratch, or we would select the buttons one by one and fill them with a new color, but not anymore with CS2.

6. Double click on the icon of your Smart Object Layer. If you are shown a pop up window, click OK. Now in a smaller window your "Red Button" will be opened. Go ahead and change it to "Blue".

7. After you are satisfied with your new "Blue Button" click on the Exit button of the window.

8. You will be shown a Pop Up asking to save the changes, click Yes. And Voila! Your new set of "Blue Buttons" are ready!

This can save you lots of time when designing a site, you can apply this concept to any other parts of the site. I just thought menu buttons would make the best sense in this case. Thanks for taking time to go through this tutorial with me.