Fireworks 8 Dream Trip (6): Combat operation

Previous section:Fireworks 8 Dream Trip (5): New menu Changes

Part Three: actual operation part

Many of the previous Fireworks8 said a number of new features, new skills, but even in many new features, if not to work to produce any good beneficial effects, I believe that we will not buy its account. In this section, we will continue to experience the new improvement of some functions brought by FIREWORKS8 in actual combat through the form of examples. And these new improvements for the actual combat should be said to be very helpful, what are the specific, first to sum up, to see which of our immediate work will produce practical help?

In this chapter, we will mainly introduce the following points of operation:

1, the new shape "Save time stamp" use;
2, the new part of the actual application of materials;
3, to the path can be edited again appended to the path of the text object;
4, the use of solid color shading filter commands;
5, enhance the mixing layer mode of explanation;
6, CSS format pop-up menu production export.

Believe that through these 6 aspects of the operation of knowledge, we have to Fireworks8 the actual combat function is enhanced, whether it will improve our efficiency will have a clear initial experience.

　　One, new shape "Save Timestamp" use

1. Open the Auto Shapes panel, select the Save Timestamp object, and drag and drop it to the editing area.

2, the editing area will automatically appear a saved time prompt box, the time display is the local machine time instruction.

3. Use the Subselection tool in the Toolbox to click on the insert time balloon to find that the inserted timestamp object is actually a combination of two text boxes.

4, since know is a text object, and then edit it, it is easier, through the property inspector, it can be done.

5, the inserted timestamp object, in fact, has lost the function of an automatic Shape object after it has been inserted into the Automatic Shape Action command, it simply exists as a composite object, or you can press the "CTRL+G" key combination to cancel its group, and then make the text object concrete.

　　[summary]:"save timestamp" the use of this automatic Shape object should be said to be very simple, practicality should be said to be more general, this thing for those who are accustomed to their own creations of the time to mark the classification of the preservation of the user, it should be said to be a lot of convenience, so as to save the time to Oh.

　　Second, the new part of the actual application of materials

Carefully compare the Fireworks8 inside and the difference between the pattern and the previous version of fireworks, found that it is really Fireworks8 inside does not add too much material and design, only in the fill, stroke material inside add a point of the material group, as shown in the following figure:

The pattern, then, is simply the addition of a set of metal pattern presets, as follows:

The specific use of the "point" will be in the "Solid Color Shadow" filter to explain the use of, here is not a demonstration, this section mainly through the production of three-dimensional gear, to specific look at the practical metal pattern group.

　　Example 1 fabrication of solid metal gears

As usual, first look at the finished production of the simple effect of the picture.

　　source File Download (204KB, WinZip compression)

1, open fireworks, new files, file size, background color random.

2. Open the Auto Shapes panel, select the Gear Auto Shape object, drag and drop it into the edit area to add the Gear object.

3. Select the Filter Menu "Shadow and Halo | Solid Shadow" command on the property inspector in the pop-up "Solid Color Shadow" dialog box, you can make specific settings according to your personal habits, this example is to set the distance of a slightly smaller number, specific settings as shown in the following figure.

[Hint:] The use of the "solid shadow" filter, we will have a special section in the following specific explanation, please pay attention.

4, after the use of the Gear object "Solid color Shadow" filter, you can quickly produce a preliminary three-dimensional gear effect, as shown in the following figure.

5, now, the gear to fill the way to make an adjustment, and strive to reflect the effect of metal. On the property inspector, set the fill category for the Gear object to pattern and select the metal-turbine pattern effect, and the Gear object in the edit area appears as shown in the following illustration.

6, after the setting of the step, you can find that only by using a pattern set, you can initially appear the metal effect of gears. If you are not satisfied with the current metal surface, you can adjust its fill handle, the display of its fill to make a second adjustment, as shown in the following figure, this example is to drag the round adjustment handle to the right side of the gear position.

7, if the current metal effect is not satisfactory enough, you can adjust the fill by adjusting the handle to further settings, such as the adjustment of the rectangle to adjust the handle and change the direction of the fill pattern to make a change, as shown in the following figure.

8, after repeated adjustments to find the most satisfactory effect, you can end the production of this example.

　　[summary]: Whether for initial contact with FIREWORKS8 users, or to have been able to skillfully operate FIREWORKS8 users, these new patterns, materials in the actual application will still help a lot of busy, as long as you remember in the right time, Reasonable use of them is enough.

　　A text object attached to a path that can be edited again on a path

Through the previous study, we have learned the use of the "dynamic marquee" introduced in the FIREWORKS8 version, and we do feel the convenience of this new feature in the example, and for bitmap editors, the introduction of the dynamic marquee feature should say an effective display of WYSIWYG adjustments, It also fits the usual style of fireworks. And for the editing of a text object, once you have attached to the path, you want to adjust the path shape again, you need to do the "Detach from Path" command on the text object attached to the path, then adjust the path, and then attach the text object to the Path object, which should be quite troublesome. In Fireworks8, the problem is simplified, that is, even if the text object is already attached to the path object, we can still make adjustments to its path node by using some of the selected tools, or use the Pen tool to add a new path node at any time and fine-tune the path object. This instant adjustment function is really convenient to join a lot of the following to see the specific method of operation.

