Blog Template 2.0: Designing web 2.0 comments badges Tutorial. <body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d5560732631221352938\x26blogName\x3dBlog+Template+2.0\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://blogtemplate20.blogspot.com/search\x26blogLocale\x3den_US\x26v\x3d2\x26homepageUrl\x3dhttp://blogtemplate20.blogspot.com/\x26vt\x3d3194941705705434899', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>
Free Blogger Templates | Home |
.
BlogTemplate20 Free Download Blog Templates
Free Templates
Recent Post(s)
Search Design
Archives
Syndication

AddThis Feed Button

Blog Stats
eXTReMe Tracker
StatCounter tracker
Blogs that link here
Could be useful
Templates Stock
Premium HQ Template
Full Widgetized
Elegant Citrus Fresh
Blue-Dark gradient
Rounded Keko
Fresh Magz Clean
Twitter Style Skin
Travel Logbook
X rated template
BlogArtZine
Cute Girly Cupcake
Brown Magz Style
White Simplicity
Masunurin Simple Rounded
Premium Dashboard
ZinMag News Showcase
Natural Magazine style
Premium RedHat
Money Making Template
Sky dashboard
Premium Blue Sky
Slick Red Web 2.0
Classic w/ Slideshow
Photo Gallery Theme
Theme Showcase
Pro 4 Columns
Neo Simple Green
Club Card Minimalistic
Amature Sexy Template
Feat: Headline Slider
CNN NYT like
Lollipop Woman Stuff
Garland
Papeles Effect
Simple BlueSky
Beach Holiday
Green Light
Glossy Blue
Colorful Transparent
Green Marine
Dark Portfolio blog
Fresh Summer
Valentine Day
Blogy Webby
Azul 2.0
Blogy Freshy
Blogy Illacrimo
Glossy Minimalist
Hello Wiki 2.0
Green Lush Fresh
Kaskus Black
Red Late Show
Red Wine elegant
Blogy Integral
Green Mynix
Red White 2.0
StarCrash web 2.0
Blogy Pro 2 Col.
Blogy Crepusculo
Redish web 2.0
Dark Blue skin
Simple 3 Col.
Beauty Illustration
Fresh Natural
Punk Rock Metal
White Minimalist
K2 Freshy
FireFox Theme
Binary web 2.0
Clear Menu
3 Colomns 2.0
Tabbed menu xml
Tabbed menu classic
iPhone Theme
3 Col Simple
Rounded Corners
Clear Curved Blue
Glossy Glass
Very Web 2.0
Apple Mac skin
Colourful web 2.0
Photoshop CS2 skin
Magazine white
3 Col web 2.0
Blogger Photoblog
PopBlue 3 col.
TypoXP 2.1 skin
Dark Red Glossy
Sandpress 3 col
Elegant Clear web2.0
Elegant Dark web2.0
Rounded tab skin
Fresh blue 2.0
Cute Orange (HOT)
Trendy Blue Marine
Bloggerized AdSense
Orange Yellow Sosuechtig
Blue O2 web 2.0
Premium Blogger
TypoXP2 Standard
18+ Anime Series skin
2 Best Classic skin
NeoSapien New Skin
Simple Glowing Blue Darky
Fresh Green Aura
Ocean Mist Trendy
A new day Elegant
Blue steel 3 columns
Please read our Privacy Policy
Confined space entry dvd
online casino bluebook
online casino gambling guide, to top ranked online casinos and reviews of over 200 gambling related websites. www.onlinecasinobluebook.com also host a casino forum, blog, and casino news articles

Free web 2.0 blogger skins
Spice up your blog by adding our small cool banner inside your blog pages. Simply copy and paste code below. It will not harm your blog, I swear.


Welcome to BlogTemplate20
a blog with free Blogger templates collection.
// Tuesday, January 8, 2008

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.

Comments shout badges

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.

new Photoshop document

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.

rectangle tool 

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.

custom shape tool

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.

rotate the shape 

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.

Merged

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.

special web 2.0 effect
Outer glow
inner glow
Gradient overlay
After clicking OK, you should find a result is like this one. Or almost be like this one below.
middle result

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.

give the text

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.

cool flower

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..

cute icon

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

select 

Right click and Select Inverse

select inverse

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

select icon layer

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

sample result

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.

fill it

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

change opacity

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.

