Photoshop Tutorial: Image Slicing

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

Note: If you have Adobe ImageReady (which comes with Photoshop 2.0 and above), the program can do all this automatically for you (including exporting HTML tables or CSS to reassemble the images on your page)… but if you don’t have ImageReady (or some program that can automate this task), follow along!

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!).

10 comments

Add your comment

Thanks David
U made my day.
I don’t have Adobe imageready and your simple tutorial helped me a lot.

Best regards
Sara

1

Nice post, this post will help definitely help every newbie who does not have image ready with photoshop. thanks a ton david.

2

Thank you, this really is a nice post.

3

thanks, helped alot

4

Thank you Dave. I’ve been trying to work out how to do this - on and off - for a long time. Worked perfectly.

5

Thanks Dave for your tutorial. It helped alot with a project i was working on

6

Web Design – Republican firefighters responded to a series of blazes that swept through the financial districts of the nation’s major cities this past week and continue to rage from coast to coast.

7

To use Photoshop as a professional work not every person can do that it by it self. assignment services

8

Montpellier Creative brings with it access to the expertise within both Montpellier Media and Montpellier PR creating a truly integrated solution in Web design Cheltenham.

9

It’s actually a great and helpful piece of information. I’m happy that to read this exclusive points. custom term papers

10
Please register or login to post a comment.
Back to top