Vectors, Transform Tools & Layers

 

Youve seen the basic drawing tools like the rectangle tool and the circle during the first part of the fireworks web design course. Maybe youre discontent. Your images are okay, but youd like them to be a little bigger, smaller, upside down, or leaning to the right. Youd like to create odd shaped objects and manipulate the vector points in the objects you have. Technology has provided a joyful resolution to your unhappy restlessness in the form of the wonderful Fireworks program. You can draw freehand vector shapes with the paintbrush. You can create beautiful sweeping arcs and graceful curves with the pen tool. You can totally resize and reshape objects with the transform tool. Youll love it.

Of course, after all this twisting and manipulating is finished, youll want to protect your work. You may have just spent a long time placing twenty or thirty items on a navigation bar, and you wont be happy if you accidentally grab a piece and move it out of place. Layers will help you to protect your artwork.

 

Manipulating Vector Points

Remember that a vector drawing is basically the computer playing "connect the dots". It connects one vector point to another. Well, you can move the vector points around! You can also instruct the line connecting two vector points to arc or angle on its path.

Up to this point, weve only used the black pointer tool. Now, were going to use the white pointer. The black pointer is for moving objects. The white pointer tool is for manipulating vector points!

 

1.      Select the rectangular drawing tool.
Make sure that its corner is set to "0" on the Object Palette

2.      Draw a medium sized rectangle.

3.      Select the White Pointer tool .

4.      Click the newly drawn rectangle with the white pointer.
Notice that the rectangles vector points are displayed as blue boxes!

5.      Click and drag a vector point.

You can reposition vector points to wherever you want!

Fireworks may ask you if it is okay to ungroup a rectangle before manipulating its vector points. Youll have to click OK.

 

Try This:

1. Open butterfly.png from the fw_images folder.
   This image is made of a bitmap image and a vector based image.

 

2. In the lower right corner is a vector butterfly. Using the black pointer, move him to the center of the screen.
3. Slide over the vector-based butterfly with the white pointer.
   Youll notice different parts of the butterfly light up in red, signifying that youre hovering over a clickable vector shape.
4. Click the vector-based butterfly with the white pointer tool.
   Youll notice that only one vector shape becomes highlighted.
5. Can you manipulate the vector points? Go ahead and try.
6. Can you change a vector shapes fill color?
1. Select a vector shape
2. Change the fill color on the toolbox.

 

Manipulating Curved Vector Lines

You may notice that when you click a curved lines vector point, the point grows extensions called "handles".

The handles control the arc and curve of the line.
If you move the handles the lines arc will change, attracting itself toward the handle.

 

7. Move the handles around!

 

Using the white Vector Pointer, you can change both the placement of each vector point and the path of the line between those points.

 

Using the Pen Tool To Draw Curved Vector Objects

The pen tool allows you to draw graceful curves and smoothly rounded edges that only the most caffeine-free of artists can accomplish by hand. For many people, the pen tool requires some practice before they feel totally comfortable. Dont worry, this is normal. The pen tool is an incredibly useful tool, though. It allows you to draw graceful arcs and smooth curves that would be unattainable with other tools.

 

 

Using the pen tool, youll draw vector points and handles. A line will automatically connect the vector points. The line will curve towards the handles. The below illustration shows how a line arcs between two vector points. Notice how it arches toward the handle?

The pen tool will also allow you to add new points on a vector-based line.

Its important to understand that the pen tool does not draw vector lines. It only draws vector points. The computer will automatically connect each vector point with a vector line. Think of yourself as drawing the dots in a big game of "Connect the Dots"

If you want to move a vector point after you create it, remember to use the white pointer.

 

To Use the Pen Tool

When using the pen tool, first youll set the starting vector point and position that points handles. Then youll set the next vector point and adjust its handles. Youll continue setting points until youre finished. To conclude your vector shape, either double click, or click on the first point again.

To draw vector shapes with the pen tool:

 

1. Select the Pen tool from the tool-box.

 

First well set the handles.

2. Click and drag in the direction you want the line to go.
   Youll see the starting vector point and the handles.
   Remember that the handles control the arc of the line.

3. Let go of the mouse button when youre satisfied with the handles.
   Youll notice that a line is now connecting your pointer to the vector point, and that its arching toward the handle. This line will become your line.

 

4. The next step is the most important. We already have one vector point and the beginnings of a line, but weve got nowhere for the line to go. Now, well set the connecting vector point. By dragging out handles from out vector point, weve already decided that the beginning of the line would be curved. We have to decide if the end of the line will also have an arc. If you want an arc, youll need handles on the second vector point. If you dont, you wont.
   
   Place your pointer where you want the line to end.
1. For a curved line (with handles): Click and Drag in the direction that you want the line to continue.
2. For a straight line (without handles): Just click!
   
   
5. Repeat steps 3 & 4 until your line is as desired.
   
   
6. Double click when youre finished with the line.

Adding Handles to a Straight Vector Point

You can set the handles for any vector point by clicking and dragging the point with the pen tool.

 

