Solved

Blurred White Transparent Layer - Frosted iOS 7 look

Posted on 2014-03-20
5
16,031 Views
Last Modified: 2014-03-24
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
Comment
Question by:oo7ml
  • 3
5 Comments
 
LVL 70

Expert Comment

by:Merete
ID: 39944018
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
 

Author Comment

by:oo7ml
ID: 39944025
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
 
LVL 70

Accepted Solution

by:
Merete earned 300 total points
ID: 39944047
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
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 200 total points
ID: 39944489
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
 
LVL 70

Expert Comment

by:Merete
ID: 39950385
Thankyou oo7ml glad to help!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As each individual will have his or her personal way of processing a concept and turning it into a reality, this is simply a record of my own system as a designer. It may feel daunting or even overwhelming when developing a new idea for a project…
In a previously published article (http://www.experts-exchange.com/articles/10331/Automatic-Duplex-Scanning-in-PaperPort-Versions-11-12-14.html) here at Experts Exchange, I explained how to achieve duplex (double-sided) scanning in Nuance's PaperPor…
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now