Web pages often compact buttons--pixel button

Buttons | Web page Although more and more people began to use broadband, speed is not like the early years as the restrictions on the network, but in recent years the Web page is not more and more complex, on the contrary, to the simplicity of the style of web design is quietly popular in the online world. This style not only saves bandwidth, but more importantly, most people prefer to look for the information they need in a clean environment, simple and ingenious design, making it easier and quicker to get information. Today, we are going to design some of the most commonly used Web compact buttons.

First paragraph: Pixel button

It's one of the most popular buttons at the moment, and it's almost always visible on every pixel-themed site. To minimize the size of the page, this button is begotten. This button is simple and generous, in addition to personalized Web sites, for the company's Web site is also very appropriate.

Create a new Photoshop document, RGB mode, white background.

Create a new layer, reset the color board, set the foreground color to a light gray, as in the example of RGB (239,239,239), select a small rectangle with the rectangular marquee tool, probably 40x11 pixel size (you can refer to the information Panel, or set the rectangle's fixed size directly in the tool options of the rectangular marquee). Then click on the canvas to remove the selection after populating the foreground color.

Let's make a push button to create the stereo effect below. Here, we completely use the Add Layer style method, double-click the layer, open the Layer Style dialog box, we add in sequence:

First select the bevel and Emboss style, the structure is the inner bevel, the method is smooth, the depth is 1%, the direction is on, the size and the softening all are 2 pixels, the shadow angle is 146 degrees, uses the global light, the height is 30 degrees, the gloss maintains the default, the high light and the darkened blending mode and the color are invariable However, the opacity is set at 100% and 43% respectively;

Next is the inner shadow mode, the pattern is normal, the color is white, the opacity is 100%, the angle is 146 degrees, uses the global light, the distance is 1 pixel, the obstruction is 100%, the size is 0, the quality is invariable;

Next is the stroke, which sets the stroke size to 1 pixels, the position is external, the blending mode is normal, the opacity is 100%, the fill type is color, and the stroke color is black;

Finally, the projection style, the shadow color set to black, opacity of 22%, angle of 120 degrees, the elimination of global light, distance of 3 pixels, expansion of 0, the size of 0, the quality remains the default unchanged.

OK, now you can choose the finer font, preferably the pixel font, and write the text on the button. When you set text options, there's one thing you should pay special attention to, which is to set the text anti-aliasing to nothing, otherwise the font will appear blurry. The entire production process is shown in Figure 01.

Figure 01

If you feel that the gray is too monotonous, you can also add a variety of colors for the button, which is roughly the same as the previous one, but in some places it is slightly different.

After you create a new layer, set the selection, set your foreground color, such as here we set the foreground color to RGB (106,175,5), and deselect after populating the selection. Then start setting the layer style. In the bevel and Emboss styles, set the depth to 100%, size and soften to 1 pixels, note to set the shadow of the high light mode to color Dodge, opacity is 65%, darkened opacity to reduce some; unlike just now, we canceled the inner shadow style, and in the stroke style, set the stroke color to a darker gray, such as RGB (132,132,132), of course, you can also use black strokes; for the projection style, because the button itself is darker, relative, we can set the opacity of the shadow slightly higher, 40% can. Finally, write the text. (Figure 02)

Figure 02