# Illustrator to HTML



## Randog (Jan 30, 2009)

Hello, Is it possible to use Illustrator CS3 to create a simple signature file to use in your email so that your email address (in your graphic signature) is clickable?

I've read something in this forum about slicing it, but that seemed more for a web page because you end up with several GIF (or other graphic) files that make sense when your are assembling the slices into a table or something.

I'm assuming I'm looking for a single file that I can imbed after an email.

Thanks for any help and yes I am a newbie.


----------



## tomdkat (May 6, 2006)

Yep, you can do this as long as the e-mail client you use supports HTML message composition and can attach images in a signature.

It might take some effort on your part to make it work but I think it's possible.

Peace...


----------



## Randog (Jan 30, 2009)

Well, that's an encouraging start, but now for the real tough question,...how do I do it? With slices? If so, how to I put them together to make 1 file that I can insert after my email?

I think a good example of what I might be trying to do is like if you get an email from some catalog company or something and you can click in the graphic to go to their website or something. Not sure if that's the same thing or not but I just have a simple signature created in Illustrator with an email address that I would like to make clickable. It seems like it should be simple for someone other than me. Hmmmmm....


----------



## tomdkat (May 6, 2006)

I can't guide you through each step but at a high level, this is the kind of process you're looking at:


Create the signature image using Illustrator. This will be a one-time thing. Once the signature image is created, it's "done" and will remain static. Save it as a GIF or a JPEG and keep the file size as small as possible. It will be a relatively small image (dimensions wise) so there's no need to "slice 'n dice" it. 
Configure your e-mail client to compose HTML messages. You need to send HTML e-mail in order for the hyperlink to work.
Configure your e-mail client to attach the image as the signature. This should be fairly straightforward depending on the e-mail client you're using.
The tricky part: getting the hyperlink into the signature. If your e-mail client can accept an HTML signature, it should be easy. Simply code an anchor with the image as a child element (e.g. ) and the signature should be clickable. Since you're dealing with an image, you might have problems with the image not automatically getting attached, etc., but that will depend on the e-mail client you're using.
Try doing some Google searches on "embedding clickable image signatures in e-mail messages" and see if someone has posted a step-by-step guide you can follow.

EDIT: Ok, I just created a signature image as a hyperlink in Outlook Express and it appears to get inserted as a link just fine. I can't test sending the message but it appears to do what is needed.

Peace...


----------



## Eriksrocks (Aug 7, 2005)

If you have Photoshop as well, it would probably be easiest to drag the illustration in Illustrator over to a new image in Photoshop and then go to File > Save For Web... (or something like that) and export it in a web-optimized file format like GIF. If you don't know what you're doing I imagine that Illustrator could save an overly large image for you.


----------



## tomdkat (May 6, 2006)

Great point. 

Peace...


----------



## Masta Squidge (Jul 29, 2007)

BUT what if you want more than one link in the sig?

There are ways to overlay links onto an image using positional requirements, but its much simpler to slice the image into several pieces and use a simple table.

In that case you have say, a row of "links" lets say 4. Then you have a one column, top row that contains the top half of the image, then a second row with 4 columns that contain each of the "link" images using an image link.

Its also possible to do this without using a table as well, but only if the email program will align the images properly only by putting them in order and using a line break to start the next "row" of images one after another.


----------



## tomdkat (May 6, 2006)

Masta Squidge said:


> BUT what if you want more than one link in the sig?


In this case, I would go with an image map instead of using a "sliced" image to keep the number of images that have to be maintained as low as possible. If the signature content will be stored on a web server somewhere that will be served "on demand", going with a table and multiple images is something I would consider. If the signature will be used in a traditional POP3 mail client, I would stick with one image and use an image map.

Actually, that's not true. In BOTH cases, I wouldn't use a graphic for a signature at all and would stick with plain text e-mail to minimize getting flagged as spam. 

Peace...


----------

