Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Design a Layout in Fireworks CS4   

 

Featured Fireworks & Dreamweaver Template

Beauty Template 8
Beauty Template
Inner Page Design
$59.95

Design a Layout in Fireworks CS4

In this tutorial you will learn how to design the below layout using Fireworks CS4

cs4website

Requirements : Adobe Fireworks CS4

I absolutely love Fireworks and have been using it to design websites for the last 8 years. It is the best tool for website prototyping. Of all the releases I am most excited by this Fireworks release as it includes great features like exporting in CSS, having a Master Page and creating multiple pages within one Fireworks document and linking them together just as you would normally do in Dreamweaver.

I was excited about Fireworks CS4 after attending the CS4 seminar and couldn't wait to try out it. Above is the website I created by playing around with the new features of Fireworks CS4. I thought I would share with you how I designed and created this website in Fireworks. Let's get started!

Step 1 - Design the Base Layout

I came across a cool website called www.colourlovers.com which gives you great color options and background images that you can use when you are looking for new color/design ideas. You can download this image from here. Open Fireworks CS4 and select File / New. Select your canvas size as 850 x 600. Save the document as layout.png. Always remember to save your work by pressing Cntrl+S frequently while you are designing so you don't lose your work!

Copy the background to your document. (Another way to get good color combination ideas is to use the in-built Kuler tool in Fireworks CS4. by clicking on Windows/Extensions/Kuler, this gives a list of good color combinations in case you are ever stuck for color ideas).

I have rotated the image and used it in the layout. Import an image to the document by clicking on File/Import and selecting the image. As the colors are feminine I chose to have a graphic of a woman. The graphic effect I have used is really simple to do. First import the graphic over the background image. Then choose the graphic and select Darken in the Properties Panel.

Next, select the text tool (T in the tools panel ) and type out your site name and place it in the second bar. I have used the Scriptina font which can be downloaded here.

Again using the text tool type the pages you would like for your site, I have used Home, About, Services & Contact and have used small circles as separators. Another great thing in Fireworks CS4 are the smart guides that help you position elements in relation to other elements. Notice how the smart guide help to position the separators below.

Using the text tool, type in the footer information and place it in the footer i.e. Copyright © 2008. All Rights Reserved.

The layout should look something like this.

Step 2 : Creating Website Pages in Fireworks CS4


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


awesome website templates

EntheosWeb Design Blog

New Fireworks Tutorials

Learn How to Create a Smart 2D Button in Adobe Fireworks with Rollover Effect

Typography Art in Fireworks

Tracing & Drawing in Fireworks

Overlay Effect in Fireworks

Designing a Website Layout with Curves in Fireworks

Create a beautiful Slideshow Gallery in Fireworks CS4

stunning header collage