Expert: Kevin Stohlmeyer - 5/12/2009

Question
QUESTION: Hi Kevin,
I'm working on a MacBook Pro OS 10.5.6 with Adobe Creative Suite 3 Design Standard (includes Illustrator & Photoshop CS3). I want to define separate sections of an image on my website as links to other pages. (See sample currently posted on thefolkofyore.com) The image is set as a percentage of screen with a matching blue background set from the webauthoring software I'm using (KompoZer 0.7.10). I want to make a rectangle or ellipse encompassing each of the 6 subtitles within the jpg a link to another page on the site. An image map seems to be the way to do this and, as I understand it, Adobe Image Ready is/was the software to use, though its features have been incorporated into Photoshop. Unfortunately, image mapping was not. Illustrator CS3 seems to have that capability but I can't make any sense of Adobe's instructions. Can this be done with Illustrator and/or Photoshop (or is there a better/alternative way) and if so, could you please show me how? Thank you, Kevin.


ANSWER: Hi Peter,

You can create a website from either of these applications. By "Image mapping" Im assuming you mean graphics with hyperlinks.

The trick is to use Slices to create these images for the site. First, design your site in either PS or IL, (Photoshop is usually easier at this than Illustrator) then find the slice tool. Drag out the areas that you want to create links from. PS will automatically fill in the gaps with auto slices.  You can then double click using the Slice Select tool to add web addresses or site navigation (in Illustrator it is under the attributes palette).  

When you are done, you can go to file>save for web and devices and save out as the appropriate file type (jpg, gif, png, etc.). Slices will come out as separate images and if you so choose, you can also have the supporting html document.

Thanks

Kevin



---------- FOLLOW-UP ----------

QUESTION: Thanks for your prompt and clear answer, Kevin. I tried the slice tool and was able to add links to the image and post a test page on my website. However, I want to set the image size as a percentage of the screen so the image will fill the viewer's browser window and expand or shrink as that window size is changed. I don't think you can do that with slices. Adobe Online Help confirms that Illustrator can do what I want (create an image map which "keeps the artwork intact as a single image file, while using slices causes the artwork to be divided into separate files") but doesn't explain how to do it in enough detail (at least for me). This is their image map Help page: http://livedocs.adobe.com/en_US/Illustrator/13.0/help.html?content=WS714a382cdf7

What do they mean by "select the object"? ... create the outline of the shape you want to use as a link with a marquee tool? This may be a lot to ask, but can you give me a step-by-step procedure (including, for example, what keys to press and when? I've Googled this up the yin yang and haven't found an answer. Thanks, Kevin, for anything you can do.

ANSWER: Hi Peter,

Unfortunately image map is not the answer. Your idea of image map is not what Adobe is referring to. Image mapping per Adobe is creating hyperlinks using a single image with hot spots as an overlay instead  of a single image by using smaller images via the slice tool. You can create image maps in Fireworks. However image mapping will not reduce or enlarge images to fit a screen.

What you need is someone who knows CSS and Javascripting. You will need to hand code in a script that will allow you to have your site resize or center to fit on a persons screen. The easier way to achieve this is to set your image size to 800px x 600px, which is the minimal size for web standards.

Thanks

Kevin




---------- FOLLOW-UP ----------

QUESTION: Hi Kevin,

Forgetting about reducing or enlarging images to fit the screen for the moment, can you explain more clearly, expand upon, these instructions from Adobe on creating image maps in Illustrator: http://livedocs.adobe.com/en_US/Illustrator/13.0/help.html?content=WS714a382cdf7
I may not have communicated clearly because what you state Adobe is referring to by the term "image mapping" ("creating hyperlinks using a single image with hot spots as an overlay instead  of a single image by using smaller images via the slice tool") is exactly what I want to do, only their instructions at the above link aren't detailed enough for me to follow. For example, what do you do after entering the URL in the URL text box? Do you hit "return/enter"? Then what, do you "Save for Web & Devices" and if so, what settings do you use? Thanks, Kevin.

Answer
Hi Peter,

You will need to use Adobe FIreworks to create true Image Maps (links overlay on top of your image). The example they give is to create a link using an Illustrator object and the attributes panel, which gives you object-based links and not a true image map. Only Fireworks can accomplish this effectively.

You enter the URL in the attributes panel, no need to hit enter or return. Then you save for web and devices and choose a preset that fits your needs (jpg, png, gif, etc.) on the right panel. I prefer PNG or JPG depending on the complexity of the images.


Kevin