Project: Create a Layout in Fireworks CS3
Before you start:
- If you are a beginner make sure you go through steps 1- 4 of the Fireworks CS3 Tutorial before attempting this project.
- Download Project Files (fireworks.zip, 1 MB)
- Use the images provided for the project. You can get free images like these from Dreamstime (click on the "Free images" tab).
- Open a new document.
Import and edit the picture of the flowers
- Import Image. File > Import > Browse and select image of the flower
- Resize Image - Select image. Select Scale Tool. Drag the corner of the image to resize it.
- Rotate Image - Select Image. Select Scale Tool. Place cursor near the edge of the image > When the rotate cursor shows > click and drag clockwise or anti clockwise.
- Remove Background - Click the magic wand and click on the background of the image. > it will get selected > press > delete key. Select and deleate any leftover background
- Click the rectangle tool > click and drag to create a rectangle where the menu will be
- Select the rectangle. select the eye dropper Tool > Click somwhere on the flower to pick that particular color
- Select the text tool > click on the yellow rectangle > type the menu names separated with “ | ” symbol (over enter key).
- Select the font and size and color from the properties panel
- Position the Text where desired
- Select the line tool > create a line below the menu rectangle
- Use eye dropper tool to select a green form the leaf in the image
- Use the text tool to create the logo name – specify font, size and colors
- Insert the image of the mother and child > Resize (If too big zoom out soo you can find the corners of the image)
- Select rectangle tool to create a rectangle around the image > change the stoke color to green by using the eyedropper tool
- Heading - Use the text tool to type the page heading (use a common font such as Arial so that it can be done in html later.
- Content - Use the text tool to type the sample text content. If too long select tht right-center node around the text and drag inward. The text will wrap within and go downward.
- Copy and paste the green line below to form a boundary before the footer information.
- Use the text tool to type the footer text.
- Use the slice tool to create slices over the logo and the mother/ child picture. Select the mother/ child picture and change to jpeg format in the optimize panel.
- Export Slices -Right click on each slice and click “export selected slice”. Export the images to an “images” folder within your “project name” folder.
Your layout is ready, now you are ready to create your website. Recreate the layout in HTML with this Dreamweaver CS3 Tutorial.
In order to make you website live you will need to sign up with a hosting server. I recommend Hostgator which I use to host this site.
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
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!