Micro Bevels

Step 1

Open a new document, and select the rectangle marquee tool:

Draw a medium sized bar like the one in the example, filling it with colour. (I used #999999)


Step 2

Zoom in to about 300-400% and create a new layer. Call it 'light'. This is where we add the light highlight to achieve half the bevel.

Draw another line with the rectangle marquee tool, making sure it is 1px high. Basically it means it is as slim as you can get it. Once you have your line, fill it with a lighter, but similar colour (white often works well).

The figure to the left is zoomed in at 300%.


Back at 100%.

Make sure the marquee is 1px from the top of the rectangle, 1px from the side of the rectangle and 1px thick, and that it runs along the entire rectangle. I filled mine with #CCCCCC.



Step 3

We are going to repeat Step 2, but with a darker line and at the bottom of the rectangle. Remember again to create a new layer.

Note how again we are 1px from the bottom of the rectangle and the line stretches from side to side with 1px gap between the edges. I filled mine with #666666.


Step 4

Now to fix up the sides. A general rule of thumb is to have the light highlight on the left hand side and the dark highlight on the right hand side.

Again create 2 new layers, zoom in and create a vertical line on each layer, 1px from the side of the base rectangle as illustrated in the figure.



The other side.

Note how the side bits do not overlap.






Your final bevel.

This technique is used for many applications. It looks very clean and makes a nice addition to any website. To see it in action, check out a recent design on mine: Chapel of Frag.