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

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

September 8, 2019 0 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. 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.