Vectors vs. Pixels
As a UI designer, you’ll know that vector designs are generally preferred over pixel designs (also known as rasterized images) because of utility. Vector designs are built from mathematical formulas that establish lines and shapes on a grid. Pixels are one unit of smallest single element on a display device.
The main reason you would use vector images over pixel images is because of the utility they provide. Vector images scale much better without losing any quality, whereas pixel images scaled up will lose resolution.
A good example of vector assets versus pixel assets is fonts. Fonts can always be scaled upwards and it would not drop in quality. However, once you rasterize the fonts (convert an image into pixels) it will lose its resolution once you scale it up.
If we wanted to look at it another way, telling the computer to make a pixel image is like telling it to make pointillism painting. It would have to paint pixels one-by-one to make an entire picture. However, when you tell the computer to make a vector image, it is as if you hand it an instruction manual and tell it how to draw from one point to another.
You can check out the various types of vector file formats on Adobe’s site.
I would definitely recommend learning how to use the pen tool in Adobe Illustrator to create vector images. Practice is key to developing the skills to create a vector image.
