Step by step guide for creating icons
The article was published on smashingmagazine the author Scott Lewis.
Find inexpensive high quality made icons and vector images is not difficult – for this purpose there are web sites like Iconfinder (where the author of this article). A designers thousands of icon sets premium, and hundreds of sets available for free download.
This article provides guidance for design vector icons, which includes six stages. We will examine these stages after we explain the basic principles of a successful icon design. These principles are well known and discussed in detail in such works, as a Guide to design icons John Hicks, and also Google's Material design in the development of system icons. Six stages which we will consider in this article should be seen as recommendations and not as dogma. The ability to feel where you need to follow the rules and when to break them better is an important quality that must develop in himself every good designer, and we clearly demonstrate.
All the stages will be dismantled by the example of the correct icons with the image of a dog (get it Corgi). Icon was good, but not up to our high standards. Our professionals have given the author a few simple tips, and after correction the image was approved. Below are images of the Corgi before and after corrections. Later in the article we analyze in detail, how this happened, this transformation.
the left Image is the original. The image on the right icon after corrections in accordance with the principles described in the article
It is worth noting that, despite the fact that we are talking about the icons for the Internet, these guidelines also apply to the icons for printing. Standard resolution used for print is 300 dpi, so if you are a designer of printed materials, you should omit those sections where we talk about working with pixels.
the Three components of effective icon design
All high quality made icons brings together the unity of the three components of effective design: form, aesthetic integrity and awareness. When you begin to design a new set of icons, you need to consider all three components, going from the General (form) to the specific (recognition). Even if you develop only one icon, these three indispensable attribute still applicable.
Of course, efficient design is not limited to these three concepts, but they are perfect in order to start, and write them in the scope of a single article.
Form
Form is a structure, which is made icon design. If you omit the details and outline the main shapes that make up the icon what it is: square, circle, rectangle, triangle, or more streamlined? Basic geometric shapes such as circle, square and triangles are visually stable balanced base for the design of icons. In our example, the dog's head consists of two triangles and two ellipses. Here we can draw an analogy with drawing – just as when you perform a drawing, the designer starts with the big basic shapes, and then working out the details, adding as much as necessary and sufficient to transmit his ideas.
the Red lines outlined the basic shapes forming the shape of icons
artistic integrity
Under aesthetic integrity is a set of elements that are repeated among the icons in one set. It can be rounded or square corners, and their dimensions (for example, 2 pixels, 4 pixels etc.); the thickness of the line; (e.g., 2 pixels, 4 pixels etc.); style (flat, contour, filled with color, glyph); color palette and so on. The aesthetic integrity of the set of icons is well to trace the sequence of different elements and design techniques that allow one to see all the icons as a whole. In our example, with Corgi dog among these elements can be called the same radius of curvature eyes the same size and shape, and nose in the shape of a heart.
the These three icons can be called aesthetic consistency, because they used the same elements and techniques
Awareness
Awareness is derived from the meaning of icons, that is what makes it unique. Does icon its purpose depends on how well it is clear to the user which object, idea or action the icon represents. Awareness can be achieved by displaying some of the qualities denoted by the subject or the use of any unique item, such as the nose Corgi. Remember, awareness applies not only to the understanding of a subject, idea or action seems to be your icon; it's the property that distinguishes your icon set. In this sense, the notions of recognizability and aesthetic integrity intersect. In the pictures below, thanks to the distinctive traits of the breed we learn in dogs is a Corgi and Husky, and yet we see that they are part of the same set of icons – due to the similarity of design and the elements used.
the Individual qualities of each dog make each of them recognizable, while the similar design and used items say that they are part of the same set
So, we discussed the three main components of effective icon design. Now consider in detail how the six steps to implement these three components in life.
Six steps
Always start with mesh
The advantages of meshes of different sizes is the subject of a separate discussion; we will use a grid of 32x32 pixel. In our grid are also supporting lines, which will help us to create the basic shape of each icon.
So, we have a 32-pixel grid with a border of 2 pixels width, which we'll leave blank. This space we call the free zone, and it serves to give the icon some space. You should not arrange elements within this zone, unless it is absolutely unavoidable.
Form icons begins with a basic shape and orientation. If you draw a line on the outer limits of icons, the bounding box, it will be in the form of a square, circle, triangle or rectangle.
Icons of circular shape located at the center of the grid and, as a rule, relate to all four edges without entering the free zone. The most common causal for violations of the free zone is to be placed outside the circle of any element necessary to maintain the integrity of the design, as shown in the picture below.
the Align icons relative to the grid, and on main lines
Square icons are also aligned with the center of the grid, but generally do not reach the boundaries of the working area. To maintain uniformity with circular and triangular icons, most of square and rectangular icons are aligned on the main line in the middle (the orange area in the figure below). The decision on which main line to align the icon is taken on the basis of its appearance and feeling, what size to choose in each individual case, evolving practice. Three concentric square, which was discussed above, shown in the figure blue, orange and light green color.
the Alignment and choose the size of round and square icons relative to the grid
The following pictures within a grid of 32x32 pixel you'll notice rectangles of size 20х28 of pixels oriented horizontally or vertically depending on the icon design.
the Alignment and select the size vertically and horizontally oriented icons
Diagonally-oriented icons are aligned on a circle inscribed in the workspace. Please note that the extreme points of the saw just about have points on the circumference; great precision is not required here.
the Alignment and size diagonally oriented icons
Remember, you are not obliged to observe precisely described the location of the icons relative to the grids and auxiliary lines. The grid is only an auxiliary tool; if you have the choice to do something truly original, or to stay within the rules, rules can be neglected. However, it should be a deliberate step. As said, Hemmo de Jong, known under the pseudonym Dutch Icon:
"The individuality of the icon outweighs the need to respect the uniformity of the icon set".
Start with simple geometric shapes
Start design your icons with a rough sketch of the basic shapes using circles, triangles and rectangles. Even if you plan to create an icon with flowing natural forms, start with a tool Shape in Adobe Illustrator. When it comes to icon design, especially for drawing on the screen icons of small size, the drawing manually will inevitably cause the appearance of small distortions at the edges, and the appearance of the icon loses much. If you start with simple geometric shapes, it will help to clear the same edge (in particular curvature), but also facilitate the choice of size of the various elements and their orientation relative to the grid and basic shapes.
the Basis of Corgi icons are simple geometric shapes: two triangles and two ellipse
All fixed figures: edges, lines, angles and curves
When performing edges, fillets and corners it is necessary to strive for mathematical precision, but not to the extent that the design looked too boring and "mechanical". In other words, you should not rely on the eye; observe the exact dimensions, because it is not a uniform response to these items negatively affecting the quality of the icons.
Corners
In most cases it may be advisable to use angles of 45° or a multiple of this value. Smoothing the bumps at a given angle, a is uniformly (active pixels are well attached to each other), and the result is clear and concise. In addition, 45 degrees is a perfect diagonal, pleasing to the eye. The consistent use of a familiar configuration allows to obtain a complete picture of how each individual icons and the entire set. If your chosen design requires a violation of this rule, it is better to divide into two (22,5°; 11,25°, etc.), or use angles in multiples of 15°. Each situation is individual and requires an individual approach. The advantage of using angles multiple of 45° is that, with these values obtained the best smoothing uneven transitions.
the close-up of the smoothing circuit at a 45°angle
Curves
One of the most conspicuous elements, which can greatly reduce quality icons, clearly showing the difference between professional and Amateur is curves. While the human eye clearly detects the slightest discrepancy forms, our coordination does not allow us to achieve the same accuracy when drawing freehand. Therefore, when creating curves, it is recommended to use the line and shape tools in the program, instead of relying on your hand. When from drafting by hand to leave, use the key modifier restrictions (for example, the Shift to Adobe Illustrator), or, better yet, use InkScribe and VectorScribe from Astute Graphics – these tools allow you to get the best result when creating curves.
the Lines, hand-drawn, are of poor quality
In the original version of the Corgi clearly visible irregularities of the lines made by hand; it immediately has a negative impact on the whole design.
the These ideal curves created in Adobe Illustrator using tool for constructing bézier curves
Corners
The most common size of the rounded corners is 2 pixels. For icons of size 32x32 pixel is the value of the radius produces a highly visible fillet, and not too "softens" the corners (leading to the "blurry" look). The size of the radius depends on the character you want to betray your design. The decision about whether to use rounded corners based on analysis of the aesthetic appeal of the entire set.
the Precisely rounded corners
Returning to our Cogre: starting with a geometrically complicated contoured shapes, we moved on to round corners using the shape tool, using the value of radius of 2 pixels. Appearance has become better.
the First stage rework Corgi
Already seen the basic idea of the new design: rounded corners and smooth curves.
Optimize pixels
Perfect alignment in the pixels, especially important with icons small size. Smoothing edges on icons of small size can result in blur. Between the lines, which is not aligned with the grid will be smoothed and will look blurry. Align icons to grid will give a clearly defined edge on straight lines, and add definition to corners and curves.
As already mentioned, the ideal angle of 45° (of course, after straight lines), because the pixels are arranged relative to each other diagonally. The same can be said about angles and curves: the mathematically more precisely they are done the better results you will get when you smooth. It is worth noting that the optimization of the pixel does not give meaningful results for large sizes and for high-resolution displays such as Retina.
width of lines
If we talk about the thickness of the lines, the ideal value is 2 pixels, but sometimes 3 is better pixel. Here, the purpose is to provide the required subordination and variety, but not to get carried away, so as not to violate the integrity of a set of icons. The thickness of the lines is more than 3 pixels to cause a set will lose integrity. The advantage of using lines with a thickness of 2 and 4 pixels is that they are easily massturbate move from one to the other. In most cases you should avoid using very thin lines, especially for the style icons glyph and flat style. In General, if your intention is not to create icons in outline style, to refer to forms, we should rely on light and shadow, and not on the line.
the This icon iPhone shows an example of a balanced use of line thickness
Consistently use different items and shifts the focus within a series of icons
This aspect of icon design, Hemmo de Jong (Dutch Icon) pronounced a speech at the conference Icon Salon 2015. Chemo with his partner for two years engaged in the development of badges for the Danish government, and their signature style was the use of labels in grub. The grub is present in all the icons, but on most of them. This emphasis applied to the entire series, links of icons together and promotes their brand awareness among thousands of others.
In our example, the dogs we used one stylistic element in the form of the nose in the shape of a heart. This element not only connects icons to each other, but what makes them special, calling for these lovely creatures for more sympathy.
the Common elements used to design icons with dogs
In many cases, even if the icons within a series differ greatly from each other in appearance, such elements allow to maintain aesthetic integrity. This is clearly seen in the picture below: we created the same set of icons of dogs in the style of the glyph, but they still look holistically and interconnected.
the use the same elements in a different style
Moderate use of parts and decorative
The icon should clearly convey the meaning of an object, idea or action. An excessive amount of small details make the icon not so informative, especially when it is small in size. The fine details in each icon also has a significant impact on the aesthetic integrity and visibility of the entire series. An unspoken rule for determining the number of parts and items in the icon is the use of the minimum necessary to convey meaning.
the Minimum number of parts effectively conveys the meaning
In the version in the picture above we are already close to the final version. The black lines around the ears turned into wool, and line the circumference of the muzzle Corgi is gone, though, and left a hint of them in the form of a 2-pixel line above the white spot. You will no doubt have noticed that we are still some old elements such as the sleek nose. Talk about this in the next step.
Make an icon unique
It seems that the number of talented designers who create high-quality icon sets (many of them free) is constantly growing. Unfortunately, many of them tend to rely too much on the authority of existing trends, formed the popular designers. As professionals with a creative approach in search of new ideas, we must turn to sources outside of computer design to architecture, typography, industrial design, nature and other areas. Many icon sets are similar to each other, so to make your design unique is extremely important.
the Uniqueness of design Corgi is in the shape of his nose
As a final touch, which gave the Corgi a special charm, novelty and lightness, we used the shape of the nose in the form of a heart.
Describes the stages should be viewed as recommendations, not mandatory requirements. There is no single correct way of creating a design icons. In this article, the authors describe their approach and techniques, however, other designers can certainly have alternatives. The best way to improve their skills is to become familiar with a greater number of reference materials are constantly doing sketches (carry a Notepad wherever you go) and practice, practice and again practice.
the left Image is the original. The image on the right icon after corrections in accordance with the principles described in the article
Opinion
We have described the fundamental principles for the creation of icons high quality. These principles are nothing like the skills, that is they can be mastered by everyone if it is to practice. Remember that it is best to start with a General (form) and move to the specific (recognition). Don't forget about the need to respect the integrity and uniformity within one icon and the entire series. After mastering the technical basics you will be able to focus all my energy and ability to develop creative approach and finding unique solutions.
Комментарии
Отправить комментарий