1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Illustrator to HTML

Discussion in 'Web Design & Development' started by Randog, Jan 30, 2009.

Thread Status:
Not open for further replies.
Advertisement
  1. Randog

    Randog Thread Starter

    Joined:
    Jan 30, 2009
    Messages:
    2
    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.
     
  2. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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...
     
  3. Randog

    Randog Thread Starter

    Joined:
    Jan 30, 2009
    Messages:
    2
    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....
     
  4. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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. <a href="http://www.thx.com/"><img src="signature.jpg"></a>) 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...
     
  5. Eriksrocks

    Eriksrocks

    Joined:
    Aug 7, 2005
    Messages:
    2,183
    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. :)
     
  6. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    Great point. :)

    Peace...
     
  7. Masta Squidge

    Masta Squidge

    Joined:
    Jul 29, 2007
    Messages:
    697
    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.
     
  8. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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...
     
  9. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/796064