function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// ]]>
In this tutorial, you will learn how to create a neat button with 2D effect in Adobe Fireworks. You will also learn how to create a rollover effect for the button.
1. Open a new document in Adobe Fireworks Width - 570px and Height - 300px with a dark background #333333.
2. First let’s create a Rounded Rectangle using the Rounded Rectangle tool from the tools panel with border "2px" "Soft Rounded" "#D1CFDA".
3. You can draw with the Pen Tool to get the shape of the below object else to make it easier, draw a rectangle and duplicate it & arrange as shown in the below figure.
4. Now select both the rectangles along with the rounded rectangle and go to Modify > Combine Paths > Union, so that the 3 objects will combine & become as a single object as below
5. Just apply a Linear Gradient vertically to the drawn object from #E1295F - #ED4B86 to #FC6DAD
6. We have to add the gloss effect to the button, so copy the drawn object and then paste it to create a duplicate. Fill it with the white color. Adjust the handles of the bottom points to edit until it resembles as the below picture using the Subselection tool from the Tools panel.
Finally apply Linear Gradient to the drawn object from #DCDCDE to #FFFFFF and set the opacity to 55% to make it as a shiny/reflection/glossy button effect.
7. Now using the "Text tool" type the text "Entheosweb" with Font Type : Tahoma, Font Size : 34 and Font Color : #F8F8F8. At this point we have created an awesome 2d button in pink color.
8. Next steps are concerned with the creation of second button and to apply the "Rollover" effect to those created buttons. Select the "State 1" with the Pointer tool and drag it to the bottom-right second option tool named "New/Duplicate Page". Thereafter the duplication of the page "State 1" has been made in the name of "State 2". (Note: In the older version of Fireworks, they have the name "Frame" instead of "State")
      
10. To view the "rollover" effect clearly, change the color/effect of the rollover button or the text(i.e, 2nd button). In Property inspector, set the fill to Gradient > Linear (using #0066A4 - #004069 and #1AFCFD) to the drawn object, so that it will change from pink color to blue color.
11. Next we need to change the color of the text from "white" to "blue". Set the fill color of the text to "#00FFFF", so that we have created the second button and its text in blue color.
12. After you've finished designing the second button go to the "State 1" and select the pink color button, then go to Edit > Insert > Rectangular Slice or press Shift + Alt + U to slice over the area of the button image. After slicing the button, name the selected slice area as "button".
19. To apply the rollover effect to the button, select the slice named as "button" and Right click on the mouse, there appear a pop-up window with some options. Click "Add Simple Rollover Behavior" to activate the rollover property. You can now preview and test the Rollover behavior by pressing "F12", here the color of the rectangle should change when you hover the mouse over it from pink to blue color.
20. Last step would be exporting the slices of the button as JPG or PNG to preserve the quality of the image using File > Export. In the Export dialog box, choose HTML and Images for the Save As type and save the file in the same directory that contains the website you will insert the image into. The Fireworks will automatically convert & generate the rollovers to javascript and html. While exporting, the Fireworks will save your HTML file as .html or .htm, so that you can test your rollover buttons.
21. The creation of 2d buttons with rollover effect is now completed. Well Done! Now you know how to create an awesome 2d colorful rollover Buttons in Fireworks!
Now there you go and check the below button by hover/move the mouse over it.
|
You can easily change the color of the 2d button by manually or using Filters > Adjust Color > Hue / Saturation. Here are the another set of buttons with the color variations based on the above tutorial.
I really hope you have enjoyed this Fireworks tutorial on how to create an awesome 2d colorful rollover Buttons. We do hope you find this technique useful. Please comment about your views.
You can download the rollover buttons here
