Tahribatsız ve tekrar kullanılabilir bulanık / buzlu cam etkisi nasıl oluşturulur?

Aşağıdaki örneğe benzer şekilde birden fazla görüntüde kullanılabilecek genel bir bulanık arka planı nasıl oluşturabilirim?

Onlara buzlu bir cam görünümü vermek için normal görüntülerin üzerine tabaka koymak için kullanabileceğim beyaz bir buzlu cam görünümlü png'ye ihtiyacım var (sanki neredeyse arkasındakileri hemen hemen çıkarabilirsin; belki de bazı renkler).

Örnekler:

^{Tam çözünürlük için resme tıklayın}

Belki doku ile beyaz bir arka plan (grenli doku) sonra Gauss bu bulanıklaştırmak ve sonra tüm görüntüleri üzerinde bir katman olarak kullanın.

Yukarıda gönderdiğim bağlantının sadece bulanık bir resim olduğunu biliyorum, ancak bir iOS projesinde tekrar kullanılabilecek bir katmana ihtiyacım var. Bu şekilde, görüntünün bölümleri üzerinde bir görünüm katmanı kullanılabilir ve altındaki görüntünün bulanık görünmesini sağlayabilirsiniz. Belki de buradaki terimi kullanmamalıyım. Buzlu cam bir görünüm arıyorum.

Bu resimle yapmaya çalıştığım şey, onu iOS uygulamama aktarmak, görünüm arka planı kullanmak. Sonra bu görünüm diğer görünümlerin (harita görünümü, fotoğraf vb.) Üzerindeyken hepsi buzlu. Bu görüntünün etkisini iOS 7'den oluşturmaya çalışıyorum. Ve hayır, yeni iOS 7 tasarım özelliklerini kullanmak istemiyorum, çünkü kullanıcılarımın çoğu hala iOS 5'te. Ve hayır, onları yükseltmeye zorlamak istemiyorum.

Arkasındaki rasgele görüntüyü bulanıklaştıran 'bulanık' bir görüntüyü bindiremezsiniz. Bulanıklaştırma efekti, pikselleri transpoze etmek / yaymak için arkasındaki görüntüyü örneklemelidir, bu nedenle orada uygulanması gerekir.

Bununla birlikte, kumlu / grenli bir doku oluşturabilir ve grenli dokuyu görmek için çarpma katmanı olarak kullanabilirsiniz.

Güncelleme - Derek'in başka bir cevapta önerdiği gibi, görüntü katmanınızı akıllı bir nesneye dönüştürerek tahribatsız bir bulanıklık oluşturabilir, ardından bulanıklaştırmayı buna uygulayabilirsiniz. Ardından akıllı nesneyi girebilir ve bunu bulanıklıktan bağımsız olarak düzenleyebilirsiniz.

Sağladığınız ikinci resme bakarken, PNG kaplamasıyla bunun gibi bir şey mümkün değildir. Bu kesinlikle bir şekilde bir PNG kaplamasıyla değil, programlı olarak yapılır. Burada yayınlanan diğer önerilerden bazılarını denedim, hiçbiri yaklaşmadı (ama belki de daha iyi şansın olacak)

Bu gerçekten gereksinimleri dışında gidiyor, ancak bu mu var bindirme nedeniyle yapılacak? Bu tür bir yöntemi kullanarak elde etmeyi umduğunuz etkiyi elde edeceğinizden emin değilim. Eğer yeteneğiniz varsa, bunun yerine bunu programlı olarak yapardım.

Uygulamanızın nasıl kurulduğuna dair hiçbir fikrim yok, ancak bunu yapmanın bir yolu CSS3 filtresiyle:

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

[Netlik notu: İşlem, alfa maskeli ürünün ön plan görüntüsü ve CSS filtresi kullanılarak bulanıklaştırılmış arka plan görüntüsüdür]

Önce

Sonra

^{Resim Kredisi: Philip Leara}

Buna canlı demosunu kontrol edebilirsiniz burada

