Long time no see, Regan Noodles who has touched countless people.

To recent posters of various holiday brands.

You can look at the illustrations.

Do you know what are the common illustration styles?

Xiao A will pass this article.

Take you to understand the common styles of illustrations and posters!

Graphic style illustration is mainly color blocks, geometric modeling, smooth outline and more intuitive information, which makes people understand the information conveyed by the interface at a glance.

The flat interface can also better realize the transformation of pictures, and the webpage loading speed is faster. Therefore, graphic style illustrations are widely used in various fields.

Stroke style is an extension of plane style.

Adding outline and brush strokes to plane elements and adding brush strokes to the outline of line-drawing illustrations are more three-dimensional and lovely than plane styles, and are often used in posters, guide pages, logo, etc.

Texture style illustration, also known as grain noise style, is another branch of plane style. The page is superimposed with grain texture, showing a matte texture, which is a bit like sand painting, but more delicate than sand painting.

The main manifestation is the use of a large number of color blocks. Elements are single and clean, and textures are often superimposed on highlights and shadows of elements. Increase the details in the picture through graininess, the picture is natural, three-dimensional and vivid, and the painting style is relaxed and casual.

Ukiyo-e painting refers to "a prosperous and empty world" in Buddhist language. Ukiyo-e painting shows the ups and downs of the world in the form of painting.

Ukiyo-e painting style is based on traditional prints, emphasizing the plane painting of lines and color blocks, with bright colors and birds, fish and waves as the main forms of expression.

MBE illustration is a style created by the designer of Dribbble. It depicts elements with thick black lines, removes unnecessary elements in the picture, and the color blocks are clearly distinguished, round and lovely. With small elements, it is often used in boot page, startup page, logo, etc.

Watercolor illustration is a popular painting method in recent years. Simple lines, gentle colors, quiet and natural, simple and casual lines. Watercolor illustration is particularly creative, which can not only express various styles such as realism, abstraction and magic.

Illustration is one of the most common design elements in our life.

In recent years, it has gradually become the mainstream of poster design.

Different styles of illustrations bring people different visual feelings.

Which one do you like?

The present situation of the style of graphic illustration The graphic illustration is an illustration expression technique that removes perspective, weakens details, does not fully represent real objects, generalizes appearances, then extracts features, and retains the original identifiability of objects.

Illustration is now widely used in all walks of life and fast-paced life. Graphic illustration can express some ideas simply and directly, and unique illustration can also enhance the brand image. Graphic illustration also has a name-fashion illustration, so what is graphic style? It has won the honor of being called fashion illustration among many illustration styles.

How to draw linear illustration landscape from scratch? Look at the master's summary of design ideas! If we have been studying lines, we will find that lines can not only represent the iconic individuals we see in ordinary daily life, but also represent larger and more complex landscapes. But the latter will be more difficult, especially if the lines are thick, and it is impossible to better express the details (such as clouds or catkins floating in the air). At that time, I was a little stuck in this train of thought and made no progress.

After two days, I suddenly got inspiration out of thin air and thought of the road to simplification. Try to simplify the method, although it looks rough, but it has entered a new level. I don't think we should just create scenery, but convey it. So the scenery is developed step by step with the combination of lines and color blocks.

The source of inspiration

So I have a mirror image of this group of works. This group of works is mainly composed of thick lines and scenery, with emphasis on "color" (gradient combination).

Tip:

This operation pays attention to the process of design thinking and does not involve the specific details of the software operation. If you are not familiar with the software operation, you can move here to watch this simple and quick operation video of AI.

△ Four ways to get shapes: spelling, subtracting, cutting and drawing.

Referencing photos does not mean copying photos.

The drawing of position needs to be very general. Because our plan here is to draw the scenery in a small rectangular box, in fact, the space is very limited. So the setting of lines will tend to be simple.

Simplification is a very important idea. You can start your research with photos. Of course, when I was creating, I didn't just borrow one photo, but combined several photos for reference.

Refer to the layout, composition and perspective in the photo to refine the most basic shape.

If you are interested, you can watch the following video:

△ How did the inspiration come from? Some skills of referring to photos

Construct basic lines

If the details are not cumbersome, the simplified pattern can be represented by a grid. Of course, it depends on your habits.

Step 0 1

Open AI and create a new document of 1600* 1600px. Draw a rounded rectangle in this document, and then lay out in this rounded rectangle. First, outline the largest basic shape with a few lines. The outer frame line is 30px, and the inner line can be slightly reduced to 25px, and then reduced to 20px.

The principle of setting the line thickness is to make the line follow a certain sense of rhythm, such as a multiple of 5.

Patterns set up the whole picture like building blocks.

Second step

Continue to fill the picture of the building on the left with the logic of building blocks. At this time, we should learn to jump out of the "technical" thinking level, which I have repeatedly emphasized to the students in my teaching experience: we are not learning how to draw this object, for example, we draw the scenery of a small town here. What we have learned is the creative thinking behind it.

