Image slicing is an important aspect when you need to cut image in to slices to the required size preciously.The following tutorial on Slice tool illustrates how to slice webgraphics that are needed to upload to the server to show in html pages. Large size images included in html pages wont load fast hence it is good idea to slice the big images into pieces and save them. Step - 1

Start Photoshop and open any .jpg image for slicing. The procedure for slicing .psd files also similar. Slice tool igonores layers and treat the whole document graphcs as single layer. To avoid confusion it is better to start with .jpeg format image to complete the following Steps.

If you are not able to see Tool box to the left of the screen go to Window Menu and select Tools Option. The Keyboard shortcut for Slice tool is "K".

 

The above image is taken as example to explain this tutorial.

 

Step - 2

Now select Slice tool from Tool Box (third tool in right column). Press and hold small arrow bottom right corner underneath Slice tool. It displays Slice tool options. The Top one is Slice and bottom one is Slice Selection Tool. Select Slice tool for slicing the Image.

 

Step - 3
With Slice tool selected click left mouse and drag to draw a small square on required portion of the image to be needed for inserting in to web page and release mouse. You can see a brown selection lines with 8 resizing handles over the selected area.

 

 

Step - 4
You can change the width and height of the selected slice portion by double clicking inside selected area to open a Slice Option Dialogue box. You can specify new width and height at the bottom right width and height boxes in the Slice Option Dialogue box. You can name the slice in Name field area above.

You can move the selected slice with Keyboard Left, Right, Top and Bottom keys.

Note: When you draw next slice anywhere on image the previous slice will be automatically deselected. To select previously made slices, you need to go to tool box and select this time slice selection tool. The difference between Slice tool and Slice Selection tool is slice selection tool have upward pointing black arrow above the blade.

 

 

Step - 5

Now time for saving all selected slices for Webuse. Every sliced pieces are to be optimised for using in html pages. High resolution images will increase the file size and images having high resolution won't load page as expected hence it annoys visitors. You need to optimise all sliced images. Photoshop is having optimisation feature which will automatical reduce the file size as per the requirement. To optimise sliced image and save for Webuse, Follow the following procedure:

(1) Go to File >> Save for Web (Keyboard Shortcut Alt+Shift+Ctrl+S) to display Save for Web dialogue box.
You can see here display of full image with all sliced areass.

(2) Select required Slice with Slice Selection tool from left tool options. Click on required slice. To select multiple Slices, hold shift key and select other required slices. Sometime it is difficult to click inside 1x1 pixel sized images. In that case select zoom to to zoom in. You can move the Image with hand tool.

(3) Select file format option from right side of the window. You can chose .jpeg, .gif or .png options from preset options. You can see selected slices file size at bottom left of the window. Play around with different options available and when done click ok to save selected images. Do not forget to select "Selected Slices" option at Slices in the Save Optimised as dialogue box. If you chose all slices the whole page will be saved along with selected slice(s).

(4) Slice tool is handy when you need to divide and slice an image Horizontally and Verically in to many pieces. To slice an image horizontall and vertically into many pieces, select Slice Tool and draw selection area on image. Next select Slice Selection tool from tool box and click "Divide Slice.." button above the work area window (below main menu) to display Divide Slice option dialogue box. Here you can specify Horzontal and Vertical slices. It is to be noted that the" Divide Slice..." option Can't be seen until you change over from "Slice Tool" to "Slice Selection Tool".

 

_________________________
Tutorial Composed By:
Coolgraphs