How to create a non-destructive and reusable blurred/frosted glass effect?

Question

How can I create a generic blurred background that can be used on multiple images similar to the example below?

I need a white frosted glass looking png that I can set use to layer over regular images to give them all a frosted glass look (like you can almost make out whats behind it; maybe some colors).

Examples:

^{Click on image for full resolution}

Maybe a white background with texture (grainy texture) then Gaussian blur that and then use it as a layer over all my images.

I know the link I posted above is probably just an image blurred, but I need a layer that can be reused in an iOS project. This way it can be used a view layer over sections of an image and make the image underneath look blurred. Maybe I shouldn't use blur as the term here. I am looking for frosted glass look.

What I am trying to do with this image is import it to my iOS app use it a view background. Then when this view is over other views (a map view, a photo, etc...) they all are frosted. I am trying to create the effect of this image from iOS 7. And no I don't want to use the new iOS 7 design features, because most of my users are on iOS 5 still. And no I don't want to force them to upgrade.

Answer 1

You can't just overlay a 'blurry' image that blurs the random image behind it. The blur effect needs to sample the image behind to transpose/spread the pixels, so it needs to be applied there.

You can however make a sandy/grainy texture and use it as a multiply layer to get the grainy texture look.

Update - As Derek suggests in another answer, you can make a non-destructive blur by converting your image layer to a smart object, then apply the blur to that. You can then enter the smart object and edit that independently of the blur.

Answer 2

Taking a look at the second image you have provided, something like this is not possible with a PNG overlay. That is absolutely done programmatically in some way and not with a PNG overlay. I have tried some of the other suggestions posted here, none came close (but perhaps you will have better luck)

---

This is really going outside of your requirements, but does this have to be done with an overlay? I am not sure you'll get the effect you're hoping to achieve using that sort of method. If you have the capability, I would do this programmatically instead.

I have no insight into how your application is set up, but one way you could do this is with a CSS3 filter:

.blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

[note for clarity: the process is a foreground image of product with an alpha mask, and a background image which is blurred using a CSS filter]

Before

After

^{Image Credit: Philip Leara}

You can check out a live demo of this here

In the future, this may be made much easier using the proposed backdrop-filter CSS style, but the current support for this is next to non-existent.

Answer 3

Another option is to create a smart object, and apply your blurs and effects to the smart object. Doing it this way, will still let you open up the smart object and change what is inside of it.

---Edit---

Since I have posted my above answer, the question has been edited and changed slightly. The request is to now achieve a blur in an iOS app, I would suggest to do the blur with code, that way it can affect any image you'd like.

private static Bitmap Blur(Bitmap image, Int32 blurSize)
{
    return Blur(image, new Rectangle(0, 0, image.Width, image.Height), blurSize);
}

More info about this here: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Answer 4

There is couple good filters on Dribble about how to make blur in Photoshop. Maybe these could be helpful also for you. I like especially this non-destructive way to get effect. I know there is already something about this, but here is the links:

http://dribbble.com/shots/1210251-Live-Blur-Free-PSD

http://dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

Answer 5

If this is still necessary, I was trying to achieve the same effect and I could not.

I did it with a plugin called html2canvas and stackBlur, which I found it here: http://jsfiddle.net/WtQjY/201/.

I am not the author of the plugins. And this is merely a snippet of the code. I changed it to be simpler and faster:

.blur{
    -webkit-filter: blur(7px);
-moz-filter: blur(7px);
-o-filter: blur(7px);
-ms-filter: blur(7px);
filter: blur(7px);

}

//////////////////////////////////
//include jquery library
//jQuery
$(document).ready({
$('#YourButton').click({

$('#YourContainer').toggleClass('blur');

});
});

it´s still very slow but it works.

Answer 6

So I created my own version of this script I figured I'd share. I made two background images and attached one of them to the child div and then a crisp and clear version to the primary background. Just set the backgrounds of both objects to fixed and centered and they will match up.

Here's a demo: http://www.palandforsale.us/frosted-glass/

Answer 7

If I understand your question correctly, I don't think you can. 'Blur' is an operation that is executed in a piece of software, each in their own way. How sketch applies blur may be a different way than how Photoshop or Google Chrome do.

Hence, you cannot export an image with 'blur'. Blur is always in interaction with what is behind it, and it cannot be exported from the application you are creating it in.

Answer 8

1. Make a 50% grey layer over the layer you want to create the blurry and frosted layer.
2. Fill it with noise, amount of which depends on your need
3. Blur it with Gaussian blur as you need.
4. Above this layer you can add a curves layer and adjust the white and black values by pulling down the white end or pushing up black end of the curves layer.

These two layers should give a frosty and blurry effect. The order of these two layers can be changed.

Answer 9

Create an action that duplicates the image and applies a Gaussian blur. This is the only PS way to do this I believe.