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:
28 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 get the same thing as Simon.
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
The whole thing becomes white. What’s wrong?
@simon, @anonymous: After opening pattern, change its mode to RGB (image->mode->rgb), then define it as a pattern.
USA delivery of xanax.
xanax in USA drugstores.
order xanax online
generic xanax
alprazolam xanax
buy xanax without prescription
generic xanax
buy xanax without prescription
purchase xanax online
site takes too long to view tutorial… cba waiting
side meridia meridia action
Thanks Matt, I’m well aware of what web 2.0 is 
My point is that it’s a buzz word that means nothing. As anonymous stated, web 2.0 is not a style nor is it the next level of web design or the internet. It’s a term invented by marketing or media types to encompass social media sites and so on… As with all buzz words, it’s crap and means nothing.
Stop being so pedantic guys. You know what he means. By giving us long strung out definitions of what Web 2.0 means to us all, that is unconstructive. At least this guy has added value to the web by going to the effort of teaching us all something. Who cares what it’s called. Call it what you like I say. Good job dude.
Skweekah
I miss to show one’s gratitude you for positioning this. I liked it vastly much. Go vanguard!
humm… i think there’s something wrong in the tutorial, plz check thanks.
8LKQRE hi mebmasters
Thank you
good works.
Regards.
Thank you for the informative work.
Regards.
good works.
Where are the illustration photos??? Please, fix the image location, issue!
Very nice site! [url=http://apxyieo.com/qyoxra/2.html]cheap cialis[/url]
Nice site! Thank you!
Very nice site! cheap viagra
Perfect site, i like it!
Great .Now i can say thank you!
Great site. Keep doing.
Great work,webmaster,nice design!
thank you very much
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…