Fancy Rss Button Tutorial

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

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 here (109)