Neomorphism Style using Layer Effects

[CVA]

"The neumorphic effect is a combination of the current famous flat UI and the old skeuomorphic principles! The components have a dark box-shadow on the bottom and a light box-shadow on top; the combination of both creates the effect of the elements pushing themselves through your display."

Quote Source

 

We are going to create a Neomorphism Style graphic like this one using Layer Effects. We are going to be working only with three colors, one Main Color, A Shadow color and a lighter highlight color.

 

 

We are going to be working with the following three colors

 

Lets start by creating a blank document. In my case, an A4 Horizontal.

 

Lets select the square shape tool and fill the whole document and give it the MAIN color. This will be the background of our image.

 

 

 

Now create a rounded square shape

 

 

Now while having the newly created shaped selected. Apply the following settings to the "Bevel / Emboss" section of the "Layer Effects". Sorry for the misspell ..LOL 

 

Now apply the following settings to the "Color Overlay" section and close the window.

 

 

You can use the Shadow color to write text over it. And you can save the settings as a Style and apply it to any shape or text you want, as shown below.

 

 

 

Bonus, if you tick the "Invert" option on the Profile of the "Bevel / Emboss" you can create an inset effect. Also, you might want to activate the "Scale with Object" box at the bottom left of this window.

 

 

And this is the result with the Inverted profile selected

 

 

Sorry for the crude tutorial but I did it kind of quick. I hope someone find it useful. And if you want to read more about this please visit the following links.

 

Design trends: Neumorphic design

Neumorphism (Soft UI) in User interface design - Tutorial

 

 

 

 

 

[RNKLN]

Not crude, but nice. Thanks. 

[jer]

cVa, great technique for a style often needed. Thanks!

[Gellous]

This is a bang on, straight to the point tutorial! Thanks for this!