In this tutorial you will learn how to design the below layout using 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!
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.
