Easy Way To Design A Web Page Using Fireworks

Easy Way To Design A Web Page Using Fireworks

Learn how to design a website with Adobe Fireworks

We provide you a tutorial on fireworks to create a web page. In this, we are going to learn how to design and visualize the web page

Step One:

The first step is to define your canvas size and color. Open Fireworks and click on File>New. Fireworks will launch the new document window. Here you can give the width as 1204 pixels, height as 780 pixels and the canvas color as you wish or any color you like eg: blue and green color.

Step Two:

You will now have a blank blue canvas. Let us give the site some basic structure now. Click on the rounded square found on the toolbar on the left – you’ll need to click on the little arrow found at the bottom of the square tool to get the other options. With the rounded square selected make a big rectangle across the screen as seen in the sample site shown on top. Let the right side of the rectangle go out of the canvas. You can adjust the rounded corner by adjusting the roundness in the object panel (If the object panel is not already open, click on Window> Object to open the panel). We’ve used 20 for the roundness. Select the rectangle and make the stroke color #FF9900 and the fill color white (take a look at the picture on the left to see where you can find the stroke and fill colors. This will be the basic structure of the site. Rounded edges make a site look more appealing rather than stark edges. This is a simple and effective way of defining the structure of a site. The content for the site will come inside this box.

Step Three:

You can now fill in some content. Click on the A tool found in the standard toolbar. On clicking on the canvas you’ll get a text pop-up window where you can specify the font type, size and color. Type in your content and click on OK. You can click on any of the corners of the text to adjust the size of the text.
With the same text Editor type in the title of your website. Give your title a bold font and keep the size relatively high. The title needs to really stand out. You could also type in your slogan or a brief description about your site in a smaller font below the title – this will tell your site visitors what your site is all about!

Step four:

Think of a picture you would like to use in your site. Import this image by clicking on File>Import, navigate to the folder which has the image and selects the picture. Click within the canvas for the picture to be imported.
Once the picture is imported place it over the circle you have just drawn. Next, choose the picture and click on Edit>Cut. Then, choose the circle and click on Edit>Paste Inside. The picture should now be pasted inside the circle as seen in the sample site.
You can now add an effect to this picture to give it a more professional look. Click on Window>Effect to add an effect to the picture.

Step Five:

Now coming to the most important part of a site – the navigation. For the navigation of this site, we will be using simple buttons. Again we will use the rounded square tool to make the buttons. This time we’ll keep the roundness as 60. The fill color will be orange (#FF9900) and the Stroke is None. We will give the buttons an embossed look so keeping the button selected, go to your Effect panel click on Bevel and Emboss>Inset Emboss. Once you’ve got your button the way you like it, copy and paste it one below the other. Once you have all the buttons one below the other you can align the distance between them by selecting all the buttons and clicking on Modify>Align>Distribute Heights. This will space the buttons equally. Click on the A tool and write the name of the links on each of the buttons.