Solved

Blurred White Transparent Layer - Frosted iOS 7 look

Posted on 2014-03-20
5
16,618 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 35

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

This article was inspired by a question here at Experts Exchange (http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Q_28629170.html). The requirements stated in that question are (1) reduce the file size of a large number of…
Microsoft Office Picture Manager was included in Office 2003, 2007, and 2010, but not in Office 2013. Users had hopes that it would be in Office 2016/Office 365, but it is not. Fortunately, the same zero-cost technique that works to install it with …
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…

680 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