Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

Tried a lot but I just can't quite get it, how do I achieve a translucent tab bar like this:

enter image description here

share|improve this question
    
add 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

enter image description here

share|improve this answer
    
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. –  Eric Aug 27 '13 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? –  Fred Collins Oct 11 '13 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). –  Peter Walser Oct 11 '13 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? –  Fred Collins Oct 11 '13 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. –  Peter Walser Oct 11 '13 at 18:06
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.