Làm thế nào để tạo hiệu ứng làm mờ / mờ kính không phá hủy và có thể tái sử dụng?

Làm cách nào tôi có thể tạo một nền mờ chung có thể được sử dụng trên nhiều hình ảnh tương tự như ví dụ dưới đây?

Tôi cần một png kính mờ màu trắng mà tôi có thể đặt để sử dụng để phủ lên các hình ảnh thông thường để cung cấp cho chúng một cái nhìn bằng kính mờ (giống như bạn gần như có thể tìm ra những gì đằng sau nó; có thể là một số màu sắc).

Ví dụ:

^{Click vào hình để xem độ phân giải đầy đủ}

Có thể một nền trắng với kết cấu (kết cấu hạt) sau đó Gaussian làm mờ nó và sau đó sử dụng nó như một lớp trên tất cả các hình ảnh của tôi.

Tôi biết liên kết tôi đã đăng ở trên có lẽ chỉ là một hình ảnh mờ, nhưng tôi cần một lớp có thể được sử dụng lại trong một dự án iOS. Bằng cách này, nó có thể được sử dụng một lớp xem trên các phần của hình ảnh và làm cho hình ảnh bên dưới trông mờ đi. Có lẽ tôi không nên sử dụng mờ như thuật ngữ ở đây. Tôi đang tìm kiếm kính mờ.

Những gì tôi đang cố gắng thực hiện với hình ảnh này là nhập nó vào ứng dụng iOS của tôi, sử dụng nó làm nền xem. Sau đó, khi chế độ xem này vượt qua các chế độ xem khác (chế độ xem bản đồ, ảnh, v.v ...), tất cả chúng đều bị mờ. Tôi đang cố gắng tạo hiệu ứng của hình ảnh này từ iOS 7. Và không, tôi không muốn sử dụng các tính năng thiết kế iOS 7 mới, bởi vì hầu hết người dùng của tôi vẫn ở trên iOS 5. Và không, tôi không muốn buộc họ nâng cấp.

Bạn không thể chỉ che một hình ảnh 'mờ' làm mờ hình ảnh ngẫu nhiên đằng sau nó. Hiệu ứng làm mờ cần lấy mẫu hình ảnh phía sau để hoán vị / trải các pixel, vì vậy nó cần được áp dụng ở đó.

Tuy nhiên, bạn có thể tạo ra một kết cấu cát / hạt và sử dụng nó như là một lớp nhân để có được kết cấu hạt.

Cập nhật - Như Derek gợi ý trong một câu trả lời khác, bạn có thể tạo ra một vệt mờ không phá hủy bằng cách chuyển đổi lớp hình ảnh của bạn thành một đối tượng thông minh, sau đó áp dụng độ mờ cho điều đó. Sau đó, bạn có thể nhập đối tượng thông minh và chỉnh sửa độc lập với mờ.

Nhìn vào hình ảnh thứ hai bạn đã cung cấp, một cái gì đó như thế này là không thể với lớp phủ PNG. Điều đó hoàn toàn được thực hiện theo chương trình theo một cách nào đó chứ không phải với lớp phủ PNG. Tôi đã thử một số đề xuất khác được đăng ở đây, không có gợi ý nào được đưa ra (nhưng có lẽ bạn sẽ gặp may mắn hơn)

Điều này thực sự nằm ngoài yêu cầu của bạn, nhưng điều này có phải được thực hiện với lớp phủ không? Tôi không chắc chắn bạn sẽ nhận được hiệu quả mà bạn hy vọng đạt được bằng cách sử dụng phương pháp đó. Nếu bạn có khả năng, tôi sẽ làm điều này bằng lập trình thay thế.

Tôi không có cái nhìn sâu sắc về cách ứng dụng của bạn được thiết lập, nhưng một cách bạn có thể làm điều này là với bộ lọc CSS3:

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

[lưu ý cho rõ ràng: quá trình này là hình ảnh nền trước của sản phẩm có mặt nạ alpha và hình nền được làm mờ bằng bộ lọc CSS]

Trước

Sau

^{Tín dụng hình ảnh: Philip Leara}

Bạn có thể xem bản demo trực tiếp về điều này tại đây

