Illustration 2.5d- Application of Illustration in App Design

How to draw 2.5D illustrations with AI? As we all know, many Banner advertisements will draw 2.5D equidistant illustrations. This kind of illustration looks comfortable and can be matched according to the designer's skills. Here, I will teach you how to draw 2.5D illustrations with AI.

Tools/materials

Adobeillustrator

0 1

Open the AI software in the computer and press ctrl+n to create a new canvas. The height and width of the canvas are arbitrary.

02

After creation, we select "Rectangle Tool" in the left toolbar, and take 2.5D rectangle drawing as an example.

03

After selecting the rectangle tool, draw a rectangle in the canvas and hold down the shift key to draw a square.

04

After the rectangle is drawn, click "Effect -3D- Protrusion and Chamfering" in the above options.

05

Entering the 3D panel, we can see a variety of angles to choose from in the location options. Generally speaking, the angles we choose are all equal, and we can choose according to our own needs.

06

For example, we select "isometric-top", check "Preview after selection" to see the effect, adjust the thickness of the protrusion, and then click "OK".

07

After confirmation, we quickly drew a basic shape of 2.5D At this time, we need to expand it and select "Object-Expand Appearance".

08

After expanding the appearance, right-click the shape, and then click Ungroup until there are no groups.

09

After the grouping is completely cancelled, we can adjust the different faces of the shape, and then use the basic 2.5D shape to combine according to our own imagination.

Draw 2.5D illustrations 1 with AI. The Style Principle of Monument Valley: 2.5D+ Paradox Space

2.2.5 the difference between d and 3D:

There is no perspective relationship between near and far.

3. Paradox space: an optical illusion (positive and negative is also an optical illusion), such as the impossible trinity.

4.4 the method to realize 2.5D Ai:

(1) Graphics Drawing (2) Effect -3D Effect

First, the method of drawing graphics

1. Make auxiliary lines

Method 1: Draw a vertical straight line, copy-copy-align horizontally-create a new auxiliary line layer1.0 "-CTRL+G Group all auxiliary lines-double-click the rotation button-enter an angle of 60-check the preview-click copy-select the copied auxiliary line-rotate 60 again-click copy-lock the auxiliary line layer to create a new figure.

Method 2: Create a new layer "Auxiliary Line Layer 2.0"-Select Polygon Tool-Draw Regular Triangle-Select Mirror Tool (located below Rotation Tool). -Click the top vertex of the triangle-Hold down the Alt+Shift key and drag to copy a mirror triangle-Draw a horizontal straight line between two triangles with the pen tool-Set the triangle not to be filled-Select all shapes-Hold down the Shift key and rotate 90 degrees-Ctrl/Command+Y to adjust the intersection point to be completely aligned-If it is not aligned, select the transformation tool (located on the right, Or open from a window)—Uncheck Align Pixel Grid —Ctrl/Command+Y— Grouping—Zoom out and drag to the swatch panel to change the pattern—Delete the drawing graph—Insert a rectangle—Fill the pattern in the selected swatch —Ctrl/Command+K— Uncheck Transform Pattern Collage (When changing the rectangle size: the size of the internal pattern remains the same, Increase or decrease the number)—Adjust the rectangle size (according to the size of the graphics to be drawn) —Ctrl/Command+K— Check "Transform pattern collage" (when changing the rectangle size: the number of internal patterns remains the same, the size increases or decreases)—Reduce the grid (make the editing area smaller and occupy less memory).

2. Draw 2.5D graphics

Method 1: Drawing with the help of auxiliary grid.

Real-time painting tool: similar to the paint bucket in PS, but only used in the space between paths (under the shape generator tool)

(1) Select all auxiliary lines in "Auxiliary Line Layer 1.0"-Select Real-time Paint Tool-Select Color Fill-Click/drag to paint the gaps between grids.