Gelecekte, önerilen backdrop-filterCSS stili kullanılarak daha kolay hale getirilebilir , ancak bunun için mevcut destek mevcut olmayanların yanındadır .

Başka bir seçenek de akıllı bir nesne oluşturmak ve bulanıklaştırmalarınızı ve efektlerinizi akıllı nesneye uygulamak. Bu şekilde yapmak, akıllı nesneyi açmanıza ve içinde ne olduğunu değiştirmenize izin verecektir.

---Düzenle---

Yukarıdaki cevabımı gönderdiğim için, soru hafifçe değiştirildi ve değiştirildi. İstek, bir iOS uygulamasında artık bulanıklaştırma elde etmektir, bulanıklaştırmayı kodla yapmanızı öneririm, bu şekilde istediğiniz görüntüyü etkileyebilir.

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

Bu konuda daha fazla bilgi burada: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Photoshop'ta bulanıklaştırma yapma konusunda Dribble'da birkaç iyi filtre var. Belki bunlar da senin için yardımcı olabilir. Özellikle etki yaratmanın bu yıkıcı olmayan yolunu seviyorum. Bu konuda zaten bir şey olduğunu biliyorum, ama işte bağlantılar:

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

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

Bu hala gerekliyse, aynı etkiyi elde etmeye çalışıyordum ve yapamadım.

Ben burada buldum bir eklenti olarak adlandırılan html2canvas ve stackBlur ile yaptım: http://jsfiddle.net/WtQjY/201/ .

Ben eklentilerin yazarı değilim. Ve bu sadece kodun bir parçası. Daha basit ve hızlı olacak şekilde değiştirdim:

.blur {
    -webkit-filter: bulanıklık (7 piksel);
-moz-filtre: bulanıklık (7 piksel);
-o-filtre: bulanıklık (7 piksel);
-ms-filter: bulanıklık (7 piksel);
filtre: bulanıklık (7 piksel);

}

//////////////////////////////////
// jquery kütüphanesini dahil et
// jQuery
.ready $ (document) ({
$ ( '# YourButton'). Tıklayın ({

$ ( '# YourContainer') toggleClass ( 'bulanıklık.');

});
});

Hala çok yavaş ama işe yarıyor.

Bu yüzden paylaşacağımı düşündüğüm bu senaryoyu kendim oluşturdum. İki arka plan görüntüsü hazırladım ve bir tanesini çocuk divine ve ardından ana arka plana net ve net bir versiyonunu ekledim. Sadece her iki nesnenin de arka planını sabit ve merkezlenmiş olarak ayarlayın, eşleşeceklerdir.

İşte bir demo: http://www.palandforsale.us/frosted-glass/

Sorunuzu doğru anlarsam, yapabileceğinizi sanmıyorum. 'Bulanıklaştırma', her biri kendi yolunda bir yazılımda yürütülen bir işlemdir. Çizimin bulanıklığı nasıl uyguladığı, Photoshop veya Google Chrome'un yaptığından farklı bir yol olabilir.

Bu nedenle, görüntüyü 'blur' ile veremezsiniz. Bulanıklık her zaman arkasında olanla etkileşime girer ve oluşturduğunuz uygulamadan dışa aktarılamaz.

1. Bulanık ve buzlu bir katman oluşturmak istediğiniz katman üzerinde% 50 gri katman oluşturun.
2. Miktarını ihtiyacınıza bağlı olarak, gürültü ile doldurun
3. İstediğiniz kadar Gauss bulanıklığıyla bulanıklaştırın.
4. Bu katmanın üzerinde bir eğri katmanı ekleyebilir ve beyaz ucu aşağı çekerek veya eğri katmanının siyah ucunu yukarı iterek beyaz ve siyah değerlerini ayarlayabilirsiniz.

Bu iki katman donuk ve bulanık bir etki vermelidir. Bu iki katmanın sırası değiştirilebilir.

Görüntüyü çoğaltan ve Gauss bulanıklığı uygulayan bir eylem oluşturun. Bunu yapmanın tek PS yolu bu olduğuna inanıyorum.