Always Start With a Vector Shape

Products in development often change. Path-based shapes, rather than pixel-based shapes, allow us to resize elements as needed without risking resolution issues. Photoshop CC even gives you control over round-corner boxes’ radii after you create the shape.

The trend for buttons today are horizontal slabs, sometimes with round corners. The latest version of Photoshop CC allows you to change corner radii after creating a round-corner box — very handy when adjusting buttons’ sizes. Check the Properties palette to control vector boxes’ corner size.

Reflections With Simple Gradients

To give buttons a hint of definition, we like simple gradients. These help calls to action get more attention from users.

1. Create a shape in Photoshop, then go to Layer Effects.
2. Add a gradient style in the Layers palette. We recommend using black and altering the transparency to make changing the color easier.
3. Keep it subtle — use the multiply blend mode and 10–15% opacity.

Users may not catch on, and that's the point: Slight gradients whisper for attention, and in the right context, that whisper makes the difference between users on the fence and users actively tapping.

Depth With a Hard Shadow

A popular faux-3D look shows two sides of an object while ignoring perspective. This look is easy to achieve.

1. Create a shape in Photoshop, then go to Layer Effects.
2. Create an inner shadow style. We recommend using black and Soft Light mode to make changing the color easier later.
3. Set the shadow’s size to zero.
4. Set the shadow’s angle to –90°.
5. Use your judgement to set the distance.

Download Samples to Get Started Quickly

Buttons in Photoshop are easy. But we want to make them easier. To help you create buttons faster, we're giving you a set of layer styles for free. Download the file and customize them as you see fit.

---