Learn to make an easy banner in a few simple steps.
1. Create a new file 478 x 60 pixels and make a Linear Gradient #1e1e1e to #3f3f3f
2. Then with the Custom Shape Tool and using Fixed Size we’ll make a new shape.
3. Now click over the layer and Rasterize it.
4. Then go to Filter/Distort/Twirl and put 150°.
5. You should have something like this:
6. Make a selection as shown below then right click over it and choose Feather and put 25px then hit Delete and press Ctrl+D to deselect.
7. Then change its Opacity to 5%.
8. Now we’re making a “Web 2.0 Style Badge”. Create a new shape with de Custom Shape Tool but with #58b7ee for the color.
9. Rasterize it and while pressing Ctrl, click over the thumb of the layer to select it then go to Select/Modify/Contract and put 1px.
10. Create a new layer and make a Radial Gradient: Withe to Transparent as shown below.
11. Now add some text, I used Segoe 15pt and 25pt.
12. Then add a Drop Shadow.
13. Then a Gradient Oerlay: #ebebeb to #ffffff.
14. So far you should have something like this:
15. Add more text, I used Segoe again 20pt and 25pt and I reflected it, to reflected it just duplicate the layer and Rasterize it and go to Edit/Transform/Vertical and make a selection and put it 15px as Feather and hit Delete a few times . Notice I moved the first shape to get thiner lines.
Rate Tutorial:
27 comments on this tutorial
yea indeed, i like it 
Very nice
This tutorial is poorly written, i cannot find the first custom shape tool you use, and i dont know what colours you used for the badge.
Brilliant!
[…] www.pscloud.com hat ein sehr feines Tutorial veröffentlich wie man einen simplen aber schönen web 2.0 Website Banner macht. Das ganze ist in englisch verfasst. Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können. […]
[…] Simple Web 2.0 Banner […]
Well nice tut!
@Jay:
I had a hard time finding the first shape as well but eventually noticed the thumbnail in the 2nd image. It’s called “Registration Target 2″ and can be found in the “Symbols” group.
The colors used for the badge are all mentioned in the text. #58b7ee for the background and a
#ebebeb to #ffffff overlay.
by eil
by robin
[…] Simple Web 2.0 Banner […]
its nice tutorail thank you
thank you for tutorial
i think you should give psd files with tutorials. thanx
It’s very nice a tutorial. Thank you.
[…] Simple Web 2.0 Banner […]
where did the images go 
Thank You Vey much
Thanks for this tut.
Nr. 9. plz explain.
Please can you tell me where symbols is. i cant find it.
Sweet Tut !
Nice set. They are easy to make, but even easier to copy/paste
Amazing mate..
Thanks for the post
Cheers!!
Prabhath
[…] 10. Create a new layer and make a Radial Gradient: Withe to Transparent as shown below. Source: Simple web 2.0 Banner | Pscloud This is an example __________________ Click ‘Donate’ for help me! […]
Thanks very nice
Very nice twirly effect, very unique.
Nice outcome