Slice Web Images Using Paint Shop Pro’s Image Slicer Command

This tutorial demonstrates how to slice web images into smaller sections using Paint Shop Pro’s Image Slicer command. Once saved, you can either save sliced images to a folder on your hard drive, so you can use or edit them in an HTML editor such as Dreamweaver, or Golive.  Alternatively, you can save image slice settings to the Clipboard, then navigate to where the destination HTML code is stored; open your code, then paste them directly into it.

(I explain how Image Maps and Rollovers are created at the end of this Image Slicer tutorial).

Create Glossy Navigation Buttons, 49 On-line Paint Shop Pro Tutorials

1/
To begin, open your completed web image onto Paint Shop Pro’s workspace.  (Your Layers don’t have to be flattened).

Image Slicer Note
Using the Image Slicer, you can create a table from the image, saving the location of each sliced section as a region in the table, and generating the HTML code for the column and cells. You can then copy this code into your source files so that the image can be reassembled when the user downloads the web page.

2/
Now, from the top menu, choose File then choose Export then choose Image Slicer.  You will then see the following Image Slicer dialogue box.

To slice up your image; left-click the Grid tab highlighted above.  Then left-click over your image, (in the Image Slicer’s Preview Pane): and you will see the following tiny grid icon.

After left-clicking: the following Grid Size dialogue box will appear.  The Grid and Columns can then be altered to suit your slicing needs.  Alternatively, if you are happy with the default Rows and Columns, click OK.

After clicking OK, a slicing-grid will then be applied to your image, as illustrated below.

Tip
You can reposition the grid-lines by clicking the following Arrow Tool, then dragging the lines to new positions.

Alternatively, you can click the Slicer Tool to manually add lines, rows and columns.

Tip
Clicking over a line with the Eraser Tool removes unwanted grid-lines.

 

Now, from the subsequent Slice Options dialogue box, give each slice a unique name, and don’t forget to add an Alt Tag, so that your visitors can read about the image before it completely loads.

Note
When entering a name for your slices, don’t use capital letters or special characters.  In addition, if you are leaving spaces, remember to underscore them _ (as illustrated below).

3/ Save your Sliced Image
Now you have created your rectangular slices, it’s time to save them.  Saving your slices exports them (individually) to a destination of your choice for example My Documents - where they can be utilised in your HTML editor, in your usual manner.

To save your sliced image, click the following Save As tab.

  Now, enter a name in the subsequent Save As dialogue box, then click Save.

Tip
You may find it easier if you Copy and Paste the Slices and HTM page into a New Folder.

Exporting your Slices via the Clipboard
Save the HTML code to the Clipboard by clicking the following Save To Clipboard tab.

Then navigate to where the destination HTML code is stored, open your code and press Ctrl and P to paste in.

Using an HTML Editor
Alternatively, your slices’ URLs can be assigned in an HTML editor, for example Dreamweaver or Golive, in your usual way.

(My Optimise and Save Images tutorials demonstrate how to optimise images for the web).

Optimisation Tip
Always save plain text graphics and images that have a low colour-count as Gifs: and save photographs or complex graphics with a high colour-count, as Jpegs.

Rollover Notes
A rollover is an image or section of an image that changes appearance when the user activates it. Web designers frequently create rollovers for the buttons of a navigation bar. When a user clicks a button, the browser displays the linked web page (or file), and the rollover area displays a different button. You can assign a rollover to an image that is sliced and mapped by choosing an image file that will appear when the user performs a specific mouse action. To create a rollover, first create your rollover image: often, this second image is a duplicate of the original; - however, it is modified to appear differently when the mouse rolls over the original. Now, take one of the following steps: Choose File then choose Export then choose Image Mapper. (Alternatively, choose File then choose Export then choose Image Slicer).  If necessary, navigate to an image region, and use the appropriate Tool, (for example, the Polygon, Circle or Rectangle Tool), to specify the region where you want to add a rollover.  Now, click Rollover Creator and the Rollover dialogue box will appear. Then mark the Mouse over, Mouse out, Mouse click, Mouse Double Click, Mouse up, Mouse down  boxes.  Click the Open tab and the Select Rollover dialogue will appear.  Now, navigate to and activate the graphics file you want to use.  (If you do not select a file, the original will be used).  Click Open.  Then from the subsequent Rollover Creator dialogue box, the file path will appear in the box beside the tick box.  Now, click Close to return to the Image Mapper (or Image Slicer) dialogue box. You can then preview your work in a browser by clicking the Preview button.

Image Mapping Notes
An image map is a graphic that contains a mapped area (called a region or hotspot), that links to a URL. The cell can be a circle, rectangle, or irregular shape. When you move the mouse over the cell, the cursor changes to a hand indicating that you can click that area to jump to another web page.

Creating Map Areas
You create and edit map areas with the Tool in the Tools group box of the Image Mapper dialogue box, then assigning map area properties.  After you have created the map areas (or regions), you can assign URLs, alternative text, and targets.

Saving Image Maps
You can save image maps to a folder on your hard drive so you can use or edit them. You can also save map settings to the
Clipboard and then paste them into the HTML code. When you save the map settings, you save the map area arrangement and the information you typed in the Image Mapper dialog box. You can then reload them into the same image, or use the settings with a different image.

Setting Image Map Preferences
After you have created the map areas (or regions), you can assign URLs, alternate text, and targets.
1. Choose File then choose Export Image Mapper. The Image Mapper dialogue box then appears.
2. Now, choose one of the following Tools, and draw in the preview window to create a hotspot:
• Rectangle Tool — drag the cursor to enclose a square or rectangular-shaped hotspot area.
• Circle Tool — drag the cursor to enclose a circular or elliptical hotspot area.
• Polygon Tool — click to set the starting point and continue moving the cursor and clicking to enclose an
irregular-shaped hotspot area. Double-left-click to complete the polygon.
3. In the URL drop-list, type the address of the web page to which you want to link.
If you want to select addresses already used in the image, click the arrow in the box and select the address you want from the URL drop-down list.
If you do not want to link to a web page, type #.
4. In the Alt text box, type the text that appears if the image does not load or if the user has images disabled in the Web browser.
5. Choose one of the following target frame options from the Target drop-list:
• _blank — loads the linked page in a new browser window
• _parent — loads the linked page in the parent frame set of the link. If the link is not in a nested frame, the image loads in the full browser window.
• _self — loads the linked page in the same frame as the link.
• _top — loads the linked page in the full browser window and removes all frame.
6. Click Save. The HTML Save As dialogue box will appear.
7. Navigate to the folder where you want to save the HTML code, then click Save.
The Image Map Save As dialogue box will appear.
8. Now, navigate to the folder where you want to save the image and click Save.

Wendi E. M. Scarth.  (8th January 2010).

This entry was posted on 08/01/2010 at 09:30 am and is filed under Paint Shop Pro Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

| Print