Once you get your graphic for you layout finished in Photoshop you'll want to open it in ImageReady.
You can do this by either pressing this button, located on the bottom of the tool bar, or by pressing ctrl+shift+M
This will take everything you have done and open it in ImageReady. From there you want to select the slicing tool and start dragging it across your image to create your slices. You may find it helpfull to go to view → snap
. This will make your slices snap with your layers and make your slices a little more managable.
Once you have all your slices made, select the Slice Select Tool. Click on the individual slices. From here you'll need to do two things. First, if the particular slices is to be a clickable link, enter the url for the slice in the slice menu.
The second thing you will need to do is decided how each slice will be saved. You can mix and match between jpeg and gif file types. It might be a good idea to save pictures as jpeg and text as gif.
Once you've done this for all slices and are ready to save go to file → save optimized as
and save your slices as HTML and Images
After you've saved your slices open the html document in your browser by going to file → open file
. This will bring up your image, already put together. If you've assigned urls to any of the slices you can test them here as well.
From here you need to view the source. Right Click anywhere NOT on the image and select view page source
. Once you've done this copy everything between
<!-- ImageReady Slices (Untitled-1) -->
<!-- End ImageReady Slices -->
and paste it into notepad. You will also need to upload your individual slice images that ImageReady has made for you to a host such as Photobucket
. These will be saved in a folder named images
alongside your HTML document.
Once you've uploaded your slices, take the url of the image and paste it into the proper area of your source code you have open in notepad.
Your url will look something like this:
and put it into the corresponding area of your coding, in this case it will look like this:
<img src="images/Untitled-1_01.jpg" width="440" height="40" alt="">
After you have pasted in all your individual image urls you are basically done. Save the document in notepad and then set up your page by first Hiding Everything
and then adding in your div
. Your codes that you have saved in notepad will go inside your div.