Jak odtworzyć ten efekt rozmycia iOS7
Odpowiedzi:
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
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
@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
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.