Fancy Rss Button Tutorial

In this Adobe Fireworks tutorial , you will learn how to create a fancy rss button for your blog / websites.

Part 1 – Creating the fancy square.

1.) Start by creating a new fireworks document , 250 x 250 dimensions or more , choose a darker background color or black.

2.) We must create a 64 x 64 size square using the rectangle tool. Change the rectangle roundness into 40. Change the fill type of the rectangle from solid to radial. Add some color sliders like the technique we used in the orbs tutorial.

3.) Now that we have a square with a radial gradient, we need to change the position of the gradient and extend it , just use the pointer tool and move the gradient. Refer to the image below, the point here is to make the other side lighter.

4.) Next step is creating our left highlight. For steps a to d, refer to the image below

a. Right click on the square and click duplicate or u can use the keyboard shorcut of Ctrl + Alt + D. Duplicate the square again so now you have two more duplicates or you can just hit the redo button. The process here is to create 2 more squares, so we can use them for the punch technique.

b.) Move the first duplicate to the lower right , change the fill color to black ( helps make the hilight visible )

c.) Select the black duplicate and hold shift, select the first duplicate square. Now we will notice the two squares are now selected. Then click modify , combine, then punch.

d.) You will notice that the hilight is there but  not visible, just use the pointer tool and move the position of gradient upwards, the hilight will now appear =)

5.) Now we will create our 2nd highlight. Again , look at the image below for the steps

a.) We need to duplicate the original square again , right click on the rectangle, and click Edit , then Duplicate.

b.) Draw a circle, with a width of 116 and a height of 82. Select the circle and the duplicate square again ,and click Modify > Combine Paths > Intersect

c.) Now the intersected object appears with a radial gradient.

6.) Refer to the image for steps a to d  below.

a.) We need to change the gradient type of the intersected object ( the one we intersected in step 5b), change the fill type from radial to linear

b.) Change the layer mode of the intersected object from normal into pin light.

c.) Now we will be adding our 3rd highlight. Draw a 49 x 19 circle, you will notice that it retains the gradient fill of the previous objects we have created. We need just one fill color , #00FFFF , or you can use the color picker and select one of the brighter blues, usually works for me

d.) Use the distort tool and try distorting the circle a bit,  try to experiment on what position you think looks best, always remember if the feathered circle goes out of boundary on the square, just try to reposition it.

7.) Now we will be dealing with the corner highlights , this technique takes a little time to master,  you might want to zoom x 3 if u want to get a good look at the corners.

a.) You can duplicate the 3rd hilight we used, then scale it down, applying the distort techniques again. Change the layer mode from normal to overlay.

b.) Duplicate the corner highlight so we can put it on the top left , click the rotate 90 degress CCW button , then move it to the top left.

c.) Find the first highlight we created, and change the edge type from Anti Alias into Feather, feather it by 1

d.) Select the original square  ( the first object we created ) , and we add a drop shadow filter. With these settings, black fill color, opacity 72 percent and softness by 6. You can change the canvas color to see the drop shadow if you want

Now that we are done with part 1, the next step is creating the rss symbol , you might want to start on a new canvas for this or just increase the canvas size if you want.

Part II – Creating the rss symbol

8.) Use the doughnut tool to create a circle 90 x 90 size . Change the fill color of the doughnut into white.

9.) If you notice while  clicking on the doughnut, 3 yellow points appear, click the one that says Inner Radius , try to scale it up so we can increase the radius size.

10.) Then we duplicate the doughnut ,and scale it down to 60 x 60 , allign the circle to the circle, you can use the mouse / keyboard / or selecting both doughnuts to click the center vertical axis and center horizantal axis tools.

11.) Now that we have our doughnuts properly alligned, you will notice that the smaller dougnut inner radius has increased, we need to decrease it by clicking the inner radius point. It takes trial and error to get it right. Select both objects, and click Modify > Ungroup


12.) Then select both doughnuts again , and click Modify > Combine Paths > Union. Create a 50 x 50 square using the Rectangle tool. Allign the square to the top right , as shown in the image, readjust the position of the square if u want. Remove the fill color of the square and add a stroke color, like red or blue.

13.) Now select the dougnut , and the square, and click Modify > Combine Paths > Intersect.

13.) All we need to do is add a circle , make a 12 x 12 circle and position it as shown in the image, feel free to readjust if necessary. Then Select the circle and the doughnut and click Modify Group.This will be our rss symbol.

14.) Last step would be inserting the rss symbol we created into the square in part 1. Add a drop shadow filter with an opacity of 53 , softness of 2 , and change the shadow color to #3399CC. By default , the color of the drop shadow is black, what I usually do is find a darker color in my design using the color picking tool in the filter.

Now there you go, just check all your layer objects, make sure the some of the objects dont feather out of the image, add fancy backgrounds if you want, or change the colors, feel free to experiment. You can download the source file [download id=”13″]

If you have questions in this Adobe Fireworks Tutorial , feel free to comment below.


14 replies
  1. blue2x says:

    hi mko , thanks for visit my new blog, actually i just started this blog like last week or so, tons of fireworks tutorials and sample files coming your way, any specific tutorial or technique you might want to know =) just tell me

  2. Steve Rose says:

    Nice tutorial. I liked the idea of moving the radial point of origin to modify the first highlight. I'm a FW user, and there just aren't enough tuts for it.

    I've been using blend modes for a while, mostly the "soft" ones. There are several that I have no idea what they are good for. I mean, I can see what they do, but when would you want to do that?

    • blue2x says:

      Hi Steve, thanks for visiting my blog, I saw both of your tutorials , the grunge one rocks ! Yeah me too, I mean the blend modes are explained in the adobe fw help documents but some serve no purpose actually , i believe some of these were made for ps and that it was given to fireworks for compatibility purposes in importing and exporting files

Trackbacks & Pingbacks

  1. […] Fireworks Tutorials months ago that you guys might want to check. Fancy Rss Button Tutorial : Fancy Rss Button Tutorial | Blue2x Blog Simple Orbs Tutorial : Simple Orbs Tutorial | Blue2x Blog There are other tutorials / sample […]

  2. » 19 RSS button tutorials using Photoshop, Illustrator, Fireworks says:

    […] RSS Button with Fireworks […]

  3. says:

    Fancy Rss Button Tutorial…

    Learn how to create your own custom rss buttons in adobe fireworks 8 and up by following this tutorial….

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply