Free Adobe Photoshop Website Designing Video Tutorial - Slice Tool

In this Free Photoshop Website Designing Video Tutorial, we will show you how to use Slice Tool. In web designing, slice tool plays an important role. "Slice Tool" is used for dividing a big image or web page layout image into many pieces. Instead of putting one big image on your website if you put this image after slicing into many pieces then they will load quickly and can be viewed while the remaining image slices are being downloaded to complete the image. You can also make HTML pages using this tool. Slices are numbered from left to right, and then top to bottom.

We suggest that you can view our "Slice Tool Video Tutorial" to understand this visually and more easily. Press ”K” to select slice tool. There are two types of slice tool: "Slice Tool" and "Select Slice Tool". By default slice tool is visible.

Functions of different Slice Tools:

Slice Tool: This tool is used for cutting big image into small pieces. This will create new slices.
Select Slice Tool: “Select Slice Tool” is used for selecting any existing slice. You can resize, delete or move any slice. You can also give alt tags and url after selecting (described below).

Steps for using Slice Tools
Slice Tools options given in the Tool Options Bar
Helpful Website Designing Photoshop tips for Slice Tools

Click "Play" button to see Website dDesign Slice Tool Video Tutorial

Steps

Select File > Open.
Select Slice tool from the toolbar or press ”K”.
Now click and drag your mouse cursor over the area where you want to create a slice.
After making your slice, if you want to divide your slice horizontally or vertically then right click on the slice and select “Divide Slice”.
A Divide Slice dialogue box will appear. Here two main options are given: Divide Horizontally Into and Divide Vertically Into. You can also mention here that in how many slices your selected slice will get divided and at the same time you can define size of these slices.
Again right click on the slice and select Edit Slice Options. Then “Slice Options” dialogue box will appear. You can also get this dialogue box by double clicking on the slice after selecting “Select Slice Tool”.
Here you can mention your Slice Name, Url for the web page that will appear when the user clicks on this slice, Target, Message Text, Alt Tag and Slice Background Type.
Choose File > Save for web and press Ok.

Helpful Website Designing Photoshop Slice Tool Tip

Hold down Shift key on your keyboard as you drag to constrain the slice to a square and hold down Alt Key on the keyboard to draw your slice from the center

Slice Tool options given in the Tool Options Bar:

When you select any slice tool, related tool options will get appear in the Tool Options bar. These are given below:

Style: Style has three options:
- Normal: You can select your slice as required by you by simply clicking and dragging your cursor.
- Fixed Aspect Ratio: This will set a height-to-width ratio of your slice.
- Fixed Size: You can set width and height here before slicing.
Slice Options: Activate this option either by right clicking on the selected slice and then choose “Edit Slice Options or double click on the selected slice or select “Slice Options” from the tool options bar. Using this option you can mention your Slice Name, Url for the web page that will appear when the user clicks on this slice, Target, Message Text, Alt Tag and Slice Background Type.
Hide Auto Slices or Show Auto Slices: You can hide or show your extra slices that are created by Photoshop for filling the gaps between the user slices.