Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
You are here : : ome > Free Resources > Fireworks Tutorials & Resources > Creating a Designer Website Layout  


Featured Fireworks & Dreamweaver Template

Learning Template 11
Learning & Education

Create an Amazing Website Layout with Curves in Fireworks

In this tutorial you will learn how to create an amazing layout with curves in Fireworks CS4.

learn how to create a designer website layout in Fireworks


Let's begin. We are using Fireworks CS4 for this tutorial.

1. Open Adobe Fireworks CS4. Create a new document by clicking on File > New OR Press Ctrl+N. Set the width as 900 pixels and height as 800 pixels.

2. We will now create the background. Click on the rectangle tool and draw a rectangle to cover the entire document area.

3. Select the rectangle and in the Properties panel choose Gradient > Linear in the Fill Options and Select Yellow to White. See the image below.

lienar gradient

4. Now we will create the header. Create a design object with points using the pen tool. Choose an orange gradient fill and outline with 1-Pixel soft white color.

pen tool

5. Select the pen tool on each point and adjust the curve as seen in the image below.

6. Create another curved object using the same method.

7. Copy the previous object and tweak it as seen below.

8. Draw a Rectangle box at the bottom-left of the layout and remove the top-right point of the rectangle using the subselection tool to form a triangle, fill the color with orange gradient.

9. Now draw a Rounded-Rectangle with white fill color and outline with 1-Pixel soft orange color, then tilt slightly the Rounded-Rectangle with the Scale Tool.

Rounded- Rectangle

Scale Tool

Rounded- Rectangle

10. Create another curved design object above the tilted Rounded-Rectangle using the same method of step 4 & 5.

11. Create a circle shape using the "Ellipse Tool" and fill with Gradient > Radial and Alpha - 81 to reduce the transparency of the image. Copy & paste the circle in other places as seen in the below image.

Gradient Circle


Gradient Circle

Gradient Circle

12. Copy the Rounded-Rectangle & Resize it into smaller size and arrange it on the top right of the Header layout.

Small Rounded- Rectangle

13. Copy the curved object from the layout Header and make it smaller than the original, flip & tweak it and also change the fill color into "Red", so that it forms a logo.

14. Go to the " Text Tool " and type the company name as "Entheos" with Font type - Palatino Linotype, font size - 43 and fill as Grey color. With this we have completed the header, logo & company name options of the layout.

Text Tool Text Type

Text Type

15. Now we will create the menus using the "Rounded-Rectangle Tool" and fill gradient color in Red. Copy & Duplicate 4 more Rounded-Rectangles

Text Type

Text Type

16. Follow the above step and create an another Rounded-Rectangle in grey color & arrange it on the right side of the menu for the title.

Text Type

17. Now we can name the menu items, title name & body text using the " Text Tool " as below.

Title Name

Menu Items

Menu Items

18. Draw a line on the triangle using the "Pen Tool" and use the text tool to type the footer name "Designed by EntheosWeb".

Hold down the "Shift" key on your keyboard & ensure that both objects (i.e, text & line) must be selected to get the text to attach to the path. Now, choose Text > Attach to Path and your text will be attached to the line as the below image.

Menu Items

19. And we are done, the layout is created successfully in Adobe Fireworks CS4.

Menu Items

20. You can also add images along with the body text.

Menu Items

You can download the PNG file here.

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