2017 — Make your own acrylic UI texture using Sketch

Diving into Microsoft’s Fluent Design acrylic material

What is Acrylic UI?

Acrylic is a cool element from Microsoft’s announced Fluent Design’s System that’s used to create a partially transparent texture. You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.

“Fluent Design uses concepts of physical textures and spatial depth to differentiate UI elements and place them in a visual hierarchy. The overall effect is to create a more approachable and relatable experience for users.”

Some great examples

by Ghani Pradita

by DimasWibowo

by Mike Suarez C.

How to make acrylic using Sketch

Let’s get our hands dirty and make something :) See if you can do this yourself, but if you need, HERE’s the Sketch file for reference.

1. Background Image: The first thing you’ll need is a good ol’ artboard at whatever size you’re designing for. For my example, I used a 1440 x 960 artboard to experiment with. Then you’ll toss up a killer high resolution background image on top of that artboard to act as the base layer.
2. Gaussian blur/background blur: For this next layer, add a new rectangle layer on top of your background layer. Leave the opacity at 100% and the blending at Normal settings. Then in your inspector bar, check the Background blur box from the dropdown menu. (It’s the row right below Inner Shadows), and set it to 30px.
3. Color burn/Exclusion blend: Create another rectangle on a new layer, use the same dimensions as the gaussian blur layer. Leave the opacity at 100%, but this time change the Blending to Exclusion. Within the Fills option, make your color hex (FFFFFF), select normal blending, and use 10% opacity. For more on what exclusion blending actually is, this photoshop blog does a fair job explaining it
4. Color/Tint overlay: Create a new rectangle layer, same dimensions (or just duplicate the last layer and tweak the settings). Leave opacity at 100% and use normal Blending. Again you’ll jump into the Fills option, you can do a light fill (FFFFFF) or a dark fill (000000) ← zeros, normal blending, at 80% opacity. You can also toy with 70% or 60% opacity depending on visual hierarchy, or if you’re using a custom color for unique branding.
5. Noise texture: Create a new rectangle layer, same dimensions as before, 100% opacity and normal blending. Now go into your Fills option again, this time you’re going to select a different type of fill, click the ‘fill’ rectangle, now select the ‘noise’ option, it’s the far right option that looks like a static filled screen, choose ‘type: original’, and set it to 4% intensity, and use normal blending. Optional: turn on ‘Inner Shadow’ for the light fill, FFFFFF, (x:1, y:0, blur:2, spread:0).

Et voila! If you do it correctly, it should look something like this:

It’s exciting to see how Microsoft is evolving its design system to include both 2D and 3D designs for web, mobile, HoloLens, and their Mixed Reality headsets.

Enjoy and please let me know of any questions or improvements needed that you can see! Excited to see what you create.