To give you illustrator software users to detailed analysis to share the drawing vector fine icon.
The software used in the tutorial is mainly Adobe Illustrator cs/adobe photoshop/axialis icon-workshop. We use Adobe Illustrator CS for icon Design, and post-processing in Photoshop, and finally output to an. ico format icon file with IconWorkshop.
1. Open Adobe Illustrator CS, select the Rounded Rectangle tool on the toolbar, click anywhere in the pop-up window to set the fillet curvature. (If the first round corner rectangle is not suitable, you can delete it, drag and drop directly to get the appropriate size).
2. Select the menu effect/3d/rotate command to bring up the 3D Rotation Settings window to generate a 3D perspective graphic (only the latest Illustrator CS version has this feature).
3. Adjust to the appropriate angle (such as the production of a complete set of icons, please remember to keep the setting parameters to apply to the entire icon design to maintain a unified style) Select Preview can be both when you see the graphics in the artboard to apply the effect.
4. You can see the application of the 3D Rotate effect in the Appearance cotton board, and can be adjusted by double-clicking the 3D Rotate window at any time.
5. Adjust to the appropriate angle, using the Expand appearance command under the object menu to "scatter" the graphic of the application effect: that is no longer has the appearance attribute.
6. Choose the white arrow in the toolbar Select the graphics we need to use CTRL + C (copy) Ctrl + V (Sticky post) extracted, the rest of the useless graphics deleted.
7. Then we use the gradient to color the graphic, with the gradient panel design gradients, with the Swatch panel to adjust the color, here is a line (linear) gradient, assuming the light source from the upper left corner, which will be the basis for all the icons behind.
8. Copy this graphic again, arrange in the way in the diagram, select two graphs at the same time, then bring up Pathfinder panel, use subtract form sharp area to make the stereoscopic thickness of this figure. You can then click the Expand button to expand the merged graphic.
9. Then we give this graphic also coloring, also make G radient panel, where I adopt the circular line gradient mode.
10. In this step we are going to add some high light to this "panel". First copy the same shape fill to white below this "panel".
11. Then copy one of the same graphics above this "panel" and narrow it down appropriately, with a black and white linear gradient fill.
12. Then select the black and white gradient and the "Panel" graphic below, open the Transparncy panel and click on the small arrow at the bottom right of the panel to use make Opacity in the pop-up menu Mask
13. Deselect the Clip at the same time and check the Invert Mask option so that we add a transparent cane mask for this "panel" graphic, in which case the black and white gradient graphic (which has been used as the graphic in Opacity Mask) represents the Masked object (panel) The transparent part, so just the same size of the white figure that we added underneath the "panel" is for fear that the background is colored or that there will be other objects coming out of the transparent "Panel". The object in the edit Opacity Mask needs to be edited by clicking on the Opacity Mask area in the transparency panel.
14. Next, start adding a screen to the panel. Copy a graphic to the top of the panel, the size of the figure, but also a linear gradient, because of the light direction reason. Note the dark and light orientation and the "panel" aspect: we have a groove effect here.
15. If you understand the principle of a transparent mask, this step is very simple to you, and the above to the "Panel" to raise the light as the first copy of the white background and the blue panel, and then use black and white gradient graphics to make transparent mask effect, the graphic hierarchy as shown in the figure.
16. The color of the blue panel fills the rounded fill I use, as shown in the figure.
17. Here's a little more detail for this basic molded tablet, a graphics on the left, and three notches on the right, where you need to be aware that I've copied all the graphics two times, the following figure fills white and shifts several pixels to the right below to reflect the high light of the groove.
18. Below we will make the button above the groove, although the area is very small, but also to reflect the high light gradient, where I used a Blend mix to make two buttons. Double-click the Blend Tool icon to pull up the Blend mixed parameters panel. Select the Blend Tool in the tool column, click the blended first shape, and then click the second graphic to complete the blending.
19. Use the pen tool and the combination of the various standard graphics to complete the following graphics, so that the combination of all the other elements on the computer (green button is also used Blend mixed)
20. So we completed the creation of this icon, and then the output. Draw a 128 X 128 (in pixels) of the square row, the exact graphic adjustment can be done in the Transform panel, followed by the Opacity value in the Transparency panel is adjusted to 0%
21. Using the Save for Web command under the Flie menu, use PNG format output in the pop-up window (select transparent output: transparency)
22. Then open the PNG file that you just exported in Photoshop, and create a new layer below it to fill it with white to make it easier to see when the icon adds a shadow.
23. Double-clicking the icon layer adds a shadow effect to the Layer Style. The recognition rate on the various color desktops is regenerated by the enhanced icon.
24. Then remove the white secondary layer, the effect is as follows.
25. Create a new layer to connect to the icon layer, use the Ctrl+e merge connection layer to apply the effect to the icon, and then save the PNG file.
26. Use IconWorkshop to open this PNG file and use the Save Icon Form image button to convert the PNG image to an ICO file.
27. Select the file specification of the ICO you want to output.
28. After storing the ICO format file, you can browse directly through the Window or the third party icon Management software (recommended to use Microangelo).
Well, the above information is small knitting to you illustrator of this software users of the detailed drawing vector fine icon to parse the entire content of the share, you see the software users here are small, I believe everyone now that is very clear the way to draw the icon, Then you will go to the small series to share the above to try to draw it.
