Transforming my ugly old bitmap logo graphic into a slick
canvas element with polished gradients and smooth curves, using the Ai→Canvas plug-in could not have been any easier.
After downloading and installing the OSX version of the plug-in, I starting with the old graphic as a reference and placed (not linked) the .JPG into an Illustrator artboard. I next overlaid my original vector paths and resized them to the correct proportions. I pulled out all the colors that I needed and inserted a layer underneath to simulate the drop-shadow used previously. Note: I did not consider using CSS3
box-shadow property because my graphic is a circle, not a box. I did not test this presumption however.
Once the weight and color of the stroke were set up, I configured the gradients to match the look of the bitmap and saved a working copy as an EPS. After a quick File > Export a nicely constructed .HTML file was created in my directory, and opened in my default browser.
Some of the alterations that I made to the exported code include:
- wrapping the
- initializing the rendering via jQuery
<body onload="init()">and cleaning up the then-unnecessary function declarations
- adding alpha channel to the “background” gradient
1 2 3
gradient.addColorStop(0.92, "rgba(66, 101, 47, 1)"); gradient.addColorStop(0.97, "rgba(160, 178, 151, 0.5)"); gradient.addColorStop(1.00, "rgba(255, 255, 255, 0)");
Feel free to check out the source code of this site in lieu of specific code examples.
I didn’t include any screenshots of the process, simply because the whole thing took less than an hour to put in place. Would step-by-step screenshots be helpful?