How to Add Depth to your UI Elements with Neumorphism Layer Styles in Photoshop

So much depth!

Neumorphism is a relatively new trend in UI/UX design for the year 2020, it appears to have come into fruition at least in part due to rebellion against the 'Flat' trend which previously killed off the Skeuomorphism trend that came before it.

Whilst not as textured and realistic as we have seen in this past, Neumorphism absolutely kills it in the depth department. Here is a quick and easy way to achieve the same effect on your web, mobile and desktop app interfaces.

Step 1

Create a new 1200 x 600 pixel document in Photoshop.

Go to Layer > New Fill Layer > Solid Color... and click OK

Enter #e4e9ed into the # field in the color picker window and click OK.

Step 2

Draw a new 360 x 120 pixel Rounded Rectangle layer with 40 pixel radius for all corners.

Set the fill color of the new layer to #e4e9ed (the same as the background).

Add a new text layer with the text 'Press me' and place it in the middle of the button.

Set the font size to 15 pt with 20 tracking and choose #898f99 for the color.

Step 3

The text layer is complete, but our button is currently invisible when not selected, so lets fix that by adding some Neumorphism-inspired layer styles.

Add a Bevel & Emboss, Color Overlay, Gradient Overlay and Drop Shadow as shown in the screenshots below:

The result should leave your button looking like this:

Step 4

Creating an icon button is just as simple;

Duplicate or draw a new 160 x 160 pixel rounded rectangle with the same 40 pixel corners.

Use the exact same fill color and layer styles from the previous rectangle

Step 5

Place an icon into your document and position it in the middle of the square shaped button.

Step 6

Add Inner Shadow, Color Overlay and Drop Shadow layer styles to the icon layer.

The Color Overlay value is #aeb2b9.

Step 7

Next up, to prove these styles can be used on almost any interface element, let's create a Rotary Knob.

Draw a 180 x 180 pixel circle by using the Ellipse Tool and constraining proportions as you draw.

Step 8

For the layer styles that you can see in the previous screenshot, use the values shown below for Bevel & Emboss, Color Overlay, Gradient Overlay and Drop Shadow.

Step 9

Duplicate or draw a new 140 x 140 pixel circle in the middle of the preview shape.

Copy the layer styles from one of the other buttons and paste them onto the new circle shape.

Step 10

For a little finishing touch, add another 8 x 8 pixel circle for the rotary knob's indicator.

Set the fill color to #898f99 and add a subtle 1px white drop shadow layer style.

Step 11

Using the same techniques, we can apply these styles to a large amount of interface elements, for example, why not create a progress bar using the same layer styles from the first two circle shapes on a couple of short, wide rounded rectangles?

Result

Here is the final result, as you can see these extremely basic shapes instantly transform into stunning user interface elements. Neumorphism is not all about adding depth of course, but it sure is fun to experiment with something new after so many years of flat everything and long shadows!