Rectangular Flat Button

We're going to draw a basic, rectangular button. Set the foreground color to a color of your choice, then draw a rectangle with the Rectangle Tool (u).

I told you it was basic! I've made mine more interesting by drawing another rectangle in a lighter color to give my button a thick border on its left-hand side, as shown at right.

Rounded Flat Button

You can also create basic, rectangular buttons with rounded corners using— you guessed it—the Rounded Rectangle Tool (u). Alter the "roundness" of your corners using the Radius field in the options bar, as shown here.

NOTE Photoshop Doesn't Replace CSS

On a web page, you'd probably use CSS instead of images to achieve this rectangular button effect. However, this technique is handy when it comes to drawing simple buttons for web comps in Photoshop.

Rounded rectangular button with a ten-pixel radius
Rounded rectangular button with 20-pixel radius
0 0

Post a comment