As a follow on to my drop the drop shadow post a while back, I’ve now decided to have a dig at the ‘Bevel and Emboss’ Photoshop effect.
I actually don’t have a massive problem with the Photoshop effect, as with a bit of tweaking it can be ok(ish). But more often than not it gets used without any alterations to the shading and highlights and looks too heavy. There are other ways to craft something a little more subtle and a bit more interesting.
Using the Mesh tool in Adobe Illustrator
Drawing your vector shapes in Illustrator and using the Mesh tool will give you greater control over the shading. The process does take a bit longer but the end result is better in my opinion.
Bevel and Emboss in Photoshop
Out of the box, the Bevel and Emboss effect in Photoshop is heavy and a bit ugly:
Use Illustrator to draw your button shape
Here I drew an oversized button at 400px by 150px with a corner radius of 20px:
Create shading with the Mesh tool
With your button selected, click on the Mesh tool on your tool palette (it looks like a box with wavy lines through it). Click an area inside your button on the top right and adjust your colours a bit lighter. Do the same on the bottom left but make the colours darker.
There are no exact rules about the colours and position of the Mesh anchor points as it’s here that you can experiment to create a button bevel that is unique.
Do you know a better way of creating bevels?
Share your methods below.
[...] Better button bevels [...]
This is just what I needed! Thank you for the help.