How To Design a Website using Adobe Fireworks

Posted by: admin  :  Category: Web Design

http://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):

http://www.mlwebco.com/tutorials/web-design/fictitious_website.zip

If you have any questions, send an email to mlocke@mlwebco.com or visit http://www.mlwebco.com

Thanks,

~ Mike

Duration : 0:9:41


19 Responses to “How To Design a Website using Adobe Fireworks”

  1. mlwebco Says:

    I just used the …
    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.

  2. akumazilla Says:

    Sorry….how did …
    Sorry….how did you make the rectangles in the beginning? Which tool should I use?

  3. mlwebco Says:

    Thanks, glad you …
    Thanks, glad you like the tutorial.

  4. vvoy Says:

    thank you ,you are …
    thank you ,you are awsome !!!!

  5. mlwebco Says:

    The 960px in width …
    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. ;)

  6. pakt40 Says:

    Standard sites are …
    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?

  7. mlwebco Says:

    Check out my other …
    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.

  8. camelwide888 Says:

    so why when i …
    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?

  9. marianosa Says:

    please explain that …
    please explain that to download quality photos of the site istocphotos have to pay

  10. webguruindia Says:

    This was really …
    This was really nice.Thanks!

  11. mlwebco Says:

    I used 900 width, …
    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.

  12. Brandlax Says:

    What size did you …
    What size did you use?

  13. vicmcd Says:

    really good and …
    really good and easy to listen to thanks :) Sub’d!

  14. waze86 Says:

    Ok I will try that …
    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.

  15. mlwebco Says:

    If you’re exporting …
    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.

  16. waze86 Says:

    Hey dude, I done a …
    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?

  17. mlwebco Says:

    Next to my profile …
    Next to my profile photo, just click the blue “more info” link to display the the link.

  18. mlwebco Says:

    If interested, I …
    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!

  19. zil0484 Says:

    nice. really …
    nice. really helpfull