What I’ve read online says that Vector art uses math to make the image scale better but isn’t ‘math’ used in Pixel art in, say, Photoshop as well? I’m having trouble wrapping my head around how the math might be different when creating a line in Photoshop vs Illustrator for example.
In: 7
Raster art (pixel-based graphics) stores image information as information about pixels. ‘This pixel in this place is this colour’, basically, over and over again to build up the whole file. Vector art stores image information as vectors – basically lines with thicknesses and curves and so on. That means it can be scaled without becoming fuzzy – the computer just redraws the line. A raster image has no information about ‘lines’; it’s our human brains that figure out where the lines in it are – so when it’s zoomed in, the computer program has to either make each pixel bigger or try to guess at what the pixels ‘would be’ if there were more of them.
Pixel is not math in the same way. To simplify:
Photoshop art is a grid of color dots (pixels). It become blurry when enlarged because you are just turning one colored dot into four dots of the same color.
With vector art, there are no colored dots. There are points with lines connecting them, and the space in-between is colored in. The lines are drawn by the math formulas, so they are not size-dependent.
The best analogy I’ve ever heard is that pixel art is like a colored sandbox.
The only information stored is the color in each pixel.
There may be convoluted software algorithms that change that color, but, when you save, you just save the color.
Meanwhile, vector art is like a bunch of magical rubber bands.
No pixel information is stored for vector art. Instead, you store a series of points, and the path each line takes from point to point in the form of bezier curves (the “math”).
A positive trait of vector art is that you can make it infinitely bigger or smaller without losing information.
(There’s actually some more math and more options, but that’s the basics)
Vector graphics are mathematically based shapes/images created with points and paths and are not dependent on resolution. Pixel/raster/bitmap images are literally made up of individual pixels that are reliant on the resolution they were created in. Simply put, vector images can scale practically to any size without resolution distortion, but raster images will lose resolution or become pixelated when scaled above the original size they were created/designed.
Math is used when you create the image in both cases, but how the image is stored changes how that math applies.
Think of an image like a sheet of graph paper. You fill in each box on the grid to create an image. Up close it looks like a bunch of colored squares but if you get far enough away it looks like a picture.
When you use photoshop to draw a shape, say a line between two points the program asks “what color should I make this box” and fills it in based on the math for the line. But once the line is finished being drawn the program no longer remembers it’s a line. It stores the image purely as a set of colored boxes. That’s fine if the image never changes size but if you want to make the image bigger or smaller the computer no longer knows what shape you drew originally, it only knows the color of all your boxes. So if you resize such an image the computer has to use algorithms to guess how to fill in the boxes in the new bigger (or smaller) image.
A vector image on the other hand stores the information about what to draw as mathematical instructions. When you draw a line it doesn’t store the information as a grid of colored boxes. It stores it as a set of starting and ending coordinates and the thickness and color of your line. When you need to see the image, such as on your screen the computer will use those mathematical instructions to tell the screen what color to make the pixels (aka the boxes from our above example) but it doesn’t forget the original shape instructions. If you make the image bigger (or smaller) it can use the math to redraw the line so it looks more smooth.
There are advantages and disadvantages to using each kind of image. For photos and other similar images, pixel based works well because what we see isn’t in the real world a bunch of simple geometric shapes. But for things like logos or designs vector art works well because it’s based on lines and shapes.
Vector graphics are essentially a program that says, “Draw this shape here, at this size, in this color.” Raster graphics are a picture of that shape, at that spot and size, in that color. If you scale vector graphics, the shape gets redrawn from scratch, like painting a new one on a canvas. If you scale raster graphics, stuff gets pulled, stretched, blurred, and enhanced to arrive at a “best guess” of what the shape would have looked like if it was created with those dimensions in the first place, like stretching a drawing on the surface of a balloon. Things get messed up.
So vector is a better choice on graphics that need precise scaling to any size, but raster is generally superior for paint-like artistic imagery and definitely for photo editing.
Photoshop sort of combines the two through the use of layers, masks, and shapes, but that’s a pretty complicated topic.
Vector graphics is like drawing with a pen.
Pixel graphics is like capturing the image with a camera (or looking at a scene with your eye).
If you know how to draw with a pen, it’s easy to know what it looks like. After all, if you know how to draw something, you can look at the result of that thing with your eye. That’s vector graphic -> pixel graphic conversion.
But the opposite way is not easy. If you look at a scene, can you draw it with a pen? There are no obvious method. Clever algorithm or intuition let you do this, but it takes a lot of work. That’s pixel graphics -> vector graphic conversion. Our brain is an incredible machine that let us do that, which form the basis of many visual processing task that human can do easily; that’s something that modern neural network can barely do.
You never “see” vector graphic directly. What you see on a screen is a pixel graphic rendered from vector graphic, plus some extra schematic.
Vectors graphics are described as a sequence of lines (vectors) to draw. The vectors are arbitrary and can be located anywhere in image with infinite precision.
Pixel (Bitmap) graphics are described as coloured dots in a grid. The grid size is fixed when the image is created.
Our modern screens use pixels innately and this means that to see a vector image, you need to transform it into a bitmap image. To do so, you need to decide which dots need to get turn on to display a given line. Imagine getting out a piece of grid paper and drawing a line on it. To turn it into a bitmap, you would have to decide which cells in the grid to fill in to display the line. One solution is to completely fill in all of the cells which the line passes through, which is easy to do from a visual perceptive, but a computer would need to do a lot of math to figure out. There are several different algorithms used to do this, and they different in how fast they run and how good the line looks when displayed.
Now, imagine we drew exactly the same line but a different sized grid. If we use a smaller gird the image will have more dots in it, scaling it up. This will create an image with a closer approximation of the lines in our vector image. If we do the opposite and using a larger grid to scale down the image, we get a worse approximation of the lines.
Lets take one of the bitmaps produced above and change it’s scale. Generally speaking, the image isn’t going to change much as you scale up. It will turn into larger and larger set of coloured squares in the same shape as the original. Now, there are algorithms to smooth out the squares to make the image look better, but it won’t be able to recreate the original line. The algorithms cannot really create new data that wasn’t in the original bitmap.
When you draw a line in Photoshop, you are just indicating which dots in the grid are which colour. In Illustration, you get an actual line.
Pixel graphics is literally little squares of different colors. If you want to make a circle, you have to approximate it with the closest squares on the grid. Pixels on most screens are really tiny so it looks smooth at native resolution, but when you zoom in you’ll eventually see those square pixels making a rough edge.
Vector graphics are defined mathematically. The circle has a center and a radius. The screen just makes pixels to display it on the fly. When you ‘zoom in’ on the circle, the screen makes new pixels to approximate it. When you print it, at any scale, the printer can get as close to that theoretical circle as it’s capable of with its printing resolution no matter how ‘zoomed in’ the circle is.
When you zoom into pixel graphics and look at an edge you will see a lot of blurred stuff and pixelation while if you zoom into a vector graphic it’ll be crisp
Latest Answers