Origin of the Vector Illustration

The origins of Vector Illustration

Origin of the Vector Illustration

Allow me to introduce you to the world of Digital Illustration by telling you about the Origin of the Vector Illustration and how it came to life. A little bit of history will help you understand and appreciate the power of Vector Illustration much better!

 

THE ILLUSTRATION IN HISTORY

The act of illustration has been from the beginning of time, a constant in human behavior. We have used it to express in graphic ways our needs and desires; as well as visual reminders of our history and our role in it.

Starting at the stone age, humans captured the importance of their every day lives drawing hunting scenes and other activities in the walls of their caves.

Egyptians carved in the walls of their temples and palaces beautiful hieroglyphics narrating the exploits of their Gods and Pharaohs; while in the middle ages artists fashioned engravings and tapestries of bucolic scenes.

Examples of Ancient art

Examples of Ancient art

With the Industrial Revolution and the creation of the printing press, a whole new concept of Art flourished. It was the beginning of a new Era: The birth of Graphic Design. Posters and commercial advertisements started populating the streets, announcing powerful machines, the war, political movements, new means of transportation, cabarets…

But even though we have always expressed our history in an illustrative way, using the techniques from each period of time; there has always been one common limitation: Size and resolution. Along history, artists and illustrators had to adapt to the medium and the size that was available to them–stone walls, wood panels, canvases or paper. They had also limited access to color pigments and varnishes.

With the arrival of the Modern ages, where houses suddenly became giant concrete blocks, where supermarkets brimmed over with fresh foods and services, where we became used to an XXL size life; the format and size restrictions suddenly became a problem for Artists, who had to find an alternative solution.

Modern Art posters

Modern Art posters

 

A new necessity: Big Format Illustrations

The Modern Age brought something else; in 1798 the Lithography was born. Thanks to the Lithography, Illustrated posters became a big hit, having significant influence both for art and commerce. But even though this new posters had a considerable size, they didn’t stand out on their own. Advertisers had no choice but to spend a lot of money putting dozens of posters in a row, to be able to catch the public’s eye.

This is how the necessity of making bigger signs and posters presented itself. Bigger posters could be see from far away, and they stood out on their own, making an impact on the viewers, who would then purchase the displayed products.

Thanks to the use of image projection, an artist could be hired to paint in a hoarding the poster of a movie; a soda commercial; or any other mediatic content. However, this technique was very costly and it took much time for the artist to finish the piece.

Hand-painted posters

Hand-painted posters

With the evolution of computer science, new fast and affordable printing methods appeared; hand in hand with digital photography and digital illustration.

The Digital Era brought with it many welcome changes, such as new bigger formats, cheaper printing systems such as offset (CTP), revolutionary operative systems aimed for graphic designers (such as MAC), digital retouching of photographs, etc…

Nowadays, artists can create stunning illustrations and photo collages completely digital. No need of paper or ink.

This is how the concept of Image Resolution came to be.

 

Infinite Resolution: The Vector Illustration

For the creation of any digital image with good printed results, the concept of resolution became essential. The term of Resolution determined the relationship between the number of pixels (tiny squares of a solid color) per each inch of paper. This would determine how sharp and clear-cut the images were, as it can bee seen by the following image:

Example of different image resolutions

The way an image looks depending on it’s resolution in pixels per inch

This pixel-made images are called Bitmaps, and their resolution is defined by the number of pixels that conform them.

These kind of images have a disadvantage when it comes to increasing their size. When an image has a set number of pixels per inch, this number cannot be increased without loosing quality. If for example, we want to make the resolution ratio higher, the actual size of the image will be reduced. 

Image size change with and without the Resample option

Image size change with and without the Resample option

To be able to keep the same physical size, and at the same time increase the resolution ratio, the software will have to create new pixels to fill the gaps. To decide the color of these new pixels, the software will resample the image, interpolating the value of the known pixels to color the new ones. This option will come at a high cost. The image will loose sharpness and the overall look will be disastrous.

Image size change with and without the Resample option

Image size change with and without the Resample option

 

The option of Resample in Photoshop can increase both the physical size and the resolution of an image, but it lowers its visual quality.

The devastating effects of Photoshop's interpolation filter

The devastating effects of Photoshop’s interpolation filter (Resample)

This is the biggest con that Bitmap images bring when used in a professional pipeline. To properly work with this kind of image, the resolution must be decided firsthand, to be able to adjust the resolution/size to meet the final requirements.

The difference between a bitmap image and a vector graphic

It is important to remember that Bitmap images have a finite resolution, that can be reduce in size, but when scaled up again the original resolution will have been lost. Then, which format will allow us to increase its size infinitely without loosing quality?

Quality loss in an image after being scaled down and up again

Quality loss in an image after being scaled down and up again

This problem with Bitmaps pushed illustrators and designer to look for a new format: Vector illustrations. This illustrations were based in mathematical operations, and they could be scaled indefinitely without loosing any quality.

 

BÉZIER CURVES

The Bézier curves are a mathematical system developed in the 60’s to speed the process and increase the quality of the technical drawings for automotive and aeronautical design.

They were named after Pierre Bézier, who invented and developed a mathematical algorithm to calculate these curves; that achieved great success in the use of CAD software applications.

His method was later imported into the pipeline of digital illustration by the creators of PostScript (the computer language that lead to the development of high quality printing for PC).

Types of Bezier curves

Types of Bezier curves

Its easy use turned the Bézier curves into the standard, not only for graphic design but also in web design and photo retouching. It is currently used in all the major software applications, such as Adobe Creative Cloud. 

Using these curves, designers can now easily create illustrations not by using pigments, but by using mathematical algorithms instead. The mathematical core allows them to be scaled at any percentage, without ever loosing quality. All we need to do is apply a higher value for the curve’s input numbers, and the illustration will recalculate, looking the same no matter how big!

 

Coming up next…

In the next post I will tell you a little bit more about Vector illustration. What are they? How are they created? When and where should they be used? What are their pros and cons?

And much more… Don’t miss it!

 

CONNECT WITH ME!

Sama Sama Studio ► http://sama-sama-studio.com
Google+ ► https://plus.google.com/+Sama-sama-studio/
Facebook ► https://www.facebook.com/samasamastudio
Twitter ► https://twitter.com/samasamastudio
Instagram ► http://instagram.com/sama.sama.studio/
Tumblr ► http://sama-sama-studio.tumblr.com/
Deviantart ► http://sama-sama-studio.deviantart.com/

T hank you for reading this post! If you liked the contents, tell your friends! Thanks to your support I can create amazing entertainment projects. Check them out in my web or in my social media!

See you there!

 

Sara
Sara Martull
sara.martull@gmail.com

I am a 3D artist. I like making 3D illustrations, modeling and rigging characters and watching hundreds of movies and TV shows.

No Comments

Post A Comment