On the index color in design

When it comes to index colors, maybe a lot of friends haven't been in touch.

First, let's say, why do you want to use indexed color pictures? When we design the PC interface, we use almost all true color, not limited by color, can be directly generated PNG, or BMP plus a transparent color, by the engineer directly through. However, we design a wide range, we have to do not only on the PC design, but also in a number of restricted electronic products to do design, such as mobile phones, digital photo frames, TV boxes and so on. The core of this product is not as good as the performance of our PC (of course, I'm not talking about it all, some of it's still high-end, and in this kind of situation, we need to sacrifice some gorgeous real color images, and use small, easy to change the color plate of the indexed color picture.

We want to ask what is indexed color picture, indexed color picture is how to buy? The index, as the name suggests, is a thing that is pointing at it, and this thing is the color table. Speaking of color table, we have to understand more basic knowledge, you know, we now use the picture format, large to be divided into two types of storage, a kind of dot-matrix storage, the computer in the memory of this type of picture, for each point storage is the position and the corresponding color value. Like BMP, Png24, TIFF and other picture formats are the use of this one, this picture is characterized by the color can be very rich, good color, pictures occupy a larger space (Png24 use of lossless compression technology, relatively small a lot); the other is to include a color table in the picture file, When the computer is storing the color of each dot in the picture, it stores the coordinates of the lattice and the position on the corresponding color table. Gif, Png8, such as the use of this one, this picture is characterized by a small footprint of the picture, you can directly replace the color plate to replace the color style of the picture, the disadvantage of the color plate restrictions, the use of fewer colors, not like true color can be so rich color performance. What we call the indexed color picture, in fact, is the second kind of picture, I do not know whether we understand it?

How the indexed-color picture is made. To do a good index color picture, first of all to design a good set of color plate, attention, I said is a group, not a, this group of color plate has a uniform specifications, color laws, to facilitate our replacement at any time. (We are just beginning to do this kind of picture, we should develop a good habit, to the expansion of the picture ready, so we set the color plate must have the law, can not be messy.) ）

Let's look at a set of color plates I've already done ...

This is a group of 4-bit color, each of 16 colors, the first one in the color is to be left for transparent color, so the available color only 15 kinds. Because each type of electronic product design mode is different, some, in the same interface, it is not possible to use multiple color discs at the same time, when we design this type of demand, remember to leave the font color, so I am accustomed to each color plate on the black, white, gray transition color. Color disk system to do the model is very simple, but sometimes the requirements are different, patterns and rules are more difficult to set, this will be at the beginning of the time, think more comprehensive, because the late color disk mode of modification will be a very painful thing. The steps are as follows:

A free new PS blank file;

Second, the image menu----> Mode----> Index color, open the following panel

Third, select "Custom" in the palette, open the color table

Iv. Distribution of colors. The first lattice we stay for transparent color, click, choose a color we do not use, OK. Mouse drag and drop, at the same time selected 2 to 8 lattice, pop-up Color picker window, select Black, OK, and then pop-up Color Picker window, choose White, OK. (Here is a bit strange, if do not pay attention to the text, will later software error, how to determine and will pop up color picker, I first time is this feeling, hey!)! OK, look, the color of the 7 lattice has been evenly distributed, of course, if the color of the gray level is not satisfactory, you can manually one to tune. The following blue transitions are also selected using the same method.

Here is a point to note: When we do color selection, we should try to use the color picker horizontal axis at the top and the right side of the colors value, look at the picture I marked with black box, after my experiment that only this has such a two-point selected color will be evenly distributed in the color plate, if you want to transition from 1 to 3, The middle must have a second position color, otherwise the color will be disorderly, this point we can do their own practice, then if there is a better way, I would like to ask you.

Five, almost, to store the color of our design table bar, the next time you use, load on it.

OK, the color plate is done. We have just saved the color table added to the color board, so as to facilitate our use, and then we can start to design interface elements, design seems to have nothing too much to say, this is mainly to look at each individual's creativity, design this aspect of the interface, learn a little pixel painting basis will be better. Take a look at my example, the volume of the selected bar:

Look, it's not bad, is it?

At the very beginning, you can use the index, directly in the PS layer painting, as far as possible to draw colors on the color plate, save the original manuscript, and then copy out, Image menu---> Mode---> Index color, choose to do the color table, finish all this, remember to check, see if there is no abnormality, For example, the dew point is like, the method is: Image menu---> Mode---> Color table, press the ALT key at the same time transparent color, you can clear the transparent color through, enlarge check again, there are words, in the color plate to find similar color to fill.

All done, remember to store oh, according to the need to save on it, the most commonly used is BMP format.

I at the beginning of contact, on the Internet to find a lot of information, have been unable to find the want, and now I know the knowledge to share to everyone, hope for everyone useful.