Como recriar esse efeito de desfoque do iOS7

Respostas:

29

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
11
@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
7

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