26

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:

Example blurred image
Click on image for full resolution

enter image description here

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.

3
  • 6
    "blur" is not some generic thing you can store in a PNG, it is an effect applied to an image and is entirely dependent on the content of the image. You can, however, store an action which applies a blur effect. If you do what is outlined in the tutorials and discussion on the linked Q&A, while recording an action, you might have what you need. Most likely one would manually create the selection mask, and then automate the rest of the process using an action.
    – horatio
    Jun 19, 2013 at 18:13
  • The edit doesnt really change the question. The answer is, as Horatio mentions: No, you can't have a blur in a separate layer. The iOS image is just a bigger blur.
    – Yisela
    Jun 20, 2013 at 2:38
  • 1
    This is full on coding question if you ask me. The closest you are going to get to something like your second example by using images is this: jsfiddle.net/lollero/DE4qn ...of course this is super static and requires you to have 2 versions of the same image ( of course this same thing could be done with the css3 filter method ).
    – Joonas
    Jun 20, 2013 at 7:54

9 Answers 9

12

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.

2
  • How can I do the sandy grainy texture? I am thinking to of these together would work. Two the exact same, but one is one pixel up and one pixel to the right from the first one and that would make it grainy (layered if you will).
    – jgervin
    Jun 20, 2013 at 2:57
  • 1
    Create a white filled layer and filter > noise > add noise to add the grain. From there maybe blur it a tiny bit to soften it up slightly, set the layer as multiply and lower the opacity to something like 10%.
    – John
    Jun 20, 2013 at 12:51
11

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

Our Product!

After

Our Product!
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.

5
  • 2
    If this is an option, it is a good route to take since the user or developer can change the styling at will.
    – horatio
    Jun 19, 2013 at 21:23
  • 1
    Something to note is that this will work on iOS devices, and probably most mobile devices, but isn't a viable approach for non-mobile web design because its support is extremely limited. caniuse.com/css-filters
    – Eric
    Jun 19, 2013 at 21:39
  • We are all native. And programming it isn't an option as it might have 3 view showing or 2 or 1, but the top view needs to allow all the underneath views, no matter how many there are, to show throw a little.
    – jgervin
    Jun 20, 2013 at 2:55
  • @jgervin I do not think what you are trying to achieve is possible with just a PNG overlay, but I would love for someone to prove me wrong because I'd learn something new! I'd instead focus on how you can accomplish this another way, perhaps Stack Overflow could lead you in the right direction.
    – JohnB
    Jun 20, 2013 at 3:10
  • @Eric if its an iOS app, web platforms don't matter. Apr 4, 2014 at 11:23
6

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/

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

0
3

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.

2

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/

1
  • The demo page seems to be down. Can the demo be found on another place, or is it possible to create a JSFiddle of it? Jan 12, 2015 at 9:01
2

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.

2
  • Thanx for answer, That make sense. So if i want to use it in application i have to create it programmatically. Apr 29, 2015 at 10:53
  • Yes, for each application separately. CSS has blur options these days, for example.
    – Vincent
    Apr 29, 2015 at 10:54
0
  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.

3
  • 1
    Hi there. If you have tried this, can you add a picture of the result? I don't really see how it would give a blur effect like the one the OP is looking for without affecting the image colors...
    – Yisela
    Jun 19, 2013 at 21:02
  • This would just give you a blurry haze over the original sharp image.
    – DA01
    Jun 19, 2013 at 23:45
  • Did not work. But maybe I did it wrong.
    – jgervin
    Jun 20, 2013 at 3:07
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.