Open Your image in Photoshop, and click the Jump to image ready OR open
the image in Image ready
Click on Slice tab of the animation panel. (or Windows=>show slice)
Select the slice tool
from the tool bar.
Use the slice tool to draw rectangles around each part of the image menu
items and pictures..
Click on each slice with the slice select tool.
On the slice panel window, name your images for what they represent. The
Banner should have the name banner, home should be named home, etc.
On the slice panel window, set the URL for any images you will want
linked. Make all the following slices and links
Slice
URL
Banner
index.html
Home
home.html
Specials
specials.html
Season
seasonal.html
Exotic
exotic.html
Contact
mailto:webmaster@developingwebs.net
Mainimage
For
the sake of a smaller html code, try to match up the lines along a guide so
that you get less cells created. Notice how I matched the menu down on
both sides, and then the left side up through the banner. I did the same on
the right side of this image so that I get the shaded areas mixed with the
images.
Set the file type on the optimize window to GIF since most of hte images
are a solid color.
Click on the 4 up tab. All your selections have shading in them that would
tell me they need to be jpg. Remember we saved the main selection as gif,
which means the unchosen areas will be saved as GIF. To save your selected
slices as JPG's now, click on each selection with your slice select tool, and
set the file type to jpg. Set the quality to just higher then where the image
shows a loss in quality. When you have set the file type and quality for each
selection, you are ready to save.
Click
FILE => SAVE OPTIMIZED
The save as window come up. Select the location to save all your files. The
name will be preset at IRSlicing.html. You
will want to select filetype as HTML and IMAGES. The images
will be inserted into a subdirectory called "images"
Your done! If you want to further optimize you will want to make a simple
1 pixel by 1 pixel gif of the solid color areas you did not specify. This gif
can be saves as 2 colors, Then change all the default images that you did not
name in the HTML to an image called 0.gif, and change the spacer.gif reference
to the image 0.gif. Leave the height and width reference in the html as it was
created so your table is not effected. Delete your images that you did not
name, so you should be left with the following images:
Slice
Banner.jpg
Home.jpg
Specials.jpg
Season.jpg
Exotic.jpg
Contact.jpg
Mainimage.jpg
0.gif
The last step is to set your page for a background of the 0.gif. Open
internet explorer. In Internet explorer, click file=>open. Find your html file
that is saved on the hard drive that image ready just made. Now in internet
explorer, click the VIEW=>SOURCE. This will open your source code. Find the
line that says <BODY BGCOLOR=#FFFFFF> and change it to:
from the tool bar.
Click on each slice with the slice select tool.
For
the sake of a smaller html code, try to match up the lines along a guide so
that you get less cells created. Notice how I matched the menu down on
both sides, and then the left side up through the banner. I did the same on
the right side of this image so that I get the shaded areas mixed with the
images.
Click
FILE => SAVE OPTIMIZED
