Photoshop Tutorial: Image Slicing

Published October 4th, 1999

This tutorial will show you how to cut up images for use in interfaces, website layouts and templates, tables, or Javascript enabled menus, etc.

Step 1

Open up the image you intend to cut up and press Cmd+R (PC: Ctrl+R) to turn the document’s Rulers on. Make sure you drag the edges of the image out a bit so you have a bit of gray work area.

Step 2

Click on the top Ruler and drag down with your cursor—a blue horizontal line should appear. Let go of the cursor at the point where you want to make your incision. You can adjust the position of the line by clicking and dragging on it with the Move tool.

Step 3

Repeat this process, only this time from the ruler at the left of your image. You should now have an image divided into four separate sections by the blue lines. Repeat the process until all of the areas you wish to cut up are surrounded by blue boxes (see image below).

Step 4

If you plan on animating a small section of the image, make sure that you have that particular section marked to be cut out—this will reduce the overall file size of your image, because the whole image will not have to be loaded multiple times for the animation. Also, make sure that the Snap To Guides option in the View Menu is checked.

Step 5

Select the Rectangular Marquee tool and drag a selection box around the area of the image you wish to capture/cut out. You do not have to select every piece of the blue guides, only the parts that give you the desired size for your selection (notice in the below image how I skipped the 2 lines in the middle in order to select a “taller” section).

Step 6

Once you have the area selected, press Cmd+C (PC: Ctrl+C) to copy the selection into memory. Now, create a new blank document by pressing Cmd+N (PC: Ctrl+N). The New dialogue box should automatically show the dimensions of the piece you just copied. Press Cmd+V (PC: Ctrl+V) to paste in the selection you just copied. Save your new image and return to your original full image.

Continue with this process for each section that you want to cut up.

Step 7

Now that your image is separated into nice usable pieces, you will now need to “reassemble” them, so they appear as one single image again. To do this you will need to use CSS. When you’re done, all of the images should appear lined up as if they were still one single image.

Remember, as I mentioned above, there is a much easier way to do this now - use a program such as Adobe ImageReady or similar programs (I still remember the days when this was the only way… noooo!).