|
|
 |
| Fireworks Web Design Tutorial |
Learn how to design a web site
with Macromedia Fireworks
Welcome to our tutorial on Fireworks. In this tutorial you can learn how to design a web site (you can see a sample site given)
Professional web designers are normally uses Macromedia Fireworks is the best tool to designing a web site. Remember that Fireworks just helps you to design a site. After that you have to convert it to html and optimize by using Macromedia Dreamweaver.
- Open Fireworks
and click on File>New.Here you give the width as 780 pixels,
height as 600 pixels and select the canvas color.
 Select the rounded square tool from the toolbar, you click on the little arrow found at the bottom of the square tool to get the options.Then make a big rectangle across the screen as seen in the sample If you want you can adjust the rounded corner by adjusting the roundness in the object
panel (If the object panel is not opened, click on Window> Object to open the panel). Then Select the rectangle and make the stroke
colorand the fill color white This is a simple way of structuring a site. You can fill the content inside this box.
Select 'A' tool from toolbar. Then you'll get a text pop-up window where you can specify the font type, size and color. Enter your content and click on OK. Same way give a title to your web site. Title can be bold font and big size. And it should stand out properly. Also you can add a slogan below to your title. This can be smaller size.
- To look your site more interesting, add some images to your web site. But your site should not be graphic intensive because it increases the down load time. Draw a circle with the circle tool. Import an image by clicking on File>Import. Once its imported select the image and click on Edit>Cut. Then, choose the circle and click on Edit>Paste Inside. The image will be pasted inside as seen in the sample site.
Then you can give an effect to this image for a professional look. Click on Window>Effect to add an effect to the picture. You can try out some of the effects as shown below:
Select the image and in the Effect panel choose Shadow and Glow>Drop Shadow. In the pop-up window adjust the values. Also if you need you can optimize the image by clicking on Extras>Adjust Color. Then adjust the brightness, contrast, hues, saturation and more.
Onceits completed place the image on the top left corner of the site over the rectangle's top curve.
- The navigation is the most important part of a site. For that we will use simple buttons now. Again select the rounded square tool and draw a button then go to Effect panel click on Bevel and Emboss>Inset Emboss. Then copy and paste the button 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. Then select the 'A' tool and write the name of the links on each of the buttons.
That's it! You've done a website through this steps and you've learnt how to design a simple web site in Fireworks 4.0.
Also you can add all kind of elements to the site, like rollovers, swap images and drop-down menus. Learn how to do this in fireworks with the tutorials.
|
|
Back to Tutorials Home Page
|
Maa Design Services
MAA offers high-quality website design services at affordable prices and fast turnaround time. We provide ready-made & custom website design solutions to global clients from London, UK. Take a look at our client testimonials from clients all over the world. Contact us today to get started on your website! |
|
Client Testimonials
"If you want the QUICKEST service, the BEST web design, Logo and the FRIENDLIEST communication, DezineHub is the ONLY business to turn to. They far exceeded my expectations! I give them the HIGHEST recommendation! "
Dilip, Chemmen Ltd UK |
|
|
|
