Fireworks Mask Basics Tutorial

Application of the mask in Fireworks CS3

Many people in the study of the mask when there will be confusion, do not know what the mask is doing, always feel that the concept of the mask is very abstruse, not understand. In fact, before learning the mask, we need to first understand what the mask can do, know the role of the mask, and then learn how to create a mask will not feel so difficult to understand.

A, mask overview

In simple terms, the mask's role is to achieve through a shape to see the effect of another graphic. As shown in Figure 5-62.

Figure 5-62 The effect of the mask

In addition to being able to display the image in any one shape, the mask also makes the image fade, as shown in Figure 5-63.

Figure 5-63 Image Fade effect

Image fading effect refers to the image from clear to transparent an excessive effect, over the form there are many, the above image is the image from right to left gradually become transparent, in the Web page design can often use the image fade effect, so that the image gradually over to the background of the Web page, as shown in Figure 5-64.

Fig. 5-64 application of image fading effect in Web page

Ii. The mask properties of Fireworks CS3

After you create a mask in fireworks CS3, the layers in the diagram panel become two thumbnails, the thumbnail on the left is the masked object, and the thumbnail on the right is a mask, as shown in Figure 5-65.

Figure 5-65 Mask thumbnails in the layers panel

After you select the mask thumbnail on the right, the properties of the mask are displayed in the Properties panel, as shown in Figure 5-66.

Figure 5-66 Mask Properties

1. Path Contour Mask

This type of mask can clearly see the masked object through the contour of the path, and there is no relation to the color of the vector path, that is, the mask's path, no matter what color is filled, is still very clear. If show fill and stroke is selected, you can display the edge path effect of the mask, as shown in Figure 5-67.

Figure 5-67 Path Contour Mask Effect

2. Grayscale appearance Mask

This type of mask also sees the masked object through the path, but see the resolution of the masked object will be the path of the fill color and stroke color, this type of mask fill color and stroke color are grayscale, if the color of the mask is white, the mask image can be clearly displayed. If the mask's fill color is black, the image under the mask is completely transparent. If the fill color of the mask is in the middle Gray, the image under the mask is displayed in semitransparent display. Edge feathering can be set in the Edge property below the padding.

Figure 5-68 Grayscale appearance Mask effect

With the gray-scale skin mask affected by the depth of the fill, we can easily achieve the image fade effect, the principle is to mask the vector path to fill the gradient from black to white, so that the mask after the black side will be transparent, white side for a clear effect, so as to achieve the effect of the image fade, as shown in Figure 5-63.

Third, create a mask in fireworks CS3

Many of the masks are created in fireworks CS3, but the ultimate goal is simply to generate masks, so basically remember the one or two ways to generate masks, focusing on the properties of the mask is sufficient, as well as the removal of the mask to disable and enable.

Paste in Internal

Using the paste in internal command is the simplest way to create a mask in fireworks CS3. It should be noted that the mask pasted internally created by default is the path contour mask, so it has nothing to do with the color of the path as a mask, the following is a concrete example to introduce to you, the specific steps are as follows:

1. Create a new fireworks file.

2. In the New Document dialog box that pops up, set the canvas to a width of 350 pixels, a height of 250 pixels, and a white background color. As shown in Figure 5-69.

Figure 5-69 New Document dialog box

3. Copy the prepared phone image footage to the created canvas and adjust the size and position as shown in Figure 5-70.

Figure 5-70 Copying the phone footage to the canvas

4. Using the Ellipse tool, draw a positive circle to the right of the canvas, which is much larger than the canvas, as shown in Figure 5-71.

Figure 5-71 Drawing a positive circle

5. Open the prepared material image, as the prepared material image size is larger than our target size, so we need to select "Modify" @@ "image size" command to reduce the image material to fit our needs, as shown in Figure 5-72.

Figure 5-72 Reducing the size of the image footage

6. Select the reduced image footage, select the "Copy" command under the Edit menu, then select the positive circle that you just drawn, select Paste on internal (shortcut key: "ctrl+shift+v") command under the Edit menu, so you can display the image footage in a positive circle, as shown in Figure 5-73.

Figure 5-73 pasting the image footage into the inner circle

7. While the image material is shown to the inside of the circle, but not the location we need, if the direct use of "pointer" tool to drag, is a circle and internal image movement, if we only need to adjust the position of the internal image material, and do not want to change the position of the positive circle, you can click on the "layer" The association icon in the panel, canceling the association between the image and the mask, so that you can arbitrarily adjust the position of the image footage without changing the position of the positive circle, as shown in Figure 5-74.

Figure 5-74 Adjusting the position of an image in a mask

8. After the adjustment of the position, you can link the image of the mask with the positive circle, the whole image effect is finished, the final effect is shown in Figure 5-75.

Figure 5-75 Effect of final completion

By mastering the "Paste inside" command, we can display any image footage to any one of the shapes.

Group to Mask

You can also create a mask effect by using a combination as a mask, and it is a good thing to note that the combination surround mask creates a mask of grayscale appearance by default. The following is a simple example to explain to everyone, the specific steps are as follows:

1. Create a new fireworks file.

2. Open the prepared image footage, as shown in Figure 5-76.

Figure 5-76 Opening the prepared image footage

3. Copy another fish image footage to the canvas and resize it, as shown in Figure 5-77.

Figure 5-77 Copy Another image footage to the canvas

4. Using the Rectangle tool, draw a rectangle with the same size as the canvas and fill the linear gradient. The gradient is set vertically, the top padding is white, and the bottom is filled with black, as shown in Figure 5-78.

Figure 5-78 Drawing the rectangle, filling the linear gradient

5. Select the image material and the rectangle of the fish at the same time, select the "Modify" @@ "mask" @@ "Combination for Mask" command, the results are as shown in Figure 5-79.

Figure 5-79 The effect of using the "Group as Mask" command

6. In the Layers panel, select the rectangular mask to the right, adjust the range of gradients, appropriately increase the area of the black portion, so that the transparent part of the mask can be increased, the resulting effect as shown in Figure 5-80.

Figure 5-80 Final effect after adjusting the gradient range