Solved

Blurred White Transparent Layer - Frosted iOS 7 look

Posted on 2014-03-20
5
16,746 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Title # Comments Views Activity
Video player 10 145
Lite dgn, dwg free viewer 1 163
3D Max and Photoshop through remote desktop 3 205
Photo's EXIF data Time Zone OffSet Question 14 147
I. Introduction In a previous article (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_6537-PaperPort-Upgrade-How-to-download-and-install-updated-versions-of-PaperPort-11-and-12.html) (now deprecated), I discussed how to upgrad…
PaperPort (http://www.nuance.com/for-individuals/by-product/paperport/index.htm) is among the most important applications that I run on my Windows computers. I use it every day, for nearly all of my document and photo scanning, as well as most of my…
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

740 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