Como recriar esse efeito de desfoque do iOS7

Tentei muito, mas simplesmente não consigo entender, como faço para obter uma barra de guias translúcida como esta:

insira a descrição da imagem aqui

effects blur

— Nimbuz
fonte

possível duplicação de Como criar um efeito de vidro fosco / fosco não destrutivo e reutilizável?

— Joonas19

A parte inferior é embaçada gaussiana e tem uma sobreposição branca semitransparente .

Etapa 1: selecione a área de sobreposição no fundo (a imagem original) e aplique um desfoque gaussiano de raio 12px.

Etapa 2: crie uma nova camada, selecione a mesma peça para a sobreposição, preencha-a com branco e dê a essa camada uma opacidade de 66%

Reproduzido com a parte superior da sua imagem de referência:
EDIT: novos parâmetros para corresponder ao original

insira a descrição da imagem aqui

— Peter Walser
fonte

Eu diria que isso é feito com código, se for uma captura de tela. Eu acho que tudo se resume a se ele / ela está pedindo para fazer isso em uma composição ou maquete, ou implementá-lo online.

— 27413 Eric Eric

@ Peter Walser como criar a área de sobreposição que será aplicada ao Gaussian se houver mais camadas? Precisa primeiro mesclá-los?

— Fred Collins

@FredCollins: sim, você os mescla primeiro e desfoca a seleção ou cria uma nova camada com uma cópia da seleção mesclada (que precisaria ser recriada toda vez que uma camada é alterada).

— 22613 Peter Walser

@PeterWalser thanks. Ultima questão. Para criar a nova camada transparente com opacidade de 66%, uso a ferramenta retângulo, mas sinto que há uma maneira melhor. Como criar uma máscara / máscara de recorte para a camada desfocada ou algo parecido. O que você sugere?

— 11133 Fred Collins

Com uma camada separada, você pode ajustar rapidamente a opacidade geral. A solução de máscara de opacidade tem o mesmo resultado, aqui você pode até ajustar a opacidade por pixel. E, é claro, você pode combinar as duas abordagens (máscara + transparência da camada). O que funcionar melhor para você.

— 22813 Peter Walser

Você não definiu qual programa ou tecnologia está usando. Assim, enquanto Peter descreveu uma boa maneira de fazer isso com o Photoshop , gostaria de acrescentar que esse efeito também pode ser criado usando CSS3.

Aqui está um pico no CSS necessário:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

Não estou dizendo que é assim que você deve fazer ... de fato, eu pessoalmente usaria o procedimento de Peter.

— e-sushi
fonte