How To Design a Website using Adobe Fireworks
www.mlwebco.com – ML Web Consulting shows you how to quickly mock-up design a website within 10 minutes. Using Adobe Fireworks, Michael Locke demonstrates how to design a website home page. In this video, you’ll see how a web design comes along from beginning to end. You’ll see a few design tips and tricks that you can apply to your own project or website. Download the Work Files Here (Both PNG and PSD files): www.mlwebco.com If you have any questions, send an email to mlocke@mlwebco.com or visit www.mlwebco.com Thanks, ~ Mike
Tagged with: Adobe fireworks • Building a website • design tips • design tricks • designing a home page • designing a mock-up • Designing a website • home page • mockup • using Adobe fireworks • web design course • web design tips • web design tricks • website
Filed under: Website Design Videos
Like this post? Subscribe to my RSS feed and get loads more!
nice. really helpfull
If interested, I have a link to the work file used in this tutorial in the description area. You can download the PNG and PSD file. Enjoy!
Next to my profile photo, just click the blue “more info” link to display the the link.
Hey dude, I done a design in fireworks cs4 and i have sliced it up… But The content page is transparent but when i export it via CSS and Images it ain’t transparent any ideas?
If you’re exporting and you notice that the images aren’t exporting as transparent, you need to make sure that you’re exporting as PNG rather than JPEG or GIF. Just make sure to select PNG in the optimized box. Also, before you export, make sure to preview first, this will show you if you’re doing it correctly.
Ok I will try that and let you know thanks, This happens when i add text in the content area and it just white not transparent.
really good and easy to listen to thanks
Sub’d!
What size did you use?
I used 900 width, not sure if that was your question. Also, I have the file available for anyone to download. Just click on the (more info) link in the description area, there you will see the link to download and play around with.
This was really nice.Thanks!
please explain that to download quality photos of the site istocphotos have to pay
so why when i highlight the site it appears as a whole big jpg image? and it also saves that image in my images folder, how can I make it look like a site and not like a static photo?
Check out my other video on how I take this mock up to html, /watch?v=OM0d-8gUaxQ this might help somewhat in answering your qusetion.
Standard sites are 1024 x 768 and I heard you say you use a width of 960 but do you did not specify a height? what was the height and is their a particular reason why you use 960?
The 960px in width became the standard “safe” size a while back that worked best within the 1024px resolution without scrolling. You want to stay around 960px because scroll bar add extra pixels on different browsers. So 960px is safe. But no reason it couldn’t be 970 or 980
… also for height you should make sure your important info stay above 550ish to stay above the fold to be seen without scrolling but the page can be long itself. Just the impoant stuff aove 550px. 
thank you ,you are awsome !!!!
Thanks, glad you like the tutorial.
Sorry….how did you make the rectangles in the beginning? Which tool should I use?
I just used the rectangle tool in the tool bar section. It’s the tool normally on the left side tool bar in the “vector” section. It’s where you can draw rectangles, circles, etc.
Great job. This is the first time I’ve seen someone design a page completely within FW. Nice workflow!
Thanks Brian!
Nice Work, Well I only make Advance Tutorials of FireWorks CS4.
Nice Video dude