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
Next, add a single pixel high light to the upper and lower triangles of the envelope, because you have repeatedly explained the operation of the path subtraction (Punch path, which you can find under the Modify–combine Paths menu), which is no longer explained here, as shown in the following figure:
Step 12
Give the following triangles a heightened light.
Step 13
Because the background is a darker color, we can consider adding a glow. Here we do not use FW projection or Glow filter, or use path, why? Because it's better control, personal preference. We could do a new rounded rectangle of around 1px more than the bottom corner of the envelope, no feather, 30 opacity.
Step 14
Then add a 1px highlight below.
Step 15
This icon is basically complete, and the following is the finishing phase. We have all the layers selected "copy" one, then quickly press Ctrl+alt +shift+z the layer into a bitmap, and then set the superposition mode of overlay, transparency 60, so that the icon's saturation, contrast is improved, this is my personal favorite quick touches the method, But not at any time, sometimes you have to manually use the FW with the filter to adjust the curve, contrast, saturation and other parameters.
Finish
The final effect (in fact, the triangle below the envelope I also use the path added to the road as a projection, finished to find, I will not toss ...)