Jak stworzyć nieniszczący efekt rozmytego / matowego szkła wielokrotnego użytku?

Jak mogę stworzyć ogólne rozmyte tło, którego można użyć na wielu obrazach podobnych do poniższego przykładu?

Potrzebuję białego matowego szkła wyglądającego na png , którego mogę użyć, aby nakładać na zwykłe obrazy, aby nadać im wygląd matowego szkła (jakbyś prawie mógł zrozumieć, co za nim; może jakieś kolory).

Przykłady:

^{Kliknij obraz, aby uzyskać pełną rozdzielczość}

Może białe tło z teksturą (ziarnista tekstura), a następnie rozmycie Gaussa, a następnie użyj go jako warstwy na wszystkich moich obrazach.

Wiem, że link, który zamieściłem powyżej, jest prawdopodobnie tylko rozmytym obrazem, ale potrzebuję warstwy, którą można ponownie wykorzystać w projekcie iOS. W ten sposób można użyć warstwy widoku nad sekcjami obrazu i sprawić, że obraz pod nim będzie rozmazany. Może nie powinienem używać rozmycia jako terminu tutaj. Szukam wyglądu matowego szkła.

To, co próbuję zrobić z tym obrazem, to zaimportowanie go do mojej aplikacji na iOS. Użyj go jako tła widoku. Następnie, gdy ten widok jest na innych widokach (widok mapy, zdjęcie itp.), Wszystkie są matowe. Próbuję stworzyć efekt tego obrazu z iOS 7. I nie. Nie chcę korzystać z nowych funkcji projektowych iOS 7, ponieważ większość moich użytkowników wciąż korzysta z iOS 5. I nie, nie chcę ich zmuszać do aktualizacji.

Nie można po prostu nałożyć „rozmytego” obrazu, który rozmywa losowy obraz za nim. Efekt rozmycia musi próbkować obraz z tyłu, aby transponować / rozkładać piksele, więc należy go tam zastosować.

Możesz jednak utworzyć teksturę piaskowatą / ziarnistą i użyć jej jako warstwy mnożącej, aby uzyskać efekt ziarnistej tekstury.

Aktualizacja - jak sugeruje Derek w innej odpowiedzi, możesz zrobić nieniszczące rozmycie, przekształcając warstwę obrazu w inteligentny obiekt, a następnie zastosuj do tego rozmycie. Następnie możesz wprowadzić inteligentny obiekt i edytować go niezależnie od rozmycia.

Patrząc na drugi dostarczony obraz, coś takiego nie jest możliwe w przypadku nakładki PNG. Odbywa się to absolutnie w jakiś sposób programowo, a nie nakładki PNG. Wypróbowałem niektóre z innych sugestii zamieszczonych tutaj, żadna nie zbliżyła się (ale być może będziesz mieć więcej szczęścia)

To naprawdę wykracza poza twoje wymagania, ale czy trzeba to zrobić z nakładką? Nie jestem pewien, czy uzyskasz efekt, który masz nadzieję osiągnąć za pomocą tego rodzaju metody. Jeśli masz taką możliwość, zrobiłbym to programowo.

Nie mam wglądu w konfigurację Twojej aplikacji, ale jednym ze sposobów, w jaki możesz to zrobić, jest filtr CSS3:

.blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

[uwaga dla przejrzystości: proces jest obrazem pierwszego planu produktu z maską alfa i obrazem w tle, który jest zamazany za pomocą filtra CSS]

Przed

Po

^{Źródło zdjęcia: Philip Leara}

Możesz sprawdzić na żywo demo to tutaj

W przyszłości może to być znacznie łatwiejsze dzięki proponowanemu backdrop-filterstylowi CSS, ale obecne wsparcie dla tego jest prawie nieobecne .

Inną opcją jest utworzenie inteligentnego obiektu i zastosowanie do niego rozmycia i efektów. Robiąc to w ten sposób, nadal będziesz mógł otworzyć inteligentny obiekt i zmienić jego zawartość.

---Edytować---

Ponieważ opublikowałem powyższą odpowiedź, pytanie zostało zredagowane i nieznacznie zmienione. Prośba jest teraz uzyskać rozmycie w aplikacji na iOS, sugeruję zrobić rozmycie za pomocą kodu, w ten sposób może to wpłynąć na dowolny obraz, który chcesz.

private static Bitmap Blur(Bitmap image, Int32 blurSize)
{
    return Blur(image, new Rectangle(0, 0, image.Width, image.Height), blurSize);
}

Więcej informacji na ten temat tutaj: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

W Dribble jest kilka dobrych filtrów na temat tworzenia rozmycia w Photoshopie. Może te mogą być pomocne również dla Ciebie. Szczególnie podoba mi się ten nieniszczący sposób na uzyskanie efektu. Wiem, że już coś w tym jest, ale oto linki:

http://dribbble.com/shots/1210251-Live-Blur-Free-PSD

http://dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

Jeśli nadal jest to konieczne, starałem się osiągnąć ten sam efekt i nie mogłem.

Zrobiłem to za pomocą wtyczki o nazwie html2canvas i stackBlur, którą znalazłem tutaj: http://jsfiddle.net/WtQjY/201/ .

Nie jestem autorem wtyczek. A to tylko fragment kodu. Zmieniłem to, aby było prostsze i szybsze:

.plama{
    -webkit-filter: blur (7px);
-moz-filter: rozmycie (7 pikseli);
-o-filter: rozmycie (7 pikseli);
-ms-filter: blur (7px);
filtr: rozmycie (7 pikseli);

}

//////////////////////////////////
// dołącz bibliotekę jquery
// jQuery
$ (dokument) .ready ({
$ („# YourButton”). Kliknij ({

$ („# YourContainer”). ToggleClass („rozmycie”);

});
});

wciąż jest bardzo wolny, ale działa.

Stworzyłem więc własną wersję tego skryptu, który postanowiłem udostępnić. Zrobiłem dwa obrazy tła i dołączyłem jeden z nich do div dziecka, a następnie wyraźną i wyraźną wersję do podstawowego tła. Wystarczy ustawić tła obu obiektów na stałe i wyśrodkowane, a będą one pasować.

Oto demo: http://www.palandforsale.us/frosted-glass/

Jeśli dobrze rozumiem twoje pytanie, nie sądzę, żebyś mógł. „Rozmycie” to operacja wykonywana w oprogramowaniu, każde na swój sposób. Sposób, w jaki szkic stosuje rozmycie, może być inny niż w przypadku Photoshopa lub Google Chrome.

Dlatego nie można wyeksportować obrazu z „rozmyciem”. Rozmycie jest zawsze w interakcji z tym, co się za nim kryje, i nie można go wyeksportować z aplikacji, w której go tworzysz.

1. Utwórz 50% szarą warstwę nad warstwą, którą chcesz utworzyć warstwę rozmytą i matową.
2. Wypełnij go hałasem, którego ilość zależy od potrzeb
3. Rozmyj go rozmyciem Gaussa, jeśli potrzebujesz.
4. Powyżej tej warstwy można dodać warstwę krzywych i dostosować wartości bieli i czerni, pociągając w dół biały koniec lub naciskając czarny koniec warstwy krzywych.

Te dwie warstwy powinny dać efekt mroźnego i rozmytego. Kolejność tych dwóch warstw można zmienić.

Utwórz akcję, która powiela obraz i zastosuje rozmycie gaussowskie. Wierzę, że to jedyny sposób na PS.