Font icon making detailed

I. Basic knowledge popularization before production

1, before making the icon please download by Ali Mother Mux provided vector icon production template;

2, as far as possible using illustrator to make vector icons; some designers use the path drawing icon in PS to lead to SVG, this way is also possible, but sometimes there will be some strange phenomenon, such as the path of the graph confusion, the icon tilt the unpredictable situation, So it is recommended that you draw the vector icon in the illustrator;

3, the graphics in the illustrator to save as SVG format, the original Iconfont platform is to support the upload of EPS files, but considering the EPS file in the platform generation process instability, so now the unified SVG format; Illustrator SVG format export specific Tutorials >> Iconfont

4, in the process of drawing the icon do not use the AI graphics module rotation, mirroring and other functions, the entire drawing process is best to use the pen tool to draw; ^^

5. Avoid the phenomenon that the graphic has been drawn over the breakpoint.

6, can not use the way of color superposition to achieve modular modeling;

Second, the icon grid

In digital form, characters are drawn with abstract patterns. When the text is displayed on the screen, the position is very precise and the desired font shape needs to be displayed in a certain number of pixel grids. Icon designers often use grid to control the proportion of the elements of the icon composition; but we introduced the concept of raster in the production of vector icons. The main purpose is to simulate the display of the font icon in different sizes to achieve the effect of optimization; that is, when the icon is designed we use a grid to simulate pixels, a lattice is a pixel, An icon requires a certain amount of pixel composition.

As an example: a 16x16 icon, in 16x16 pixels by pixel coloring way to express the graph;

There are students to ask, through such a grid can achieve what kind of optimization effect? First of all, we have to understand the text rendering strategy, look at the photos:

(from left to right) ideal rendering state, black and white rendering, grayscale rendering, sub pixel rendering

The first picture on the left side of the diagram above is what we think is an ideal rendering effect, but we can see that this state is not possible with the first generation of black and white rendering and the second generation grayscale rendering is impossible to display in a half pixel or a pixel display radian.

Black and white rendering and grayscale rendering have different ways of processing when they encounter half pixel or radians in the rendering graph; for example:

As in pixels above the red dot, we understand that he has a radian and does not occupy a pixel; the methods of rendering are as follows:

Black and white rendering

Black and white rendering relatively rough, directly by rounding the form to be depicted here is not shown; (Black and white rendering is mainly used in the form of printer rendering, but the printer itself is very high precision, so the graphics printed out is very delicate)

Grayscale rendering

Gray-scale rendering appears to be smart, he expressed by the way of grayscale downgrade, if not a pixel that is based on his area to reduce the size of the pixel gray, the smaller the size of the lower gray;

Secondary pixel rendering

Sub-pixel rendering is a third generation rendering method, relatively advanced, he from left to right to divide a pixel into three parts, with different color values to display graphics, so that the graphic looks more delicate;

By understanding how the three rendering modes are dealing with a pixel, we will find that when we draw the icon, if we do not have the control icon Edge line in the real scene rendering, it will be degraded by the system rendering. So we'd like to display a pixel in full. Let's look at a set of effects:

From the previous photos we can see that the edges of the left graph just fall in the finished pixel, no less than one pixel (except rounded corners), the right side does not take into account the problem of pixel grids; the icon in the 16x16 pixel size of the application of the small icon is obviously more clearly than the right side of the small icon to clear a lot; This is because the side of the icon on the right is supposed to be 2 pixels to display, but it fell on 3 pixels, rendering a pixel is not degraded grayscale display, the other two pixels for different levels of grayscale demotion. This makes us think that the small icon on the right is a little blurry and thicker. So when making the icon we need to introduce a grid, to simulate the pixel point, and then avoid the icon line or edge does not fall on half a pixel of the situation;

Knowing the importance of grids for icon optimization, how do you make a grid that simulates a real pixel environment?

First we need to understand the datum frame; the function of the Datum box is to provide a size reference for the font vector icon, for example, a comma of 16px pixel size "," and a text "diagram" is not the same size and position, this is because they are plotted in the same set of datum boxes, To get the concept of relative size, otherwise everyone at the same time vector icon, how to distinguish size?

Each font has its own different reference frame, according to the actual design needs to be set, there is no strict rules; Alibaba vector icon Library in the development of the benchmark frame to consider the icon to show the standard size: 16X16, 32X32, 64x64, 128X128; The special set up a can divide their size: 1024X1024 (You can download our produced "icon production template" to have set the benchmark box template)

The grid is selected according to the pixel size of the actual application;

Such as: you want to make a set of 16x16 pixel size font icon applied to the Web site or app, then we recommend that you draw in the 16x16 grid, so 16 pixel 2 of the N times can be applied, so that the border of the icon will not fall on the half pixel, to avoid the occurrence of imaginary edges, bold and so on. (In the retina screen without worrying about the imaginary edge of the icon, because the display precision is very high, the icon performance is very delicate.) )

If you want to make a non-standard size of the icon, such as: 18x18 size of the icon to do?

We can simulate this by modifying the grid in AI, as shown in the following figure:

In the AI settings, bring up the Guide and grid settings, and then take out your computer: 1024/x=? Fill in the grid line spacing as accurately as possible, so you can simulate the pixel points of the graphic that you want to display in the actual application size scene.

　　Third, instance operation

1, download the template

2, in the AI to delete the template sample diagram, according to the grid to draw graphics;

3, the AI to draw a good graphics save as SVG

4, open the Iconfont.cn website and drag the saved SVG file into the upload box

5, complete the upload, so you get a vector font icon