The Slice Tool in Photoshop: Time to Cut It Up

Udemy Editor

The slice tool is one of those underrated and overlooked tools in Photoshop. Presumably, is was designed to help web designers slice up images and components of a web template for easy export to programs like Adobes Dreamweaver. However there is some contention over the use of this tool for that purpose as many argue the marquee tool is a better fit. Whatever the case is, let’s learn about what this tool can do and then use it in a real-world application.

For a crash course on Photoshop tools like slice and marquee check out the course Photoshop Tools.

As the name implies, the slice tool slices up images into smaller pieces. It makes these smaller images web-ready – primarily for use on web-sites. So if you’re working with a website template and need to extract say, a button from your design, you can easily do so by employing the slice tool. When you use this tool to create smaller images within an image, “slice” automatically numbers the images as you go. The idea is when you save the slices for the web Photoshop organizes them into an HTML document for you. (To save for the web go to File>Save for the web.)

The slice tool is also good to use for creating animations and rollover images which can be taxing if you don’t know what you’re doing (trust me – I’ve been there). These images are usually saved as GIFs which is a great format for animations or interactive images. Sliced images can also be saved as JPEGs which is better for photography. Are you a photographer? Check out the course Photoshop for Photographers.

The best part about the slice tool, I think, is how you can use it to create interactive images. For example, have you ever seen a map of the United States where you can click on the individual states for more information about a topic? That is the idea of the slice tool at work. In reality, the web designer probably didn’t use the slice tool because it doesn’t really let you “draw”, it more or less plops a square over whatever it is you’re trying to slice. This can make outlining the states properly pretty difficult (like, what about the top part of Idaho and the slice bleeding into Montana?). For this situation we would use the marquee tool. New to Photoshop? Learn the fundamentals in the course Photoshop 101.

So what can we use the slice tool for?

Templates! Lots and lots of templates. Or an interactive picture. We’re going to go with that one because I think it’s a cool idea to be able to click on different sections of a picture and get different results on a website. We’ll use Matthew Gray Gubler because he makes learning about the slice tool just that much more interesting.

Take a few minutes to read about some of the Best Photoshop Actions so you can enhance any project you set out to do. Okay, on to slicing.

Step 1

We’re going to take this photo and split it up into four different slices. You can open up your own photo in Photoshop and do the same. Go to File>Open and select your photo. Before we do anything else, go to View>Show and make sure that Slices has a check mark next to it.

Step 2

Select the slice tool from your tool bar. In newer versions of Photoshop the slice tool is stored under the crop tool. You can access it by right clicking on the crop tool and selecting slice tool. In older versions it’s next to the crop tool.

Step 3

With your slice tool activated, click on the top left corner of your picture and drag the square until you’ve created your ideal size slice. When you let go of the mouse you’ll notice the slice gets assigned the number 1 in a little blue square in the corner. This is slice 1.

Step 4

Now, you should also see that there is a tentative slice 2 and slice 3 created when you create the first slice. The easiest way to confirm those and get your fourth slice is to take your slice tool and click in the center – where the points all meet – and drag your box to the lower right quadrant of the picture. When you release your mouse you should see four slices appear.

Notice that slices 2 and 3 have grey boxes instead of blue. This means they are not “user slices”. User slices are made by you, the user. Non-user slices are auto slices and they are made by Photoshop. You can promote these auto slices to user slices by double clicking on the small grey infinity symbol and then selecting “promote to user”. They will turn blue.

Step 5

Now that you have your slices, it’s time to do something with them. Select the slice select tool from the tool bar where you found the slice tool. This will allow you to edit or the slices.

With the slice select tool activated, double click on slice 1. A pop up box will appear with some empty fields for you to fill in.

Name

You can name this slice whatever you want. It will be what your slice is saved under on your computer. I’ve named this slice Matthew Gray Gubler.

URL

This is just like creating a hyperlink. Type in whatever URL you want this particular slice to take you to when it’s clicked on. Remember, these slices are being saved as individual images so every slice will have its own URL. This slice will take users to Gubler’s website.

Target

The target field indicates where you want the URL you typed in to appear. For instance, if you use _blank the slice, when clicked on, will open up into a new browser tab. This prevents people from losing their spot on the web when they want to open another link. It’s helpful. The options for this are:

_blank

_new

_top

_self

_parent

Message Text

The message text is what will appear at the bottom of the browser when this slice is clicked on. I just wrote Gubler.

Alt Text

If for some reason your image doesn’t load in the browser, the alt text will be used to tell the viewer what was supposed to be there. This is usually a very short description. It’s also used to tell blind web users what is on the screen (the software will read it to them). I used Gubler Button.

Dimensions

You can change the dimensions of the slice if you want – or keep them the same. I’ve kept them the same for this example.

Delete or Divide Slices

Maybe you created too many slices, or you want to start over. You can delete slices by right clicking on a slice and selecting delete slice. You can also divide one slice into more little slices. Photoshop will do this if you tell it how many you want. To do this, right click on the slice you want to divide and then select horizontal or vertical and define how many slices you would like to see. I selected divide horizontally into 6 slices down, evenly spaced.

Step 6

Save your slices. Go to File>Save for web and hit Save. When the save location box pops up, you can choose to save all slices, user slices or selected slices. Find this option at the very bottom of the box underneath the file name and type. I’ve selected all slices.