Image Slicing

February 22, 2008

TOPIC LEVEL: Intermediate**
Requirements: Adobe Photoshop with Adobe Imageready


Image Slicing – is the way of cutting a image by parts without totally destroying it. This technique is use by most of the web developers to eliminate image stealing and hacking technique pertaining to pictures. In this tutorial, I’ll show you how it works…

1. Open Imageready.

2. Open a picture (Ctrl + O or double-click on the background portion of the application).

3. Press ‘K’ or select Slice Tool in the toolbox.


4. Now using the tool, create a box on a particular part of the image. I select the logo of Windows Vista.


5. In the menu bar, select Windows, checked Slice.


6. Now set the parameters of your image.


6.1 Type: Image

6.2 Name: filename of your choice

6.3 URL. You can choose your own

URL of the link to proceed after the button has been clicked. I choose my website. https://dgbytes.wordpress.com

6.4 Target: _blank (In programming, it means open the window in new Window)

6.5. Alt: The text that will appear after the mouseover action is applied in the image.

7. Now create another slice by creating a box again. Follow steps 3 – 6.

8. If done, just save it. Go to File, select Save Optimize as.

9. In Save As Type select HTML and image.


Now open the html file. You will notice that a link cursor is in when mouseover in the part were you applied image slice. And when you right click on it, you will notice that the image is cut by parts automatically. Have a nice day!!! Enjoy!!!☺ ☺ ☺


So long, net lovers!


%d bloggers like this: