Home
》》》》》》》1![[IR]ImageReady Tutorial Slice and Dice in Image Ready! Empty](https://2img.net/i/empty.gif)
[IR]ImageReady Tutorial Slice and Dice in Image Ready! Tue Sep 21, 2010 9:05 pm
Admin
Admin
- Download this image for the tutorial
- 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 [You must be registered and logged in to see this image.] from the tool bar.
- Use the slice tool to draw rectangles around each part of the image menu items and pictures..
- [You must be registered and logged in to see this image.]Click on each slice with the slice select tool.
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
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
[You must be registered and logged in to see this image.]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.
[You must be registered and logged in to see this image.] - [You must be registered and logged in to see this image.]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"
[You must be registered and logged in to see this image.] - 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: <BODY BGCOLOR=#FFFFFF background="images/0.gif">
- Now your ready to rock and roll! Here is how it may look for you!
