[fireworks] web 2.0 badge [tut]

Printable View

15-02-2008, 11:04 PM
Hypertext

[fireworks] web 2.0 badge [tut]

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

http://img86.imageshack.us/img86/6627/84558417wn4.jpg

Select your "Star" tool.

http://img149.imageshack.us/img149/2060/35710367io9.jpg

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

http://img442.imageshack.us/img442/666/20942846az9.jpg

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

http://img176.imageshack.us/img176/9343/30406399zg3.jpg

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

http://img352.imageshack.us/img352/663/27225001lq2.jpg

Choose a "Linear" gradient.

http://img86.imageshack.us/img86/9773/92514627ga0.jpg

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

http://img99.imageshack.us/img99/5939/70142206pj7.jpg

Apply a drop shadow with the below specs.

http://img341.imageshack.us/img341/5872/78513721na3.jpg

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

http://img211.imageshack.us/img211/602/31881511gx5.jpg

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.

http://img86.imageshack.us/img86/460/10sx7.jpg

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.
http://img149.imageshack.us/img149/6578/11ku1.jpg

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

http://img442.imageshack.us/img442/20/12te1.jpg

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!
15-02-2008, 11:32 PM
Zedtu

To be honest, that badge looks (ick :P)

I love these badges though,

http://www.web20badges.com/
15-02-2008, 11:39 PM
Unpredictible.1

Quote:

Originally Posted by Zedtu

To be honest, that badge looks (ick :P)

I love these badges though,

http://www.web20badges.com/

http://divspace.com/fireworks/how-to...-in-fireworks/
15-02-2008, 11:42 PM
Zedtu

Laugh out loud at him.

Was Reconix, was you testing that's divs out too?
15-02-2008, 11:43 PM
Unpredictible.1

Quote:

Originally Posted by Zedtu

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.
;)
15-02-2008, 11:51 PM
theJOSH

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

YOU
SUCK
15-02-2008, 11:58 PM
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.
15-02-2008, 11:59 PM
theJOSH

Quote:

Originally Posted by Reconix

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.
16-02-2008, 12:00 AM
Unpredictible.1

Quote:

Originally Posted by Reconix

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.
16-02-2008, 12:03 AM
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!
16-02-2008, 12:13 AM
php.net

Go away, Reconix.
16-02-2008, 12:18 AM
Zedtu

@Reconix: I think it is obvious you should go back to the Habbo section, where you belong.

The web design section just doesn't seem like it is for you.
16-02-2008, 12:19 AM
php.net

Quote:

Originally Posted by Zedtu

I think it is obvious you should go back to the Habbo section, where you belong.

The web design section just doesn't seem like it is for you.

Directed at whom?
16-02-2008, 12:20 AM
Zedtu

Quote:

Originally Posted by php.net

Directed at whom?

Reconix, sorry :)
16-02-2008, 12:22 AM
Unpredictible.1

http://i211.photobucket.com/albums/b...animation2.gif
16-02-2008, 12:50 AM
Bojangles

To think I was going to Rec him for his last "tut"
Bet he stole all them too.
Thats so sad, first you steal layouts now you steal tuts. And you have a go at me saying I can't design? Why don't you start making something thats your own then come back to me you sad person. And as for claiming that tut as your own your really pathetic to be quite honest. Just leave.
16-02-2008, 03:17 AM
Verrou

You even forgot a step -.- Mine turned out hot thanks to original tut:
http://andrehamon.com/badge.png
16-02-2008, 06:37 AM
Hypertext

That's because I didn't copy it so... just shutup? I had to learn it from somewhere? I evidently used the information I had previously learned.
16-02-2008, 11:10 AM
Bojangles

Yes you did copy it and then at the bottom said "MY TUT" It's not your tut. Dude you need to stop using the Web and Dev forums, if all your going to do is steal peoples hard work then go. Also don't bring up that nonsense about having to learn it. Most GOOD photoshop designers have spent ages testing out all the tools on their own with no help what-so-ever.
16-02-2008, 11:59 AM
theJOSH

Quote:

Originally Posted by Reconix

That's because I didn't copy it so... just shutup? I had to learn it from somewhere? I evidently used the information I had previously learned.

Yes you did..
You purposely missed out a step to try & hide it.
16-02-2008, 12:01 PM
php.net

Go away, Reconix. You're a pain in the ****.
16-02-2008, 12:09 PM
Meti

To be honest,, it doesn't look so good... But it's good that you're trying to learn other people how to do these things... +rep for activity
16-02-2008, 12:14 PM
php.net

Quote:

Originally Posted by BigMuscle

To be honest,, it doesn't look so good... But it's good that you're trying to learn other people how to do these things... +rep for activity

Are you honestly dumb or something?
16-02-2008, 12:36 PM
theJOSH

Quote:

Originally Posted by BigMuscle

To be honest,, it doesn't look so good... But it's good that you're trying to learn other people how to do these things... +rep for activity

L
o
L

You fool. HE RIPPED SOMONES WORK, AND YOU'RE REPPING HIM?

OR DON'T YOU UNDERSTAND ENGLISH?!
16-02-2008, 12:46 PM
Bojangles

He could of atleast made a different shape, changed the colour, changed the text. To make it look somewhat like "his" lol..
16-02-2008, 03:19 PM
Unpredictible.1

Quote:

Originally Posted by iGOboy

He could of atleast made a different shape, changed the colour, changed the text. To make it look somewhat like "his" lol..

What I was going to say.. if he done that then he could of got away with it.. lmao
16-02-2008, 03:33 PM
Bojangles

Quote:

Originally Posted by Unpredictible.1

What I was going to say.. if he done that then he could of got away with it.. lmao

Lmao, kids don't think these days:)
16-02-2008, 05:11 PM
Hypertext

Rofl! The idea was to keep it similar to how I learnt *because!* it looks good.
16-02-2008, 05:35 PM
Bojangles

No you mean the idea was to steal it and claim it as your own.
16-02-2008, 05:41 PM
theJOSH

Quote:

Originally Posted by Reconix

Rofl! The idea was to keep it similar to how I learnt *because!* it looks good.

Were you testing it's divs?