1. Draw any Path object in the edit area, and then enter the text object in the edit area. Select both the Path object and the text object, and choose the menu "text | Attach to Path" command, which simply produces the effect attached to the path as shown in the following illustration.

2, select a part of the Toolbox Selection tool, click on the text object attached to the path object on any one of the path nodes, so that the path node control handle, directly to adjust the handle to change the shape of the Path object.

3, after the adjustment, observe the editing area of the text object, will immediately change accordingly.

If you need to add a new path node, you can use the Pen tool to add directly to the Path object, and then make further shape adjustments.

　　[summary]: A word, good function, good convenience!

　　Four, solid color shadow filter command full touch

In the previous tutorial on the new features of FIREWORKS8, this "Solid Color Shadow" Filter command has been used more than once in some instance slots, and this section explains in detail how to use the filter object and its techniques.

First look at the calling method: After selecting an object in the edit area, select the Shadow and flare | Solid Shadow command on the Filter menu in the property inspector to perform a solid shadow filter on the edited object.

Next, take a look at some of the filter's parameter setting objects, for any object in the editing area, a "Solid Color Shadow" dialog box appears, following the menu command action above, which contains three items: one is the setting of the shadow angle, the direct input value, Or the numerical size can be adjusted by adjusting the pole; the other is the distance of the object itself from the distance of the shadow, the adjustment of the numerical value is the same as the adjustment of the angle. The third is to control whether the color of the shadow is set, without selecting the check box in front of the solid color, A solid shadow automatically appears as the edge color of the object that adds the solid color shadow, the same color effect as the material, and if you select the check box in front of the solid color, you can select the color by clicking the fill-color well that is located to the right of the check box. Let's take a look at the effect of the filter by using a few specific effects.

For the sake of understanding, for Vector path object and bitmap object, we will make a deep analysis of the use of the pure color shadow by different experiments respectively.

(i) Vector-oriented path objects: We are mainly divided into two pieces to make an introduction to the use of the solid color shadow filter, together with the check box in the Solid Color Shadow dialog box without selecting solid color, and the other to select the check box.

For ease of comparison, we unify the "gear" auto shape as the base object for adding a solid color shadow filter, and set the angle and distance in the dialog box "Solid Color Shadow" to "30" size, as shown in the following illustration, to ensure its uniformity.

　　

[Note]: The above figure is only the main description of the angle and its distance between the set of properties, the check box before "Solid color" is not in the list of unified description, we should understand.

This part is mainly through the gear object to set different filling type, edge effect, texture and stroke type and so on, to understand the use of solid color shadow filter to produce the specific effect.

A, do not select the Solid color check box

1, the fill category is solid, whether the texture settings for the resulting solid color shadow will have a great impact. As shown in the following illustration, the drawing object on the left is a solid-color shadow effect that does not use any texture, and the right side is the result of using a "parchment" texture with a total texture of 78%. It can be seen that the texture of the set, so that the resulting pure color shadow more rich sense of hierarchy, but also can be a preliminary distinction between the shadow and the object to be manipulated the boundaries.

2, the fill type is a gradient, whether the texture settings for the resulting solid color shadow will also have a certain impact. As shown in the following illustration, the padding is set to gradient | Satin in both left and right sides, with no textures on the left, and a "parchment" texture with a total texture of 61% on the right-hand side to produce the effect. By comparing with the above diagram, we can see that the method of gradient + texture makes up for some deficiencies of the pure color shadow operation after solid fill, so that the subject object is clearer and the shadow object is clearer.

3, fill types are set to patterns, the following figure are all using the "fabric" this pattern, you can find through the adjustment of the edge type and its texture adjustment for the effect of the pure color shadow will have a greater impact. As shown in the following illustration, the image on the left is the result of filling with a "fabric" pattern, the middle picture is based on the use of pattern fills, set the edge type to feather, and set the feather value to "10" after the effect, the right picture is based on the previous two settings, using a total texture of 79% "parchment "The texture is produced after the effect. Visible use of pattern fill and then the setting of the pure color shadow will be fully reflected the edge of the pattern, with the use of texture, will make the color composition of pure color shadow more rich.

4, fill type are solid, stroke type of "pencil |1 pixel soft", color is white, if the stroke of the amount of texture to make an adjustment, the resulting solid color Shadow will also occur a large change. As shown in the following illustration, the picture on the left is the result of not setting the texture, and the right picture is the result of a "sand grain" texture with a total texture of 100%. Visible in the case of 1 like the sketch edge, through the stroke texture settings will have a great impact on the effect of the solid color shadow.

5, the stroke type is the same, stroke texture settings are the same, setting different fill categories on the effect of the solid shadow is basically not much impact. As shown in the following illustration, the left side is the result of using a solid fill, while the right picture is the result of filling with the gradient | Contour fill type, there's nothing too different about the two, but here you can make changes to the fill texture to see if it has any effect on the resulting shadow!

