Creating Gradient for a Style Button in Photoshop

Video Transcript

Hi, this is Jimmy Hartman on behalf of Expert Village and in this clip, we'll be creating another style of Web 2.0 Button using a few different features and a slightly different look. Now, these are the buttons that we are going to be creating in this part of the video. Pretty simple buttons, going along with those gradients and rounded corners and the images on the button. I kind of got this stroke idea from Blog Watt. I just threw that in there. You might like it. You might not. You can always take it out. We're going to go ahead and get started. Let's go ahead and close out this file here and start with a new file with the same dimensions as the one before, 350 by 350. Again, we are going to want to go ahead and open our layers and add a new blank layer for now. We're going to start off by drawing with a rounded rectangle. So, go ahead and select our rounded rectangle tool. Our radius, twelve pixels, should do fine, and I 'm going to set it to black so we can see what we are working with. Just go ahead and draw a bit of a rectangle here. That will do. The next thing we are going to go ahead and do, we're going leave this one like that for now. We're going to hold control to load it and click the layer to load as a selection, make a new layer. We're going to go select, modify, contract, and we'll contract it by two pixels. Here we're going to go ahead and add our reflection right now. Let's go ahead and, if you remember, we add a gradient from white to transparent. So, let's go ahead and select white as our foreground color. You can also hit "x" to swap your foreground and background colors. Then we're going to go up here. You have a linear gradient and we'll select the color and add a white to transparent and click ok. Now, the same way that we've applied them before, we'll just go ahead and start up and click vertically down to add our gradient. That looks pretty good. Control "d" to de-select that and we can adjust our capacity as needed to kind of get the right glare there. That will work pretty well. Before we move any further, I want to go ahead and name our layers. You should really get into a habit of that so we can keep our drawings organized. This one might get a little complex, so it's nice to know what's what. We'll name layer 1, Button Background and go ahead and name layer 2, Button Glare. That will do it for now.

Watch these related videos

• 
  Creating Gradient for a Style Button in Photoshop

  playlist Views: 984

• 
  Understanding Web 2.0 Photoshop Buttons

  playlist Views: 1,610

• 
  Create Glare in Photoshop Buttons

  playlist Views: 1,290

• 
  Adding Gradient to Web Buttons in Photoshop

  playlist Views: 1,510

• 
  Adding Stroke to a Photoshop Web Sticker

  playlist Views: 676

• 
  Adding Glare to Photoshop Style Buttons

  playlist Views: 1,344

Community Members who...

• Favorited this Video
• Rated This Video

Thumbs up or Thumbs down? Be the first to rate this video!

Top Tags