Create Traditional Color Buttons with PS

Recently, while liupeng was working on design diagrams and needed buttons with more traditional and appealing colors (he really didn't want to call them so-called Web 2.0), he had always used self-explored methods before. These were essentially multi-layer stacking techniques, but they were troublesome to maintain, and the overall color effect wasn't good when scaling the buttons. Therefore, a new single-layer method was adopted:

1. Open Photoshop and create a new layer.

2. Use the rounded rectangle tool to draw a button, then double-click the layer to view its properties. Here comes the critical step:

3. Select "Gradient Overlay" and set it as follows:

a. Blend Mode: Normal

b. Gradient Colors: (0% position: #94c516) (52% position: #8eb92a and #72aa00) (92% position: #a8c732) (100% position: #b9ce44)

c. Style: Linear

d. Angle: 90° (for vertical gradient)

e. Scale: 100%

4. Next is the Stroke:

a. Size: 1 pixel

b. Blend Mode: Normal

c. Opacity: 100%

d. Fill Type: Color

e. Color: #679800

5. Inner Glow Effect:

a. Structure: (Blend Mode: Normal) (Opacity: 40%) (Color: #ffffff)

b. Elements: (Method: Softer, Noise: 0%) (Choke: 0%, Size: 7 pixels)

c. Quality: (Range: 50%)

The principle is to use two similar colors at the middle positions of the gradient to achieve a visual color jump, simulating a transparent white layer. The inner glow makes the button look more layered. To achieve the button effect described above, the most important part is handling the color selection for the gradient, specifically choosing four different shades within one color family. Of course, there is an even simpler method, which is to use Photoshop styles to achieve this effect.