It is not easy to cultivate a style that is self-made. Dribbble has created a new visual style. Everyone calls this style MBE style, and uses this style to create icons or small illustrations. Simple, round,...

Graphic source network | flying house design blog


Let's learn about this style today and use this style to draw an icon.

Recognizing the current use of styles such as MBE style, as long as everyone is paying attention to the interface of major websites or apps, this trend will be discovered. But it is just the surface borrowing and assembling of elements. In fact, this style cannot be fully understood.

The characteristics of MBE style have just been mentioned, it is simple and round and cute, one looks like this:

1. Generally, outlines are drawn with thick and round lines, which is similar to stick figures and similar to single line drawings. The thickness of the lines is moderate, the thicker the lines will be closer to the cuteness in terms of expressiveness, the transition of the lines is very round, and almost no sharp right angles are seen.

2, the characteristics of color filling is very obvious, the color blocks of the color should be offset from the original contour to create high light and shadow effects. The white formed by the offset between the color-filled patches and the contours formed by the lines will become a high-gloss white, while the opposite side will be a shadow.

3, color matching is simple orange, yellow, blue, with high saturation of bright colors, showing distinctive and cute features. In the appropriate time, the intensity changes in this color to reflect the level of color.

4, most of the lines are treated with a certain "broken line", and the use of dots to increase the richness of the lines.

5, if used as an illustration, most of them add a lot of geometric small decorations. We name these small decorations as "cross", "fireworks", "small dots" and "small circles", which are dotted around the theme in a randomly scattered state. Of course, if used for icons, this decoration will look cumbersome.

In addition, there are other features, such as the presence of horizontal lines, and the anthropomorphic expression of object objects. However, I personally feel that these are not certain requirements and can be added or deleted as appropriate. By understanding these styling features, you will know that the simple style is not simple. Next, let us actually get a feel at the scene.


Draw outline

STEP 01

Open AI and create a new 800*1000px document. In the document, go to the [Edit > Preferences > Guides and Grids] column and set the corresponding grid. The grid line spacing is 20Px and the secondary dividing line is 5. Of course, this is not absolute.


STEP 02

According to the theme we want to create is “brush”, you can draw a picture on the draft before drawing the outline, and roughly draw the outline before starting to draw. The drawn line is 18px and the color is dark blue with dark blue #22334f

All objects in the world can be combined with these geometries. The basic shape of the brush can be easily combined using geometric tools such as round and rounded rectangles.

Art of disconnection

STEP 03

Broken wire is the most prominent feature of this style. Broken wire processing can increase the richness of the lines and even produce a certain sense of light and shadow. This is often used in online painting.

Remember how we used the "shape generation tool" to cut out unwanted lines in the tutorial "Drawing Chicken Icons with Golden Sections"? This is also the case here, first select all objects, use the shape generation tool to delete the extra lines. After the deletion, there is an outer contour, and then the corresponding line is added by the direct tool or the pen tool to express the image of the brush that is simple and clear enough.

The lines here should pay attention to the "stroke" above the toolbar, click on its stroke parameter panel, and select the fillet for both the endpoint and the corner.

STEP 04

Lines in the horizontal and vertical directions can be adjusted with the "Direct Selection Tool" for the anchor points of the path, while for the circular path, the scissors tool or the pen tool can be used.


The above is the part of the line body, we are finished. Next, enter the coloring process.


Three-color color matching

Earlier we talked about the MBE style of color matching mainly with orange, blue and yellow. Here, we continue to use this color scheme.


STEP 05

The shape of the fill color should be below the outline (that is, the outline is not obscured), and it is consistent with the outline of each part formed by the outline. Therefore, we can use the outline to copy the anchor point after the break. After reconnecting to form a closed shape, close the stroke and fill it orange with an orange value of #9dccfb

STEP 06

Fill in all the shapes as you did in the previous step. The position of the shape forms a certain "misalignment" with the contour.

STEP 07

The position of the highlight is on the left and the shadow is on the right. When filling the light and shadow, you have to know what to expect. Add a certain reflection effect in the bright position, and the reflection is expressed by white lines. In the image below we identify with bright colors and shadows.

STEP 08

Because it is a brush (some people say it is just an ordinary brush), well, no matter what, it can brush a certain color. Therefore, we add a brush to it for it. Draw this brush trace, first create a 30 * 300 rectangle with the rectangle tool, the fill color is #3e9bf7. Then copy a rectangle, move it to the right by 30px, and continue to copy to 8 rectangles when the parallel column stops, and delete the interval rectangle.

STEP 09

Add a rectangle equal to its width above the rectangle of the previous step and merge it into a path using the PathFinder. After merging, you can select the anchor point to properly modify the length of its rectangular strip to make it more random. After adjusting, select the anchor point of the rectangular bar to make the right angle become rounded.

STEP 10

Use the same method to draw another trace, the fill color is #d6eafd, and the lighter blue color here shows the layering of color.


Narration

Wait for the shape to complete, you can add decorations.

STEP 11

Just as the characteristics of the MBE style 4 have been listed in the small decoration, here we make various types of small decorations, the colors are different, and it is dotted next to the brush. Then the final result is completed.





Projectors

Digital Projector,Mini Portable Projector,Mini Bluetooth Projector,Home Theater Mini Projector

Dongguan Aoxing Audio Visual Equipment CO.,Ltd , https://www.aoxing-whiteboard.com