Understanding Web 2.0 Photoshop Buttons

Series Summary

For creating and editing web graphics for the internet, Adobe Photoshop is the industry standard. It is a program that allows the user to be very hands on with images and manipulate the characteristics of the picture in whatever way they feel is suitable. It gives the user the ability to add specific features only available through the program to their images. Photoshop is also now being used to create images from scratch at a design level. The impact of this is that anyone with a computer is now able to design and create as they see fit. It is no longer reserved to the established and wealthy designers. It is also designed for flawless integration with other Adobe programs important to web site development, such as Fireworks, Flash and Dreamweaver.

In this free series of web site design videos, our expert tells you how to create buttons, stickers, style buttons and boxes for your website. He begins with an introduction to web 2.0, then covers the basics of creating gradients, drop shadows and reflections. In the final section of this series, he discusses the creation of a 3d box to display your product. Watch these free videos to find out how to create a professional look for your website.

Video Transcript

"Hi, this is Jimmy Hartman on behalf of Expert Village, and in this clip we'll be starting our Web 2.0 buttons. Now, one of the things that defines Web 2.0 -- the style -- typically if you've got rounded corners on everything, you've got glares or reflections, and there's a lot of use of gradients for smooth color transitions. So we try to apply those for these upcoming buttons and other graphics. OK, this button we're going to draw is going to go along with the Web 2.0 styles. So the first thing, let's go and open a new document here. Mine is going to be 350 by 200. Now, we're going to need a few extra layers. I know this is advanced, so I'm going to go to our layers palette and click on the New Layer button, probably three times. Get a few layers here. Let's go to Layer 1, and the first thing we're just going to do is, since the 2.0 style has a lot of rounded corners, we're going to go ahead and select our Shape tool. And we're going to select the Rounded Rectangle tool. We're going to leave; I'll set my radius to 13 pixels. And make sure that the Fill Pixels option is selected here. And we'll go down here and set our foreground color to black, so we can kind of see what we're doing here. Now let's just go ahead and draw the rectangle here...going to make it kind of large so we can see what's happening. That's about all we need for that step. And that's just basically how big our button's going to be. Now, we don't want it to be black, so we're going to open the Layers Styles, and so we'll double-click right in this area. And I'm going to add a gradient overlay on this, since gradients are big with the Web 2.0 style. And click Gradient Overlay. And I want to change the colors a bit. I want it to be blue. So we're going to click this gradient bar here. And that will bring up this gradient editor. So let's go ahead and change the dark color here to a darker bluish color. We're watching over here to kind of get an idea of what it's going to look like, off to the left. And, go and adjust. That'll do for now. Click OK. And we'll adjust our light color. That's a pretty light gradient. That'll work pretty well for us. OK, now that we've got that gradient here, we'll go ahead and click OK to apply that. And, one last time, we'll go ahead and click OK here. And now we've got the beginnings of our button."