비파괴적이고 재사용 가능한 희미한 유리 효과를 만드는 방법은 무엇입니까?

아래 예와 유사한 여러 이미지에 사용할 수있는 일반 배경을 만들려면 어떻게해야합니까?

일반 이미지 위에 겹쳐서 모든 젖빛 유리 모양을 제공하는 데 사용할 수 있는 흰색 젖빛 유리 모양의 png 가 필요합니다 .

예 :

^{전체 해상도를 보려면 이미지를 클릭하십시오}

어쩌면 텍스처가있는 흰색 배경 (거친 질감)과 가우시안이 그것을 흐리게 한 다음 모든 이미지의 레이어로 사용할 수 있습니다.

위에 게시 한 링크가 이미지가 흐려지는 것을 알고 있지만 iOS 프로젝트에서 재사용 할 수있는 레이어가 필요합니다. 이 방법으로 이미지의 일부에 뷰 레이어를 사용하고 그 아래의 이미지를 흐리게 보이게 할 수 있습니다. 어쩌면 여기서 용어로 흐림을 사용해서는 안됩니다. 젖빛 유리 모양을 찾고 있습니다.

이 이미지로 내가하려고하는 것은 내 iOS 앱으로 가져와 뷰 배경을 사용하는 것입니다. 그런 다음이보기가 다른보기 (지도보기, 사진 등) 위에 있으면 모두 서리로 덥습니다. iOS 7에서이 이미지의 효과를 만들려고합니다. 대부분의 사용자가 여전히 iOS 5를 사용하고 있기 때문에 새로운 iOS 7 디자인 기능을 사용하고 싶지 않습니다. 그리고 나는 그들을 강제로 업그레이드하고 싶지 않습니다.

무작위 이미지를 흐리게하는 '흐리게'이미지를 오버레이 할 수는 없습니다. 흐림 효과는 픽셀을 조옮김 / 확산하기 위해 이미지를 뒤에서 샘플링해야하므로 적용해야합니다.

그러나 모래 / 거친 질감을 만들어 곱하기 레이어로 사용하여 거친 질감을 얻을 수 있습니다.

업데이트-Derek이 다른 답변에서 제안한 것처럼 이미지 레이어를 스마트 객체로 변환하여 비파괴적인 흐림 효과를 만든 다음 흐림 효과를 적용 할 수 있습니다. 그런 다음 스마트 오브젝트를 입력하고 블러와 독립적으로 편집 할 수 있습니다.

제공 한 두 번째 이미지를 살펴보면 PNG 오버레이로는 불가능합니다. 그것은 프로그래밍 방식으로 절대적으로 수행되며 PNG 오버레이가 아닙니다. 나는 여기에 게시 된 다른 제안 중 일부를 시도했지만 아무도 오지 않았다 (그러나 아마도 더 나은 행운을 가질 것이다)

이건 정말 귀하의 요구 사항의 외부 것입니다, 그러나 이것은 않습니다 이 오버레이와 함께 할 수 있나요? 그런 종류의 방법을 사용하여 달성하려는 효과를 얻을 수 있을지 확실하지 않습니다. 기능이 있다면 대신 프로그래밍 방식 으로이 작업을 수행합니다.

응용 프로그램 설정 방법에 대한 통찰력은 없지만 CSS3 필터를 사용하는 것이 좋습니다.

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

[명확성을 위해 참고 사항 : 프로세스는 알파 마스크가있는 제품의 전경 이미지이고 CSS 필터를 사용하여 흐리게 처리 된 배경 이미지입니다.]

전에

후

^{이미지 크레디트 : Philip Leara}

여기 에서 라이브 데모를 확인할 수 있습니다

앞으로 제안 된 backdrop-filterCSS 스타일을 사용하면이 작업이 훨씬 쉬워 질 수 있지만 현재이 기능에 대한 지원은 존재하지 않습니다 .

또 다른 옵션은 스마트 오브젝트를 만들고 스마트 오브젝트에 흐림 효과를 적용하는 것입니다. 이렇게하면 스마트 객체를 열어 내부의 내용을 변경할 수 있습니다.

---편집하다---

위의 답변을 게시 했으므로 질문이 편집되어 약간 변경되었습니다. 요청은 이제 iOS 앱에서 블러를 달성하는 것입니다. 코드로 블러를 수행하여 원하는 모든 이미지에 영향을 줄 수 있습니다.

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

여기에 대한 자세한 정보 : http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Photoshop에서 흐림 효과를 만드는 방법에 대한 Dribble 에는 몇 가지 유용한 필터 가 있습니다 . 어쩌면 이것들이 당신에게도 도움이 될 수 있습니다. 나는 특히이 비파괴적인 방법으로 효과를 얻는 것을 좋아합니다. 나는 이것에 대해 이미 무언가가 있다는 것을 알고 있지만 여기에 링크가 있습니다 :

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

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

이것이 여전히 필요한 경우 동일한 효과를 얻으려고 노력했지만 실패했습니다.

나는 여기에서 그것을 발견 플러그인이라고 html2canvas 및 stackBlur, 그것을했다 : http://jsfiddle.net/WtQjY/201/ .

나는 플러그인의 저자가 아니다. 그리고 이것은 단지 코드 스 니펫입니다. 더 간단하고 빠르게 변경했습니다.

.흐림{
    -웹킷 필터 : blur (7px);
-moz-filter : 흐림 (7px);
-o- 필터 : 흐림 (7px);
-ms-filter : 흐림 (7px);
필터 : blur (7px);

}

////////////////////////////////////
// jquery 라이브러리 포함
// jQuery
$ (문서) .ready ({
$ ( '# YourButton'). click ({

$ ( '# YourContainer'). toggleClass ( 'blur');

});
});

여전히 매우 느리지 만 작동합니다.

그래서 나는이 스크립트의 나만의 버전을 만들었습니다. 나는 두 개의 배경 이미지를 만들어 그 중 하나를 자식 div에 첨부 한 다음 기본 배경에 선명하고 명확한 버전을 첨부했습니다. 두 객체의 배경을 고정 및 중앙으로 설정하면 일치합니다.

데모는 다음과 같습니다. http://www.palandforsale.us/frosted-glass/

귀하의 질문을 올바르게 이해하면 귀하가 할 수 없다고 생각합니다. 'Blur'은 각각 자체 방식으로 소프트웨어에서 실행되는 작업입니다. 스케치가 흐림을 적용하는 방법은 Photoshop 또는 Google 크롬과 다른 방법 일 수 있습니다.

따라서 '흐림'을 사용하여 이미지를 내보낼 수 없습니다. 흐림 효과는 항상 뒤에있는 내용과 상호 작용하므로 만들려는 응용 프로그램에서 내보낼 수 없습니다.

1. 흐릿하고 서리로 덥은 레이어를 만들 레이어 위에 50 % 회색 레이어를 만듭니다.
2. 소음으로 채우십시오. 필요량은 필요에 따라 다릅니다.
3. 필요에 따라 가우시안 블러로 블러하십시오.
4. 이 레이어 위에 곡선 레이어를 추가하고 흰색 끝을 아래로 당기거나 곡선 레이어의 검은 끝을 위로 밀어 흰색과 검은 색 값을 조정할 수 있습니다.

이 두 레이어는 서리가 있고 흐릿한 효과를 주어야합니다. 이 두 계층의 순서는 변경 될 수 있습니다.

이미지를 복제하고 가우시안 블러를 적용하는 액션을 만듭니다. 이것이 내가 믿는 유일한 PS 방법입니다.