Dropping Shadow Text on 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. OK, now we're going to go ahead and spice up the text layers just a little bit to make them stand out a bit. So let's go ahead and click the Download layer. And we'll bring up our Layer Styles menu, and add a drop shadow to it. I'm just going to add little bit of drop shadow, with a distance of 1. And we're going to bring our opacity down quite a bit. And we'll go ahead and check it. Just brings it out just a little bit more there. I'll go ahead and do the same to the files and extras. Drop shadow. Distance of 1. And bring our opacity down. Going to leave those like they are. And, we're also, another growing trend with the Web 2.0 is to add shapes or icons to your buttons. So to do that, I'm going to go ahead and add a new layer here, and I will select the Custom Shape tool, and go up to our shapes here. On the shape, you click your drop down, and you have all your list of shapes and everything. I've got a custom shape here that is a wireless symbol. So I'll select that, and I'm going to go ahead and draw in white over my button here. Kind of, oops, Undo. Going to get it the size I want. That looks pretty good. And since these are vector shapes, you can pretty much scale them to whatever size you would like. I recommend going online and searching for free shapes if you want to get a few custom shapes. And I'll just go ahead and move this down to the bottom corner here, edging with the arrow keys. And I'll lower the opacity of that layer down a bit, just to kind of have it in there in the background. OK, that looks pretty good. And we'll just add a little bit of an inner shadow on this back part of the button here, just to kind of give it a little depth. So I'll go back to Layer 1, which has my main button. Open up our Layer Styles, and we'll add an Inner Glow. And we'll go ahead and make the color white. If you adjust your size, you can just kind of see a good point where your depth is...right there. OK, adds just a little bit of depth and gives our button a complete look. Now the last thing that I really need to do here to give it that Web 2.0 look is to add a reflection. Now, it's pretty easy to do, and we'll go ahead and get into that in the next clip.

Watch these related videos

• 
  Dropping Shadow Text on Web Buttons in Photoshop

  playlist Views: 1,075

• 
  Adding Text to Photoshop Style Buttons

  playlist Views: 872

• 
  How to Edit Photoshop Style Buttons

  playlist Views: 814

• 
  Adding Reflection to Web Buttons in Photoshop

  playlist Views: 1,059

• 
  Drop Shadows for Style Buttons in Photoshop

  playlist Views: 1,049

• 
  Editing Photoshop Web Buttons With Striped Backgrounds

  playlist Views: 1,110

Community Members who...

• Favorited this Video
• Rated This Video

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

Top Tags