Using the vector tools in real-world projects

In this section, we'll introduce the new vector tools available in Fireworks CS4 by providing the steps we followed to create a sample project. We'll outline the process we used to create the header logo and header leaf design shown below using the new vector and path tools in Fireworks CS4 (see Figure 9).

Figure 9. Finished version of the blog mock-up design

Creating the logo

The sample project logo consists of three leaf-like shapes. In order to create the leaves, you can simply create one leaf-shaped object and then copy and paste it twice. Once you've created the three leaf objects, you can manipulate each one individually using the transform, vector and path tools. That's the easy way. The hard way is to create each leaf shape individually. In our experience, we've found it is much easier to manipulate (edit) existing objects than it is to create (draw) each one from scratch. Whenever you see an opportunity to repurpose an existing object (instead of drawing the object), we definitely recommend taking advantage of copying/editing an existing element.

To create the leaf-like object, select the Ellipse tool and draw a circle. Then draw another ellipse over the first circle and apply the Punch Paths command. Doing so results in a shape that looks like a cresent moon (see Figure 10).

Figure 10. Applying the Punch Paths command on two ellipse objects

You can easily change a path's shape by editing its contour points. The resulting object has four points, but you can easily add more points to its contour, if you'd like, by applying the Add Points command. Use the Subselection tool to adjust the points on the left side to create a leaf-shaped object (see Figure 11).

Figure 11. Apply the Add Points command, then use the Subselection tool to adjust the points as desired

Once you are happy with the shape of the leaves, copy and paste the object. Apply some transformation commands to create the second, slightly different leaf shape (see Figure 12).

Figure 12. Copy and then transform the copy to create the second leaf of the logo design

Select the second leaf with the Pointer tool (to select all the points of its contour) and select the Rotate Points command from the Path panel. Specify the numeric value to set the desired degrees of rotation (see Figure 13).

Figure 13. Enter a numeric value to specify the degrees of rotation applied to the object

Repeat the last two steps to create the third leaf. Now you are ready to create the final shape of the logo.

Select the three leaves and apply the Divide Paths command. This will result in a separation between the intersected areas and the outer areas, breaking them into individual paths (see Figure 14).

Figure 14. Divide Paths command allows you to split the leaves into separate path segments

Fill each part of the leaf design with the desired color. Add some text (the blog title) below the three leaves to complete the sample logo (see Figure 15).

Figure 15. Close-up view of the completed sample project logo

Creating the swirl

The Vector Pen tool is a powerful tool for creating swirly graphic elements. Using it requires some practice and patience, especially if you are new to working with it. Using the Vector Pen tool, you can define curves (tangents) on each point of the line while you draw the line. Later, you can also edit the curve of each point, which is the key difference between using the Vector Pen tool and the regular Line tool.

For this project, we created a set of branch-looking paths. Select the Vector Pen tool and start drawing. Press and hold the (left) mouse button while you draw to create the line curves, otherwise you will simply draw a straight line. The drawing process is pretty intuitive, but we recommend drawing some practice lines if you are not familiar with using the Vector Pen tool (see Figure 16).

Figure 16. Press and hold your (left) mouse button as you draw the branch

Once you've drawn the initial branch stalk, you can edit each point individually to create the desired shape (see Figure 17).

Figure 17. Use the Subselection tool to reshape the path of the curved branch

Repeat the last step to draw several more branches. Make the new branches more swirly, because you'll attach them to the main branch in order to create the swirly branch structure (see Figure 18).

Figure 18. Create more curly paths and add them to the branch structure

Decorate the tree with some swirly leaves. You can either use the method we followed to create the leaves used in the logo, or you can use the Pen tool to draw a leaf (see Figure 19).

Figure 19. You can use the Pen tool to create the leaf shape for the branch

Copy, paste, and then apply transform commands to re-create as many leaves as desired. Place the leaves around the branches (see Figure 20).

Figure 20. Completed branch structure with the curved leaves

After you've finished the design to your satisfaction, export the header and the logo in the appropriate web image format (GIF, PNG, or JPEG) and include them in your design.

Where to go from here

Adobe Fireworks CS4 is a unique tool for rapid prototyping, generating web assets, and designing graphics. It is also seamlessly integrated with Adobe Photoshop and Adobe Illustrator, making it our preferred program to use when preparing designs for the web. With the new features available in Fireworks CS4, we now consider it to be a master tool for creating the final graphic designs as well—due to its hybrid ability to manipulate both vector and raster graphics and the ease of PDF export. When creating graphic elements for applications, Fireworks is our first choice because we can output the assets needed for many platforms, including Adobe AIR, Flash, Flex, and HTML.

Visit the Fireworks Developer Center to find more articles and tutorials to help you out. While you are there, check out another article we wrote: Creating an icon in Fireworks.

Page 3 of 3

Previous Page