Importing, Selecting, and Moving Objects

 

Fireworks can work with just about any kind of file you might want it to work with. Fireworks can open GIFs, JPGs, TIFFs, PNGs, CorelDRAW files, PhotoShop files, and Illustrator files. You can, of course move and resize the images that youve imported.

 

Before You Do Anything

1.      Open Fireworks
When you open Fireworks, every single palette in the whole program opens. Who knows why

2. Close every palette (except for the Toolbox) by clicking on the "x" in the upper right corner.

 

If you need a palette later, theyre all available under the WINDOW pull down menu.

 

Importing Images into Fireworks

When bringing external images into Fireworks you can either open them into their own unique window, or you can add them to existing open images.

 

Opening Externally Created Images in Fireworks

Its super easy to open an external file with Fireworks.

1.      Click FILE-> OPEN

2.      Find the file you want and open it.

 

You will have to set you Import Preferences by clicking EDIT-> PREFERENCES-> IMPORT

 

Layers: Later on well talk about layers and frames, but for now, make sure youve got Maintain Layers selected. This will allow you to manipulate the separate PhotoShop layers.

Text: Fireworks allows you to import text as editable text, or if you dont have the fonts used to create the original PhotoShop file, you can choose Maintain Appearance, and import the text as an image.

Use Flat Composite Image: Flattens the PhotoShop image, importing it as one layer.

 

Importing Images Into an Open Fireworks Document

You can also bring an outside image into an open Fireworks image. You can resize the placed image, and move it around.

To import an image into an open Fireworks image:

1. Open Background.PNG in the "fw_images" folder
   You can download the fw_images folder at:
   http://www.awdsf.com/exercises/fw_images.zip

2. Click File-> Import
3. Choose PS Layered Images.PSD from the "FW Images" folder
4. Choose Maintain Layers and click OK
   
   

Notice that nothing new has popped into the image. Youll have to place the new imported image.

You cursor should now look like:
the right angle represents the upper left corner of your placed image.

 

5. Click to place the imported image.

 

Keep in mind that importing and opening an object are different

Selecting, Moving, and Resizing

When working in Fireworks, It is very important that you have the correct tool for the correct job. To select, move, and resize, youll use the black pointer tool on the tool box.

 

To Select Objects

1. With the black pointer tool selected, click in the blue gradation.
2. Click the picture of the face.
   When you select an object, it becomes outlined with a blue line.

3. Roll over the white square.
   Notice that when you rollover an object that it gets a red outline? That outline is showing you what youd select if you clicked right then.

4. Click the White Square
   Notice that the White Square is selected, but the face no longer is.
5. Hit DELETE on your keyboard.
   Bye, Bye, White Square!

 

To Select Multiple Objects

1. With the black pointer tool selected, click the picture of the face.
   Itll be outlined in blue, letting you know that youve selected it.
2. Hold SHIFT on your keyboard and click the text.

 

Both objects are selected!

 

You can also drag with the pointer tool to select multiple objects, but this can sometimes get tricky. Just remember that any object you drag across will be selected.

 

You can select everything in the image by hitting CTRL/CMD + A on the keyboard.

 

Moving Objects

Its easy to move objects in Fireworks.

1. Select the desired object
2. With the black pointer tool , click and drag the object to its desired destination.

 

You can also move an object with the arrow keys on your keyboard. The arrows move an object one pixel at a time.

 

Changing an Objects Stacking Order

You can easily change the order of stacked objects. In the following image, the stacking order of the face picture was changed.

Changing order is easy:

1. Select the object you want to change order for.
2. Click MODIFY-> ARRANGE

 

If you bring an object "forward" or "backward", it moves one step in the stacking order. If you "Bring to Front" or "Send to Back" you send that object all the way to the front or back.

 

Align Objects

There will be times youll want objects to perfectly line up. Instead of spending countless hours playing with the move tool, let Fireworks help you out! Alignment is one of the most important aspects of good design. It's one that is highly stressed in our web design course.

 

Align Objects

You can align objects to each other with two simple steps.

1. Select the desired objects.
   Hold SHIFT to select multiple objects
2. Click MODIFY-> ALIGN
3. Choose your alignment type.

 

You can also use the Align Objects option to evenly space or distribute objects.

 

Aligning With Ruler Guides

Specifically made to help you line things up, ruler guides can be dragged onto any image. The ruler guides wont show when you export to the web. Objects can be set to automatically "snap to" the ruler guide, making it easy to perfectly line up elements within an image.

 

The Ruler Guide is Green

To create a ruler guide:

1. Make sure the rulers that surround your image are showing.
   If theyre not, click: VIEW-> RULERS
2. Put you cursor inside the ruler and drag into your image.

You can drag as many ruler guides from either the top or left ruler as you like.

 

Removing Ruler Guides

To remove the ruler guides, simply drag them off the screen with the black arrow .+

 

 

Resizing Imported Objects in Fireworks

There are a number of ways to resize objects in Fireworks. Well cover the most basic now.

1. Select an object.
2. With the black pointer tool , click and hold on the blue corner handle.
3. Drag out.

Hold SHIFT while resizing to keep an image proportionally shaped.

 

 

Continue to Bitmap Editing and Basic Drawing | Back to Courseware