Using Slice Tool in PhotoShop

Slice tool tutorial is not going to be a long one, as it does not have too many thing to talk about.

Slice Tool(Shortcut key -C)

Slice Tools is a very important for web designers. The Slice Tool help to slice or cuts images to pieces for Web publications. In Photoshop CS3 the Slice tool is seen next to the crop tool. In Photoshop CS4 and CS5 it’s seen with the Crop tool. If you can’t see the slice tool, right click on crop tool icon, you can see slice tools. Slice Tool can also be activated by pressing the key “C”.

Slice Tool

While having the slice tool activated, you can drag a rectangle by holding down the mouse button. You can also move and resize the active slice.

To move a active slice by just a few pixels, use the keyboard cursor keys or press of hold the mouse button and move the slice.

To Resize the slice, have the cursor on the border, you can notice that the cursor changes, now you can just click and drag to whatever size you want.

Slice Select Tool

Slice select tool can’t be used to slice images, but help to add certain informations to a picture or a slice. Except slicing you can do all other functions(i.e resizing and moving).

Active the slice tool, if you can’t see it right click on slice tool icon you can see it. Now just double click on any one of the slice, you will get a dialog box. To get this dialog box you can also use slice tool. With Slice tool selected, just right click on any one of the slice and select Edit Slice Option or you can also double click on the slice.

Dialog Box Options

In dialog box, your first option is Slice Type: you can select image or no image. If you select image, when saving the image, that particular slice gets saved as a image, if you have selected no images in slice type then when saving the image, that particular slice will be omitted.

Next option is Name, here you can enter a name for each slice.

When saving the image, that slice gets saved as a image with the name that you enter here.

Next option is URL, you can enter a web address(eg., if this image is shown in website, and when some clicks that image, it will take to the address that you specify here. It just like making a hyperlink.

Next option is Target. You will need to use this option only when you have made a hyperlink. The value of target can be _blank, _new, _parent, _self, _top.

Alt Tag, it just a alternate text. The text that you enter here will be shown in webpage if the image is not displayed.

Next you can see the dimension of the slice, if you like to change, you can just edit the value of width(W) and height (H). After finishing, just click OK.

Menu Bar Options

To create a slice with the pre-defined proportions choose the Fixed Aspect Ratio style and set Width and Height values. To create a slice with pre-defined size choose Fixed Size style and fill the Width and Height input fields. To add a slice just drag another rectangle.

Right-click on a slice to open the tool’s context menu. Through this menu you can access the commands available in Photoshop. To access the rest of the slicing commands you have to switch to ImageReady [Shift+Ctrl+M].

2 thoughts on “Using Slice Tool in PhotoShop

  1. My wife loves Web Designing more than I do. I like to stick to the traditional web designing methods. But I am sure she will be very happy to read this article just like me. Thank you.

  2. excellent job……. this post may helpful to many designers……

    Thanks for your work

Leave a Reply

Your email address will not be published. Required fields are marked *