Use Fireworks to create exquisite details on icons

In this article, we use Fireworks software to create some details on a ready-made icon image to make the icon more refined and beautiful!

There are two main points to note when using Fireworks (hereinafter referred to as FW) for icon design:

First, FW focuses on web design and is not suitable for creating some overly complex PS effects. You can look forward to FW CS5’s PS filters;
Second, the editing method of FW is similar to AI. If you are used to working in PS-like pixel shading environment, you can ignore this tutorial.

Next, let’s get to the point. Let’s copy a relatively standard icon for explanation, which will make it easier for everyone to understand.

The picture below is a set of icons created by the well-known domestic eico design. The object we want to copy is the envelope icon framed in the picture. Let me explain in advance that because of the theme of the tutorial, we will add some details to this icon, so our final copying result will be different from the original image.

Step 01

Cut out the icon you want to copy as a reference and lock the layer. The path panel of my FW here is extracted from Fireworks CS4, but it has no impact on the subsequent operations because I use all the functions included in CS3.

Step 02

Use the Rounded Rectangle tool to draw a rounded rectangle similar to the sample image, use the four rounded corner control points to adjust the radius of the rounded corners, and then press Ctrl+Shift+G to break up the shape.

Then copy the first rounded rectangle, use the white arrow tool to move one pixel in four directions, and create two rounded rectangles as shown in the picture (note that the eight nodes at the rounded corners are processed with white arrows , they need to be aligned).

We can't use Stroke to add an outer border to a rectangle, because the virtual border will kill you. If the rounded rectangle you drew with the Rounded Rectangle tool has non-Stroke virtual edges, then scatter the nodes, select the Path with the black arrow tool, and click Round Points to Pixels in the Path panel to return all the nodes of the path. position to the pixel intersection (you can also use the white arrow tool to select a node for individual homing).

Step 03

Copy the large rounded rectangle and put it on the top layer. Use the white arrow and Shift+arrow keys to get an inverted triangle. Then copy it. Fill the upper inverted triangle with Linear gradient; fill the lower inverted triangle with solid brown and set 1px feathering.

Step 04

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

Step 05

Flip the gradient filled inverted triangle drawn previously vertically, make a copy and place it. Their positional relationship is as shown in the picture below. The two inverted triangles are separated by a little more than 1px from top to bottom. You can use the white arrow tool to select the four nodes above the dark brown inverted triangle, and drag the mouse with the auxiliary line to move the nodes upward 0.3~0.5 pixels. This will make the dark brown appear less blurry first (and then Once again, give up the idea of ​​using Stroke for borders as soon as possible, this is not photoshop).

Step 06

Note that there is a highlight above the icon in the sample image, and it is not a common single-pixel radiant highlight (the 1px highlight above the highlight of about two pixels is brighter than the 1px below), so you can consider using an elliptical radiator like Ellipse. Filling achieves this effect.

We select and copy the bottom rounded rectangle twice. After moving the position, we get two rounded rectangles 2px apart from each other. We use the method of subtracting the two rectangular paths to get a new path, and fill it with Ellipse (white 0 -100 transparency), and finally set the overlay mode of this highlight path to Overlay.

Step 07

Add a 1px highlight to the bottom.

Step 08

The current result is as shown below. Let’s take a break and drink tea. Next, we will add details.

Step 09

Temporarily changing the background to white, we can see that because of the feathering used in the previous inverted triangle, some pixels overflowed a little from both sides of the envelope.

There are two methods to process these pixels. One is Flatten as Bitmap, and the other is masking while retaining the path. I prefer the latter because this retains the path and can be edited later if necessary. The operation is as shown in the figure below:

Step 10

Let's go back to the dark background. Do you feel that the sides of the envelope are a bit flat? Let's use a Bars or Radial fill to add some effect.

Step 11

Next, add single-pixel highlights to the upper and lower triangles of the envelope. Because the operation of path subtraction (Punch Path, you can find it under the Modify – Combine Paths menu) has been repeatedly discussed before, I will not explain it here, as shown below:

Step 12

In the same way, add highlights to the triangle below.

Step 13

Because the background is a darker color, we can consider adding a glow. Here we don’t use FW’s projection or luminescence filter, but use Path. Why? Because it’s easier to control, just personal preference. We can make a new rounded rectangle that is 1px larger in the top, bottom, left and right than the bottom rounded rectangle of the envelope, without feathering, and with a transparency of 30.

Step 14

Then add a 1px highlight below.

Step 15

At this point, the icon is basically completed, and now we enter the polishing stage. We select all the layers and "copy" them, then quickly press Ctrl+Alt +Shift+Z to flatten the layers into bitmaps, and then set the overlay mode to Overlay and the transparency to 60, so that we can see the saturation of the icon. The degree and contrast have been improved. This is my personal favorite method for quick polishing, but it is not applicable at all times. Sometimes you have to manually use FW’s built-in filters to adjust parameters such as curves, contrast, and saturation.

Finish

The final effect (the triangle under the envelope uses Path as a projection)