Image Slicing w/Fireworks

Site we're going to create: Big Moose

1. Open original image in Fireworks

• moosemaster.png (Save this original file to a folder named four on your desktop)(@2mb, 960w x 650h)

2. Slice it up

• Use the Slice tool (under Web Tools)
• In general always slice on rows (you can always come back and slice an image a 2nd time
• Top row, three slices each 320w x 300h, first slice x,y=0,0 second slice x,y=320,0 third slice x,y=640,0
• Bottom row, three slices each 320w x 350h, first slice x,y=0,300 second slice x,y=320,300 third slice x,y=640,300
• Turn show/hide slices on and off

3. Rename layers/slices

• In the panels area on the right open the Layers Panel (Windows-Layers if not there)
• One by one, double click on each layer and rename the layers like this:
  • topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright

4. Check out Optimization abilities

• Choose the Select Tool
• Click on the bottomright slice on the image
• In the Properties menu review the export file type images that you can select from
• For bottomright and bottomiddle choose GIF WebSnap128, for bottomleft choose JPEG Better Quality
• For all the top choose JPEG smaller file 60% (You may have to use the optimize panel to the right)

5. Export html document and image slices

• Click in blank area somewhere away from image
• Ctrl+Shift+x to get to export preview/image preview
• Click on export...
• Make sure to change "Save In" folder to the four folder on the desktop and change the filename to index.htm
• Check box to put images in subfolder
• Click on Options... button and change the following:
  • In the General tab, table should be xhtml (preferably generic)
  • Table tab, make sure setting for spacing is 1px transparent spacer (in case we didn't slice well)
  • Document tab, change slice file name to "slice" and set everything else to none
• Click ok
• Click Export or Save (depending on your version)...give the computer a second to export an html file and all the sliced images

6. Close main image and open index.htm in DreamWeaver

• Close moosemaster.png in Fireworks
• Open the index.htm file in Firefox and Internet Explorer
• Open DreamWeaver and open index.htm
  • Look at the path for the exported images...they are listed as images/ as they're in a folder at the same level as the index.htm file
  • Change title of document to Big Moose
  • Review how image sliced into a Table
  • Change background-color of body to #000000 by adding to embedded css
  • Change margin on body to 0
• Go back and look at the page in each browser to see changes

7. Reopen and Add to bottomleft image

• In Fireworks open the bottomleft image, we're going to add three link "areas" to the image then map it with xhtml
• Open the image from the images folder
• Click on File-Save As and save the image as bottomleft2.png (make sure to change the filetype), this way we'll have a master copy of the image and the older image for backup
• Click on the Rectangle tool under Vector and draw a rectangle from the top left that's 250w x 50h, use the Properties manager to reset the color to #9dacbf and take the opacity to 60%
• Click on the Select tool, click on the rectangle you just drew and copy/paste, use the Arrow keys on your keyboard to bring the image down to 75
• Reset the color on this image to #6c7151 and take the opacity to 60%
• Make sure the Select tool is selected and copy/paste, move the image to 150
• Reset the color on this image to #ff9933 and take the opacity to 60%
• Select the text tool and using the Properties area change the font to Lucida Calligraphy, size: 40, Bold, #e0e0e0, Smooth Anti Alias
• Write the text Brains, Beauty, Brawn one by one in the lower right of the three respective blocks
• Save, the Ctrl+Shift+x to get to image preview/export preview...export the image as a jpg as bottomleft2.jpg to the images folder in the four folder
• Leave the original image open...we'll be coming back to it

10. Change image and Create Map in DreamWeaver

• In DreamWeaver, in the index.htm file, find the area of the page with img src="bottomleft.jpg" and change it to "bottomleft2.jpg"
• Save and go to IE/FF and look at the file to make sure the changes took place
• Creating the Image Map:
  • In DreamWeaver add some space between the td tag and the image tag
  • Type the following in the img tag: usemap="#links" this will be the name of our imagemap
  • Type or copy/paste the following directly below the img tag:
    • <map name="links" id="links">
      <area shape="rect" coords="" href="http://www.mensa.org" alt="Mensa" title="Mensa" />
      <area shape="rect" coords="" href="http://www.style.com/vogue" alt="Vogue" />
      <area shape="rect" coords="" href="http://www.ufc.com" alt="" />
      </map>
  • Now we just in to type in the coordinates for each area of our image map
    • Go back to Firework, go to Window-Info, this will open the Info Panel...if you move around on the image you'll see the x and y coordinates
    • We need two 2 part coordinates for the upper left and bottom right of the "hotspot"
    • For the first area "Brains" we should see that the first two coordinates are 0,0 and the second should be 250,50
    • The second and third set are (make sure you know why):
      • 0,75,250,125
      • 0,150,250,200
• Reload/Refresh the page in each browser and try the hotspot map links