Once you have a flat
image of the basic design for your website you are
ready for the slicing process. Slicing helps reduce
your overall site design file size for fast loading
on not just dial up connections but broadband as well!
Sometimes designs that are really complex can be quite
large in size and optimization is a necessity.
Go ahead and open your .png file by
opening Fireworks, click File, Open, and browse to
the location of your .png file for the template. When
it opens, it should look like this:
As you can see there are green boxes
around certain areas of the design. These represent
the images that are used in your website template.
The next thing you want to do is open the .jpg file
that you just created. Once you have that open, right
click anywhere on the .jpg, go to edit, copy. You can
then close that file and right click on the .png file
you already had open, and click edit, paste. Be sure
that its in the proper spot and lined up with the image
you just pasted over. On the right side there is a
toolbar that contains the layers. You can click the
eye beside each layer to make them be visible and disappear.
If you want, you can go ahead and click the bottom
layer as you will not need it anymore. Then, save your
file. You are now ready to start the process of image
slicing.
* When you do this next part it is
crucial to remember that your index.html file may be
overwrote. If this happens all you have to do is copy
the index.html file from your original web template
zip file over the new file that it created. Fireworks
creates its own html version of your index page which
overwrites the hand coded html that we have provided
for you that keeps everything in line.
In order to get the images from your
design to your images folder go to File, Export Preview,
and choose these settings:
You will want to choose:
Format: JPG
Quality: 80
(which is Fireworks default settings for "better
quality")
Click the export button, browse to the location of
the images for your web template. Change the "Save
as type" to "Images Only". You can then
click save. Fireworks will then bring up a box that
says that the files already exist. "Continue and
replace existing files?" Click OK! Be sure to
save your .png file and you can close Fireworks. You
are now prepared for the great process of HTML editing
and further customization of your web template to create
your website.
Click the button below to proceed
to the next area:
|