6, using the same fill, the stroke using the same texture settings, resulting in a very different effect. As shown in the following illustration, the left figure produces the effect of softening the stroke with 1 pixels, the middle figure is used for "oil painting | Large splash" stroke type, and the edge width is set to the effect of 5, the right side of the graphic is the use of the "watercolor | aggravating" stroke type results, It is very clear to see different stroke settings, the effect of shadow generation is very different.

B, select the Solid color check box

1, if you do not need to do filter processing objects to do stroke settings, even with different fill effects, the resulting solid color shadow is the same. As the following illustration shows, different fill effects and their pattern fills do not have any specific effect on objects that have already been stroked, meaning that the color of a solid shadow is only about the stroke type and its color and texture settings.

2, the operation of the object of the stroke settings, is to produce a different solid color shadow of one of the most effective and most direct means. As shown in the following figure, both the left and right pictures use the "oil painting | Splash" Stroke effect, the tip size of the left is 1, the right tip size is 7, simple settings, but produced a different effect, but the color of the shadow of the pure color will not happen any change.

[Summary]: The test can be summed up the use of pure color shading experience: If you want to create a shadow effect color, rich content, you can not select the check box in front of "solid color", if you need a single neat shadow color, you must check the "Solid Color" before the checkbox.

(ii) Bitmap-oriented objects

Similarly, for ease of comparison, we use the same bitmap object as the base object for adding a solid color shadow filter, and set the angle and distance in the dialog box "Solid Color Shadow" to "30" size to ensure uniformity.

　　Material File Download (97KB, WinZip compression)

A, do not select the Solid color check box

1. If you use a solid-color shadow filter directly on a bitmap object, a solid-color shadow effect is generated directly from the color object on the edge of the bitmap, as shown in the following illustration. The color is rich, the edge part is distinct color.

2. Select the "Lasso" tool in the toolbox to circle the middle of the bitmap object, and the lasso edge is "solid edge" setting.

Press the DELETE key directly to delete the selection and see what happens.

You can see that a solid color shadow object is handled by the object is the edge of the bitmap object, once a new notch, new Edge, the new solid color shadow will appear immediately.

3. Reset the Lasso tool for the 2nd Test operation, set the edge to "feather" and set a larger feather value, this example sets the feather value to 56 and adds a selection range.

By pressing the "delete" key two consecutive times to delete the selection section, you will see the effect shown in the following figure.

With the setting of feathering, the effect of a solid color shadow becomes much more hazy, and the transition to the edges of the object being processed is softer.

4. Combine bitmap objects with vector objects as mask objects, and then perform a solid shadow filter command on them to observe what happens

First in the edit area draws a fill type is a gradient, the color is a black, white transition circle object.

Select both circular and bitmap objects, and choose the menu Modify | mask | Group to Mask Command for a transition effect, as shown in the following illustration.

Perform a solid-color Shadow filter command on it, which appears as shown in the following illustration.

As you can see, the resulting solid shadow will also have a virtual effect on the edges of the feather or the edge of the opacity.

B, select the Solid color check box

Once the solid color check box is selected, the resulting solid color shadow is much simpler than the color of the solid color you choose, but not the other elements that are too much affected.

　　[summary]: using a solid-color Shadow filter command on a bitmap object is simple, and the results are relatively good, with the mask and other selection tools for the bitmap processing, and then use the solid color shadow filter, sometimes produce better results, we may wish to operate a lot of experiments, To make a better understanding of the use of a solid color filter.

　　Example 2 Embossed Text production method

There are a lot of ways to make the effect of embossed text, in this case we want to use a solid color shadow filter to make this embossed text effect, before starting the tutorial, please look at the following effect chart.

　　This example uses the font to download (8KB, WinZip compression)

　　source File Download (125KB, WinZip compression)

1, open firewroks, new file, size, background color at random (in this case, the color is "#FF6600").

2, in the editing area input text, this example input "Pconline", the font adopted "BM block", the font color set to No, the stroke color set to black, the rest do not make any adjustments, the editing area appears as shown in the following figure.

3, select the text object, select the Shadow and Glow | Solid Shadow command on the Filter menu on the property inspector to set the angle to 20, distance to 1, tick the check box in front of the solid color, and set the color to #FF9900 or to be consistent with the background color.

4, after setting, the text object in the edit area appears as shown in the following figure.

5, the execution of the "Solid Color Shadow" command, the specific settings refer to the following figure, the shadow color set to white.

6. At the moment, the edit area text object is shown in the following figure.

7. Select the "Bevel and Emboss | emboss" command on the filter menu on the property inspector, as shown in the following figure.

　　[hint]: In this step, you can experiment with what the text effect is without selecting the check box before show objects.

8, all set up, the editing area embossed text effect has appeared, you can change the background color, to see how the embossed text effect will be.

　　[summary]: The above example can be described as a more flexible use of solid color shading, the use of pure color shading is more extensive, and for the production of some simple 3D special effects, is very helpful. As long as the effective use of the filter in the actual combat, I believe you will make a more unique work.