How to Recreate Microsoft’s Acrylic Material In Photoshop

30th August 2019Design

Over the last few years Microsoft’s big product, Windows, has taken on a design style which uses what they call ‘acrylic material’.

It’s a blurred, glassy interface style, and when used sensibly it can look clean, classy and gorgeously modern. Of course it is also entirely fitting for a product called Windows.

They have an acrylic material design guide describing how the style should be used in Windows apps, but I thought I’d put together a Photoshop tutorial for anyone wanting to recreate this look in Adobe apps for interface mockups, or whatever.

A few examples I’ve made:

acrylic-apples-3
acrylic-bananas
acrylic-apples-2
acrylic-apples-1
acrylic-blueberries
acrylic-apricots

TL;DR – the basic recipe:

  1. Background image
  2. Gaussian blur
  3. Luminosity blend
  4. Colour blend
  5. Noise with a soft light blend

Let’s get crackin’.

[ I’m using a photo by Eiliv-Sonas Aceron on Unsplash ]

The blur

  1. Set up your guides to where you want the edges of your acrylic material to be
  2. Duplicate your image by selecting its layer and pressing Ctrl + J (or Command + J on a Mac)
  3. With the new image later selected go to Filter > Blur > Gaussian Blur and pick something fat. You’ll want to pick a value somewhere around 1/50th of your image’s resolution, so that would be a 100px blur for a 5000px wide image. Or as blurry as you can make it while still making out the basic forms.
  4. Use the rectangular marquee selection tool to select the area within your guides that you’d like to apply the acrylic effect to
  5. Click the ‘Add layer mask’ button right at the bottom of the layers panel:
layer-mask

That should get you something like this:

acrylic-blur

The Luminosity

  1. Create a new layer (Ctrl + Shift + N) and set its blend mode to Luminosity
  2. Pick a colour (hotkey I) from the image on the lighter end of the spectrum
  3. Select the intended area of your acrylic material within the guides again and fill it with the colour (hotkey G). In this example I’ve used the colour #face9f.
  4. Bring the layer opacity down to around 10% – 20%

Here’s where we’ve got to so far (I’ve turned off guides):

acrylic-luminosity

The luminosity blend should reduce contrast, both lightening the dark areas and darkening the light areas together. This evens out the lightness of the whole material, replicating the internal light scattering of translucent glass.

Experiment with the layer colour and opacity to see what you like best.

The colour tint

  1. Duplicate the Luminosity layer and set the new layer’s blend mode to Colour (just above Luminosity)
  2. Fill that layer with another colour picked from the image. The colour tone is key here, of course.
  3. Reduce the opacity to somewhere between 10% and 40% and experiment with the colour tone. Perhaps open the Hue/Saturation window (Ctrl + U) and play around with the Hue slider to see what you get.

That gives us:

acrylic-colour

The noise

  1. Duplicate the Colour layer and set its blend mode to Soft Light. Fill it with a mid grey.
  2. Go to Filter > Noise > Add Noise and add a crazy load, like 100%. Select Gaussian distribution and tick ‘Monochromatic’.
  3. Zoom in to the image at the edge between the acrylic and the sharp original image, at a darker area until you can see an area of the original image that contains noise, if possible.
  4. Bring the layer opacity of your noise layer down to a level slightly above that of the original image for a subtly frosted and photographic look. I find 20% – %40 opacity works well.

Your layers should look like this:

layers

Drumroll please…

acrylic-bananas

Et voilà!

Related Posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest