[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 17760
  • Last Modified:

Blurred White Transparent Layer - Frosted iOS 7 look

Hi, does anyone know how to create a blurred transparent png layer that i can add on top of other layers to give it that frosted iOS 7 look as seen on the screens to the left in both of the following images.


http://blog.mengto.com/wp-content/uploads/2013/06/Translucent.png

http://media.idownloadblog.com/wp-content/uploads/2013/10/Blur-Contrast-iOS-7-Control-Center.png

I have tried the following in photoshop but i just end up with a transparent layer with no blur:
- add layer
- fill it with white
- add gausian blur filter
- set transparency to 40%

Any help would be greatly appreciated, thanks in advance...
0
oo7ml
Asked:
oo7ml
  • 3
2 Solutions
 
MereteCommented:
Hi, what does frosted iOS 7 look like ;)
iPhone SDK - Frosted Glass (iOS 7 Blur) Effect
http://stackoverflow.com/questions/11601166/iphone-sdk-frosted-glass-ios-7-blur-effect

In my Paintshop pro I grab and image put it on then go to effects and can use frosty glass/ there are a few different glass effects
0
 
oo7mlAuthor Commented:
Hi, thanks for the quick reply.

Does it create it exactly like that... i don't want to apply the blue to a specific photo... i want to apply it to a plain white layer so that when i place that layer on top of other photos, they immediately have that effect.

Off to bed now but will check that link in full tomorrow, thanks.
0
 
MereteCommented:
Ok good night, I'm in Australia and it's morning
I cant say that will work >create a single white blurred translucent image that is re-usable over any images it doesnt work like that. Your original image/s donot reflect that colour underneath.
You could do is create an exact copy/duplicate an original image and add a guasson blur to that and lay it over the original like a mask. that would add the fuzzy colour effect underneath.
Just as you say in your first comments but instead
make a copy of your original>- ie>add layer
- fill it with white
- add gausian blur filter
- set transparency to 40%
Here it is on Vimeo should answer your question and show you how it's done, it's very col and he's even made it so that the bottom layer can scroll up and down behind the fuzzy effect.
iOS 7 Blur Effect in Photoshop
http://vimeo.com/79253462
The written version of that video
iOS7 UI Effects in Photoshop and After Effects step by step
I put it straight onto the image  
To illistrate mine, the image could be anything I used a kitten as it was near by lol
In all my examples they key point is that I use the selection tool to put a dotted line around the area I want to blur,  this marks it as a layer and the blur will only go inside that area.
Just a quick reference I can modify the depth colour lines etc
Gaussan Blur on the image
Guassian BlurPaint Dot net
 
gaussian blur Paint dot netIf you'd like to try the free open source Paint dot net as a backup tool has tons of features
www.getpaint.net
http://paint.net.amihotornot.com.au/Download/
http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Blurs/
This is the method I use in PSP
Quick Tip: Add a Frosted Background to Photo Captions
0
 
Dan CraciunIT ConsultantCommented:
I might be wrong, but I don't think Apple uses transparent pngs for that effect.

They probably have a graphic library that developers use and apply the effect on the fly, on the background image.

HTH,
Dan
0
 
MereteCommented:
Thankyou oo7ml glad to help!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now