Removing Handles From a Curved Vector Point

You can remove handles from a Vector point by clicking it twice, sort of like a slow double click. Click Click.

To Manipulate Points Drawn with the Pen Tool

You can manipulate set vector points with the with pointer tool.

 

To Fill a Shape Drawn With the Pen Tool

Filling a shape is easy.

1. Select the shape.
2. Choose your color from the fill palette on the toolbox.

 

Transforming Objects

One of the really nice things about vector-based art is that it resizes perfectly. You can twist, resize, rotate, or warp objects. The vector points move around and Fireworks re-draws the image. Fireworks also does a nice job of transforming bitmap based images.

 

To Transform an Object

1. You must first select the object you wish to transform.

All of the transform tools are found in MODIFY-> TRANSFORM

2. After Selecting a transformation mode, manipulate or pull the handles in the direction you wish to transform the object.
3. When finished, hit ENTER on you keyboard to accept the transform, or ESC to reject it.

Free Transform: Allows you to twist, and rotate an object any which way.

Scale: Allows you to resize an object. Hold SHIFT to resize proportionally.

You can also use the Scale Tool on the toolbox.

Skew: Allows you to lean or bend an object in different ways. Useful for mapping something to a flat surface, or giving an item perspective.

Distort: Allows you to bend and push the item any way you want to. Go crazy.

Numeric: Allows you to set precise transform numbers, useful when you need something exactly this or that size, or rotated exactly a certain amount.

Rotate 180, 90 CW, 90CCW: allows you to instantly rotate an image 180 degrees, 90 degrees clockwise, or counter clockwise.

Flip Horizontal/Vertical: Flips an image.

 

The Transform Tools

If youd rather, the most often used transform tools are on the toolbox, too.

 

Setting Exact Height and Width with the Info Palette

When youre making buttons, and things of that nature, youll need to set exact height and widths for your images. You dont want to be a little off. After selecting a object you can set its width and height with the info palette.

WINDOW-> INFO

 

Layers

Forget what you know about layers in PhotoShop. Layers in Fireworks are totally different. In Fireworks, layers are used to separate and protect your artwork. After you have completed drawing and placing objects to your liking, you can "lock them down" or hide them using layers.

 

Placing Objects on Different Layers

1. Create a new Fireworks image. Size doesnt matter.
2. Draw a star (using the polygon tool) and a square (using the Rectangle tool)

3. Open the Layers Palette

 

Youll notice that there are two main layers. You wont touch the web layer. Fireworks uses the web layer when creating rollover buttons and the like.

If you click a shape in the main image youll notice in the Layer Palette that the object is highlighted and that there is now a blue square next to Layer 1 on the Layer Palette. The blue square tells us which layer selected objects are on. Right now everythings on Layer 1.

 

4. Create a new layer by clicking the "new layer" button on the Layers palette.
5. Name your new layer by double clicking it. Call it "Circle".
6. With the Circle Layer active, draw a circle in your image.

 

On the Layers Palette, notice that there is now a blue box next to the Circle Layer, signifying that you have an item selected from that layer.

 

Hiding Layers

You can hide objects in a layer, or you can hide the whole layer. Hiding layers is useful if you want to get a piece of artwork "out of the way" for the time being. Hiding layers or layer objects is easy.

1. On the Layers Palette, click the eyeball next to the Circle Layer

 

The Circle Layer disappears! To bring it back, simply click where the eyeball used to be. You cannot edit a layer when its hidden.

 

Locking Layers

You can lock layers down to prevent them from being edited. This is helpful when building complicated images, like navigation bars. Eventually, youll have an awful lot of stuff in one image, and its easy to accidentally select and effect things by accident. Locking a layer will leave everything on that layer visible, but will render the layer un-editable.

1. On the Layers Palette, click in the empty space (or on the pencil) next to the Circle Layer.

 

 

A lock will appear, signifying that the layer or layer element is locked.

 

2. In your image, try to select and move the circle. Cant do it, can you?

 

Un-lock the layer by clicking the lock.

 

Collapsing a Layer

Normally, you can see each object inside a layer on the layer palette. When an image has many pieces, this can become a bit much. You can collapse layers, in the Layers Palette by clicking on the little minus sign next to the layer.

Try collapsing and opening the layers.

 

Changing Stacking Order Using Layers

If the Layer is on top in the Layer Palette, its items will be on top in the image. Luckily you can change the order of layers by dragging them in the Layers Palette.

 

Give it a try!

 

Dragging Items From one Layer to Another

Sometimes it is helpful to create a "Locked" or "Finished" layer, and drag finished items onto it.

You can drag items from one layer to another by selecting the item, and then dragging the little blue box on the Layers Palette. Just put the blue box next to the layer you want the item to be on.

 

1. Select the Circle in the Image.

 

Notice that on the Layers Palette there is a small blue box next to the Circle Layer.

2. Grab the small blue box and drag it to Layer 1.

 

The blue box should appear next to Layer 1. The Circle is now on Layer 1!

 

Continue to Fill, Stroke, and Effects |