Converting a flat image into an interactive vector...

ncp87

New Member
Hi there,

My question is in regards to the attached image. I want to be able to convert it into vector form, and then to make the image interactive so when I hover my mouse over a particular block or click it, that block is highlighted or it changes colour. Would anyone please be able to tell me the best way to do this? Is it possible on Adobe Illustrator?

The end game is to link data to the image/seating chart, so when a user selects a particular block - only data relating to that block is displayed. I do not have much web/graphic design experience so I am a bit lost but trying to understand the best way to go about it.

Any advice/guidance whatsoever would be highly appreciated. Thx.
 

Attachments

  • seatingplan.gif
    seatingplan.gif
    30.4 KB · Views: 20
Am I right in thinking that the end product is going to be included within a website? If this is the case, stop looking at illustrator and find yourself an experienced front end web developer.

If you want this to be useful for booking seats etc.. you'll also need to find yourself an experienced back end developer ideally with a decent handle on e-commerce!
 
Yes Illustrator can make it vector.

However, for the web you don't make images vector, they are raster, unless using SVG.

Let's not get into that.

The next step is then to develop the website, so that when you hover on a part of the image that the information comes up, that's up to the web developer to fix all that up.
 
Many thanks for your responses. Ok so I understand that it will be with the web designer/developer to make the images interactive and integrated with data.

What format should these images be in though? I am planning to use Illustrator to create a number of seating charts (like the 1 attached) from scratch, but I'm a bit confused about what format I should be saving them in so that when I hand it over to the web designers/developers, they are able to integrate them the way I described above. Sorry if this is really obvious!
 
Many thanks for your responses. Ok so I understand that it will be with the web designer/developer to make the images interactive and integrated with data.

What format should these images be in though? I am planning to use Illustrator to create a number of seating charts (like the 1 attached) from scratch, but I'm a bit confused about what format I should be saving them in so that when I hand it over to the web designers/developers, they are able to integrate them the way I described above. Sorry if this is really obvious!

The ideal format would be SVG to allow scalability and code-control. However, SVG isn't completely supported by all/older browsers, and so a fall-back to a standard raster image would be required – a transparent PNG acting as a sprite-sheet would be my favoured option. I wouldn't export each chair individually as separate images as this will create an additional HTTP request for each chair image every time the page is loaded, essentially slowing down the loading process.

SVG inserted as code rather than files would be faster, but as mentioned isn't completely supported just yet.

Best thing to do is ask the developer/s how they would like the files. Be wary if they ask for individual images though as this would signal to me that perhaps they're
inexperienced or looking to cut corners and get something working ASAP, without optimising.
 
I'd work in illustrator to create the diagrams.

From there, you can export to many formats, PNG, JPEG, TIFF, PSD, SVG etc.

As always, check with the person doing the work, as to what they want to receive.

But get working in Illustrator to create the diagrams, by all means, get going.
 
That's great - thanks so much for your attention!

With regards to the attached seating chart, my plan was to re-create it from scratch by using Illustrator. I wonder though if there is an efficient way to simply convert the flat GIF image into the format I need - the format being a vector image but with each block as a separate layer. I see that there are online GIF-->vector conversion sites like vectormagic.com, but this would still result in a flat image. Sorry If I am asking the same question again!
 
That's great - thanks so much for your attention!

With regards to the attached seating chart, my plan was to re-create it from scratch by using Illustrator. I wonder though if there is an efficient way to simply convert the flat GIF image into the format I need - the format being a vector image but with each block as a separate layer. I see that there are online GIF-->vector conversion sites like vectormagic.com, but this would still result in a flat image. Sorry If I am asking the same question again!

You can convert images to vector in Illustrator using the 'live trace' tool. Some images convert better than others though, and your example won't convert too well due to overlapping text in places.

To recreate this in Illustrator would be a pretty quick job for someone who knows what they're doing, maybe an hour at most since the seating plan is actually mirrored. Essentially you create the top or bottom section, then mirror it along the horizontal axis and you're done.
 
You can do it easily using Adobe Flash, but still flash is not supported in mobile and moreover is towards its end, so its better that you use HTML 5/CSS 3 and javascript. Once you recreate the whole thing in illustrator, go to File->Save As and choose SVG in file type option. SVG files are interactive and usable in web designing.
 
Really appreciate all the advice - thank you so much! So I am going to start with Illustrator and will then figure out the correct end-format once I have a web designer on board, but sounds like SVG will be the best option! Thanks to you all :)
 
Back
Top