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.

Tags

  • Fireworks vs Photoshop

  • Difference Between Fireworks vs Photoshop

  • Fireworks vs Photoshop Uses

Related Posts

C

Convert base64 Data to image file and write To folder in PHP

In this post, I will be able to allow you to skills to handle the pictures encoded with Base64 and convert the pictures to a folder. While working with API for app, you'll notice that they'

Read More
The 5 Secrets of Google's Ranking Factors in 2021

The 5 Secrets of Google's Ranking Factors in 2021

SEO - Search Engine Optimization experienced some extreme changes in the course of recent years. The development of Google's algorithm is carrying new stuff to the table, and all web development c

Read More
How to Load More Posts using Ajax with a Button or on Scroll in WordPress

How to Load More Posts using Ajax with a Button or on Scroll in WordPress

In this article we will show you how to create a load more button to show more posts or custom post types using AJAX. In this way we can show more post without loading a page. Loading speed of the pag

Read More