Sleek Web 2.0 Banner

Create an advertisement banner for your web page with a Web 2.0 look.

1. First open a new 468px * 60px file
2. Create a new layer, fill it with #3ebcf7 and apply this layer style
- Gradient: #3ebcf7 to #7fd6ff

3. Now, download this pattern, open it and go to Edit -> Define Pattern. Go back to the banner file and press Ctrl+A or go to Select -> All. Create a new layer and go to Edit -> Fill and select the pattern you just made

4. Go to Edit -> Free Transform and rotate the pattern like in the image

5. Press return and right click over the layer -> Duplicate Layer, now move the duplicated layer under the other pattern and match the squares, do this again but move the duplicated pattern over the bottom one and match the squares

6. Merge this 3 layers by pressing Ctrl+E or Layer -> Merge Down and change the layer’s blend mode to Soft Light and opacity to 33%

7. Select White as your Foreground color. Select the Rounded Rectangle Tool, create a new layer, and make a rectangle with the same height as the canvas(60px) and about 170px width

8. Apply these layer styles
- Outer Glow: #3ebcf7

- Gradient: #ffffff to #e3e3e3

- Stroke: #ffffff 2px

9. Create a new layer and write the text of your site inside the white rectangle. I’m using Arial Rounded and #e2054b

10. Apply these layer styles to the font
- Drop Shadow: #000000

- Gradient: #e2054b to #ff5389

- Stroke: #ffffff

11. Create a new layer, select the Elliptical Marquee Tool and make a selection over the text like the image below

12. Go to Select -> Inverse, select the Gradient Tool with a White to Transparent gradient and make a gradient fromtop to bottom

13. Press Ctrl+Click over the text layer thumb to select it, go to Select -> Modify -> Expand and expand it by 1px. Now go to Select -> Inverse and delete the selection(Edit -> Clear or press Del)

14. Change this layer’s blend mode to Soft Light and you should ahve something like this

15. Now write a slogan or something referring to your site in the blue part of the banner. I’m using Arial Rounded as font

16. Apply these layer styles
- Outer Glow: #3ebcf7

- Stroke: #3ebcf7

17. Create a new layer, press Ctrl+A(or Select -> All) and go to Edit -> Stroke. Apply a 1px #bbbbbb stroke to it and it’s finished