Tried a lot but I just can't quite get it, how do I achieve a translucent tab bar like this:
-
3possible duplicate of How to create a non-destructive and reusable blurred/frosted glass effect?– JoonasCommented Aug 26, 2013 at 12:17
Add a comment
|
2 Answers
The bottom part is gaussian blurred and has a semitransparent white overlay.
Step1: Select the overlay area on the background (the original image) and apply a gaussian blur of radius 12px.
Step2: Create a new layer, select the same part for the overlay, fill it with white, and give this layer an opacity of 66%
Reproduced with the upper part of your reference image:
EDIT : new parameters to match the original
-
I'd assume this is done with code, if this is a screenshot. I guess it comes down to whether or not he/she's asking to do this in a composition or mockup, or implement it online.– EricCommented Aug 27, 2013 at 16:41
-
@Peter Walser how to create the overlay area that will be applied the Gaussian if there are more layers? Need first to merge them? Commented Oct 11, 2013 at 2:49
-
1@FredCollins: yes, either you merge them first and blur the selection, or you create a new layer with a copy of the merged selection (which would need to be recreated every time a layer is changed). Commented Oct 11, 2013 at 9:01
-
@PeterWalser thanks. Last question. To create the new transparent layer with opacity of 66% I use the rectangle tool but I feel there's a better way. Like creating a mask/clipping mask for the blurred layer or something alike. What do you suggest? Commented Oct 11, 2013 at 15:54
-
With a separate layer, you can quickly adjust the overall opacity. The opacity mask solution has the same result, here you can even adjust the opacity per pixel. And, you can of course combine both approaches (mask+layer transparency). Whichever works best for you. Commented Oct 11, 2013 at 18:06
You did not define what program or technology you are using. So, while Peter described a nice way to do it with Photoshop, I would like to add that this effect can also be created using CSS3.
Here's a peak into the CSS needed:
#iOSblur
{
-webkit-filter: blur(12px);
-moz-filter: blur(12px);
-o-filter: blur(12x);
-ms-filter: blur(12px);
filter: blur(12px);
}
#iOSopacity
{
opacity: 0.6;
}
Not saying that this is how you should do it… in fact, I personally would use Peter's procedure.