(2) Select all auxiliary lines in "Auxiliary Line Layer 2.0"-Object-Expand (× 2)-Ungroup (× 2)-Right click-Release the clipping mask-Select all auxiliary lines-View-Hide edges-Select real-time coloring tool-Select a color fill-Click/drag to color the gaps between grids.

(3) The method of selecting only color graphics: select grid-object-expand-view-display edge-ungroup (×2)- drag out color graphics-select transformation tool (located on the right or opened from the window)-deselect aligned pixel grid-select shape generation tool-connect all small triangles on the same face-fill colors separately-select.

Method 2: Use 3D renderings (to test the ability to grasp the space)

Create a new shape-Effect-3D-Protrusion and Oblique Angle-Position Select "Above Equal Angle"-Set the thickness of the protrusion-Method of modifying the color: Object-Expand Appearance-Ungroup (×2)- View-Display Edge-Delete the redundant white arrow line.

* Method of drawing the steeple door: Draw a rectangle-select the pen tool-hold down the Alt key and drag the upper edge-select the three points above-click "Convert to Sharp Corner" on the toolbar above to finish.

Application of Illustration in App Design Now there are more and more apps, and the production is becoming more and more exquisite. All kinds of apps hope to be different from other apps in design, so as to better attract users' attention. It is undoubtedly a good choice to apply illustrations to app. In iOS,

1 1 AppStore "Today" uses a lot of illustrations, bringing users a brand-new experience.

What illustrations should I use in 1.APP?

Increase the visual impact, summed up in two words "amazing", such as "Walkup" app, in which each page uses illustrations and the design is extremely beautiful.

Adding interest to make the page not dull, an obvious example is the empty page and the wrong page in the app. For example, when Taobao is offline, displaying a lovely illustration is much better than simply displaying words, and it can also reduce the anxiety of users as much as possible.

The more information you carry, the more intuitive it is, and the more obvious it is on the icon. For example, the classification icon of Baidu glutinous rice adopts a realistic style, giving people a more intuitive feeling.

Meet the emotional needs of users, emotional design, which has been well reflected in keep. In the past Tanabata, keep turned the running route into pink and took the dog. The person who is still running on Tanabata is probably single dog, and the significance is self-evident.

Two. Several popular illustrations and their characteristics.

Plane illustration

Texture illustration

Hand-painted illustration

MBE illustration (a dribbling god created this style, so it is called MBE style illustration).

Gradient illustration (sometimes called low-light illustration)

Three-dimensional illustration (also known as 2.5D illustration)

Stroke illustration

The following are examples of various illustrations, all from dribbling.

Graphic illustration: the characteristics of graphic illustration are plane, concise and clear, and graphic illustration is the most popular and commonly used style now.

Texture illustration: I think texture illustration is also a kind of plane illustration, but in the end, it is necessary to increase the sense of graininess. The most obvious feature of texture illustration should be texture, and the relationship between light and shadow is better.

Hand-painted illustration: I think this is the most difficult one, and it is also the one with the highest requirement for designers' artistic skills. Hand-painted style is widely used and can express many things. The following designer's work is full of childlike interest and beautiful as a dream.

MBE illustration: concise, round and lovely.

Gradient illustration: a very beautiful style. Generally, similar colors are used in the use of colors, and there should not be too many kinds of colors.

Three-dimensional illustration: As can be seen from the name, the biggest feature of this illustration is three-dimensional, which can express three-dimensional things in two-dimensional space.

Illustration of strokes: In addition to shapes, we should also use strokes, which can abstract things well.

MBE illustration: Icons in the kitchen, MBE style is very suitable for making icons.

Gradient illustration and three-dimensional illustration: pull hook. These two styles are put together because many times an illustration contains these two styles. (Used for banners, special topics)

Sketch illustration: Pinduoduo, Netease Cloud Music (used for icons and startup pages)

To sum up: illustrations are suitable for startup pages, banners, themes, refreshes, icons, pop-ups, background pictures and so on in the APP.