I’m sure that you know what I’m talking about: Background Blur was added to Sketch after Apple introduced iOS7 so give designers an easy way to reproduce this effect. Since I’ve been using Sketch for a while (switched 2 years ago), I had chance to apply it on several applications.
Background Blur can help you some different ways:
- emphasize by giving focus to certain elements
- crafting a fancy splash screen
- in cool animations, etc.
- How would you use it?
This is what we’re going to do
Cool enough, huh?
Let’s see how
We need only three layers, take care of the layers’ order
- the image itself
- an Alpha Mask layer
- a Background Blur layer
Alpha Mask is necessary for applying the Background Blur to a specified area, in our case to the half of the picture.
Make a layer with a height of half of the picture. This layer should be above the image layer.
Then add a gradient fill with the same color at the both ends (I used #000000) and set 0% alpha on an end point, and 100% on the other.
One important thing that we should do with this layer: we have to set it as an alpha mask.
Use a shortcut (ctrl+⌘+M) to apply the Mask tool, and then go to the Layer -> Mask Mode menu and click on the Alpha Mask mode. That’s it.
Background Blur Layer
This is an empty layer which has only one thing to do: to add the fancy blur effect. At the layer details panel on the right side, select the Background Blur at the Blur drop down menu. Feel free to set the Blur amount to your needs (I used 10px).
One thing we should care about is, as you can see above, this layer is the masked one by the alpha blur layer. Make sure you do it the right way.
Well, this is not a rocket science, but can be handy and eye-catching at the same time:
- I’ve already used this cool effect as a splash screen, on a contact details page, on a settings layout as well, possibilities are endless.
- Remember the (ctrl+⌘+M) shortcut which trigger you the Mask mode.
- Proper order of the layers is necessary.
I like to use the amazing Sketch and I hope you like the thoughts above. I’d love your comments so please share your experiences, use cases. I’m running a startup (@grabready), and working on a huge update which adds Material design.