Tutorial icon fonts: Ali mother portrait product

I’m glad that the 25 school’s little editor can share with you such a wonderful typography icon. Need to popularize the relevant Font Icon knowledge points:
The first point of knowledge: SVG (scalable vector graphics)

Scalable vector graphics is based on extensible markup language (standard subset of General Markup Language), which is used to describe a two-dimensional vector graphics format.

We use the advantages of SVG image format:

SVG picture format


Second Fonts Icon tutorial preparation:

1, before making icons, please download the template of the vector icon provided by Ali mom MUX, and download it immediately

2, try to use illustrator to make vector icons; some designers use path drawing icon and then guided into the SVG in PS, but also can be this way, but sometimes there will be some strange phenomena, such as graphics path chaos, icon tilt and other unpredictable situation, so it is recommended that you draw a vector icon in illustrator in;

3, will the illustrator draw graphics saved as SVG format; the first iconfont platform supports EPS file upload, but considering the EPS file generation process in platform instability,

So now the unified SVG format; illustrator SVG format specific tutorial > > iconfont

4, in the process of rendering icons do not use the AI graphics module, rotating mirror and other functions, the whole drawing process is best to use pen tool to draw ^ ^;

5, avoid drawing interruption point phenomenon.

6, you can not use color overlay method to achieve module modeling;


Two, the icon of the grid

In digital form, characters are drawn with abstract patterns. When the text is displayed on the screen, the location is very precise, and the desired font shape needs to be displayed in a certain number of pixel grids. The proportion of the commonly used raster icon designer to control icon elements of the relationship; but we are in the vector icon production process is the main purpose of introducing concept of grid simulation Font Icon in different sizes to show the effect, in order to achieve optimal effect; that is to say when the icon design we use to simulate the raster pixel, a lattice is a pixel, an icon to a certain number of pixels.


For example: a 16X16 icon in 16X16 pixel by pixel shader way to express graphics;


The students will ask, this grid can achieve the optimization effect is what kind of? First we try to understand the text rendering strategy, see photos:


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

The first one is pictured on the left we consider an ideal rendering, but we have just introduced through the grid we can understand that this is impossible, because the first generation and the second generation of gray black and white rendering rendering is not possible to display the radian of semilattice pixel or a pixel in the.

When the black and white rendering and rendering meet semilattice or pixel gray curves in rendering graphics, they will have their own different way; for example:

As the pixels above the red dot, we understand that he has radian, and does not occupy one pixel; each rendering method is as follows:

Black and white rendering

Black and white rendering relatively rough, directly to here to map does not show up by four to five homes in the form; (in the form of black and white rendering is mainly applied to the printer, the printer itself rendering, but the accuracy is very high, so the printed graphics is very delicate)


Grayscale rendering

Gray is some intelligent rendering, through his gray downgrade the way to express, if accounted for less than one pixel that is based on his share of the area to reduce the gray pixels; the area occupied less gray lower;

Sub pixel rendering

Sub pixel rendering is the third generation rendering method is relatively advanced, he from left to right one pixel is divided into three parts; use different colors to display graphics, so the graph looks more delicate;

Through the understanding of just three to less than one pixel rendering mode approach, we find that when we draw the icon, if not to control the icon edge in real scene rendering mode, the system will be relegated to render. So we want to be able to show a pixel full and complete. Let’s see a bunch of effects:


We can see from the photos on the left side of the figure fell in pixels, no less than a pixel phenomenon (rounded, right except) does not consider the problem of pixel grid; the icon in the application of 16X16 pixel size is obviously felt a small icon on the left than the right side of the small icon clear a lot; this is because the icons on the right side is 2 pixels of the display, but fell on the 3 pixels, when rendering the emergence of a pixel is not degraded grayscale display, the other two pixel gray level. So we think the small icon on the right is a little blurry and thick. So when making icons we need to introduce the grid to simulate pixels, then avoid icon line or edge do not appear falls in half a pixel on the situation;

To understand the importance of grids for icon optimization, how do you create a grid that simulates real pixel environments?

First we need to know about the reference frame; the reference frame of the role is to provide a reference for the font size, such as: the vector icon in a comma “16px pixel size,” and a “map” of the text size and position is not the same, this is because they are drawn in the same a reference frame in the graphic to get the concept of relative size, otherwise you also vector icon, what size?

Each type has its own different reference frame should be set according to the actual needs of the design, there is no strict regulations; Alibaba vector icon library standard size icon to show consideration in the formulation of the reference frame: 16X16, 32X32, 64X64, 128X128; set up a division of their size: * 051You can download the templates we’ve made to get the templates that have been set up

Select the grid according to the pixel size of the actual application;

Such as: do you want to create a 16X16 application icon font size in pixels from the website or app, then we recommend that you draw in the 16X16 grid, so 16 times 2 pixel n can be used, so the icon of the border would not fall to half a pixel, avoid false edges, so bold. (in the retina under the screen, don’t worry, the icon of the virtual edge because the display icon shows the accuracy is very high, very fine.)

What if you want to make a nonstandard icon, such as 18X18 size icon?

We can do the simulation by modifying the grid in AI, as follows:

In the AI set out in the reference line and grid settings, then take out your computer: 1024/X=? The calculated value as accurately as possible in the grid interval, so that you can simulate image pixels to display in the practical application of the scene size.

Three examples of operation

Step1, Download templates

Step2: remove the template diagram in AI, based on raster graphics rendering;

Step3: save the drawn graphics in AI to SVG

Step4: open the iconfont.cn web site and drag the saved SVG files into the upload box

Step5: finish uploading, so you get a Vector Font Icon

Leave a Reply