Illustrations are one of the top design trends now, with more and more ways to add beauty and usability to digital products. Today we offer you to get to basics of vector illustration together with graphic designer Anta Alek. She has prepared a big set of tips, examples, and practices for those who start their way in digital illustration or want to create original vector images for their interface designs. So, welcome to learn about color, light, composition, perspective, preparing files for a client and skills to progress in illustration.
All the illustrations in the article are made by and belong to Anta Alek.
Let’s look at a ball with light falling upon it. As illustrators, we have to analyze what is happening at the moment. When light strikes an object, it looks realistic, which means the object has a highlight, light, half-tone, shadow, and reflected light. Excluding these parameters from the illustration, we’re moving from volumetric objects to flat ones. That’s how a flat technique comes up. Coming across artworks by other designers, you are recommended to analyze which parameters (only light and reflected light/ light and shadow/ highlight and half-tone, etc.) were included in the illustration and how far the designer went away from a realistic representation of the object to a flat one. In my example below, the light and reflected light were excluded. The object saved only highlight, half-tone, and shadow, and this way, we got a ball that was more stylized and flat. So, by modulating the volume this way, we control how realistic an illustration can be and whether it fulfills our task in general.
Left: highlight, light, half-tone, shadow, and reflected light. Right: highlight, half-tone, and shadow.
A bit of theory. In the light, the color of an object always looks lighter than its original color. Half-tone is a meeting point of shadow and light. That’s exactly where our eye identifies the real color of an object. When an illustrator creates objects using gradients, a point to keep in mind is that the true color of the object is revealed at the joint of light and shadow. Because work is often done using a warm-cold method, the transition area at the joint of warm and cold, of light and shadow, is where we can probably get a “dirty” color. To avoid that, the color should be thoroughly selected and intentionally “purified.” For instance, using a CMYK color model, it’s necessary to check how many elements the color comprises (ideally, there should be two main and the third as an additional one used at a minimum). If there are four elements, it becomes more difficult to control an impression and keep the color vibrant and bright.
Why would you need this knowledge if it’s possible to draw in a flat manner? Now, we are equipping you with information that will enable you to work in absolutely various artistic techniques.
A source of light is another aspect to consider. For some illustrators, selection of a specific light source is a signature line of their portfolio, a factor of its high recognizability.
Light sources (left to right): backlight; side light; bottom; straight.
A backlight means that the light source is placed behind the object. That kind of light source has an impact on the emotional perception of an object or character which seems to be distant, mysterious, filled with uncertainty, somehow hidden from the viewer, as a character or object is mostly in shadow and just a silhouette is exposed as a hint of what the image creator wanted to tell us.
It’s always worth analyzing what light source will highlight a desired emotion to the maximum extent. There are stereotypes that certain characters or episode scenes go hand in hand with specific light sources. For villains, thieves, swindlers, and characters experiencing fear, a bottom lighting is applied; Hollywood light is used for divas and famous people; and backlight serves well for “shady characters” or people that will be introduced to the world soon, for instance, a superhero that is unknown yet, entry of a hero.
At the appearance of light in space, our eyes can automatically distinguish the colors of objects, each of which has its molecular structure, and so reflects or absorbs a given light spectrum. Talking about physical objects, an eye is able to see the reflected light spectrum only.
Recommendation for reading: “The art of color” by Johannes Itten
The greatest contrast is the one between black and white. The next one is between the basic colors of the color wheel: blue, red and yellow. Based on the opposite colors of the color wheel, we can build various contrast pairs. The contrast is lowering while moving away from the basic colors.
The following impressions and emotions can be conveyed via contrast: fury, energy, confrontation, maximum, power, diversity.
Nuance is a minimal shading-off of the color, and as a result creating the feeling of tranquility, peacefulness, and equality.
The next aspect worthy of attention is the warmth and cold of color. Let’s get back to the color wheel with a color temperature: gradations from yellow-green to red are considered warm gradations; colors from burgundy to blue-green are cold. The green color is defined as both warm and cold. Perception of a color in a vector illustration is highly relative, sometimes cold colors seem to be warm, as they are surrounded by other much colder colors. Thus, we should practice to develop a well-done palette in our artwork.
Interesting experiments can be observed when a professional works with colored light sources.
Do your best to look over your artwork to check the following:
An illustration can be considered harmonic if its color spots are balanced in tone, color, and mass, if shapes are skillfully composed, and if a meaningful message is distributed according to the significance level, from core to details.
The color, light, and shape help us to highlight the core – a meaning that we want to convey to a viewer.
An image can be called static if objects are built up as close as possible to either X-axis (horizontally) or Y-axis (vertically).
The dynamic image is the one where most of the objects are placed along the line of 45°.
When working on the set of vector illustrations, everyone faces the question of how to make it solid and unified. A balance of statics-dynamics of the figures and color spots should be nearly the same in every image. Over-static or too-dynamic ones will “fall out” of the main line, feeling like aliens.
The following emotions or qualities are conveyed via statics: tranquillity, balance, stability, passivity, etc. Dynamics transfer: determination, movement, activity, and energy.
Types of perspectives: one-point, inverted, isometric and eastern space.
One-point perspective is a technique of depicting objects in space when there’s one or several vanishing points according to which an object is reduced in size.
Inverted perspective is a type of perspective when the vanishing point is placed as if it is inside the viewer. This perspective creates kind of symbolic space and is commonly applied in icon-painting, encapsulating goodness directed to a viewer.
Isometric perspective is an angle without foreshortening when three sides of an object are visible.
Eastern space is a kind of space where objects are built up into composition one by one, regardless of the perspective.
The horizon line is a line located at the eye level. It reflects a psychological interaction between a character and a viewer in illustration. If the object is above the horizon line, it’s a dominant position, superiority; and if it’s below the horizon line, respectively, it will be a recessive, depressed position.
Now, let’s bring together all the aspects: shaping, color, light, perspective, horizon line, and composition.
Shaping
All the illustrations and each particular object/character can be split into graphic primitives: triangle, circle, and square. If we’re drawing wavy hair, it is a set of alternating cylinders; when drawing an eye, it is a sphere installed into an orbit. If you intuitively feel something is wrong with the object, it’s time to switch on the logic, split it into primitives, and verify the construction. So, follow your heart and draw, but then engage an analytical approach. Such alternation makes it possible to practice imagination and sensation as well as estimate an artwork mathematically.
When you’re mastering a profession for the first couple of years, there’s always a question: where to move on? Every aspect, as time goes by, should transform into a new, more proficient skill. What tasks do you set for yourself on a daily basis to hit a new level, to go even deeper into a subject?
So, how to prepare a file for delivering it to a client?
1) Transform all the lines into curves, so that if the size of illustration is changed, the lines will not become either too thick or thin, but will keep their proper size:
Object>Path>Outline Stroke
2) Clean up an illustration to remove the invisible points and objects, empty text boxes:
Object>Path>Clean Up
3) Check out unnecessary objects in the curve mode: Ctrl+Y
4) Unblock all the layers (Ctrl+Alt+2) to make the further use of the picture convenient for a client or a motion designer.
Here are four skills that are a great help in becoming a successful illustrator:
Several private lessons a month with a professional tutor would be enough.
Before creating a picture, imagine it as a 3D model and rotate it, walk around it to select the best view, perspective, and light source, and capture it in mind. It is as if you find yourself in a static shot of a movie you are directing, and you can change everything by your preferences.
To do so, it’s necessary to practice remembering real-life scenes. For instance, concentrate on a situation in the park for 5-10 minutes, close your eyes, simulate it in your imagination, then open your eyes and compare it to reality: what was missing, what was distorted, and what you captured well.
This is essential for signing contracts and mailing them to foreign customers, conducting Skype conferences on the project, communicating with foreign designers, and attending workshops.
B2 is a level that allows you to communicate freely, think in the language, produce texts from time to time, and easily reply to letters.
Read about basic principles of visual storytelling, check popular graphic design trends, and learn how interface illustrations enhance user experience.
About the author
Anta Alek is a freelance illustrator. Check her portfolio on Behance.
The original article was published on Telegraf Design
This is where we place all the possible blocks that we use for our articles…
Creating illustrations for a children’s book is challenging, especially if you're not an artist. Learn…
Nostalgic typefaces are trendy and more varied than ever. Discover the story behind vintage typography…
Curious about the diverse world of nostalgic fonts? Keep reading to explore typography from the…
Check out arrow icons in different aesthetics and get some inspiration on how to implement…
Step-by-step tutorial on generating AI illustrations for the online school landing page design.
This website uses cookies.