Jak odtworzyć ten efekt rozmycia iOS7

Odpowiedzi:

29

Dolna część jest rozmyta gaussowsko i ma półprzezroczystą białą nakładkę.

Krok 1: Wybierz obszar nakładki na tle (oryginalny obraz) i zastosuj rozmycie gaussowskie o promieniu 12px.

Krok 2: Utwórz nową warstwę, wybierz tę samą część nakładki, wypełnij ją białym kolorem i nadaj tej warstwie krycie 66%

Reprodukcja z górną częścią obrazu referencyjnego:
EDYCJA: nowe parametry pasujące do oryginału

wprowadź opis zdjęcia tutaj

Peter Walser
źródło
Zakładam, że odbywa się to za pomocą kodu, jeśli jest to zrzut ekranu. Wydaje mi się, że sprowadza się to do tego, czy on / ona prosi o zrobienie tego w kompozycji, makiecie, czy zaimplementowaniu go online.
Eric
@Peter Walser jak utworzyć obszar nakładki, który zostanie zastosowany jako gaussowski, jeśli będzie więcej warstw? Potrzebujesz najpierw je scalić?
Fred Collins
1
@FredCollins: tak, albo scalisz je najpierw i rozmyjesz zaznaczenie, albo tworzysz nową warstwę z kopią scalonego zaznaczenia (który musiałby być odtwarzany przy każdej zmianie warstwy).
Peter Walser,
@PeterWalser dzięki. Ostatnie pytanie. Aby utworzyć nową przezroczystą warstwę o kryciu 66%, używam narzędzia prostokąta, ale wydaje mi się, że jest lepszy sposób. Jak tworzenie maski / maski przycinającej dla rozmytej warstwy lub czegoś podobnego. Co sugerujesz?
Fred Collins
Dzięki osobnej warstwie możesz szybko dostosować ogólne krycie. Rozwiązanie maski krycia ma ten sam wynik, tutaj możesz nawet dostosować krycie na piksel. I oczywiście możesz połączyć oba podejścia (maska ​​+ przezroczystość warstwy). Którykolwiek z nich będzie dla Ciebie najlepszy.
Peter Walser
7

Nie zdefiniowałeś używanego programu lub technologii. Tak więc, chociaż Peter opisał przyjemny sposób, aby to zrobić w Photoshopie , chciałbym dodać, że ten efekt można również utworzyć za pomocą CSS3.

Oto szczyt potrzebnego CSS:

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

#iOSopacity
{
    opacity: 0.6;
}

Nie mówię, że właśnie tak powinieneś to zrobić… w rzeczywistości osobiście skorzystałbym z procedury Petera.

e-sushi
źródło