Fireworks Tips Icon Detail Description

Use Fireworks (hereinafter referred to as FW) to design the icon mainly pay attention to two points:

One is the FW focus on the web design, not suitable for creating some too complex PS effect, please look forward to the FW CS5 PS filter;

The second is the FW editing style similar to AI, if you are accustomed to working in the PS class pixel coloring environment, please gorgeous float.

Next to the point, we take a more standard icon to copy to do the instructions, so that you can easily understand.

The following figure is a well-known EICo design created a set of icons, we want to copy the object is the picture is framed in the envelope icon. In advance, because the theme of the tutorial, we will add some details to this icon, so our final copy of the results will not be the same as the original.

Step 01

The need to copy the icon cut down as a reference to lock the layer. I am here the FW Path panel is extracted from the fireworks CS4, but it has no effect on the next operation, because I am using all the CS3 included features.

Step 02

Use the rounded Rectangle tool to draw a rounded rectangle that is similar to a sample diagram, use four rounded corners to adjust the radius of the fillet, and then press the ctrl+shift+g to break the pattern.

Then make a copy of the first rounded rectangle, move a pixel in four directions with the White Arrow tool, and create the two rounded rectangles shown in the figure (note that the white arrows handle the eight nodes at the rounded corners, which are aligned).