Trong tương lai, điều này có thể được thực hiện dễ dàng hơn nhiều bằng cách sử dụng backdrop-filterkiểu CSS được đề xuất , nhưng hỗ trợ hiện tại cho việc này là không tồn tại .

Một tùy chọn khác là tạo một đối tượng thông minh, và áp dụng hiệu ứng làm mờ và hiệu ứng của bạn cho đối tượng thông minh. Làm theo cách này, vẫn sẽ cho phép bạn mở đối tượng thông minh và thay đổi những gì bên trong nó.

---Chỉnh sửa---

Vì tôi đã đăng câu trả lời trên của mình, câu hỏi đã được chỉnh sửa và thay đổi một chút. Yêu cầu bây giờ là đạt được độ mờ trong ứng dụng iOS, tôi khuyên bạn nên làm mờ bằng mã, theo cách đó nó có thể ảnh hưởng đến bất kỳ hình ảnh nào bạn muốn.

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

Thông tin thêm về điều này tại đây: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Có một vài bộ lọc tốt trên Dribble về cách làm mờ trong Photoshop. Có lẽ những điều này cũng có thể hữu ích cho bạn. Tôi đặc biệt thích cách không phá hủy này để có hiệu lực. Tôi biết đã có một cái gì đó về điều này, nhưng đây là các liên kết:

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

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

Nếu điều này vẫn cần thiết, tôi đã cố gắng đạt được hiệu quả tương tự và tôi không thể.

Tôi đã làm điều đó với một plugin có tên html2canvas và stackBlur, mà tôi đã tìm thấy nó ở đây: http://jsfiddle.net/WtQjY/201/ .

Tôi không phải là tác giả của các plugin. Và đây chỉ là một đoạn mã. Tôi đã thay đổi nó để đơn giản hơn và nhanh hơn:

.mơ hồ{
    -webkit-filter: Blur (7px);
-moz-bộ lọc: mờ (7px);
-o-lọc: mờ (7px);
-ms-filter: Blur (7px);
bộ lọc: làm mờ (7px);

}

/////////////////////////////////////
// bao gồm thư viện jquery
// jQuery
$ (tài liệu). yet ({
$ ('# YourButton'). Nhấp ({

$ ('# YourContainer'). ToggleClass ('mờ');

});
});

Nó vẫn rất chậm nhưng nó hoạt động.

Vì vậy, tôi đã tạo phiên bản riêng của kịch bản này mà tôi nghĩ rằng tôi muốn chia sẻ. Tôi đã tạo hai hình nền và gắn một trong số chúng vào div con và sau đó là một phiên bản rõ nét và rõ ràng cho nền chính. Chỉ cần đặt nền của cả hai đối tượng thành cố định và căn giữa và chúng sẽ khớp với nhau.

Đây là bản demo: http://www.palandforsale.us/frosted-lass/

Nếu tôi hiểu chính xác câu hỏi của bạn, tôi không nghĩ bạn có thể. 'Blur' là một hoạt động được thực hiện trong một phần mềm, mỗi phần theo cách riêng của chúng. Làm thế nào phác thảo áp dụng mờ có thể là một cách khác với cách Photoshop hoặc Google Chrome làm.

Do đó, bạn không thể xuất hình ảnh với 'mờ'. Blur luôn tương tác với những gì đằng sau nó và nó không thể được xuất từ ​​ứng dụng bạn đang tạo.

1. Tạo một lớp màu xám 50% trên lớp bạn muốn tạo lớp mờ và mờ.
2. Làm đầy nó với tiếng ồn, số lượng tùy thuộc vào nhu cầu của bạn
3. Làm mờ nó với Gaussian Blur khi bạn cần.
4. Trên lớp này, bạn có thể thêm một lớp đường cong và điều chỉnh các giá trị trắng và đen bằng cách kéo xuống đầu trắng hoặc đẩy đầu đen của lớp đường cong lên.

Hai lớp này sẽ cho hiệu ứng mờ và mờ. Thứ tự của hai lớp này có thể được thay đổi.

Tạo một hành động sao chép hình ảnh và áp dụng độ mờ Gaussian. Đây là cách PS duy nhất để làm điều này tôi tin.