Adding Gradient to Web Buttons in Photoshop

Video Transcript

Hi, this is Jimmy Hartman on behalf of Expert Village, and in this clip we'll be continuing our basic web 2.0 button. Okay, continuing on. Now, we're going to make a highlight layer on this button, kind of a reflection to make it--give it a little more depth. So I've found the easiest way to do this is to hold control and click on the layer we just made here. So that will load as a selection. Then we'll go and select the layer two--layer above it. And we'll go to select, modify, contract. That will bring up this little dialog here, and we're going to contract it by three pixels. So go ahead and click okay. And then, for this we're going to create another gradient, but we're going to make it a white to transparent gradient. So we have this--so we'll have a white up here and then it will fade once it comes down to the bottom here. It will fade to transparent, so it will reveal this bottom color. So let's go ahead and do that now. Go up to the top here, where your gradient color scheme is, and we'll go ahead and click on that to open our gradient editor. And we're going to make it white to transparent, like we had talked about. Go ahead and click okay. And then we're just going to click and drag down vertically to create our gradient here. Well, that works out pretty well, first try. Okay, let's go ahead and select control D, and that will kind of reveal our image for what it is, and it looks pretty good so far. Now that we've got our general layout of our button, we can go ahead and apply some text here. So then select the text tool, and I've got Myriad Pro selected with black italic, size eighteen, and centered text. So I'm just going to go ahead and click here on the center of the button, and add my text. This will be a download button. I'll go ahead and open my text palette here, to increase my size a bit. And take our letter spacing back to zero, and all caps, so that should be good for that. So go ahead and position it here, using the arrow keys and the selection tool here. And I'm going to add another layer of text here. Select our text tool again, and right underneath it, we're just going to write files and extras now. And we'll go ahead and make that size, we'll go down to fourteen, and press--go to the selection tool, we'll move that again into place. Change our letter spacing, twenty-five, that's close enough.

Watch these related videos

• 
  Adding Gradient to Web Buttons in Photoshop

  playlist Views: 1,510

• 
  Creating Gradient for a Style Button in Photoshop

  playlist Views: 984

• 
  Adding Reflection to Web Buttons in Photoshop

  playlist Views: 856

• 
  Create Glare in Photoshop Buttons

  playlist Views: 1,290

• 
  Adding Text to a Photoshop Box

  playlist Views: 664

• 
  Understanding Web 2.0 Photoshop Buttons

  playlist Views: 1,610

Community Members who...

• Favorited this Video
• Rated This Video

Top Tags