[fireworks] web 2.0 badge [tut]

[Hypertext]

Yep, it's here! What nobody's been waiting for!

OK lets start straight away, no time like the present! Please check out the circles in the screen shots for important information

Create a new document with the below specs



Select your "Star" tool.



Draw a 200px X 200px star, and align it using vertical center and horizontal center.



Hold the points changer and increase it to 21 or something in that range.



Select "Radius 2" and scroll it up so it looks more badge-like.



Choose a "Linear" gradient.



Use the below colors for this gradient. And: Remember to change the gradient placing by the circled options.



Apply a drop shadow with the below specs.



Select your "text" tool and use the below specs, including the text formatting.



OK heres the harder part, we need to add a bevel, to do this without using effects: Select only the text and hit CTRL+C and then hit CTRL+V, once you have your copy scroll it down one pixel by hitting the down key, change the color to white and the opacity to 45% or change it to suit your needs, repeat this process, but this time move it one pixel up (if your copying and pasting your already copied text you will need to move up to pixels obviously) but change the color to black.



Now heres where it gets a litttle bit tricky...

Go ahead and select the Ellipse Tool.
And create the inner circle, which is going to hold the text on the top of the badge, and give it a width and height of 80 pixels. Center the circle just like we did with the text using the align tool. Now for the harder part..

Now select the Text Tool and change the font to Verdana with a size of 12 and a color of white or #FFFFFF. Write out Habbox VIP (or you favorite text) and position it the best you can just below the the top of the circle, vertically centered. With the text still selected, hold down Shift and select the circle, so both items are highlighted. Hit Ctrl + Alt + 4.

Now assuming you still have both the circle and text highlighted Hit Ctrl + Shift + Y.

Now make sure "Auto-Kern" is turned on, and give it a text offset of 28

Ok, now repeat this step, except with the circle being a 95px x 95px width and height and instead hit Ctrl + Alt + 6. Now, go to text --> "Reverse Direction" And choose a text offset of 50.


This shouldn't look right yet as you still need to give all text a kerning of 22. If this still doesn't look right read what I say at the bottom






Congratulations you have completed my tut!

If it doesn't look right, you've probably used some different text if this is the case you will need to play around with some different text offset values and maybe kerning and sizes etc..


Hope you enjoyed it, bye for now!

[Zedtu]

To be honest, that badge looks (ick )

I love these badges though,

http://www.web20badges.com/

[Unpredictible.1]

To be honest, that badge looks (ick )

I love these badges though,

http://www.web20badges.com/

http://divspace.com/fireworks/how-to...-in-fireworks/

[Zedtu]

Laugh out loud at him.

Was Reconix, was you testing that's divs out too?

[Unpredictible.1]

Laugh out loud at him.

Was Reconix, was you testing that's divs out too?

If his going to make tutorials, at least make something that you cannot google on.

[theJOSH]

And I was going to say good one to you Rec. :rolleyes:
Here's my lovely negative comment:

YOU
SUCK

[Hypertext]

Thats where I learnt from. I attempted the badge all by myself?

Sorry? Did you expect me to just instantly know how to do badges, I learnt how to do these badges like a few months ago.

Oh, so you all just instantly knew how to make badges? kk.

[theJOSH]

Thats where I learnt from. I attempted the badge all by myself?

Sorry? Did you expect me to just instantly know how to do badges, I learnt how to do these badges like a few months ago.

Oh, so you all just instantly knew how to make badges? kk.

If you make a tut, then yes, you should know how to do what you're making.
You posted a tutorial which isn't yours.

[Unpredictible.1]

Thats where I learnt from. I attempted the badge all by myself?

Sorry? Did you expect me to just instantly know how to do badges, I learnt how to do these badges like a few months ago.

Oh, so you all just instantly knew how to make badges? kk.

No, that's not what we are saying.

What my post was about was why give a long tutorial when you got it from that?
You simply could of made your own or gave a link out instead of copying another site and saying its your own.

[Hypertext]

I dare you to find another site that creates a web 2.0 badge with circled text and gradients, it's something already made, so it HAS to be relative to how anybody would make it!