Problems needing attention in the design of icons

Source: Internet
Author: User
Tags ming

Article Description: So how do you make a good set of icons? What are some of the issues you need to be aware of in the icon design process?

The use of icons in life is obvious and visible. For example: Male and female toilet signs and a variety of traffic signs. It is also widely used in computer systems and software applications. For example: program identification, data identification, command selection, mode signal or switch switch, status indicator, etc.
The following example illustrates this problem more vividly.


(Photo source: Jiu Ming)
Foreigner A and Chinese B, two people in the language differences in the understanding of the text is different, with the icon to express, will shorten the distance of language description. So the icon is more quick to convey information, easy to remember the characteristics. So when the icon is widely used, what kind of icon is a good icon? Good icons from two angles to understand: identification and refinement.
Identification: The icon can visually express the object to be described.
Refinement: In a fine page or system interface, exquisite icons can enhance the entire page of the best visual.
So how do you make a good set of icons? What are some of the issues you need to be aware of in the icon design process ?
In the icon design language, author Yegor Gilyov (source site Turbo Milk) mentioned "If you need to draw a few icons, you need to consider all the icons of the site as a whole, and then start using the software to draw." "If all your icon is a rough, fuzzy shape or a bad gradient, then this icon is a failure, not as a" style problem. Such an icon will not only destroy the beauty of the entire page, but also the description of the text to reduce the desire to be viewed, to your users to use or read it is a great pain. The details of the icon include the use of color, the innovation of the modelling, the embodiment of the texture.
The design steps of icon

I think icon design follow a rule above, in the premise of the icon to do the first idea of the entire icon style, with the idea can begin to design and then color, and then the overall icon for details of the changes.
The main point of icon from learning to criticize others began
Someone once said, "It's much easier to criticize someone's work than to make a good one." But if you use a systematic approach to critique, this is a mature analysis! "So how to learn to criticize it?" Here are some examples of how to share some critical summaries.

(Photo source Iconfans)
Some of the above icons look very similar, which makes it difficult to tell which is which. Especially when the small icon is poor identification. If you do not notice, you will easily mix these icons together. icon or to have a difference, in the security style of the premise of a unified to have a good recognition, you can do in the color or shape changes in the difference.

(Photo source: Jiu Ming)
The icon should be easily recognizable, and the fewer elements you build it, the better. The above illustrations and graphics clearly tell us that the relevance of the icon should not be complex, you can omit the same object, highlighting important information.

The image above illustrates the icon pixel edge of the problem, the icon on the left is more ambiguous, the right side is more clear.

When making icon, it is easy to appear some common burrs, resulting in pixel transition, the last round corner is not soft.
How to handle the not soft rounded corners?
In the process from big icon to small icon you should pay attention to some details of the processing, for this I created a formula: to more stable modeling, the edge moved in place.
to more stable modeling: big icon to the process of small icon by the reduction of the details began to change, the big icon more attention to texture and luster, small icon in addition to ensure that the texture is clearly visible. In making 16 pixel icon, you can reduce some of the necessary elements with pixel points to replace, remove excess shadow and high light.
Edge shift in place: small icon of the marginal shift mainly by moving pixels to achieve, or add pixel points.

After processing, the above icon has no original sawtooth, there are some soft rounded corners.
Of course, the custom of each designer to do icon is not the same, this is only when I do icon some experience.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.