View comments | RSS feed

Export the image for the web

The mock-up of the Cafe Townsend homepage you created should look as follows:



Next, you decide to export the PNG file to a JPEG file that you can display on an internal website or e-mail to your colleagues or clients.

  1. Select File > Image Preview.



  2. In the Format pop-up menu, select JPEG.
  3. In the Quality text box, type 90, or use the Quality slider.

    Because this image will not be used on a public web page, you don't need to be concerned about file size and download time. Otherwise, a quality setting of 90 might be too high.

    In the area above the preview image, you can see how your settings affect the file size and download time.

  4. Click Export.

    The Export dialog box appears.

  5. Browse to the following folder:

    local_sites/cafe_townsend/fireworks_assets/

  6. Click Export.

    Fireworks creates a JPEG version of your page mock-up in the fireworks_assets folder. Your PNG file still exists and you should use it to edit the mockup in response to feedback. After you complete each revision, export it again.

In this tutorial, you completed a page mock-up. You learned to create and save Fireworks files, import and place images, draw vector shapes, place text and images, and export images.

For detailed information about any of the features covered in this tutorial, and for information on additional Fireworks features, see Using Fireworks.

Comments


Auora said on Nov 6, 2005 at 10:21 PM :
Firstly I would like to thank everyone who contributed into putting the tutorial together, but only being a beginner, as much as the tutorials are helpful, they leave you at a loss at the end. Now I have finished my mock up, how to turn it into a web page? Unfortunately the next tutorial on this subject covers a different composite, I would like to see the same one to the finish.
eg..how to export the flash, how to make links, (do you use the moke up or do them seperately) how to slice etc
Suggestions from a beginner.
Cheers Trish
chucknado said on Nov 7, 2005 at 11:13 AM :
To turn the Cafe Townsend mockup into a web page, see the Dreamweaver tutorials at http://livedocs.macromedia.com/dreamweaver/8/using/part1_ge.htm. To use the dish images to create a Flash animation, see the Cafe Townsend Flash tutorial at http://livedocs.macromedia.com/flash/8/main/00000071.html.
lgattone said on Dec 6, 2005 at 2:50 AM :
Thank you for the page mockup tutorial.

However, I was not able to follow it because I do not have that particular folder because I have fireworks mx. Is there a tutorial for that or are these image files I need to do this tutorial in a different folder altogether.

Thanks for any information.

Once again, great tutorial.
chucknado said on Dec 7, 2005 at 9:17 AM :
You can download and install the trial version of Fireworks 8 and try out the new tutorials. The sample files are installed too. See www.macromedia.com/go/fireworks.
3ddigital said on Apr 1, 2006 at 1:26 PM :
I have Fireworks 8 and I enjoyed your this tutorial. I have used mx in the past and have always had trouble exporting over to Frontpage. I would think that Frontpage has enough copies out there that users of your product would appreciate an exmaply from start to finish. You always seem to address Dreamweaer as the solution for almost everything.
Thanks for the information
Once again a fine tutorial

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/fireworks/8/fwhelp/gs_03_17.htm