Solved

Blurred White Transparent Layer - Frosted iOS 7 look

Posted on 2014-03-20
5
15,788 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 69

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 69

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 69

Expert Comment

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

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
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…
Learn how to automatically add page numbers in your next InDesign project. This can be very helpful in multi-page books and magazines that you are designing. Make sure your Pages window visible.:  In the document you wish to add page numbers to. Act…
Learn how to download your full Prezi presentation for offline presenting. Prezi doesn’t have to be viewed and shared in a web browser, even with a free account you can download your full presentation to share with others. Be sure to download any vi…

757 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

18 Experts available now in Live!

Get 1:1 Help Now