Sunday, April 3, 2011

What is that Vector Victor?

Victor Basta: Request vector, over. 
Captain Oveur: What?
Tower voice: Flight 2-0-9'er cleared for vector 324.
Roger Murdock: We have clearance, Clarence.
Captain Oveur: Roger, Roger. What's our vector, Victor?
Tower voice: Tower's radio clearance, over!
Captain Oveur: That's Clarence Oveur. Over.

Airplane! 1980, Paramount Pictures.  Great movie.

So just what is a vector graphic?  Well anyone from high school physics can tell us a vector is a line with a heading.  Essentially a vector graphic uses these vectors in mathematical equations to create points, lines, polygons and so on and so forth.  Now I know I said the big scary "m" word there, but the computer does the math, I draw the lines.  Vector graphics are different than your typical pixelated raster image (such as a jpeg image or any graphic file your web browser supports.)  In vector form, you can zoom in infinitely and never deal with pixelation.  A raster image has a set number of pixels.  As you zoom in, you lose quality because the pixels are displayed larger.  A vector graphic uses an algorithm to add more or remove pixels as the image is zoomed.

A vector graphic uses a system of nodes, similar to a three dimensional model (nodes are comparable to vertices. )  There are always at least two nodes and between those two nodes is a line segment.  If anyone remembers their geometry class from way back when, this follows two of the basic axioms we learned.   And with two points I can make a polygon, by drawing a stroke, connecting the end points with a backstroke and pulling the two strokes apart to make a sort of eyeball shape.  Furthermore, I can take these segments (called strokes) and pull on them with the mouse, creating what is known as a Bézier curve.  Now I don't know the mathematics behind Bézier curves and I frankly don't care, but a Bézier curve is basically an algorithm for the computer to calculate a curve between two points.  Once I have the stroke completed, I either leave it open or close it, and add a fill if desired.  A fill is basically the paint bucket tool found in MS Paint.  A vector shape can be without a stroke or it can be without a fill.

There is far more to it than I've explained but I believe I'm exceeding the scope of this blog.

So why do I work with them?  Well because it is easier to use.  I'm not good with a pencil or a paint brush because I can't draw as accurately as I want.  I'm always erasing and adjusting.  With a vector, there is no need to erase.  I grab the node or the stroke I need and pull it where I need it until it looks right.  I can add nodes and delete nodes or change the type of nodes as needed.  I can organize items by layers, allowing me to hide objects that block my view or my ability to target it.  I can change an objects transparency and do so much more.

The editor I use is a free open source editor called Inkscape.   I have a thing for open source software and/or free software, I also use GIMP (think Photoshop, but without the $600 price tag), TrueSpace (3D Graphics) and OpenOffice.  I cannot say how it compares to Adobe Illustrator, I never used Illustrator and I don't intend to blow hundreds of dollars on Illustrator.  Inkscape works very well for me.  Edition 0.47 crashed every so often, which got me in the habit of saving a lot.  I upgraded to 0.48, haven't seen a crash so I don't know if that bug was fixed.

Here's a screenshot of a graphic in Inkscape

Click for larger size

The grey dots (which may be hard to see) are the various nodes of the fill I selected.  The red line is the outline of the segments between the nodes.  What I have targeted is a reddish fill that forms the main color of this blood elf's hair.  It lays under a few fills, one black with a very low opacity, and one white with a very low opacity, that gives it some depth, as well as a black outline which further adds some depth and shape. There are gradient fills used in the pony tail in the back, two radial gradients used over her eyes and one to make the shine on her lips. This just an example of all that I can do in Inkscape.

Now once the image is finished in Inkscape, it is turned into a .png raster image to be uploaded onto the internet.

Well thats the tool I work with.  Following this post are the graphics I design in Inkscape.

No comments:

Post a Comment