Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
5  
"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 '13 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 '13 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 '13 at 7:54
add comment

7 Answers

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.

share|improve this answer
    
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 '13 at 2:57
    
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 '13 at 12:51
add comment

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 {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-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

share|improve this answer
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 '13 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 '13 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 '13 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 '13 at 3:10
    
@Eric if its an iOS app, web platforms don't matter. –  Ctrl Alt Design Apr 4 at 11:23
add comment

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.

share|improve this answer
add comment

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/

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment
  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.

share|improve this answer
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 '13 at 21:02
    
This would just give you a blurry haze over the original sharp image. –  DA01 Jun 19 '13 at 23:45
    
Did not work. But maybe I did it wrong. –  jgervin Jun 20 '13 at 3:07
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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