Adobe Photoshop Web Graphics Tutorial : How to Edit Photoshop Style Buttons

Adobe Photoshop Web Graphics Tutorial : How to Edit Photoshop Style Buttons

September 8, 2019 0 By Peter Engel


Hi, this is Jimmy Hartman on behalf of Expert
Village, and in this clip we’ll be finishing up our second Web 2.0-style button. OK, let’s
go and organize everything up here. First, I’m going to go and expand this button a bit.
Select all of our button layers: Outside Stroke, Button Glare, and Button Background. Hit Control
T. Go ahead and drag it out a bit, and hit Return on the keyboard. Go ahead and scroll
up here. Select our graphic and we’re going to go ahead and move this guy over a bit.
And our text can go over. And we’ll just adjust our graphic to get it in the right spot. OK,
that works pretty well. And, we’re going to move the whole button to, down a bit, so it’s
not sitting right on top of that other button. OK, let’s go ahead and add a reflection again,
which you should know how to do there. Go ahead and duplicate this group. Layer. Duplicate
group. Button 2, reflection. And we’ll hit Control T to transform that group. Right click.
And flip vertical. Hit Return. And, with the Move tool selected, we’ll go ahead and nudge
this down until we get to the bottom. That will work. Add our layer mask with our gradient
from white to black, linear. Let’s go ahead and throw one on there. That pretty much matches
our other one. And then we’ll go ahead and add another group. We’ll call this Button
2 again here. And we’ll add these two Button 2’s into this group. So, we’ve got Button
1 and Button 2. And now, obviously, you can go ahead and change these buttons for as many
different features as you want. Change the colors, your fonts. This is just your general
way to get going on it. You should definitely go ahead and utilize your custom shapes in
Photoshop and search the Internet for custom shapes. You never know what you can find.
You can find easy ways to go ahead and add a little bit extra to your buttons or your
Web site. And again I’d like to go ahead and thank {blog watts} for the idea for this outside
stroke with the drop shadow for the design. I came across it while I was making these
buttons and thought that everybody could benefit from that idea. So, thanks again guys.