- #30 using Vector tools
- #31 Using Shapes as Image Elements
- #32 Understanding the Transform Tools
- #33 Using the Transform Tools
- #34 Distortion-free Scaling with the 9-Slice Scaling Tool
- #35 Creating a Custom Shape
- #36 Understanding the Pen Tool
- #37 Masking an Image with a Vector Shape
- #38 Using the Auto Vector Mask for Quick Fades
This chapter is from the book
This chapter is from the book
This chapter is from the book
#31 Using Shapes as Image Elements
Bitmap images are a huge part of Web site design, but vectors come in very handy for many tasks as well, from masking a bitmap object to creating a container (often referred to as a “pod” these days to hold page elements) to creating the look of UI components for an application design.
The visual components of vectors consist of a Fill and a Stroke. You can use both or just one on any vector, depending on the use of the vector. In fact, if you take a close look at the Tools panel (Figure 31a), you will see that your color options refer to Fill (paint bucket) and Stroke (pencil).
)
Figure 31a Fireworks sets colors just like other vector applications do. It uses Stroke and Fill rather than foreground and background colors as you would find in a bitmap application like Photoshop.
The Fireworks’ Property Inspector lets you use Fill Categories other than just solid color for a vector shape. You can fill a path with a pattern, texture, gradient, or solid color (Figure 31b).
)
Figure 31b You can fill a vector shape with a variety of choices—all from the Property Inspector.
You can also use several preset Stroke settings, all of which are customizable via the Stroke Options item in the Stroke menu (Figure 31c).
)
Figure 31c You can use one of many preset stroke styles or create your own.
Select the Rectangle tool in the Tools panel and draw a shape on the canvas.
If you have Tooltips active, you’ll see pixel-precise dimensions of the shape as you draw it.
- Let go of the shape and the current Fill and Stroke will be applied.
- Set the Fill to a solid color of your liking, but make it a light color.
- Set the Stroke to black, 1-Pixel Soft Rounded.
Use the Property Inspector to add some character by altering the roundness of the corners. You can now set rectangle roundness in either percentages (à la Fireworks CS3 and earlier) or pixels. Using pixels means the corners will not distort when you scale the shape. Set the value to 20 pixels.
You now have a nice little container for text or the starting point for an interface element for an Adobe AIR application.
- Select Commands > Text > Lorem Ipsum to take things a bit further. This generates a paragraph of text using the currently chosen font in the Property Inspector.
- Set the font to Verdana from the Font Family drop-down menu and set the size to 11 pixels (Figure 31d).
Figure 31d Choosing a font family is now separate from choosing a font style (such as bold or italic).
- Use the Pointer tool to drag the text object above the container.
- Use the Pointer tool to click on a blue corner point for the text object and reset the size so the text better fits your container.
)
Not bad, eh? Quick and easy! This rounded corner container can also be exported by Fireworks as a CSS layout with an expandable container and true HTML text, but you’ll learn more about that in Chapter 13, “Fitting Fireworks into the Design Workflow.”
You can use a variety of shapes to create containers, a patterned box for a header, or even your own custom icons and bullets.