Image Design your comment badges for blogger/blogspot

Again, this tutorial will try how to make a web 2.0 stylish comment badges using Adobe Photoshop CS2 in 11 easy steps. All steps explained so simple and clear enough to understand. Blogs include many elements that the user and readers can interact with. One of the most popular elements are comments shout button. They get readers to interact with the blog and give feedback. Now you can make your own comment badge and add it to your comments list. Of course the main idea of adding web 2.0 comment badges that is to make our blog more attractive. Here it is the final result of this tutoial should be. You can make it more better with your own creativity.

The way it made is very simple but it comes with trendy cool result. Oke so lets begin our tutorial. Please make sure you are ready with your Photoshop open.

1. New Document
Make a new PSD document. Hit Ctrl+N on keyboard or by selecting File menu than click New. A dialogue box should appear. You can use any width and height value but it'd be better to use 400x400px than crop it later as we need.

2. Set the Base
Change your foreground and background colours. I use #99ff00 at Foreground and #00cc00 at background. Later on you can plan any color scheme for your web 2.0 comment badges from this step. Here I would like to make it green. In web 2.0 green is the new gery. Green is the unofficial color of web 2.0. As the new grey, green looked like more simply natural.

3. Rounded Shape
Time to create the basic shape. Bring Rounded Rectangle Tool and make sure to match this setting. There is no defined size of your rectangle should be. Just improve and match it to fit your blog layout.

4. Custom Shape
Now change your rectangle tool to Custom Shape Tool. Look for the shape like this one below. If you can find it, try to reset displyaed items to All. Just click small arrow of its right.

5. Draw & Rotate
Draw your new shape below your previously rounded rectangle. Than Rotate the shape to 180 degrees. Hit Ctrl+T on keyboard than set angle properties to match below.

6. Merged
You need to unify your two shape. Just move (nudge) it to be shaped as below. Now select the shape layers, hold Ctrl button than click the two layers of your shapes. After both layer selected, Right-click on it and select Merge Layers to merge them as one layer.

7. Web 2.0 effects.
It is time to manipulate your new comment badge to be more web 2.0 stylish. With the merged layer still selected, now open up Layer Blending Option. Select Layer menu, than Layer style, now click Blending option. Or simply right click on the merged layer and select Blending option. Blending effects we'll use here are Drop Shadow, Outer Glow, Inner Glow, and Gradient overlay. Set them as below illustration.

After clicking OK, you should find a result is like this one. Or almost be like this one below.

8. Texting
Give some text on it. As you'll use this badge for comments badge, so we'll type some words such "Comments Shout" or others. Use some simple fonts such Tahoma, Trebuchet MS, Segoe UI, or Calibri. Than aplly text effect like below illustration. Just bring up Blending option for text layer.

9. Cute Icon
Spicy up a bit your comments badge. In this case just look for cool flowered shape, or other cute shape from Custom Shape Tool.

Apply this blending effect to make it more cute. Use strong colour and combine it with basic shape colour. Here I use Pink and Yellow..

10. Crop Icon out.
CTrl+Click at merged badge shape. While your shape is selected, right-click on it than click Select Inverse.

Right click and Select Inverse

Now click on Icon layer to select it. And than hit Delete button on keyboard.

If you did it correctly you should find result as below.

11. Spice a bit
Make a new layer, hold Ctrl+Shift+N on keyboard. Use Eliptical Marquee Tool and draw a little on your new layer. Now fill it using white colour.

Last step, change the Layer Opacity to about 50%.

Done
Finally, creating comments shout button in web 2.0 design is quite easy as described above. But steps on tutorial above are note absolute state to do. You can improve your skills, idea, creativity, and will. Improve your mind to create design. Here some of my other results using this tutorial.

Here you can download the PSD file of this tutorial to make it easier for you to get practice. But after you'd finished making your own, why don't you post it here and let me know your cool badge works. I almost forgot, if you also like this designing tutorial, please digg us or submit us to your fave social bookmarker.