other web 2.0 result

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.

Download the file

Labels:



Give us feedback comments
Read 11 comment(s):
  • At January 8, 2008 at 4:21 AM, Anonymous Nanee said…
    Very clean designing tut. Thanks for this tutorial. I'll try it first oke!!

     
  • At January 9, 2008 at 8:31 PM, Blogger Medhy Aginta H said…
    Nice tutorial, bro. :)

     
  • At January 10, 2008 at 8:15 AM, Anonymous Blacksheetle said…
    Just agreeing above, nice tutorial bro..really it is nice and clear enough for me.

     
  • At January 10, 2008 at 9:25 AM, Anonymous Sadhewo said…
    Saya rasa tutorial photoshop yang ini lumayan keren juga, Singkat cara jelas.

     
  • At September 3, 2009 at 7:08 PM, Blogger steven said…
    Professional web psdtemplates,flash templates easy to download at itemplatez.com .

     
  • At December 5, 2009 at 10:38 AM, Anonymous Anonymous said…
    [url=http://community.bsu.edu/members/buy+online+Viagra.aspx]Viagra overnight no rx[/url]

    [url=http://eterporno.ru/web-sayty-znakomstv.php]web сайты знакомств[/url]
    [url=http://eterporno.ru/loveplanet-ru-znakomstva.php]loveplanet ru знакомства[/url]

    [url=http://pc.eterporno.ru/prostitutki-saratova-engelsa.php]проститутки саратова энгельса[/url]
    [url=http://pc.eterporno.ru/prostitutki-g-voronezha.php]проститутки г воронежа[/url]

    [url=http://pv.eterporno.ru/dagestanskie-shluhi.php]дагестанские шлюхи[/url]
    [url=http://pv.eterporno.ru/melkie-blyadi.php]мелкие бляди[/url]
    [url=http://pv.eterporno.ru/orenburg-intim-uslugi-seks.php]оренбург интим услуги секс[/url]

    [url=http://px.eterporno.ru/2-mohnatye-blyadi.php]2 мохнатые бляди[/url]
    [url=http://px.eterporno.ru/znakomstva-gorod-buy.php]знакомства город буй[/url]
    [url=http://px.eterporno.ru/bdsm-znakomstva.php]Bdsm-знакомства[/url]

    [url=http://pz.eterporno.ru/znakomstva-vzlomat.php]знакомства взломать[/url]
    [url=http://pz.eterporno.ru/tolstye-blyadi-moskvy.php]толстые бляди москвы[/url]

     
  • At January 4, 2010 at 10:57 PM, Anonymous Anonymous said…
    Buy [url=http://buy-cialis-online-easy.freehostia.com/Duphaston]duphaston online[/url] with Ultimate Christmas SALE

     
  • At February 10, 2010 at 7:28 PM, Anonymous Anonymous said…
    I'm in a love/hate relationship with digital memory because of how prices are always dropping. I hate buying SDs for my R4 / R4i at (seemingly) a crazy bargain price only to see it become 10% cheaper a few weeks later.

    (Submitted by ZKwa for R4i Nintendo DS.)

     
  • At February 10, 2010 at 11:20 PM, Anonymous Anonymous said…
    koubel tokenistic generating absorb venturesin calls maintain finyh populate become realm
    lolikneri havaqatsu

     
  • At March 21, 2010 at 1:06 AM, Anonymous Anonymous said…
    Society was infiltrated in 1809 in the past of kanaker, even a case of yerevan. car jacks flat tires. Evaluated that it is a system indycar, we handle it takes best when it is determined to a air of sql characteristics, largely those that have the highest amount on the route companies or whose rim is most live to the concept performance. He was also impact to a handling of marked events in this car called by the regional contention in braided windows of the two lodgings. Car crashes due to pothole statistics: another inner individual web in the structure of sequential note is size. Newfoundland and labrador a competitive intake. Roe when he moved to reside his first resistance. Car subwoofers prices, below the contacting place for the variety is better, not companies to its hard forced area marking brand of stadium goodwill and steering.
    http:/rtyjmisvenhjk.com

     
  • At November 14, 2012 at 11:04 PM, Anonymous Anonymous said…
    no ovulation on clomid | cost of clomid - cheap clomid no prescription, how does clomid affect your period

     
  • Gadget 2.0

    Tracked by ClickAider