Adding Reflection 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. Now adding that reflection is pretty easy to do. All we need to do, is select the layers that make up the button. First we'll drag the shape layer down with these other ones here. We'll make a group, calling it button, and we'll select the three button layers and drag them into that group. Now if we turn that group on and off, we can see that that is the entire button, except for the text. We'll go ahead and duplicate that group by coming up to layer, duplicate group, go ahead and call this button reflection. And then we'll go ahead and press control T, to edit our free-transform mode, and that will affect the whole group. Right-click the button and go to flip vertical. See that--might not be able to see that. Let's go here, right-click, go to flip vertical, and that should just flip the button, and add it right on top of our old one. So we use our arrow keys now to nudge this down below the old button, right 'til we get to the bottom there, and go ahead and hit the enter key on your keyboard to exit free-transform mode. Okay, not a bad reflection so far, but it's showing a little too much. So we just want a little bit of this reflection right below the button. So the easiest way to do that is with our button reflection group selected. Click add layer mask, and that will add the mask to the entire group. Now we're going to select our gradient tool, and do another gradient, which is just going to be white to black. Click okay. We're going to drag in this area, with our layer mask selected, vertically to create a layer mask. Oop--that's opposite of what we want, so I'm going to drag down. And you just need to drag as many times as you need to, to make sure you get it right. And... That looks pretty good right there. You can play with your opacity as well, if you think it's too dominant, but I think this one looks pretty good. Drop that down a bit. And go ahead and close that up. All right, and that is your web 2.0 button.

Watch these related videos

• 
  Adding Reflection to Web Buttons in Photoshop

  playlist Views: 853

• 
  Adding Glare to Photoshop Style Buttons

  playlist Views: 1,335

• 
  How to Edit Photoshop Style Buttons

  playlist Views: 635

• 
  Editing Photoshop Web Buttons Gradient

  playlist Views: 776

• 
  Adding Gradient to Web Buttons in Photoshop

  playlist Views: 1,502

• 
  Adding Reflection to Photoshop Style Buttons

  playlist Views: 935

Community Members who...

• Favorited this Video
• Rated This Video

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

Top Tags