buttons | Transparent almost no button is more popular than a transparent texture. Since the advent of this style, immediately swept the world, from the huge business site to a simple personal station, everywhere can see the elegant demeanor. The most important role of this beautiful button is to modify the Web page, just use a few such buttons, it will give you the Web page as attractive as crystal candy. Transparent texture of the button type of many, the production of a wide range of methods can not be. Here, I summed up a few of the more good-looking but relatively simple, for everyone as a reference.
First paragraph: Aqua button
This is the most common kind of transparent button, if the use of good, the effect is very ideal. There are many kinds of buttons, some of which are really quite troublesome. Of course, the effect is quite pretty, beautiful to you will not be willing to use it for Web page buttons. In fact, if you decorate a Web page with a button that consumes a lot of time, you need to be careful: visitors will unconsciously focus on the beautiful and eye-catching buttons, and the most important content of the page will be ignored. Having said so much, it seems that laziness is taken for granted. So this time, we apply the layer style to make this button, so we can be once and for all, and then we can get the rest. More importantly, we are able to decorate your Web page button, it only played the role of embellishment, like cooking when the use of chicken essence, a little enough to hook out the flavor, too much is not good.
1.New document, RGB mode, white background. Set layer 1 To set the foreground color to RGB (51,143,206). Then select the Rounded Rectangle tool, and in the tool options, set the drawing to fill pixels, set the rectangle's fillet radius to 50 pixels, and select anti-aliasing. Click the Geometry option to set the size of the rectangle to 91x27 pixels, and click in the middle of the canvas to see a blue rounded rectangle. (Figure 01)
Figure 01
2.Now we're starting to add the layer style. First select projection: Reduce the opacity of the projection to 33%, eliminate the global light, the angle of 134 degrees, distance and size are 1 pixels, extended to 0, the quality unchanged;
Then the inner shadow style: The color of the inner shadow set to RGB (0,56,113), opacity of 100%, the elimination of global light, the angle of 90 degrees, distance of 6 pixels, blocking for 15%, size of 16 pixels, quality remains unchanged, so that the button has a three-dimensional. (Figure 02)
Figure 02
3.Next we're going to make the feeling that the light comes out of the button. Select the inner glow style, set the blending mode to color Dodge, opacity is 30%, the color is white, the method is softer, centered, blocking for 31%, size 21 pixels, pay special attention to contour shape, open the default waterline editor, set the curve to Figure 03 shape, select Anti-aliasing, range of 31% ; (Figure 03,04)
Figure 03 Figure 04
4.Here's the key step--add a strong reflective effect. Select the bevel and Emboss styles, and set the style to an inner bevel. The method is smooth, the depth is 81%, the direction is on, the size is 9 pixel, softens to 1 pixel, the shadow angle is 90 degrees, the height is 73 degrees, the high light and darkened opacity all are 100%, the darkened mode is normal, the color is RGB (4, 126,188), so the high light effect came out.
But this is not enough, we hope the high light effect is more appropriate. Select contour lines, pay attention to the bevel and other high line, rather than gloss, such as High Line, the contours of the type selected as the preset type of semicircle, anti-aliasing, range of 69%, so you can get lifelike reflective effect. (Figure 05)
Figure 05
5.To make the button look better, we add some simple shadow effects. But we've adopted a projection style in our style, so we need to find another way. Hold down the CTRL key, load the opacity area of the button, select the merge Copy command from the Edit menu, create a new layer under layer 1, press CTRL + V, paste the image into the new layer, and deselect.
The merge Copy command copies the images of all the layers in the selection, including the layer styles, where we use this command to flatten the layer style. In addition, if you do not deselect before pasting, the image will be pasted into the selection, otherwise the image will be automatically pasted into the middle of the layer.
Use Gaussian blur for layer 2 with a radius of around 5.5 pixels. Then use the Move tool to move the layer to the lower right of the button as a transparent shadow. (Figure 06)
Figure 06
6.Finally, write the text on the button. If you prefer a light gray transparent button, here's a simple way: Open the Channel panel, click on the Blue channel, only show the image of this channel, because our button is blue, so the image in this channel is the most embodiment of the button. If your button is red or green, then you can get the gray transparent button by selecting the red and green channels, respectively. (Figure 07)
Figure 07
Second paragraph: LCD style button
Generally speaking, the LCD screen style is very suitable for a variety of panels, but also as a variety of button carrier, most types of buttons and the combination will be very good-looking. But this time, we're going to make a button with the LCD style.
1.Open Photoshop to create a new RGB-mode white background document. New Layer 1, this layer is the basic outline of the button. With the elliptical marquee tool, hold down the Shift+alt key and drag a round selection from the center to the side. Set the foreground color to RGB (176,192,224), fill the selection with the foreground color, and do not deselect. (Figure 08)
Figure 08
2.Create a new layer 2 to create the inner shadow of the button in this layer. Reset the color swatch, select the Stroke command, set the stroke width to 4 pixels, and center the position. Deselect, use Gaussian blur to process layer, radius is 4 pixel. Load the selection of layer 1, deselect it, delete it in Layer 2, cancel the selection. Reduce the opacity of the layer to 28%. (Figure 09)
Figure 09
3.New Layer 3, we're going to do stroke processing in this layer. Load the selection of Layer 1 again, open the Stroke Command dialog box, set the stroke width to 1 pixels, center the position, and deselect the selection. Reduce the opacity of the layer to 32%, if necessary, using a Gaussian blur with a radius of 0.2 to eliminate the subtle jagged edges. (Figure 10)
Figure 10
4.Now let's make the light effect inside the button. Create a new Layer 4, select the airbrush option in the Brush tool, and set the brush size to a 200-pixel soft brush. Set the blending mode of the layer to color Dodge, fill opacity to 21% (not the overall opacity of the layer), load the selection of layer 1 again, flip the color swatch, and click on the bottom of the selection with a white brush, The brush range reaches the upper-middle part of the selection, and the brush size is set to 100 pixels, and then clicked to enhance the effect. Because of the role of color Dodge mode, the image will appear light transmission effect. (Figure 11)
Figure 11
5.Next, let's take the most critical step-adding a high light effect to the button. First, we choose the area of the high light. Select the Pen tool, check out a closed path, and include the top half of the button, as shown in Figure 12. (Figure 12)
Figure 12
Press Ctrl+enter to convert the path to a selection, and then select the selection that intersects Layer 1 by holding down the Shift+ctrl+alt key and clicking Layer 1 to load the selection that intersects Layer 1 and the existing selection, as shown in Figure 13. Select the Gradient tool, reset and invert the swatches, select the linear Gradient tool, set the gradient to the previous view to transparent, make a gradient from the top of the selection to the bottom, and deselect. Select the Gaussian blur filter, set the RADIUS to 2.0 pixels, blur the gradient layer, and move the layer down a few pixels with the selection tool, which makes the effect more realistic. (Figure 14)
Figure 13 Figure 14
6.At this point, the button is basically finished. But we can add some decorations to it to make it look more beautiful. Create a new layer on layer 1, Layer 6, in this layer, we add some scanning line effect to it. Basically, the 1x2 pixel size, black and transparent pattern should be a basic pattern in almost every photoshop. If not, it will be too late to spend half a minute on the last day. Load the selection of Layer 1, open the Fill dialog box, select the pattern in the fill type, and locate the scan line pattern to fill the selection. Deselect to reduce the opacity of the layer to 8% and blur the Blur filter slightly (Figure 15).
Figure 15
If your pattern is black and white, then after the fill, you need to set the layer blending mode to multiply, the effect is the same.
7.Let's add the text section below. We use the pixel font for 04b_03, size 8 points, if you do not want the font is too slender, the elimination of text sawtooth way to set the clear. After adding the font, look at the effect, it seems not as good as imagined (Figure 16). We can decorate the text section again. Under the topmost text layer, create a new layer 7, set the foreground color to white, and use the rectangular tool to select a slender rectangle in the upper middle of the button. Link the text layer to this layer and align it in the center. Load the selection of layer 1, deselect it, delete the extra part of Layer 7, cancel the selection. Reduce the fill opacity to 10%, and the layer blending mode to color dodge. (Figure 17)
Figure 16 Figure 17
8.Let's take a look at the application of this button. I chose to place it on a metal panel. First, create a new layer group and place the button-related layers in the layer group. Under sequence 1, create a new layer 8, select a circle with the elliptical marquee tool, fill it with black, and deselect the selection. Link Layer 8 and sequence 1, select sequence 1, align the button with the black Circle, and cancel the link with the alignment option.
Now, we turn off the display of sequence 1, press Shiftctrl+delete, and fill the opacity area of layer 8 with white. Open the layer style and add the following styles in turn:
Gradient overlay: Mixed mode is normal, opacity is 82%, gradually changed from gray RGB (174,174,174) to white, linear, with the layer alignment, angle-48 degrees, zoom to 70%;
Inner Glow: Mixed mode is normal, opacity is 23%, color is black, luminous source at edge, method is softer, size is 10 pixel, range is 55%;
Bevel and relief: internal bevel, smooth, depth is 51%, size is 8 pixel, shadow angle is 130 degrees, eliminate global light, height is 15 degrees, darkened opacity is 0%, set contour type as preset semicircle, range is 53%, antialiasing;
Outer glow: The blending mode is normal, the opacity is 15%, the size is 5 pixels, the range is 33%;
Strokes: size 1 pixels, stroke position outside, blending mode is normal, opacity is 31%, stroke color is black;
Inner Shadow: Blending mode is normal, color is RGB (115,115,115), opacity is 8%, angle is 135 degrees, cancel global light, distance is 4 pixels, size is 2 pixels, contour type is preset cone;
Finally, the projection: Opacity is 11%, the angle is 135 degrees, the distance is 4 pixels, the size is 1 pixels (Figure 18).
Figure 18
Show sequence 1, at which point our image should look like Figure 191.
Figure 19
9.We want to make the inverted button effect. Create a new layer 9 on Layer 8, select a round selection that is slightly larger than the button, fill the white, and align the circle and the button in the center. Add a layer style to it: first gradient overlay, blending mode is normal, opacity is 55%, reverse default gradient, angle is 90 degrees, zoom to 90%, followed by strokes, size 1 pixels, position in the external, opacity is 40%, stroke color is RGB (210,210,210). In this way, the button is properly embedded in the panel. (Figure 20)
Figure 20
Third paragraph: Gradient transparent button
I know, this problem is really a bit unqualified. What kind of transparent effect doesn't use gradients? The gradient has almost become a necessary process for making transparent buttons, and it's a bit of a chore to make headlines. But I'm too lazy to bother with a loud and proper name in our push button. (These days have been to deal with the button, please forgive my burnout!) However, this button is really beautiful without saying, take it as a small compensation bar! This button is entirely determined by the layer style. After the completion of the style panel, you can have a more beautiful style.
1.This time, we will create a new document with a transparent background, depending on the size of the button. Create a new Layer 2, select a positive circle with the Ellipse tool, reset the color swatch, and fill the selection with the background color. Do not deselect, press Ctrl+x to copy the selection image to the Clipboard, and remove Layer 2.
In layer 1, paste the white circle into layer 1 with Ctrl + V. In this way, the white circle will be in the middle of the canvas. (Figure 21)
Figure 21
2.Next, we start adding a layer style to the button.
First, we add the base color to the button. Select the gradient overlay style, set the blending mode to normal, opacity to 100%, click Edit Gradient, set the left to RGB (166,202,240), the right end is RGB (24,48,153), the gradient style is linear, angle is 123 degrees, zoom to 100%; (Figure 22)
Figure 22
Second, we add gloss to the button with a bevel and Emboss style: style for the inner bevel, the method is smooth, depth 100%, direction, size of 18 pixels, softened to 3 pixels, the angle of the shadow of 120 degrees, the elimination of global light, height of 73 degrees, darkened mode for color Dodge, The other settings of the highlight and darkened are kept unchanged; (Figure 23)
Figure 23
Below, we use the inner shadow mode to strengthen the darkened part of the button: the shadow color set to dark brown rgb (71,41,2), blending mode is normal, opacity is 38%, angle of 90 degrees, distance of 7 pixels, the size of 5 pixels, quality unchanged; (Figure 24)
Figure 24
The next projection and outer glow are further modified by the edge of the button: first select the projection style, set the projection color to RGB (9,66,130), opacity is 35%, the angle is 90 degrees, distance and expand to 0, the size of 1 pixels; then the outer glow style, blending mode is normal, opacity is 38% , the color is RGB (0,70,114), the luminous method is softer, the size is 2 pixels; (Figure 25)
Figure 25
Finally, if you think the color of the button is thin, you can choose the inner glow style, the blending mode is multiply, opacity is 39%, set the gradient glow, according to the figure 26来 set gradient, fade from left to right in turn is black, brown red rgb (187,83,7), yellow RGB (255,249,157) , the two color midpoint position is 50%, the luminous method is softer, the light source center, the size is 250 pixels, the range is 50%. You can also set the color of your own glow so that the button's color is enriched. (Figure 27)
Figure 26
Figure 27
3.Next, we add a simple border to the button. Under Layer 1, create a new layer 2, load the opaque selection of layer 1, expand the selection by 8 pixels with the extended command, and fill it with white. (Figure 28)
Figure 28
We still use layer styles to add stereo effects. First select the bevel and Emboss style, the structure is inner bevel, the method is carved clear, the depth is 290%, the direction is on, the size is 4 pixels, softens to 9 pixels, the shadow angle is 90 degrees, the height is 45 degrees, the high light and the darkened tone remain the default; Add stroke styles, size 1 pixels, position outside, blending mode is normal, Opacity 100%, the stroke color is RGB (170,170,170). (Figure 29)
Figure 29
So, this button is done. To change the color, you can reset the color settings in each layer style. After you add a text layer, you can also add a layer style effect. If you want to apply this style to other sized buttons, you should pay attention to the scaling effect and make the style conform to the image.
