Fireworks Tutorial: Drawing a vector message icon

This is a newly-written tutorial, starting Blueidea, very busy recently, this tutorial is also put on hold for two or three days, but because it has been sorted out before, sent up is just copy paste things ^_^

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).

We can't use stroke to add a border to the rectangle, because the imaginary side will kill you. If you use the rounded Rectangle tool to draw the rounded rectangle has already appeared the stroke imaginary edge, then breaks the node, selects that path with the black Arrow tool, clicks the path panel round Points to Pixels all nodes of the path to the pixel intersection (or you can use the White arrow tool to select a node to return to its own position).

Step 03

The large rounded rectangle is copied into the top layer, with the white arrow with the shift+ direction key to get an inverted triangle, then copy one, the upper triangle with linear fill gradient, the following inverted triangular solid fill brown, and set 1px feather.

Step 04

Use the white arrows to select the nodes shown on the way, and then use the keyboard's arrow keys to move down two pixels, making the envelope look a bit longer (because a single icon here is not bound by the overall style).

Step 05

Make a vertical flip of the previously drawn gradient fill inverted triangle, and copy a set, and their position relationship is shown in the following figure. The two inverted triangles are a little over 1px apart. You can use the White arrow tool to select the top four nodes above the dark brown triangle, drag the mouse with the auxiliary line to move the node up the 0.3~0.5 pixel, so that you can let the dark brown first look less empty (again, as soon as possible to eliminate the idea of using stroke as a sideline, This is not Photoshop).

Step 06

Note that there is a high light above the icon in the sample, and it is not a common single pixel emission highlight (the 1px highlight on the top of the high light at approximately two pixels is brighter than the 1px below), so consider using the ellipse of this elliptical radioactive fill to achieve this effect.

We checked and copied the bottom rounded rectangle two times, after moving the position, we get two corner rectangles with 2px up and down, then subtract the two rectangular paths to get a new path, ellipse fill (white 0-100 transparency), and finally set the high light path superposition method to overlay.

Step 07

Add a 1px high light to the bottom.

Step 08

Now the results are as follows, rest for a while, have a sip of tea, and then we'll add the details.

Step 09

To temporarily change the background to white, we can see the previous inverted triangle because of the use of feather, some pixels overflow from both sides of the envelope.

Here are two ways to deal with these pixels, one is flatten for bitmap, and the other is to preserve the path of the premise of the mask, I prefer the latter, because this preserves the path, and later if necessary can be edited, operation as shown in the following figure:

Step 10

When we go back to the dark background, do we feel a bit flat on either side of the envelope? We use a bars or radial fill to add some effect up.

Step 11