To the users of the illustrator software for detailed analysis to share the drawing of the SVG Christmas icon tutorial.
I. Understanding SVG icons
First, let's talk about SVG, the picture format. SVG is very friendly to the web side, especially in the recent years of display innovation. Adapt to countless mobile phone screen size requirements, vector map to play its own characteristics, that is, regardless of the size of the screen, it is displayed very clearly, and pixel-level picture pales.
"Full Screen" has always been a problem for the web (because no one wants to wait for a heavyweight picture to load through the phone), SVG is a simplified vector format, it is transmitted by XML, many unnecessary "details" are cleared, and the remaining is a relatively lighter amount of files.
Finally, the content of an SVG file can be replicated, and it can be beautified like other elements in the web, some of the SVG can be independent, and can change the color of the picture, reset the stroke size, set the transparency, we can also give it some effect (such as Blur), and even animation effect ... All this through CSS and JS can be done. SVG not only can be made into icons, but also can be made into logos, slogans, text and so on.
1, the size of the determination
Before we draw the icon, we have a more specific idea of the size of the entire icon. That is, sometimes you open the full screen to draw the icon, wait until the reduced use (the icon is usually reduced to use), often the effect is another thing.
The size of a vector icon is usually not a particularly big problem, because the advantage of the vector is infinite scalability, but it's best to have two plans before you start drawing.
What is the size of the icon file?
How many pixels is the icon line?
After planning, you can try to draw a very simple rough diagram, and then zoom out and look at the effect slightly. In order to determine how the line size is more appropriate.
Open the AI and create a new document. Here, I'm building a 800px*800px document. Based on the rough judgment, I set the icon to be: stroke 16px, internal line 8px, where 8px is a basic unit. So, we can know that we are going to draw the rectangular lattice is also 8pt for the edge length.
As a result, the new document, select View > Show grid and Snap to grid, can be set to 8px in Edit > Preferences > Guides and grids, and other references to the settings parameters I have provided.
Try to use the pen tool and the basic graphics stroke to draw, stroke size I set here is 16pt. Sketch out the outline of the Christmas sock first.
When using the Pen tool to draw, the error caused by improper control of the mouse, the line is not smooth enough. At this point, you can find the "smoothing tool" in the toolbar and align the path to smooth processing. This tool can often help you smooth the hand-drawn lines automatically. Remember to select the appropriate path before smoothing the process.
Next I'm going to add some decorations to the Christmas sock, but remember here that we want to make an SVG icon and avoid using patterns. Each detail of the icon's drawing process is plotted with a path.
There are two ways to draw a snowflake, one is to draw directly with a rectangle, and then we have to paint the border off, and the other is to still use the line. The choice of which is entirely a personal habit. We use rectangles to build the shape of snowflakes.
First draw three rectangles, rotate the rectangle -45°, and arrange the style of Figure 1 below. Group the three rectangles, group them, and then copy them, then symmetry the copied shapes to the left to form the style shown in Figure 2 below. After grouping this graphic, add a rectangle at the top, rotate 45 °, and then align the two shapes in the center. group them again.
Next we use this already done pattern to make a flower pattern. At this point, you can use a more "stupid" method, that is, directly copy and paste after the rotation angle. Of course, there is another way to improve the skills of a child's shoe--a rotating tool.
Select this object, then click the Rotate tool, hold down the ALT key, and drag the center point below the figure below, which is the center of the pattern we are going to build.
After releasing the ALT key, the setting panel of the Rotation tool pops up, we set the rotation angle to 90°, click "Copy", the new pattern is copied, and 90° is rotated around the center point. Then, to keep the new pattern selected, click "Ctrl+d" and repeat the previous step. Such a pattern is done, we can then add a rectangle in the center.
Group the snowflake pattern, then copy and paste two copies to another place to decorate. As shown in the figure.
Next, let's add a little lattice pattern to the rest of the space. Because the last thing we want to do is SVG images, the SVG icon to be noted before the creation of the path can not overlap. In other words, the graph we make, the first one must be a vector that can be scaled freely. The second is to extend all of it to a closed fill pattern.
To this end, I gave up the way to create a pattern to draw a lattice, and the rest of the method can only be a rectangle like this to piece it? Fortunately, and a few netizens discussed this issue, I found a convenient and effective way, that is, using dotted lines to draw a lattice.
Here, I want to draw the size of the lattice is 8pt side of the square, so I first select the line tool, the line stroke size set to 8pt. Click Stroke to enter the stroke settings panel and set the dotted line to 8pt. This will be able to change the line into a row of squares to draw a lattice pattern.
Next, we can continue to add a little bit more to the lattice pattern and draw dotted lines wherever we like.
Our Christmas sock pattern is finally finished. But be sure to remember that the following steps are needed before you make an SVG icon!
5, the SVG icon preparation
Select all objects, go to Object > expand, and then eject the Expand Settings panel to check stroke and fill.
Hold down the CTRL+SHIFT+F9, bring up the Pathfinder, and select the join set, which is the button that merges the shapes. At this time, the whole pattern has formed a closed path of the pattern.
Iii. Generating SVG icons
The SVG icon is generated simply by saving the file as an. svg format, and then entering the Icomoon (https://icomoon.io) online font icon generation, clicking on the "Import icon" in the upper-left corner of the site to start uploading the SVG file. In my Favorites (www.ifeiwu.com) There are other font icons online generation tool Site resource collection (www.ifeiwu.com, you can click to go to see.
Upload success, select the lower right corner of the "Generate font", into the edit page, where you can modify the file name and other ways to edit. Below the icon there is a "Get Code" button, click, you can pop up the font icon code, still by you in the copy use of the page.
Iv. Christmas Carnival Benefits
Learning the tutorial, it is necessary to do their own work, in order to make Christmas easier. Wish you a Merry Christmas in advance!
Well, the above information is small to give you illustrator of this software users brought to the detailed drawing of the SVG Christmas icon of the tutorial to share the full content of the text, you see the users here, small series believe that at present everyone is very clear the way to draw it, Then you go to follow the small series of the above tutorial yourself to try to draw it.
