web banners in PS

Make a standard sized 468x60 banner. Many of the banners out there look like crap, so I'm here to teach you how to make a nice looking one.

Today, class, we will be completing an easy task with the pen tool, custom shapes, and layer styles.

1. Create a document with dimensions 468px width and 60px height. Fill your first layer with white, then give it a gradient overlay layer style with the following colors. Drag the color stop on the right (the bright red color) to the middle as shown:
   
   Now you should have this:
   
2. Using the custom shape tool, select the "Arrow 2" shape
   
   Make an arrow by clicking in the top left corner then holding shift and dragging down and to the right until you have a shape like below:
   
3. Give the arrow a color overlay layer style using a medium red (I used #b21219), and a 1px outside stroke using a darker red (I used #a62908). Set the opacity for this layer to 50%.
   
4. Duplicate your arrow layer, then with your new arrow, using the move tool (press V to use the move tool) hold shift and press the right arrow key once to move the new arrow over 10 pixels. The two arrows should now overlap, giving you this look:
   
5. Select both arrow layers (by 'ctrl+click' ing each one in the Layers window). Now go to 'Layer > Merge Layers' This will combine your two arrows in to one layer.
   
6. Select the new combined arrow layer (click it in the Layers window), then duplicate it (go to 'Layer > Duplicate Layer'). Now use the move tool again and once again hold shift, this time press the right arrow 6 times to move it 60 pixels.
   
   Repeat this process 2 more times, so you have 4 arrows. Now select all of your arrow layers and merge them.
   
7. Duplicate your merged arrow layer, flip it horizontally (with the layer selected, go to 'Edit > Transform > Flip Horizontal'), then move it over to line up with the right edge of your image.
   
8. Using the pen tool, draw a new layer as shown. Start by clicking number 1, then click each number until you get to number 6, then click number 1 again to complete your shape. The arrow layers should help you figure out where to click for number 2 and 5.
   
9. Now give your new shape a gradient overlay as shown.
   
   To get this:
   
10. Now select your arrow layers and move them on top of everything (select both arrow layers in the Layers window, then grab and drag them above all other layers).
    
11. Add some text to the center of your image. I used 48pt Impact as the font. Try to come up with something a little more creative than "click!"
    
12. Give your text a 2px outside stroke with a dark red color (mine is #b21219) and a gradient overlay from light yellow (#faf88e) to white. And you're done. Now go put your banner up everywhere and watch the traffic roll in! Check back for a tutorial on how to animate this banner to make it more eye catching.