Badge 'n Button

Websites include many elements that the user can interact with. One of the most popular elements are buttons. They get the user to interact with the website.

Using a web 2.0 badge and pill box style button you can create an affective button that will get the user to click on it. Providing support content that will also help get the user to actually click on the button.

In this tutorial I will show you how to make a web 2.0 badge and pill box button. Adding effects to make it more appealing, and adding support content.

The base

We're going to start off with the pill box button. It is a simple rectangle tool with edge of 5px

Now is a great time to get a colour scheme set for the design. I chose blue, and gave the pill box some gradient effects, and stroke.

Adding effects

Adding some more flair to the button. One effect I find to work well in many situations is diagonal line effect. I added a white diagonal line effect to the bottom half where the blue is for the design and lowered the opacity to a comfortable level. This will look something like this:

Feel free to experiment with different opacity settings, colors and try filters like overlay. Remember to always be a beginner ;)

Now on to the badge!

Now for the very popular web 2.0 badge. This is an effective weapon in web design. Use it to express a point that needs to pop-out above the rest of the content. Creating these badges in photoshop CS2 is quite easy. Just select the polygon tool and change the following: