Image Map - Psp9, Beginner - Intermediate Options

[*D*]

This is written for new users to PaintShop Pro9

By the time you finish this tutorial you'll know how to create a basic image map and will be able to experiment by yourself.

Lets begin using this image:

Credits for image used:
brokenarts a.k.a Davide Guglielmo

Open the image your using.
Go to File - Export - Image Mapper (see attached)


Now if you look at the next image (I have badly circled in blue) these are the steps we're covering first.

Firstly select the rectangle tool your going to be outlining the word Home with a rectangle and get it to fit as neatly as you can around the word, you can use your move tool to center it exactly in the position you want it.

Now you have your rectangle around the word Home fill out the cell properties as shown in image but use your own. Make sure your image format is selected to jpeg as gif with give you a larger image size.

You now need to optimize your image, always remember the higher the settings the lesser the quality your image is going to be so go low if you can.
See image for the settings I have used for this.

Remaining in the same area click on Format and make sure standard is selected you can then look at download times and it will give you an estimate how long the image will take to download, remember not everyone has a fast internet connection so smaller is better.

Repeat the above steps again on the words 13dots and Forum

Now your clicking save settings this will create a *.jmd backup file for you if you make a mistake you can rename it to what you want just make sure its something you remember

Now Save as this will create a html file for you so rename the page, and also save your image.

Your image code should look something like this:

CODE

<img name="sign20" src="sign2.jpg" width="325" height="500" border="0" usemap="#sign2" alt="sign2" />
<map name="sign2">
<area shape="rect" coords="91,39,208,76" href="http://www.13dots.com" target="_blank" alt="Home">
<area shape="rect" coords="83,101,219,138" href="http://www.13dots.com" target="_blank" alt="13dots">
<area shape="rect" coords="87,157,217,200" href="http://www.13dots.com/forum" target="_blank" alt="forum">
</map>
</body>
</html>

Upload your image and html file to the same folder on your server, you should now have a working version such as I have :: here ::

Thats it your done

[RedDragon]

well explained

thx for the tutorial Trueer!

[Eddie_K]

Nice one

Thanks for sharing with us. I never used this method, but seems pretty efective

Eddie

[josephine]

nice tut D!Well explained

thanks adding it!

[clubfredd]

Cool tut! Gotta try it sometime Thanks for sharing this ma'am!


::CHeers!::

Fred

[Vigg0]

Nice effect .. Good explaning !

[StarSkreem]

Excellent tutorial, Trueer!

Don't have PSP or I'd give it a try.

[shawnastone]

Very Kewl idea!!!

[urbantrix]

Hmm...this could possibly work.. but I have "Jasc Paint Shop Studio" (the Dell one), and when I go to File\Export\ the next direction you have listed isn't there! What do I do? I even tried searching in the help topics in the program under "mapping" and whatnot and can't find anything..could you help me please?
Thanks!!!

[*D*]

Hmm...this could possibly work.. but I have "Jasc Paint Shop Studio" (the Dell one), and when I go to File\Export\ the next direction you have listed isn't there! What do I do? I even tried searching in the help topics in the program under "mapping" and whatnot and can't find anything..could you help me please?
Thanks!!!

Hi urbantrix,

I don't use that version of PSP this was for V9, I'll download a trial and have a look for you but it won't be today.