Understanding Web 2.0 Photoshop Buttons

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.

Watch these related videos

• 
  Understanding Web 2.0 Photoshop Buttons

  playlist Views: 2,197

• 
  Creating Gradient for a Style Button in Photoshop

  playlist Views: 1,705

• 
  Editing Photoshop Web Buttons Gradient

  playlist Views: 1,190

• 
  Create Glare in Photoshop Buttons

  playlist Views: 2,135

• 
  Using Gradient Overlay in Photoshop Layers

  playlist Views: 3,322

• 
  Adding Gradient to Web Buttons in Photoshop

  playlist Views: 2,512

Community Members who...

• Favorited this Video
• Rated This Video

Top Tags