Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.

Bin-Blog

Creating Badges/Violators using Gimp

In the last post we saw how to create a Button using Gimp - now to create another prominent element of Web 2.0 design - badges or violators. Very useful for under construction beta sites.

Create a new image, with 200x200 size and a white background.

The Star

Select 'Filters->Render->Gfig...'

Select the star tool(). Now increase the number of sides to 12. Then click 'Browse' and select the 1 pixel brush. Now click and drag anywhere inside the image to create a star. Try to make the star appear at the middle of the picture.

Select the 'Move Single Point' tool() and move the corner of the star to create this image.

Click 'Close' to go to the image window. The star we created should show up there. Choose the 'Continuous Region Select' Tool() and click the inside the star - this should select the star.

Gradient Fill

After this we have to create a gradient inside this star. For that, choose two different colors as your primary and secondary colors. I used #4d4c4c and #d0d0d0. Select the gradient tool() and set the 'Shape' as 'Radial'. Create the gradient inside the star.

You should get something like this...

Shadow

Select the full star by clicking outside the star. This selects everything other than the star. Now inverse the selection using 'Select->Invert' - this should select just the star.

Select 'Script-Fu->Shadow->Drop-Shadow...' and enter these values and click 'OK' to create the shadow.

  • Offset X : 2
  • Offset Y : 2
  • Blur Radius : 4

Now you should have this...

Use the text tool() to write whatever you want inside the star. 'Beta' is a favorite for Web 2.0 Designers everywhere. You can even give a tilt to the text using the 'Rotate' tool - if you wish.

This is what I had in the end...

The XCF file for this exercise.

16 Comments:

Rui Moura said...

You can add a blur effect to the star to soften the sides ...

Oktyabr said...

Wow! Just exactly the tutorial I was looking for! Thanks!

Hey, if you ever want to share more of these stop by http://www.linux-studio.org and make yourself at home.

Chandru said...

thanks buddy!
but i'm not getting the Select Continuous Region right. the thing is, it's not selecting at all. what should i do for that?
thanks again!

Binny V A said...

@chandru
Are you sure that you are on the correct layer - make sure the layer of the star is selected when using the tool.

macewan said...

Thank you.

Anonymous said...

what is the font you use for bata, are you using some other tool to do that.

Anonymous said...

The star isn't showing up for me, what should I do?
Thanks,
Binny

Lexor said...

I meant when i click done the star doesn't show up, the new layer does, but there isn't anything in that layer

Anonymous said...

If you alpha-to-select the badge and then make the selection a path, Then make the path a selection again it will make the edges smoother.

Memphis said...

Great tutorial! Thank you :D

shital said...

very good tutorial

Anonymous said...

This is a nice tutorial for web 2.0. Keep it up!






===========================
http://wwww.lancecorner.com - technoblog

Marc said...

Thank you very much for help.

Greetings from Germany

Anonymous said...

Hi Binny, the tutorials have been quite useful to me in creating professional looking logos for my own site. Thanks and keep up the great work!!

Anonymous said...

Why is it called a Violator?

cos minus said...

Congrats Binny for your support in spreading the word about GIMP and free software and ofcourse, for your will to share your related skills