Export Illustrator Vector Artwork to a Canvas Element

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:

  1. wrapping the canvas in an a element
  2. initializing the rendering via jQuery $(document).ready(…) instead of <body onload="init()"> and cleaning up the then-unnecessary function declarations
  3. 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?


Migration Complete!

No, we’re not talking about the birds returning from the south for spring. I recently made the very difficult decision to get rid of my home-brewed site in favor of one using WordPress. While I am still very proud of the work I did previously, which included programming my own PHP5/MySQL application, the benefits of an open-source CMS certainly cannot be ignored.

Some of the features that compelled me to convert include:

  • Clean separation of content from structure and presentation
  • Secure administrative area for updating posts and my portfolio projects
  • Hook to the LinkedIn API to pull in my resume data, instead of managing two separate profiles
  • Robust system to present code examples and manage downloadable files
  • Central hub for social media presence and web development interests

When it came down to it, I really couldn’t justify having two sites when all the functionality I needed could be provided by only one.

The experience was both challenging and fulfilling, and I not only have a deeper understanding and appreciation for WordPress but I also gained some insight into customizing a theme. While the process seemed daunting initially, I was surprised at how smoothly it went once it was broken down into digestible pieces.

I built on the minimalist Toolbox theme, which in addition to using many of the new semantic HTML5 elements appropriately, offers a decent number of page types and an excellent sample.css for reference. I included many of the aspects of my old layout, adjusting a number of background images for use in the page header and footer. Aspects of the Almost Spring theme that was previously applied to my standalone blog were blended in. Lastly 960.gs was included for a base grid-system to organize and standardize the layout.

Of course I still have a laundry list of features I’d still like to implement:

  1. improve the styling and functionality of the sidebar
  2. create a page to showcase my interest in photography, hooking up to flickr as well
  3. move away from background imagery in favor of slick CSS3 effects
  4. convert my personal logo to a canvas or SVG element Completed! Thanks to the Ai→Canvas plug-in.

I also would like to go back through old posts and establish a more meaningful set of category and tag taxonomy. That, however, will require a whole different kind of thinking.

Feel free to poke around and check things out, and if you have feedback or a suggestion, you’re welcome to provide it in the comments.


Integrating Your Social Networks

If you’re reading this, you probably have them: social networks. Del.icio.us, Facebook, Flickr, LinkedIn, MySpace, Twitter, Virb, and countless others that supposedly keep us in closer contact with those close to us. A quick Google search returns over 34 MILLION results for the phrase, and it’s the holy grail, golden hammer, or panacea depending on who you talk to. But once you’ve decided which to participate in, how do you update them without wasting oodles of time?

Continue reading…


Agile Philosophy for More Than Just Software Development

I posted a link to Getting Real About Agile Design to the studio message board recently, and it set off quite a discussion internally. A number of people were hung up on the phrase “software development” and weren’t able to see the applications of planned flexibility for the greater business model. Admittedly, it is quite challenging in contrast to the waterfall model of project workflow, but Agile practices seem more fitting to the attitude and goals of this business.

From the article:

Agile is here to stay. The economic difficulties of the past months have finally put waterfall out of its misery; now more than ever, long requirements phases and vaporous up-front documentation aren’t acceptable. Software must be visible and valuable from the start.


I’m Blogging This

No, I’m not talking about this ThinkGeek item, I just installed the ScribeFire extension (or add-on, if you’ve never worked with the older versions of the browser) for Firefox. Hopefully this will help me to actually create some of the blog postings that I set out to when I was envisioning these pages.

Continue reading…


Hello world.

I think that title is pretty appropriate; considering when a person learns a new programming language, the first attempts usually involve outputting the text hello world.

Continue reading…