Simple web 2.0 banners

Simple web 2.0 banners

Posted on: March 19, 2010 Category: Website Tips Comments: 0

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.

Photoshop Tutorials. Final Result.

Post your Comments

Fill out all required fields to send a message. You have to login to your wordpress account to post any comment. Please don´t spam, thank you!