: How to create a non-destructive and reusable blurred/frosted glass effect? How can I create a generic blurred background that can be used on multiple images similar to the example below? I need

@Merenda852

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.

Vote Up Vote Down

@Ann6370331

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

Vote Up Vote Down

@Cooney243

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: 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.

Vote Up Vote Down

@Hamm6457569

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: www.palandforsale.us/frosted-glass/

Vote Up Vote Down

@Debbie163

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:
dribbble.com/shots/1210251-Live-Blur-Free-PSD dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

Vote Up Vote Down

@Hamaas979

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: notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Vote Up Vote Down

@Ravi4787994

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.

Vote Up Vote Down

@Jessie844

Make a 50% grey layer over the layer you want to create the blurry and frosted layer.
Fill it with noise, amount of which depends on your need
Blur it with Gaussian blur as you need.
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.

Vote Up Vote Down

@Hamaas979

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.

Vote Up Vote Down