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
Rate Tutorial:
12 comments on this tutorial
I think that was an amazing tutorial!
@ Evan, ‘Web 2.0′ is a name given to the next generation of web graphics. Sleek, shiny and lightly coloured images is what its all about (:
hmm, when i define the patern and i fill it with the patern the whole thing comes white… what is wrong?
This style is not the next generation.
This is a glossy style that has been around wayyy before this “web 2.0″ hype started.
web 2.0 is NOT a style.
I think web 2.0 is a trend like many others. It definably has a theme to it but I’m not sure if this banner is it. Your other banner hits on the mark in my oppinion. http://www.pscloud.com/web-design/simple-web-20-banner/
Also I think web 2.0 means user content friendly websites.
Matt: Web 2.0 is not about this kind of graphics, web 2.0 is about a group of new features and possibilities that HTML5, CSS3 and the Social Media can offer us.
I’ve any neighborhood venture and also Bing provides Several numerous item listings for this, all of which tend to be wrong. How do I generate the proper record as well as delete the others? Google does not indicate wherever tips on how you can try this, will be able to inform.
Hello, Wonderful job! Magnificent website! Thank you for this specific material I had been seeking all Msn to be able to locate it!
VemseumsnVBtt lenovo tablet x201 Iahtiygggtjkl
Nice tutorial for banner ..Please share some more banner design tutorials
Thanks
Wow, this paragraph is good, my younger sister is
analyzing such things, so I am going to let know her.
Not such a good tutorial. I don’t mean to be pessimistic but in particular the header irks me, ‘Web 2.0 banner’, whatever that means…