Thursday, January 22, 2009

Blog Flower Art

In a previous post I introduced the Blog Flower Gadget. I have decided to go into some detail about how I created the gadget, and I will split the information into two posts. In this first post I will talk about how I created the artwork. In the second post I will describe the programming implementation.

First of all, part of the inspiration for creating this gadget is that I am currently doing some work involving bezier curves, and as part of my research I downloaded and played with Inkscape. Inkscape is an open source vector graphics editor. I decided to try and trace something using the Bezier curve feature.

I started by sketching the three stages of the flower on paper. I then took a picture of the sketch using my digital camera and imported it into Inkscape. Once in Inkscape I turned the opacity of the image way down so that I could see what I was doing. The actual tracing using the bezier curve tool was pretty easy. Basiclly single-clicking will place corners, and a drag-click will create control points for a curve. It takes a minute to get the hang of it. For each shape I would create a rough outline, and then I would clean it up by moving the points around. It is also possible to add or remove points.

Once I had completed each stage of the flower, I copied and pasted it into a new document and shrunk it down to a smaller size. I first tried actually using .svg files as the final output format for the gadget. It seemed to work best using the <object> tag in the HTML. However, after I finally got it working in Firefox and Internet Explorer I realized that Chrome doesn't support SVG at all, so I decided to fall back to using PNG files instead. It is not a total loss because in the end the .png files were about half the size of the .svg files, even though logically one would think a vector format should end up smaller than a raster version. Although SVG is vector, it uses a very verbose XML syntax and is uncompressed, which explains the difference in file size.

Anyway, I had fun working on this project. It is my first attempt at doing vector based artwork so I am considering it a success.

No comments: