Insert Images and Text in Fireworks CS3

[This is Step 2 of the Fireworks CS3 Tutorial]
You may also be interested in the Fireworks CS4 Tutorial or the Fireworks CS5 Tutorial.

If you plan to use stock photos you should find the appropriate images and keep them ready. You should also have logos, bylines and some sample text ready. If your home page has a different layout from the rest your site you will have to create 2 different layouts. For the home page design you should be clear about what you want to communicate, things that you want to highlight and other usability principles. You should also be clear on your navigation based on your site plan.

Insert Images

Insert any images that you plan to use [File > Import]

Browse for the image file
Select the file
Click the 'Open' button
The cursor will change
Click where you want to place the image on the canvas
The image will be placed there

You have many tools to clean up and enhance the image within Fireworks.

You can use auto levels to bring out the best in photos [select photo > Filter > Adjust Color > Auto Levels ].

You can also try out the other filters.

filters
Fireworks Filters

You can undo if you're not happy with it. By default you can undo upto 20 actions in Fireworks. You can increase the number of times you can undo by setting it in {Edit > Preferences > General Tab > Undo Steps].

You can make chages to the images - remove backgrounds, resize etc. You can also create vector shapes. Take some time to explore the options provided in the tools palette [Window > Tools].

Fireworks Tools Pallette

Insert Text

Use the text tool to insert text like a sample heading, sample textual content, menu items, byline, sample links, footer - copyright info etc. Style the text by using the options in the Properties Palette.

text properties

You can specify the color, font, size etc. You can also add filters, alignments, spacing, leading etc. Explore what you can do with text.

Go to Step 3 >>

Fireworks CS3 Tutorial Menu

Step 1: Create a new Fireworks document

Step 2: Insert images and text

Step 3: Create the layout

Step 4: Slice and export the images

Project: Create a simple layout

Fireworks Tips and Tricks

Fireworks CS4 Tutorial

Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.

Fireworks is part of Creative Suite 3 Web Standard
Streamline web design, development, and maintenance. Order Now!