vector, raster, graphics, images, photos, photography, design, art, rendering, digital art, scans, photomontage, enlarging, web design, bitmap, typography, patterns, digital painting, photoshop, illustrator, in-design, inkscape, xara xtreme, skencil, vectr, krita, gimp, corel, art weaver, paint tool SAI, apple, windows, apps, programs, linux, technology

Vector Or Raster

What is the difference between vector and raster? At some point, anyone who’s dealt with digital art or design has asked this question. Which programs should you use for a certain task? When to vector and when to raster. Well, that’s where I come in and answer these and hopefully a few more of your digital art queries.

Starting Out

Think of a vector as a word document. One which has not been locked. You can easily open this file format up with the correct program and edit the contents. Sticking with this same analogy, rasterisation would be the equivalent of a printed out or even locked version if this same word document. All the contents of that file are stuck as they are. You can make notes on top of your print out, but you can’t really change it.

Vector editing programs can use rasterised graphics and most raster graphic editors can make use of vectorised layers. There is a compatibility between raster and vector. Where one struggles with a task, the other format takes over. Hence the need for both and why it’s useful to understand the differences.

vector, raster, graphics, images, photos, photography, design, art, rendering, digital art, scans, photomontage, enlarging, web design, bitmap, typography, patterns, digital painting, photoshop, illustrator, in-design, inkscape, xara xtreme, skencil, vectr, krita, gimp, corel, art weaver, paint tool SAI, apple, windows, apps, programs, linux, technology
Vector image, created with basic shapes and text on a 70 x 70 pixel canvas.

 

vector, raster, graphics, images, photos, photography, design, art, rendering, digital art, scans, photomontage, enlarging, web design, bitmap, typography, patterns, digital painting, photoshop, illustrator, in-design, inkscape, xara xtreme, skencil, vectr, krita, gimp, corel, art weaver, paint tool SAI, apple, windows, apps, programs, linux, technology
Same 70 x 70 canvas zoomed in to maximum. Note the clarity of the lines.

Vector

Vectors are mathematical formulas wrapped up in graphical wizardry. Think of a vector as a set of instructions for the computer reading it. They are not resolution dependent and can be easily resized. So long as you enlarge in program there are no issues with pixelisation. When using the image work file (AI, SVG, PDF and EPS files rather than the rendered picture) vectors can be scaled up without any issues. All those segments and anchor points that make up the vector, scale-up also. This means you can make your working canvas small, yet print at a far larger size without any loss of image quality. When working with vector editing software, you will notice that the standard colour model is set to CMKY. This is for print purposes and can be changed to a RGB colour model if desired.

Some people are able to achieve a highly realistic level of shading in vector work. But this is not something that the program is normally used for. It is possible to do portraits and detailed illustrations in this style. To achieve a level of realism, takes a lot of hard work, practice and the creative use of gradients. It’s perhaps a task not best suited to the vector beginner.

Creating professional looking graphics is really easy to do with a vector program. There are lots of shapes and other design assets often already lurking under the hood of most of these programs. This makes designing easy and aligning objects perfectly a dawdle. Providing you know the basics.

There is often a great selection of pattern making tools with vector based programs. However, this is where you will find your file size increasing to baffling proportions. Workarounds exist for this issue, but that is another article for another day.

vector, raster, graphics, images, photos, photography, design, art, rendering, digital art, scans, photomontage, enlarging, web design, bitmap, typography, patterns, digital painting, photoshop, illustrator, in-design, inkscape, xara xtreme, skencil, vectr, krita, gimp, corel, art weaver, paint tool SAI, apple, windows, apps, programs, linux, technology
If you look at the rulers on this image, you can see I’ve scaled everything up to 700 pixels. You can’t do that with a raster image.

 

vector, raster, graphics, images, photos, photography, design, art, rendering, digital art, scans, photomontage, enlarging, web design, bitmap, typography, patterns, digital painting, photoshop, illustrator, in-design, inkscape, xara xtreme, skencil, vectr, krita, gimp, corel, art weaver, paint tool SAI, apple, windows, apps, programs, linux, technology
Zooming right in whilst still in program and you can see it’s clean as a whistle. No pixel issues here.