Here I quote a sentence from Feng Zikai in his book Understanding Painting:

"Pictures are like math and sports. Life doesn't have to draw apples, bananas, vases and teapots. It turned out that it was only through this kind of research that people's eyes were trained to be correct, sensitive, true and beautiful. 」

Used here, it is to train your line modeling ability by drawing towns and buildings. This ability not only conforms to the shape of the building, but also makes it look beautiful and natural.

Step 03

Going on is to optimize our shape again. You need to pay attention to two aspects when optimizing the shape:

Are shape joints closed?

Is the overall shape uniform?

These are macro and micro directions. Then adjust the shape of addition and deletion appropriately.

Step 04

Adding details is usually the last step in the framework work. At this time, we have to switch to another angle: at first, we regard the function of lines as establishing contours. At this time, it is necessary to describe the details with lines. Take an apple for example, and you will understand. The two functions of lines: sketch and painting, can be reflected here.

So the details added here (windows, doors, waves, seabirds, etc. ) are used to describe lines.

At this point, our contour line is completed. At this time, you can extend their appearance.

In many logo designs, this step can actually be ended, because most flat-style logos only need an outline, and the color can be random monochrome.

Color frame

Building a color frame is actually looking for an angle to observe color. Use the relationship between two colors to evolve into a color array. In the video below, you can learn more about color arrays.

△ color array: a color frame diagram for beginners.

Step 0 1

Based on the above theory, I got this color array. Our colors start here. The main color is determined to be blue (inspired by our photos), and the secondary colors are pink and mint green.

Second step

Of course, the function of color array is not to let us use all colors, but to simplify them according to the actual situation. Keep trying key colors to find the best combination.

Use the Shape Builder tool to color and assign main colors.

Step 03

Continue to use a color mint green. At this time, everyone should pay attention to the subtle changes in color. Everything looks perfect when a single color appears. Once the second color is added, the situation becomes complicated.

This is the same as our usual life. When a person is alone, everything is fine, and two people will have interpersonal relationships. The complicated relationship that makes people feel headache and happy brings more vitality and ups and downs.

We see that although we use secondary colors, it also brings more color changes to some color blocks, which can be easily done with color arrays.

Step 04

The third color is red, which we can continue to use in graphics.

Step 05

The main colors are controlled in three kinds, and the remaining colors can be fine-tuned on the basis of the existing colors, such as adjusting the lightness or saturation of the colors to obtain more delicate changes.

Note the use of white here.

Light and shadow gradient

Thanks to the light, we saw different colors. According to this truth, gradient is also a very important coloring element in order to obtain a richer sense of light.

Step 1

Before using the gradient, my suggestion is to do a flat coating first. Flat painting is to establish the overall color balance, and then fine-tune it according to the lighting conditions.

For the gradient, we need to be restrained, just choose one of the colors, and then fine-tune it in this narrow color range. For example, here we use a gradient red to make some subtle red changes.

Second step

Then add shadows to the building, and the appearance of shadows is arranged according to the principle of "beauty and truth". Many people here may ask what is the principle of "beauty and truth". The following is also a description from Feng Zikai's Enlightenment Painting:

Pictures are both ornamental and practical. Appreciation is beautiful, and practicality is true, so drawing exercises must take both "truth" and "beauty" into consideration. Specifically: for example, when drawing a bottle of flowers, we should carefully observe the shape, size, direction and color of flowers, leaves and bottles to avoid drawing mistakes. This is the "real" kung fu. At the same time, we should also coordinate and arrange skillfully to make it appropriate. At this time, the "beauty" aspect of kung fu.

Knowing this principle, we will try to balance the two elements of the picture in practice.

There are three points to pay attention to when making shadows:

Find the light source

Configuration of shadow color

You don't have to be completely realistic.

These three points can be demonstrated in detail in the following video:

Three-step technique of adding shadows to line illustrations

The effect after completion is as follows:

Speckle highlight

In the last step of creation, we added a small detail here, which is also the crowning touch that suddenly occurred to us, adding a bright spot to the picture.

Step 1

In plane composition, a point can be a point or a small square. In this picture, we use small white squares to highlight the picture.

A picture with a little highlight will make the picture more vivid.

The final effect:

Postscript: the idea behind it

While writing this article, I have arranged three videos, which may give beginners more inspiration. I have been struggling to make a video or write an article before. I thought articles and videos were the best way to get what I needed. But later, during the operation, it was found that the two roads could not be parallel. I can only insert more parts in the article that I think are worth developing.

Video is a supplement to the article, and the article is a supplement to video. Although now everyone says that there is no time to read words and videos are more direct, I always feel that it is easier to query and record what I have devoted myself to with words. Neither video nor article can replace each other.