Raster VS. Vector Graphics

vector raster castle artWe’re in early alpha right now and the art style has yet to be finalized. I love the loose explorational aspect of this phase of visualization and decided to use my two favorite programs (Adobe Illustrator and Adobe Photoshop) to flesh out a little castle drawing from a previous post. Results (right) can be technically classified as Vector and Raster based renderings. Why do I qualify their descriptions with the term based? Well, here’s where it can get a little confusing. Let me explain.

What’s Raster, Precious?

A raster – or bitmap – image is made up of individual pixels built on a dot matrix (a.k.a. a grid).  For example, a 100 pixel by 100 pixel image has 10,000 individual squares (pixels). The file format stores a color value for each specific square. When zoomed in, it’s easy to distinguish the individual squares. We all refer to this “look” as pixelated. When zoomed out, the pixels all blend together to form the shapes, tones and values that make up a picture. Usually, our brain doesn’t notice any of these details and just says, “Hey! That’s my friend Bryan”. Additionally, when it comes to creating game art, raster-based programs traditionally lend themselves more to textures and detail.
Common Raster Formats: JPEG, GIF, PNG, BMP

What’s a Vector, Victor?

A vector image, on the other hand, is described in terms of a mathematical equation. In the case of our 100 by 100 graphic, the computer DOESN’T store individual pixel values. Instead, it renders the shape according to the equation. This is often visually displayed during creation as a path with nodes. The math talk is confusing, but beyond saying it’s a “mathematical equation” there is minimal math use involved for the artist. The main benefit is that, inside a vector-friendly program, the size of the image can be scaled infinitely without loss of quality (i.e. blurry pixelation). Also, file size is significantly smaller. One caveat, vector graphics programs (like Inkscape and Illustrator) are used mostly for the initial creation of images/graphics. For final implementation, in most 2D applications, they have to be exported to raster. For example, in my day job as a graphic designer, I often design logos in Illustrator as vectors. However, when I’m finished and need to provide something for the client to use in print and on the web, I give them JPEGs, PNGs, etc. They also get a vector (master) version but usually the only time it gets used is for professional print jobs.
Common Vector Formats: EPS, PDF, AI, SVG

2 blue circlesA Little Note of Caution

So what’s confusing? Vector and Raster are technical terms that describe a file’s format, BUT because of the nature of the vector process and popular trends, it’s easy to start using that term to describe a graphical style instead of the format. Look at these two blue circles. One is vector rendered and the other raster. Can you tell the difference? Doubt it. Our two terms can’t accurately be used to describe them stylistically even though their construction was based on their respective processes. This is not the case for the castle renderings. The smooth lines and flat color shapes of the castle on the right stylistically look digitally created.. in a word, well, vectorized. But technically, I could’ve made both of these castle images in either a bitmap or vector program. It’s a minor detail but important to understand before starting image creation. You don’t want to spend a ton of time creating art that can’t be re-scaled. For example, I whipped up the castle on the left in photoshop for fun. When I finished, I really liked it but because I didn’t plan ahead, I can’t scale this image without losing detail. A best practice in this case would be to always work on a large canvas.

That’s all for now. Much more could be said (and has been). There are so many articles on this topic. A quick google for “Raster VS. Vector” popped back this, this and this. There are hundreds more.

Good luck. By the way, which castle style above do you prefer?

One thought on “Raster VS. Vector Graphics”

Leave a Reply

Your email address will not be published. Required fields are marked *