There are many different tutorials on how to create Web 2.0 style graphics with Photoshop, but I have had a hard time finding one for Fireworks. Maybe it because only 3 people use Fireworks, including me, but hey, that is 2 guaranteed visitors! Anyways, let me know if you find this useful.
Now, lets take a look at our finished product first, just to make sure you actually care to read further:
So, if you are in fact in the right place, then let’s start the tutorial. Open up Fireworks (I am using version 8.0) and create a new file. I have chosen to make the canvas 400 by 400, just to give myself a little extra room to work.
Now, we will choose the star shape tool and draw a star to your liking. Then, when you select your newly created star, you will see several little yellow squares. These are adjustable sliders that control the various aspects of the star. Use them to tweak it to your liking. I made mine with 12 points and then rounded off all of the sharp edges. Here is what I have so far:
As you can see, we’ll us a simple orange (#FF6600). Now, we add a diagonal gradient that goes from our orange to white. Lets start the gradient in the middle of the image and move it well past the end of the star. It should look something like this:
Now we will add a few little effects to add more depth to the base of our badge. Lets put a drop shadow (distance: 6, opacity: 65%, softness: 4, angle: 226) and an inner shadow (distance: 0, opacity: 65%, softness: 5, angle: 315). Our image now looks like this:
Alright, now this baby has some depth and is starting to look shiny! Ok, now to complete the shiny finish, we will need to duplicate our star, so while the star is selected, press ctrl-alt-d. Now move your second star off to the side so that you have room to work. The next step is to select the pen tool (under vector on the left) and click once above and to the left of your new star. Click the tool again, below and to the right of the star.
Now, we can click an hold our second point and adjust the curve of the line we just made.
Now, we will just complete the shape with the pen tool and end up with something like this:
Now quickly remove the effects from our new star. They are not necessary for this part. So next, we select both the shape we made with the pen and the second star. Now go to the top menu and select modify-combine paths-punch. Our image now looks as follows:
Now we will apply a white to black (the preset option) gradient and set it from the top right to the bottom left. We will also change the blend mode to screen (in the properties bar). Now we can reduce the size of this selection proportionally, but only just slightly and then position it over the first star:
Now, how shiny is that?! The last step is to add some text and put it beneath the chopped star layer and voila, you have a pretty badge! I chose a rounded arial font and rotated it to match my gradients and put a short drop shadow.
If something isn’t clear, feel free to leave a question in the comment area and I will try to address it.
oh good!
This maybe one of those masters of the obvious, but I get in a jam at this juncture:
Now we will apply a white to black (the preset option) gradient and set it from the top right to the bottom left. We will also change the blend mode to screen (in the properties bar). Now we can reduce the size of this selection proportionally, but only just slightly and then position it over the first star.
I end up with a very noticeable line in the middle of my graphic. Where am I making my mistake?
welcome my web
You are talented my friend ,
thanks for sharing these precious informations, you are world wide
I ll follow you!!
hi how do you round off the sharp edges of the polygon. i tried to drag the handles but it wont work like the way you did.
@mika: i sent you an email regarding your rounding problems
Nice tutorial!
Matthew -
You could try the rounded polygon autoshape:
http://www.senocular.com/fireworks/extensions.php?id=0.39
Also, check out http://www.fireworksguruforum.com and the community will help ya there.
Errm could you possiblysend me the font you used by any chance. I did a google search but i don’t want to pay for a bloody font.
Great Work! It’s pretty hard to find good fireworks tutorials, but those are great!
nice info,..!
wow that is good work :and make a good practices for us.
thanks for sharing. very nice. çiçek.
Errm could you possiblysend me the font you used by any chance. I did a google search but i don’t want to pay for a bloody font.
hi how do you round off the sharp edges of the polygon. i tried to drag the handles but it wont work like the way you did.
I am well-introduced with photoshop.I have also some job related to it.Your tutorial is very useful.It helps me much.
thanks for posting and giving a great blog
It is oddly satisfying to do that. Thank you, that makes my night.. It will make my artwork easier. @term paper
Glad to see that this site works well on my iPhone , everything I want to do is functional…
Es agradable para leer esto. Lo que usted comparte con nosotros es muy bueno. Gracias!
It is really nice tip to make logos.
Great tutorial thanks.
ASD
The bulk might make it more noticeable — and a conversation starter: “Where did you get that huge watch
Post a link to your website and blog site. Add pictures and encourage interaction among members.
Doing all of these will create a great product or service recall among your members and will develop brand loyalty.
I have been reading out some of your posts and i can claim pretty good stuff. I will definitely bookmark your site.
I understand how to do it. It is the best tutorial so far.
There are so many offers a great way to much better sound then becomes the only well supported and well-being and fitness you will need a real pair of shoes is the main battle tank.
Doing all of these will create a great product or service recall among your members and will develop brand loyalty.
Adding Ice Cream Sandwich and the Beats audio application to the HTC Vivid will only enhance a handset that already contains a respectable hardware and software profile.