Gel Aqua-style Buttons Fireworks MX with Notoroge #001

[Notoroge 0]

Welcome to a brand-new session of 'Fireworks MX with Notoroge'. The short and skinny of it all is essentially that so many Photoshop tutorials are flooding the net constantly, and most of them are really cool, that I figured the folks that use 'Fireworks MX' are left to woddle on their own, not knowing where to start, or how to make the best of their software. So I've decided to start my own strand of Fireworks MX tutorials that will show you how to do the same stuff you can do on Photoshop, but in Fireworks. Please, if there's some cool effect that strikes your fancy, that you would want to see a tutorial on how to make, feel free to send me a PM and I'll write one when I have the time.

 

For my first tutorial, I decided I would do something that lots of web-designers love, but don't know how to make. Gel Buttons! Ever since the release of OS X, people have been using the Gel effect for anything they can get their hands on, and lots of people go: " " when they see it, and don't realize just how Easy it is to make your own! So here we go, 14 (Well, less if you don't want drop-shadows) steps to make your very own Gel buttons!

Step 1: Create a Rectangle

Make sure you make the rectangle 20px (pixels) wider than you actually want it to be when creating. It'll come in handy for the next step. For this tutorial, the dimensions of our rectangle will be 120px*30px. NOTE: DO NOT make the rectagle huge or small, and then resize it to the dimensions you want. Instead, when creating the button, look at the bottom left of screen and make sure you drag the corners to make the size you want from the get-go. Make sure you do it that way. As it'll screw up the edges when we go to round-off the button. Seriously. Make sure you do what I just said. It is key in making sure your button has the right shape.

 

Fill this rectangle in with the colour of your choice. For this example, we'll go with the 'official' colour of the Aqua theme buttons and use a light-blue. Note: Don't make it too light. This is the background colour of your button, and the background is the darkest part of the whole deal. So if you want it to look like a vibrant, shiny button, go with a dark-shade of a light colour for the background. Otherwise, the final product will look like you turned the gamma way too high, and it looks watered down. It's the difference between a pink-diamond, and a ruby.

 

 

Step 2: Rounding-off the Edges

This step is important for getting that gel-look we want to achieve. When's the last time you saw a blob of Jello or transparent tooth-paste with perfectly cornered edges? Naw, we need to make it smooth. So we'll go to the bottom middle (Slightly off to the left) of the Fireworks environment and we should see this:

Click the little drop-down arrow beside "Rectangle Roundness" and drag the little lever all the way to the top. (or just click the text, type in '100' without quotes and hit enter).

 

 

Step 3: Fixing the edges

Now at this point, it's round. But it's too round. Thank-goodness we made it 20px wider than it had to be, right? Just go to the very bottom left of the Fireworks IDE, where you should see this:

Now, where it says "Width", take 20 off the number you see there, in the example, we'll change the number to '100'. Since the original number was 120.

 

 

Step 4: Change 'Fill Type' to Linear

As seen in the image below, change the fill type to 'Linear' by hitting the little drop-down arrow beside the word 'Solid' and selecting 'Linear' from the menu that pops up. This little drop-down box is beside the box to change the fill colour in the bottom pane of the Fireworks IDE.

 

 

Step 5: Change Blend Direction

Make sure you have the black arrow selected from the pane on the left-hand side of the Fireworks MX IDE. So that you can see a little black line going through your button that has a little circle and a little box on both sides, respectively. Like thus,

Now, click and drag the circle on the line to the bottom-edge of your button. Then click the square on the other side of the button and make a straight line upwards. The box should line-up with the top border of the button, like so,

 

 

Step 6: Change the Blend Colours

Change the black to a slightly lighter shade of the same colour that you chose for the background of your Gelly-Button® by going to the "Properties" panel. Click the little box beside the bucket icon, and a little box will appear showing the properties of the shade. For now, all we'll do here is click the little-black box underneath the strip showing the colour transition. A little colour palette will appear. What we do here is click the little multi-coloured circle on the top-right of the pallette. It kinda looks like the little "busy"/"beachball of death" cursor from Mac OSX. Then a bigger colour pallette will appear in the form of a little tool-box, like thus,

 

Here, what we'll do is choose the same colour you had for your background, and then on the slider furthest to your right, and shift the colour to a lighter tone. Then just "OK" out of all of that and your button should look like thus so far,

 

If the colours are reversed, meaning the lighter colour is on the bottom and the dark colour on the top, then just go back to the little strip that shows the colour transition and click and drag the little boxes under it to the opposite corners of the strip so that your button looks like the image above.

 

 

Step 7: Creating the Glossy Effect

Alright, now that we have the basic colours and transitions set-up, we just have one more thing to do, make it look Glossy! So now we'll go to the Properties panel again and click the box beside the bucket icon to bring up that strip that shows the colour transitions. Now, click two spots under the strip, on the same line where the two smaller boxes under it are, but near the middle, so that it to looks like this,

 

 

Now, this is where you have to pay very close attention, to make sure you get maximum coolness. Click on the little box in the middle that's to the left and make it the colour of your background in the little pallette that pops-up by using the slider to the furtest to the right (Remember, click the little "Beachball of Death" to get to the pop-up pallette with the slider). Now the little box that's furthest to the left, make it slightly lighter than the backgroun colour. But no-where near enough as light as the blue that's furthest to the right. Just SLIGHTLY. Almost indistinguisheable. Now, click the little box in the middle that's to the right, and make it slightly darker than the blue that's furthest to the right. Again, only slightly. If you make the difference in colours too huge, you get really goofy results. The goal of this is to make the top transition of the button to be light, and the bottom to be dark. This is what we should have so far,

 

 

Step 8: You're DONE!

 

If you've been glancing over at your button the whole time, you'd have noticed that you've now got your awsome looking button. It should look like this,

 

 

Now, generally, this is where I'd stop. But, some people like to have a drop-shadow under their buttons, so I'll quickly take you through that. In the same Properties panel you should see a box off to the right-hand side that says "Effects". Click the little arrow beside that and select "Shadow and Glow", then "Drop Shadow", tweak it out to your liking.

 

 

These are usually the setting I use for anything. It looks best most of the time,

 

And there you have it. Your very own glossy button. TAKE THAT PHOTOSHOP!

 

[nerdy monkey 0]

wow, that's really awesome. Thank you for that tutorial

[sader 0]

Thanx Notoroge very much

I like gely style buttons very much so this tutorial was very helpful for me.

 

I have made fiew gel buttons by my self but they never was what I whanted to see. The reson was that have inserted just one color incolour transitions middle but when I tryed add to colors in the middle like you sayd I did get result whitch I wonted

And that shadow effect looks very nice here

 

Thank you that you shared this little secret

 

here's my job.

[Sprnknwn 0]

It looks very attractive. I?ll try it.Thanks for the tutorial!

[Damann 0]

Great job, i like it.The button is great and everything but now you need to write a tut on how to make a clicked on button. Submit this to good tutorials! Yah...i kinda suck in fireworks, too complicated, so i didnt bother trying the tut but its well explained.

[neokid 0]

Haha photoshop still can do it better XD

[thablkpanda 0]

Bout time we see some Fireworks tutorials round here!Props to ya bro, create another tutorial about Fireworks' built in mouseover/mouseout utlilities, and you'll be the man. (You already are, but you kno...)Mr. Panda

[^dark_c0de^ 0]

How is the name of this program?