Vexel art has been mentioned on a variety of websites, be it talking about vector art and vexel art, or featuring the wonderful work created by vexel artists. However, do you actually know the answer to "What is vexel art?"
In today's article I'm going to give an in depth look at what vexel art is, how to create it and why it isn't vector art - which is the key point of the article. It will get technical in places so please bare with me as I go through the differences between raster and vector and then what vexel art is.
There are misconceptions on what vexel art is and it comes from it being a relatively new in its definition in comparison to other digital art forms. Due to the misconceptions being forwarded onto each person, it's been moulded into the idea that vexel art is a detailed representation of a photograph in vector... and this is incorrect.
What is Raster and Vector Art?
To first understand what vexel art is, you need to know what is raster art and what is vector art. A lot of people who visit Vectortuts+ will know the difference between the two, but let's assume you've been introduced to digital art for the first time. By learning the utter basics comes a better understanding.
What is Raster?
When we talk about raster art, we're talking about art which is based in pixels. A pixel is single square that can make up a larger raster based image. Our screens are made up of pixels, and these in all different colors make up what we view on our monitors.
Here's a little experiment you can do yourself. Take a JPG/GIF/PNG file and open it up in your graphics software program. Now zoom into it by say 1000%.
You'll see from zooming in that it's made up of these tiny squares... and these squares are pixels. Therefore raster art is art that is based in pixels.
Here's the second experiment with your JPG/GIF/PNG and your graphics program. With a small portion of your image, actually resize the image to about 1000% of it's original size - making it super large.
Doesn't look pretty does it? Increasing the size of raster images will result in the image being blurry and often pixellated (this refers to an image looking blocky). Now let's get a little technical here and explain why this happens. Your graphics program is thinking in pixels, the file you have is specifically telling it that this square is to be colored white, the next is to be colored black - it's very precise in that.
However, when you increase the size of the pixels it's a bit of a guessing game for your program. To go from say a 2x2 pixel image to a 20x20 pixel image, your program has to estimate based on what information it has, what the colors should be to replicate the same image but in a larger way. Due to this, the colors and image lose its clarity and you end up with a blurry image.
What is Vector?
Explaining what vector is, is a little harder to demonstrate by downloading an image and resizing... I'll get to a point about that later, so let's break this down to the very basics.
Vector is made up of points. These points connect to each other to create a line (or a path as it's often referred to), and a group of points, and paths will create a shape or object. Think of a map, co-ordinates would be your points, traveling from A to B would be your paths (think of traveling from one point to another) and a set of co-ordinates would define an area (or a shape in vector).
Consider this: In vector, your program knows that point A and point B will produce a line, this line might have a curve - if so it will know at what angle the curve is. Your program also knows that between points A, B and C the shape it's produced will be colored with say yellow.
Source: Images 1, 2, 3, 4 and the preview taken from the illustration used in the tutorial Creating a Stylish Line Art Portrait with Illustrator CS5.
When you resize a vector image, you're telling your vector program that you want to increase the distance between the points. As the points will still be within the same ratio to each other, there is no loss in quality. If you think of a map, if you just wanted to get a larger map, the co-ordinates would be in the same place relative to the maps size (or scale). You'd still be able to read the map and view it as you would if it was normal.
But when I Resize Your Vector it Pixelates
Now you know what raster and vector is, you need to understand one more thing.
A common misconception is that a vector illustration in JPG/PNG/GIF format should resize without quality loss. The vector aspect of the illustration is contained within the original source file (EPS/AI, etc...). You'd find it hard to be able to share these images unless you save it into a format that is presentable on the web, this is a JPG/PNG/GIF file.
Compare this to a sculpture you created, but you want to share what is looks like to someone over the web, so you take a photo of it with a digital camera. You then send the resulting JPG over the internet to whoever you choose or display it on a website. Your vector program does a similar thing! It effectively takes a snapshot of what is visible in your vector program and then saves it to a web friendly format such as a JPG.
As your screen displays in pixels, viewing an image in a pixel format such as a JPG is the easiest way to share an image. So when you resize a JPG you are resizing a bunch of pixels and thus you get the loss in quality as described in our raster explanation.
So to reiterate, it's the original source file that dictates whether it is raster or vector not the format you view on the web*.
Medium, Technique and Style
Now let's talk about medium, technique and style, as these questions and queries come up a lot when talking about vector and vexel. So we're all on the same page let's talk about what these three terms mean:
- Medium: When we refer to a medium or media in art, we're referring to what the piece of art is made in.
- Technique: When we talk about a technique in art, we're referring to how the art was made, what method/process we went through in creating the art.
- Style: When we talk about styles in art, we're referring to how the art looks, what are the characteristics of the art, the appearance of it.
So let's compare this to something we've all done and that's doodling. Say we've drawn on a piece of paper with a pencil and sketch a cartoon character. This sketch started out with a basic stick man and then we've used that as a base to create the pose and further detailing. In this example:
- The medium would be pencil on paper.
- The technique would be starting with a stick man and then using this as a guide to create the character.
- The style would be a sketch (a rough/quick drawing) of a cartoon character.
From this, we know that vector is a medium - as it's what the original source file is made of.
Hang on, but Vector Art Looks Like...
Some people often confuse vector as being a style as it commonly looks like a collection of layer based objects, yet this is incorrect. Going back to the pencil sketch example, you could look at a pencil sketch and know it is made out of paper and uses a pencil. It does look like what it's made of and the same is true with the majority of vector artwork.
Source: From the tutorial Creating a Portrait Using Only Four Colors!.
However this can be challenged with a little more knowledge of what tools are available in vector. Gradient meshes don't carry the same appearance as the layering of shapes, it looks more similar to an airbrushed image, yet it is vector and thus a medium not a style.
Source: From the tutorial Create a Photo-Realistic Candle with Gradient Mesh written by Cheryl Graham.
So What is Vexel Art?
Vexel art is the layering of shapes and lines which are raster based. It's often confused with vector art because it takes on the appearance of the common look of layered shapes. However if you resize vexel art; due to it being created on raster layers, it is not scalable and therefore loses its quality and blurs/pixelates.
In theory, as it takes on the look of vector art, if it's possible in vector, you can do in vexel. For instance, creating line art using strokes rather than creating shapes. Using gradients is another and using seamless patterns which contain shape. This isn't to be confused with using a seamless texture! However the only thing which isn't viewed as vexel is recreating gradient meshes. This would be more of an airbrushed effect and isn't the layering of raster shapes.
The key thing to remember is that vexel is the layering of raster shapes. It isn't vector, it just looks like it and as we've talked about, it's the original source file that dictates it's medium, regardless of what it looks like.
How Vexel Art Originated
Although this type of digital art has been created long before it was given a term, many people were creating vexel art under the impression they were creating vector art. They used layered shapes using the Pen Tool or Lasso selection and then fill tool on raster layers in raster based programs such as Paintshop Pro, and thought they were creating vector art, after all it looked very similar.
After much debate on the now defunct Nova Boards (an old forum populated by teens getting into digital art) and clarifying what exactly vector art was, people began to realize they weren't creating art which they thought they were. Being under the impression that you're working to create one thing, and being told you're not, lead to the need to labeling the digital art that was being made.
On Friday 27th June 2003, Seth Woolley suggested the following in post #532851:
"OK, new word: "vexel" a cross between vector and pixel. Crossing between vector and raster wouldn't work too well. To be used as an adjective and a noun."
Due to Seth's standing in the community, the term was taken on board and used from them to describe the layering of raster shapes that mimic vector art in appearance.
Part of the misconception originated as a lot of the young artists back then used stock images without adding additional elements in their pieces. They'd effectively posterize the image and then trace the shapes, creating duplicated, stylized version of the stock image. As this art was associated with the term vexel, the misconception began.
What Vexel Art is Not
So vexelling is the layering of raster shapes, based on this we can confidently say that vexel is not vector. It may look like vector, but it's not made of vector. There is also a misconception that vexel art is combining a vector graphic with a raster overlay element, such as a texture. This wouldn't be correct, as it would more likely be referred to as mixed media.
A lot of Photoshop users tend to think they create vexel art when they use the pen tool, this isn't correct either, so let me explain this further...
Raster Based Programs and Vexel Art
There is another factor which can be confusing to some people and that's using a raster based program and vector art. It's fair to say when you use the Pen Tool in Illustrator (a vector program) you are producing a vector shape. So if you use the Pen Tool in a raster based program does it produce raster?
There is the misconception that Photoshop is not capable of producing vector art, therefore the shapes it creates are raster, therefore you're creating vexel art. This is simply a myth. Vector programs such as Illustrator allow you to zoom into an illustration in real time - as in it renders the smooth, crisp shapes and lines as you zoom in. Raster based programs don't work like this and when you zoom into a vector object in Photoshop, it shows pixel edges.
However if you go to Image > Image Size and resize the image, it will resize the vector elements also - giving you the smooth, crisp shapes which simply aren't possible with rasterized shapes!
Why Create Vexel When You Can Create Vector?
So given how available vector applications are (for example Inkscape is a free vector program), why would you choose to create something which looks like vector but isn't? Well there are a number of reasons, but there isn't a definitive one. Some may prefer to use the Pen Tool in Photoshop, yet they may create that many vector shapes they will need to rasterize all the shapes
This would mean the shapes in the source file (PSD in this case) would be raster, therefore it is vexel art. Another could be they are familiar with using an older program that automatically creates raster shapes from the Pen Tool (Paintshop Pro for example).
I used to create vexel art and used Paintshop Pro 7.04 back then. I was a hobbiest digital artist and therefore didn't have the money to spend on programs such as Illustrator to create vector art. I wanted to have a digital art program that was a jack of all trades and PSP was my weapon of choice.
I started using the Lasso Tool and would fill my shapes with the Fill Bucket. This created the layering of shapes effect. I later moved on to the Pen Tool that had an option in PSP to create vector or raster shapes. Due to the sheer amount of shapes I was creating (as seen above), I opted to create raster shapes as PSP 7.04 could only manage about 100 vector shapes before my computer gave in!
Conclusion
With understanding of what raster and vector are, you can gain a better understanding to what vexel art is. So why isn't vexel art vector? Because it's raster based.
For those who have skipped their way to the conclusion, vexel art is simply the layering of raster shapes which mimics the appearance of vector art. Whether it is seen as a medium or a style or even a technique is completely up to debate. I'd like to think of it as being a medium since it's made up of shapes on a raster layer, but that's another debate. What do you think?
* I know there are some technically minded folk reading this article who will point out a few things. I'd like to state that the article was written explaining these basics as simply as possible. There are indeed some exceptions to the source file/output statement to do with vector formats that are viewable on the web, such as vector illustrations tat are created in flash and displayed in a flash format, which you can indeed zoom into. I've excluded this from the main article to avoid confusion of the basic points.
