Pixel Icon Drawing Tips

Icons are common elements of web pages, the main function is Ideographic, also contains the role of decoration and brand transfer. Icons stored as GIF, PNG, and other bitmap formats, called pixel icons, are typically 16px, 24px, 32px, and so on. Of course, pixel icons can also be understood as pixel-style icons, not necessarily bitmap format exists, in this article we follow the format to understand. Relative to the pixel icon is a vector icon, usually in SVG format and font format exists, the size can be arbitrarily adjusted. This article mainly introduces some of the individual pixel icon drawing experience, the shortcomings are also asked you to teach a lot of experts.

Basic knowledge

I. Picture format and transparency

Full transparency, alpha transparency, picture formatting, and compatibility

Full transparency means that the format of the picture only supports both full transparency and opacity, and alpha transparency means that the picture format can support different levels of transparency.

The level of transparency and browser compatibility for various picture formats is shown in the following table

What is the effect of full transparency and alpha transparency on icons

So how do these things affect our pixel icons? Look at the picture below:

As you can see, the fully transparent icon needs to be optimized according to the background color of the application scene, the back color changes to be optimized, if you do not want to optimize and to be generic, you must limit the design of the performance techniques, this will often make the edge of the icon to enhance the jagged. Translucent icons are not optimized and can be used in many places.

Let's look at an example that does not optimize for different backgrounds:

As you can see, a fully transparent image optimized for a white background is used in a dark background. The result is a lot of white mixed edges, which seriously affect the quality of the feeling.

Ie6

In this way, the PNG-24 that supports alpha transparency is the king. Unfortunately, under the IE6, PNG-24 alpha transparent requires IE-specific CSS filters in order to achieve, so if your product has a lot of IE6 users, before making the icon, first communicate with the front end.

　　Two, vector tool and pixel alignment

In the overall relationship of the drawing or the flat style icon, we use the vector tool, where we encounter a problem that beginners often encounter-pixel alignment.

What is pixel alignment

When using a vector tool within a bitmap file (such as the Shape tool in PS, the Pen tool), you will encounter this situation in the following diagram.

You can see that the edge of the square on the right is virtual, because the edge of the square is not aligned with the edge of the pixel.

Look at one more practical example:

As you can see, the pixel-aligned graphic has a sharper, sharper effect.

　　The settings within PS help us align pixels

We can easily align pixels with some settings in PS, taking CS6 as an example.

1. Set the grid line in pixels, so that we can see whether or not to align pixels at any time. By the way, the grid shows/hides the shortcut keys CTRL + '.

Preferences – guides, grids, and slices – Set the grid size to suit your needs, select pixels.

2. When using the Vector tool, check the edges of the alignment, the drawing will automatically snap to the pixel

Select the Vector tool (pen, shape tool) – Find the alignment edge in the top toolbar – tick

3. Automatically aligns pixels when you set the transform vector graphic. Zoom, transform vector graphics can also be automatically aligned, note that this is the function of CS6.

Preferences – General – check aligns the Vector tool transformation with the pixel grid

　　How to keep editable from AI copy to PS

When copying vector graphics from AI to PS, you should choose to paste as a shape layer so that you can continue to edit the graphic in PS, and use the shape selection tool to align the anchor point one by one to snap pixels.

Pixel alignment is not absolute

Personal opinion: Pixel alignment should be based on the desired effect and the complexity of the graphic. See figure below:

The left-pointed stars need to be smooth and full, and do not align pixels, but it is not possible to say that he is worse than the pixel-aligned pentagram.

Three, pencil tool and pixel painting skills

The pencil tool is often used when describing the details of a small pixel icon. Here are some tips for pixel painting.

Basic techniques of pixel painting

More detailed pixel painting tutorials online Many, can own Baidu.

Use of sub-pixel

Although pixels are painted without the notion of a secondary pixel. But when you draw an icon, you can use pixels to make the lines and graphics smoother.

　　Process of drawing pixel icons

　　1, the function of the clear icon

The main function of the icon is ideographic, that is, to graphically express the meaning of an operation on a Web page. But there are also decorative and branding features to consider in the form of accidents. Decoration refers to the visual effects of the icon can bring a sense of quality, beauty; the brand name refers to the style of the icon should be consistent with the product brand characteristics.

Under the different demand, the table meaning, the adornment sex, the brand weight is not the same. For example, the favicon of the Web page, first of all to consider the brand (with the product's own brand image consistent), the second to consider decoration (for different platforms and use of the scene, need to provide a variety of dimensions to achieve the image is not virtual).

So suppose now we want to draw a SNS website function menu icon--DMS and collection.

First look at the application scenario:

Can see here, the table meaning more rely on the text. The icon is mainly used to guide the eyes, enhance the visual proportion, auxiliary to the text. At the same time, a list of icons will affect the style of the Web page, should be consistent with the style of the site. So here's the icon, ideographic, decorative, brand weight is almost the same.

　　2, information refining, drawing drafts

Next we want to think about how to express DMS, favorites. According to the content to be expressed, to extract the most representative of the relevant things, graphics, colors and other visual elements. Then draw some drafts to express your ideas, and of course drafts can also be played in your mind.

3, painting big relationship

The idea is determined, the process of drawing is very simple. In ps new 16*16 pixel size files, mainly using vector tools to draw the overall shape, large relationship, with vector tools to note that the alignment of pixels to align.

4, add details

Next, draw the details with the Pencil tool, depending on the level of detail you need. Here we do not want to draw the icon is particularly textured, so highlights, reflective relatively not too strong, the details change not too much.

　　5, output and management

The output of the time to consider the previous mentioned format problem, as far as possible communication with the front-end decision. Icons in Web pages often use CSS Sprite methods to place icons on a graph to reduce server requests. So here also to communicate with the front end, to determine the way the arrangement of icons.

In addition, you need to consider the visual style of the icon and the consistency of the visual size when drawing a group of icons.

After all the icons are finished, you should develop a good archiving habit and determine the updated process and the person in charge.

　To sum up

Portrait element icon before

Pay attention to the output format and the application scene, because it will have an impact on the drawing techniques, so it is not clear to communicate with the front-end.

Thinking time

First of all to clear the role of the icon, decoration, table Italy, brand weight is different, the performance method is also different, usually the more expressive, more symbolic icon. Clarify the role of refined concepts, converted to common things in daily life, should be noted that unless it is common practice, or less abstract symbolic expression. Draw drafts with hand painting, compare different schemes.

In the process of painting

First Vector tool shop large relationship, and then the Pencil tool refinement, you should pay attention to the alignment of pixels will be clearer and sharper, the secondary pixel can be more smooth. A set of icons should be visually consistent.

After the drawing is finished

In the output process to maintain and front-end communication, the picture of good icon to be well archived, to determine the update process and the person in charge.