its like a void, but with ix on the end
nav shadow left nav shadow right
nav bar left nav bar right
nav bar left   nav bar right
nav bar left
recent articles
recent forum activity
transportation
Create your own website with our premium website builder solution
The largest collection of original website templates
Leading Free and Paid Web Directory Top 10 Google Rankings
Business Web Hosting. Low Cost and reliable service. Friendly 1-888-222-1495 support.
line

Website Design Fireworks Tutorial

In this tutorial we will create a basic website design in Fireworks. First things first, create a new file in the resolution you would like your website to appear. The first thing we are going to do is create a navigation bar. Create a new rectangle that extends the width of you canvas. Fill it with a linear gradient of light gray to medium gray, and stroke it with 1 pixel of dark gray.

website design 1

Now add a small dropshadow to your bar. Position the shadow below the rectangle, and lower the opacity.

website design 2

Now we are going to add some buttons to our navigation bar. Create a small rectangle. Change the gradient colors to yellow and orange, with a stroke of dark orange. Position the gradient so that the yellow is towards the bottom.

website design 3

Zoom in and use your line tool two create 2 highlight lines on the top and to the left of your button. They should border the inside of your dark orange stroke.

website design 4

Duplicate your button a few times, and extend them horizontally across your navigation bar. Add some text to your bar. In this instance I have added two text layers, one of white and one of dark orange. By positioning the dark orange text below the white text, and moving it one pixel to the right and downward we create a simple dropshadow effect.

website design 5

Next I added my website title and url above the navigation bar.

website design 6

Now we are going to add a side bar to our website. Create a new rectangle below your navigation bar. Change the fill mode to a linear gradient, and change your colors to two variants of blue, one light and one dark. Position your gradient so that the the lighter of the two colors extends from the left. Next I added a slight dropshadow.

website design 7

Add text to your side menu. This is a good area for recent news updates.

website design 8

Next we are going to add a title bar to our side menu. Create a new rectangle with the same width of your side menu, and position it near the top of your menu. Change the direction of your linear gradient so that the lighter of the two blues extends from the top. Again I added a small dropshadow.

website design 9

Using the same text methods we used on our buttons, add a title to your header. By duplicating the layer, and positioning the darker of the two below the lighter we create an inlayed or dropshadow effect.

website design 10

Add some text to your main content area.

website design 11

Finally I added a slight gradient towards the top of the design, and duplicated the navigation bar we made in the beginning and placed it at the bottom of the page to create a better sense of enclosure. Your done! here is how mine turned out.

website design 12

 

 

website templates
nav bar right
rss valid css valid Valid XHTML 1.0 Transitional
Copyright (C) 2005-2006 Voidix.com - Sitemap | Free Wordpress Layouts | Free Wordpress Themes