Photoshop Slice Tool
Adobe Photoshop is a raster-based image editing software. It is developed by Adobe.Inc and available for both macOS and Windows operating systems. You can use Photoshop to create or edit images, posters, banners, logos, invitation cards, and various types of graphic designing work. It provides various tools for designing and editing and the slice tool and slice select tool are one of them. The slice tool and the slice select tool in Photoshop are very much related and connected to each other.
The slice tool slices the whole Photoshop document into various slices. It helps users to slice up a big image or artwork into smaller sections that fit together like a jigsaw(but they all have straight edges). Or in other words, the slice tool helps to extract a slice of the image without cutting or cropping it. It can be used for several cases when a single large image needs to slice down into several pieces. It can slice the image or diagram into either square or rectangular pieces. The slice select tool helps to select the slices and move them anywhere in the document.
This tool is used extensively by web developers where they need the image to be divided into small pieces and exported individually. With the help of this tool, we can also export a small part of the image according to our needs as a separate image from a large image. Thus, it is very useful for web developers.
The slice tool is present in the section of the crop tool in the tool palette in Photoshop. To select slice tool, right-click on the crop tool -> A dialog box will open with other tools including the slice tool -> Select the slice tool from there. Here’s a symbol of the slice tool:
How to use Slice Tool?
Now let’s understand to use the slice tool with the help of an example:
Step 1: Open a sample image in Photoshop as shown below:
Step 2: Now select the slice tool from the tool palette.
Step 3: Now create a slice of the image from where you want. After drawing the slice, you will see that Photoshop automatically draws other slices to match the whole document.
Here in the above diagram, the orange-bordered box is the slice that we have created and the other blue-bordered boxes are created automatically by Photoshop.
How to save slices in PhotoShop?
Now we will learn how to save slices in Photoshop. So to save slices in Photoshop follow the following steps:
Step 1: After creating slices go to the File menu and select save for web option like as shown in the below image:
Step 2: After selecting the save for web option, a dialogue box appears on the screen in which, using the shift key select each of the slices that you have created.
Step 3: After selecting slices go to the preset option and select the format that you want. Here, I select JPEG high format to save the slices and press the save button.
Step 4: After pressing the save button a dialog box appears on the screen in which you can keep the default settings and then press Save.
And your file saves in the given location, like as shown in the below image:
Options of Slice Tool
Now let’s understand the properties/options that the slice tool has. When you select the slice tool you will see a properties/option bar below the menu bar as shown below:
Now let us discuss every option in detail, one by one:
Style has three options – Normal, Fixed aspect ratio, fixed size.
- Normal: This option is selected by default. It makes normal slices that can be of any size and aspect ratio.
- Fixed aspect ratio: In this option, the selections are made based on a fixed aspect ratio (i.e width to height ratio). We can change the value of width and height. Suppose the width and height are set to 2 and 3. It will make a slice having a ratio of width/ height always equal to 2:3.
- Fixed Size: Using this option we can set the height and width of the slice in pixel.
This option is used to sets the width of the selection when the style option is fixed aspect ratio or fixed size.
This option is used to sets the height of the selection when the style option is fixed aspect ratio or fixed size.
Note: The width and height are disabled initially because the normal style option is selected by default.
4. Slice From Guides
We can also make slices with the help of the guides using the rulers.
Slice Select Tool
Slice Select Tool, as the name suggests, helps to select a particular slice as a basic functionality. It is a very useful and powerful tool for managing slices and has different functionalities, like moving the slices, scaling and arranging the slides. The slice select tool is present below the slice tool in the options menu.
How to use the Slice Select tool?
Now to let us understand how to use the slice select tool with the help of an example:
Step 1: Open an image in Photoshop.
Step 2: Select slice tool from the tool palette and, with the help of this tool, make a slice as shown below:
Step 3: Now select the slice select tool from the tool palette and select the slice you have created (the selected slice are highlighted). You will see the scaling options are visible. Now you can scale the size of the slice and you can also move the slice. If you want to move the slice in a straight line in a horizontal and vertical manner, then hold the SHIFT key and move the slice with the help of the slice select tool.
Below are some images where we have moved and scaled our slice which was previously created in step 2:
(1) Moved the slice to the top:
(2) Scaled the slice into a bigger one:
Options of Slice Select tool
Thus, we understood the basic use of the slice select tool. Now let’s understand the properties/options of the slice select tool. When we use the slice select tool, we see a properties bar as shown below under the menu bar:
Now let us discuss each option /property one by one:
There are four options available to order a particular slice and they are:
Starting from the left, we have:
- Bring to front: This option is used to bring the slice to the top.
- Bring to forward: This option is used to bring the slice to the top step wise. Suppose there are two slices above the current slice, then when we click this option once, the current slice will come to number two, and then another click will bring the slice to the top (i.e number one).
- Bring downward: This option is used to bring the slice down to the bottom stepwise just like the previous option but in the reverse order.
- Bring to bottom: This option is used to bring the slice to the bottom.
This option converts an auto slice into a user-defined slice.
Now a question may arise how to differentiate whether it is auto slice or user slice? The answer is that auto slices do not have a scaling option enabled within them, but a user slice can be scaled using the slice select tool.
This option divides the selected slice into several small slices as defined by the user.
When you click on the Divide option, a dialog box will open as given below:
As you can see, the dialog box has two sections:
- Horizontal Slice: This option(when checked) divides the slice into horizontal slices.
- Vertical Slice: This option(when checked) divides the slice into vertical slices.
Now each of the two sections has the same options:
- Slices down, evenly spaced: This option slices down to the number of an evenly spaced slice as mentioned by the user
- Pixels per slice: This option slices down according to the pixels mentioned by the user.
There are several aligned options for two or more selected slices. Now, a question may arise that how to select multiple slices? The answer is that we can select multiple layers using the slice select tool using by holding the SHIFT key.
The aligned options are given below:
Starting from the extreme left:
- Align left edges: This option is used to align the left edges of the selected slice.
- Align center: This option is used to align the slices to the center.
- Align right edges: This option is used to align the right edges of the selected slice.
- Distribute Vertically: This option is used to distribute the selected layers vertically.
- Align top edges: This option is used to align the top edges of the selected slices.
- Align the center: This option is used to align with the center of the selected slices.
- Align the bottom edges: This option is used to align the bottom edges of the selected slices.
- Distribute horizontally: This option is used to distribute the selected layers horizontally.
5. Show/hide Auto Slice
As we know that, when we create a slice using the Slice tool, Photoshop automatically creates slices for the rest of the document. So, using the Show/hide Auto Slice option, we can show/ hide the auto slices created by Photoshop.