Web pages often compact buttons--gradient button

Buttons | gradients | Web page

You can also combine the two buttons to decorate your Web page as a mouse rollover animation. Second paragraph: Gradient button As for the first button, the next type of button we're going to introduce is more practical and more colorful. You will see it on many websites. First, it's still a new RGB-mode Photoshop document with a white background. This time we use vector tools to work with constituencies. Select the Rounded Rectangle tool, drawing by filling pixels, setting the fillet radius in the tool options to 3 pixels, resetting the color swatch, and drawing a rounded rectangle on the canvas with black. (Figure 03) Figure 03 Here, we use black to draw rounded rectangles to see the button shape, but the button itself needs to be filled with white, so once you're satisfied with the shape of the rounded rectangle, press Ctrl+shift+delete to fill the opaque area of the layer with white. Double-click the layer, go to the layer style, first select the gradient overlay style, blending mode is normal, opacity is 56%, the gradient style is linear, the gradient from black to white, select the layer alignment, angle 90 degrees, zoom to 150%, as shown in Figure 04; Figure 04 Next, we add three-dimensional icing to the button, select the bevel and Emboss style, and select the inner bevel in the style. The method is smooth, the depth is 1%, the direction is on, the size is 1 pixel, softens to 0 pixel, the shadow angle is 120 degrees, uses the global light, the height is 30 degrees, maintains the high light and the dark tone default blending mode and the color invariable, The opacity of the highlight is 75%, and the dimming is 36%; (Figure 05) Figure 05 Now, let's add the color to the button, choose the color overlay style, set the blending mode to color, set the overlay color to RGB (91,145,191), and opacity to 100%, as shown in Figure 06; Figure 06 Finally, we use strokes to modify the button, set the stroke size of 1 pixels, the position is external, the blending mode is normal, opacity is 100%, the fill type is color, the color is set to RGB (129,129,129) this gray. (Figure 07) Figure 07 You can save this style so that it's handy when making the same type of button, and if you want to change the color of the buttons, just go to the gradient overlay and change the fade. Next, we want to write the text on the button. Select the Text tool and click on the button and Photoshop will automatically create a new text layer. Set the foreground color to white and write the button text. Here, the font I choose is Verdana Bold. After writing, choose to press the new layer, the text layer and the link to the center of the text layer. It's best to add some layer effects to the text, make it more eye-catching: double-click the text layer, open the layer style, first select the outer glow, the luminous blending mode set to normal, opacity is 60%, the luminous color of RGB (76,144,148) (this color is the corresponding to the button color), the method is softer, The expansion is 100%, the size is 1 pixels, the quality remains unchanged; then select the projection style, blending mode for the multiply, the color is just the color of the outer glow we selected, opacity is 75%, the angle of 120 degrees, the use of global light, distance of 1 pixels, extended to 0%, the size of 2 pixels, the quality remains the default state. This way, the gradient button is done. (Figure 08) Figure 08