: How to re-create this iOS7 blur effect Tried a lot but I just can't quite get it, how do I achieve a translucent tab bar like this:

@Bethany839

You did not define what program or technology you are using. So, while Peter described a nice way to do it with Photoshop, I would like to add that this effect can also be created using CSS3.

Here's a peak into the CSS needed:
#iOSblur
{
-webkit-filter: blur(12px);
-moz-filter: blur(12px);
-o-filter: blur(12x);
-ms-filter: blur(12px);
filter: blur(12px);
}
#iOSopacity
{
opacity: 0.6;
}


Not saying that this is how you should do it… in fact, I personally would use Peter's procedure.

Vote Up Vote Down

@Berryessa866

The bottom part is gaussian blurred and has a semitransparent white overlay.

Step1: Select the overlay area on the background (the original image) and apply a gaussian blur of radius 12px.

Step2: Create a new layer, select the same part for the overlay, fill it with white, and give this layer an opacity of 66%

Reproduced with the upper part of your reference image:
EDIT : new parameters to match the original

Vote Up Vote Down