Cách tạo lại hiệu ứng làm mờ iOS7 này


Câu trả lời:


29

Phần dưới cùng là gaussian mờ và có lớp phủ màu trắng bán trong suốt .

Bước 1: Chọn khu vực lớp phủ trên nền (ảnh gốc) và áp dụng độ mờ gaussian bán kính 12px.

Bước2: Tạo một lớp mới, chọn cùng một phần cho lớp phủ, tô nó với màu trắng và cung cấp cho lớp này độ mờ 66%

Đã sao chép với phần trên của hình ảnh tham chiếu của bạn:
EDIT: tham số mới để khớp với bản gốc

nhập mô tả hình ảnh ở đây


Tôi cho rằng điều này được thực hiện bằng mã, nếu đây là ảnh chụp màn hình. Tôi đoán vấn đề là liệu anh ấy / cô ấy có yêu cầu thực hiện điều này trong một tác phẩm hoặc mockup hay thực hiện nó trực tuyến hay không.
Eric

@Peter Walser làm thế nào để tạo vùng phủ sẽ được áp dụng Gaussian nếu có nhiều lớp hơn? Cần đầu tiên để hợp nhất chúng?
Fred Collins

1
@FredCollins: có, hoặc bạn hợp nhất chúng trước và làm mờ vùng chọn hoặc bạn tạo một lớp mới với một bản sao của lựa chọn được hợp nhất (sẽ cần phải được tạo lại mỗi khi thay đổi một lớp).
Peter Walser

@PeterWalser cảm ơn. Câu hỏi cuối cùng. Để tạo lớp trong suốt mới với độ mờ 66% tôi sử dụng công cụ hình chữ nhật nhưng tôi cảm thấy có một cách tốt hơn. Giống như tạo mặt nạ / cắt mặt nạ cho lớp mờ hoặc một cái gì đó tương tự. Bạn có đề nghị gì?
Fred Collins

Với một lớp riêng biệt, bạn có thể nhanh chóng điều chỉnh độ mờ tổng thể. Giải pháp mặt nạ độ mờ có kết quả tương tự, ở đây bạn thậm chí có thể điều chỉnh độ mờ trên mỗi pixel. Và, tất nhiên bạn có thể kết hợp cả hai cách tiếp cận (mặt nạ + độ trong suốt của lớp). Bất cứ điều gì làm việc tốt nhất cho bạn.
Peter Walser

7

Bạn đã không xác định chương trình hoặc công nghệ bạn đang sử dụng. Vì vậy, trong khi Peter mô tả một cách hay để làm điều đó với Photoshop , tôi muốn thêm rằng hiệu ứng này cũng có thể được tạo bằng CSS3.

Đây là một đỉnh cao trong CSS cần thiết:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

Không nói rằng đây là cách bạn nên làm điều đó trên thực tế, cá nhân tôi sẽ sử dụng thủ tục của Peter.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.