Adobe Photoshop Web Graphics Tutorial : Adding Reflection to Web Buttons in Photoshop

Adobe Photoshop Web Graphics Tutorial : Adding Reflection to Web Buttons in Photoshop

September 1, 2019 3 By Peter Engel


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.