by Nan Gibbons, Fitness Expert & Motivational Speaker

"Click here!" "Buy this!"

You've seen them - the brightly colored buttons on sites that encourage you to read more or buy a product. Web badges are integral to any site's success - especially if you have a product or service you want to get noticed. Those who visit your site will find it easier to get what they came there to see - you as well as your product.

Creating a web badge for shipping options is simple. Whether you want to use the numerous tools for creating a badge or simply create a stylish one yourself, it should be an easy undertaking. If you decide to use the cheesy online shipping options badge generator, there are quite a number available. However, making the personal handmade shipping badge is perhaps preferred. A web badge can be such a crucial tool in attracting visitors’ attention to certain sections of your e-commerce site or blog.

If you want to create a customized badge, Photoshop comes in quite handy. With some basic knowledge of Photoshop, creating your personalized web badge should be simple. There are different kinds of tutorials on using Photoshop that can come in handy. This tutorial showcases how to create a simple but classy web badge using Photoshop.

Open a New Document
To start off, open a new Photoshop document and choose any document size you prefer, whether 400 x 400 or any other. This tutorial uses the size 400 x 400 document but other options abound. Using your understanding and knowledge of Photoshop, create a classy background you prefer for your Canvas. You will be working from this Canvas.

Create the Shape
To create your badge’s shape, maneuver to the Photoshop Tools Menu and choose Polygon Tool (U). On the highlighted arrow, click the drop down menu and check shape options. You can now create a basic shape, but can also change the settings to meet your preferences. Go to layer, new layer and drag the shape onto the Photoshop canvas you had created. Doing this will give you a basic badge with a color of your choice.

Layer Styles
Layer styles simply allow you to make your badge classy. In the layers palette, right click on the badge layer and choose Blending Options. Select the Outer Glow, Inner Glow and Gradient Overlay options.

To create good highlights, go to new layer tab and choose badge pixels. Do this by pressing the Ctrl tab and clicking on the layer thumbnail.

At this point, reduce the new creation by nearly 2 pixels. Go to modify tab and use a value that fits your preferences.

Once here, create a new layer and color it white. Hold on the down and left arrow tabs once each. Proceed to press the delete tab, and you should get an improved badge. Contract the selection around the badge layer again by 2 pixels or any other value you deem fit. Make a new layer and choose White to Transparent gradient.

By now, your badge looks a lot better and nicer. You can now add any text you want on your badge using any fancy font you prefer. You can make as many adjustments and customizations as you want, this is simply a guideline to start you off.


Nan Gibbons is a fitness expert and motivational speaker who works with athletes all over the world. In addition to being health obsessed, she also loves blogging and techno music as well as her lab/golden retriever mix, Cody.

Twitter: @healthnut2011

Filed under
Return To