Adding a Striped Background to Photoshop Web Buttons

Video Transcript

Hi, this is Jimmy Hartman on behalf of Expert Village and in this video, we'll be showing you a new style in Web 2.0, is having stripes in your background of your, say, header, footer, or on your buttons. We'll go ahead and get started on that. Now the stripes have become a pretty big thing in the Web 2.0 style. So, we're going to go ahead and show you how to make a pretty quick and easy way that you can apply stripes and apply it over and over again. So, first we're going to start with a semi-large file here. We'll go 500 by 500. That'll give us enough room. We're going to go ahead and shrink the canvas a bit, zoom out a bit. We'll open our layers, add a new layer and we're just going to create the stripes here. We're going to create them horizontally first and then we'll rotate them to fit the angle we want. So let's select our rectangle marquis tool. Just go ahead and drag a thin stripe and then I'm going to use a gradient for this stripe. I'm going to go ahead and set it to the white to black, but we'll change the white to a medium kind of darker gray here. It's a little more subtle. Click okay. We'll just click and drag from the top to bottom of that marquis tool and set control "d" to de-select that. We'll go to our layers. Hold control '"a" to select all on the layer where we made the stripe, control "c" to copy it, and control "v" to paste it. Now we've got our second stripe. Let's go ahead and select our move tool here. Let's move the first stripe up to the top. Then using the arrow keys, we'll bring it down five spaces; one, two, three, four, five. We'll space all these about five spaces. So we'll move this to the top until it meets right with the edge and then we'll go ahead and move it down five again; so, one, two, three, four, five. So, the next set of steps we're going to be using, we're going to repeat over and over until we duplicate all of our stripes. So, now we have them both on one layer. We'll hit control "a", control "c", control "v". Paste another set. We're going to move those up to the top. If it's just below it, you can kind of nudge it with your arrow key so it matches right at the top. We'll move it down five again; one, two, three, four, five. Hold control and select the other layer. Hit control "e" again to merge them and then control "a", "c", "v". We're just going to do this over a few times here. Control "e". Control "a", "c", "v". Move this guy down; one, two, three, four, five. Let's go to merge these two real quick again. Control "e". And now, we're just going to duplicate them again just so we have them covering all the way up and down. So when we rotate it they fill in the whole area. So let's go ahead and hit control "a", "c", "v". Then we're going to go ahead and zoom out again. Actually zoom back in and select our layers. Take one and drag it down. Take the other and drag it up so we can match them up. There's our edge, so we'll bring it down and then up five; one, two, three, four, five. Hold control, select them both and control "e" to merge them. Okay, there we have our horizontal stripes.

Watch these related videos

• 
  Adding a Striped Background to Photoshop Web Buttons

  playlist Views: 1,354

• 
  Editing Photoshop Web Buttons With Striped Backgrounds

  playlist Views: 1,097

• 
  Adding Perspective to a Photoshop Box

  playlist Views: 880

• 
  Adding Glare to Photoshop Style Buttons

  playlist Views: 1,635

• 
  Adding Reflection to Web Buttons in Photoshop

  playlist Views: 1,039

• 
  Creating Gradient for a Style Button in Photoshop

  playlist Views: 1,262

Community Members who...

• Favorited this Video
• Rated This Video

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

Top Tags