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.
15 Comments:
You can add a blur effect to the star to soften the sides ...
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.
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!
@chandru
Are you sure that you are on the correct layer - make sure the layer of the star is selected when using the tool.
what is the font you use for bata, are you using some other tool to do that.
The star isn't showing up for me, what should I do?
Thanks,
Binny
I meant when i click done the star doesn't show up, the new layer does, but there isn't anything in that layer
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.
Great tutorial! Thank you :D
very good tutorial
This is a nice tutorial for web 2.0. Keep it up!
===========================
http://wwww.lancecorner.com - technoblog
Thank you very much for help.
Greetings from Germany
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!!
Why is it called a Violator?
Congrats Binny for your support in spreading the word about GIMP and free software and ofcourse, for your will to share your related skills
Post a Comment