Index > Photoshop/Imageready Tutorials > Slicing tutorial

Part one | Part two
Slicing in Imageready is quite easy, if I can do it, you most definately can! Slicing is a useful process which slices up a big image into smaller ones. This allows coding frame and table layouts a lot easier! Let's begin:

In order to begin slicing you have to either turnover the image you are working on from Photoshop to Imageready to do this, click on the icon below or hold down Shift Ctrl M.

Once in image ready, select the following icon to begin:

Now, use that tool and click at a point in on the image where you want the upper left hand corner of the image piece to be. Now, drag until you want the image to end. A blue box should appear on the outline of the slice. If you can't seem to get it exactly the way you want it, try zooming in so you can see better. If you want to edit a slice's size that you already made, click on the icon next to the slice tool icon and click on the slice you want to edit, then edit it ^^! make sure that you make a slice specifically for where you want the text in the layout to be At the end it should look something like this:

Note: Make sure that if you are going to have an image map on the layout to make sure that you make that the images for the image map are on one slice, unless the more essential areas for text are in the way. In that instance put two slices for it. See example marked in red on image above!

Okay! Now that the image is all cut up into little slices, like a pie :D, go to File>Save Optimized as and make sure to save it as HTML and Images in the drop down menu. Name it whatever you want, I think I am going to name mine toejam :D ALSO! Make sure that if you are coding it for a layout that you make a specific folder for the layout! That makes it a whole lot easier later, take my word for it xD

Yay! Slicing all done!! <333 Hope you held on while I pitifully tried to explain xDD Onto the next part! Oh, and if you're completely lost or have a question don't be too scared to Email me! See I made it easy for you and everything :D

Learn how to make frame layouts?(part 2)

Sitemap | Copyright 2008 Demoria.net