Best Used For

  • Web Design
  • Text Based Designs
  • Flyers
  • Scalable Graphics
  • Simple Illustrations
  • Bold Line Work
  • Pattern Making
  • Illustrations Using Gradients For Shading
  • Clean, Perfect Graphics
  • Technical Drawings
  • Charts

Vector Program Examples

vector, raster, graphics, images, photos, photography, design, art, rendering, digital art, scans, photomontage, enlarging, web design, bitmap, typography, patterns, digital painting, photoshop, illustrator, in-design, inkscape, xara xtreme, skencil, vectr, krita, gimp, corel, art weaver, paint tool SAI, apple, windows, apps, programs, linux, technology
Rendered at 300 dpi as a png, you can see all the pixels. These rows & columns of pixels, make up all raster-based images.

 

vector, raster, graphics, images, photos, photography, design, art, rendering, digital art, scans, photomontage, enlarging, web design, bitmap, typography, patterns, digital painting, photoshop, illustrator, in-design, inkscape, xara xtreme, skencil, vectr, krita, gimp, corel, art weaver, paint tool SAI, apple, windows, apps, programs, linux, technology
A bit less pixelisation on the image saved at 300 dpi on a 700 x 700 pixel canvas, but it’s there all the same.

Raster

Unlike the maths based formulas going on in vector, raster images are made from rows and columns of pixels. These pixels are tiny dots which contain image data. More pixels per inch results in a smoother, cleaner image. Resizing a rasterised image can be tricky as the quality will degrade. The more dots per inch you have to play with is best here. It should be noted that even the clearest image with a high dpi rendering, cannot be infinitely resized. Use common sense, if you have to resize a raster-based image and zoom right in to check for pixelisation. Most raster graphics editors as standard use an RGB colour model, but as with vector, this can usually be switched over.

Photos taken with digital cameras, scans of analogue material and most images on your computer, will be raster based. If you want to edit photos, you will want to use a raster editing program. From simple colour adjustments and corrections through to complex photomontages, these can all be done easily with raster editors. It is easier to achieve a level of naturalism with such programs, and you will also have better control over blending. When adding or designing extra elements for a rasterised source, it’s best to match the dots per inch. Adding a picture of a kitten at 300dpi to a vintage image of grandma scanned at 150dpi, for example, would be a bad idea. Match your pixels and everything will blend in better.

Although it is possible to add vectorised elements to a raster image, I would generally advise against it. The stark difference between the two elements will make your image appear unnatural. Of course, this might be exactly the look you are after, in which case fire it up my pixel loving friend.

vector, raster, graphics, images, photos, photography, design, art, rendering, digital art, scans, photomontage, enlarging, web design, bitmap, typography, patterns, digital painting, photoshop, illustrator, in-design, inkscape, xara xtreme, skencil, vectr, krita, gimp, corel, art weaver, paint tool SAI, apple, windows, apps, programs, linux, technology
Digital painting made in a raster-based program. With these programs, you can paint more naturally.

Best Used For

  • Photo Manipulation
  • Detailed Illustrations
  • Digital Paintings
  • Lifelike Shading
  • Correcting mistakes in images
  • Textured Brush Strokes
  • Hand Painted Look
  • Gifs
  • Photorealism

Raster Program Examples

Conclusion

Raster editing programs are the best choice for painting complex works. These will allow you to paint more naturally with shade and detail. You can get more humanity and less machine perfection in designs made with these programs. If organic imperfections in painting are what you are after, then I would recommend starting here. If on the other hand, you are looking for clean, scalable perfection, then your obvious choice here is vector graphics.

Utilising both types of graphics and learning how to use their associated editing programs, is essential to anyone working in design. Knowing when to use vector and when to raster by understanding the main differences between the two is something that comes with experiment, experience and a little common sense. Both graphics should have a place in your design tool belt.

Related Posts

One thought on “Vector Or Raster

Leave a Reply

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