8 Feb 2008 elanthis   » (Journeyer)

First Vector Graphic

So I decided it was finally time to pop my Inkscape cherry and give vector graphics a try.

I needed a logo for Source MUD. I used one of those Flash-based logo designers to come up with some ideas, but naturally I couldn’t use anything I created due to licensing issues. I took one of the designs and decided to go with that, albeit created from scratch and using a font I had legal access to.

The result is this:

Source MUD Logo

Yeah, it’s not exactly the world’s most complicated design. It’s made up of three paths and some text. It took some time to get that done, though, since I needed to learn exactly how one does graphics with Inkscape.

First was the creation of the blue squiggle shape thingy. I created the center line, then the left and right lines. Then I tried to figure out how the hell to get the color fill. After a lot of playing around, I eventually discovered that I’d have to merge the paths into a single object. I cloned the center line, and created an object of the center line and the left, and a second of the cloned center line and the right. Filling these produced some… weird results. I needed to merge the end control points of the two paths that each object was made of, but I was having trouble getting this to actually work consistently. I found that I needed to get the points very close together (_very_ close) before merging. Then on the right-hand side I kept getting a weird line segment pointing out into the middle of nowhere every time I merged. I played around a bit more and finally got that to work.

Then it was just a matter of lining things up, adjusting line widths, sizing things, etc.

Exporting to the PNG was the most difficult part. I’m really not happy with Inkscape’s export facilities. First, the default was to export the “drawing,” not the whole image, so the output was cropped down from the image size I had originally requested (web banner). That seemed a goofy default given that I had asked to make a web banner image. Second, the background was always transparent, which I really didn’t want - IE6 is still way too common to rely on transparent backgrounds in PNGs. The only options in image export though were basically canvas size options. I ended up making a large white rectangle, moving it to the bottom of the object stack, and then exporting the page to get the final PNG.

And there we have it.

Syndicated 2008-02-07 23:54:17 from Sean Middleditch

Latest blog entries     Older blog entries

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!