Cách lưu PNG trong suốt không viền trắng

Kênh alpha thực sự lưu gì

Một pixel PNG chứa bốn số: đỏ, xanh lá, xanh dương và alpha. Alpha là độ đục, từ 0 (vô hình) đến 255 (hoàn toàn đặc). Chi tiết quan trọng là pixel giữ các giá trị RGB ngay cả khi alpha thấp. Một pixel có thể trắng hoàn toàn và trong suốt 90 phần trăm. Bạn hầu như không thấy nó, cho đến khi ghép lên nền tối, lúc đó màu trắng nhạt mới hiện ra.

Mọi vấn đề viền trắng là biến thể cùng chuyện: pixel cạnh bán trong suốt giữ màu sai bên dưới.

Nguyên nhân 1: Cạnh khử răng cưa pha với trắng

Ảnh số có pixel vuông; vật thực có cạnh cong. Khử răng cưa nối khoảng cách bằng pixel cạnh pha màu vật với thứ phía sau. Pixel được logo đỏ phủ 40 phần trăm trên trang trắng được lưu hồng nhạt: 40 phần trăm đỏ pha 60 phần trăm trắng.

Bây giờ hãy xóa nền. Công cụ xóa nền thông thường xóa các điểm ảnh gần giống màu nền và giữ phần còn lại. Điểm ảnh hồng nhạt của bạn không đủ gần trắng thuần để bị xóa, nên vẫn tồn tại với độ đục hoàn toàn và vẫn hồng nhạt. Nhân điều này với mọi điểm ảnh dọc đường viền, bạn sẽ có một viền sáng dày một điểm ảnh chạy quanh toàn bộ hình.

Công cụ xóa tốt hơn làm thông minh hơn: thay vì giữ hoặc xóa nhị phân, đặt pixel thành alpha 40 phần trăm và cố phục hồi đỏ bên dưới. Nhưng phục hồi màu thật từ pha trộn là suy đoán, và lượng trắng loại được quyết định cạnh sạch đến đâu.

Nguyên nhân 2: Định dạng bỏ kênh alpha

JPEG không có alpha. Hoàn toàn không. Định dạng ba kênh cho ảnh chụp không có nơi lưu trong suốt. Khi lưu ảnh trong suốt thành JPG, mã hóa làm phẳng lên nền, gần luôn trắng, và trong suốt mất vĩnh viễn.

Tai nạn quen: PNG sạch rồi khâu sau thành JPG, CMS đổi cỡ, chat nén đính kèm, công cụ xuất preview, email. Trong suốt thành hộp trắng; xóa trắng lần nữa cắt trên mép JPEG đã nén, rối hơn gốc.

Hãy chú ý hàng GIF. Độ trong suốt một bit nghĩa là mỗi điểm ảnh hoặc hoàn toàn hiện hoặc hoàn toàn ẩn — không có mức phủ một phần, nên không thể khử răng cưa và mọi cạnh đều răng cưa. Chuyển PNG mượt sang GIF là đổi quầng mềm lấy cạnh bậc thang.

Nguyên nhân 3: Nhiễm màu nền ở cạnh

Một số trình sửa lưu ảnh trong suốt với màu “matte”: RGB của pixel hoàn toàn trong suốt đặt thành màu chọn, thường trắng, vì alpha bằng không nên tưởng không ảnh hưởng. Thường đúng. Nhưng một số bộ vẽ và đa số thao tác đổi cỡ lấy trung bình pixel lân cận bao gồm các giá trị RGB của chúng, có hoặc không có trọng số alpha. Đổi kích thước đơn giản kéo màu trắng đó từ pixel vô hình vào và làm nó lan ra mép thấy được.

Ảnh hoàn hảo nguyên cỡ có thể có quầng khi thu thumbnail. Đúng là alpha premultiplied: RGB đã nhân alpha để trung bình đúng. Đa số browser/engine mới đúng, pipeline cũ và mã riêng có thể không.

Cách sửa theo ưu tiên

1. Đừng tạo ra vấn đề ngay từ đầu

Nếu kiểm soát nguồn, đây là tốt nhất. Xuất đồ họa từ công cụ tạo với nền trong suốt từ đầu, thay vì làm phẳng trắng rồi cắt trắng lại. Công cụ vector, kết xuất 3D và app thiết kế đều xuất alpha. Mỗi bước xóa là một cơ hội sai.

Nếu tạo bằng AI, yêu cầu nền trong suốt rõ hoặc màu nền không có ở chủ thể. Magenta sáng truyền thống vì không gì tự nhiên màu đó, nên tách rõ.

2. Xóa nền với một màu tương phản

Quầng trắng vì nền trắng. Trên magenta hay xanh neon, mép dư màu đó, có thể xấu hơn nhưng dễ phát hiện/sửa hơn vì khác xa mọi màu chủ thể.

Của chúng tôi Xóa nền hoạt động bằng cách lấy mẫu pixel góc để xác định màu nền và xóa pixel khớp màu, rồi xuất PNG trong suốt. Nó xử lý tốt nền phẳng, một màu — ảnh sản phẩm trên trắng, logo trên một màu, đồ họa xuất từ công cụ. Nó không được thiết kế cho ảnh có nền phức tạp hoặc chuyển sắc, nơi phương pháp phân đoạn chủ thể mới phù hợp.

3. Thu kênh alpha vào một pixel

Nếu quầng đã nằm trong ảnh, cách đáng tin trực tiếp nhất là thu vùng nhìn thấy để vòng nhiễm ở ngoài. Trong editor: tải alpha làm vùng chọn, thu một pixel, đảo rồi xóa. Photoshop là Layer → Matting → Defringe gần như tự làm; GIMP có Layer → Transparency → Threshold Alpha và tùy chọn Script-Fu remove-antialiasing.

Đánh đổi thật: xóa một pixel chi tiết mép. Logo 2000 pixel không ai thấy. Biểu tượng 32 pixel, một pixel là 3% rộng, hình mỏng rõ. Chỉnh theo ảnh.

4. Đổi màu cạnh thay vì xóa

Tốt hơn cho ảnh nhỏ. Thay vì xóa vòng bán trong suốt, thay RGB bằng màu đáng lẽ có: màu pixel bên trong liền kề, giữ nguyên alpha. Cạnh giữ độ mềm và hình dạng; chỉ nhiễm màu biến mất. Defringe của Photoshop với bán kính nhỏ xấp xỉ cách này, và triển khai trực tiếp khá đơn giản nếu dùng mã xử lý dữ liệu ảnh canvas.

5. Ghép lên màu đích

Đôi khi câu trả lời thật là không cần trong suốt. Nếu logo chỉ xuất hiện trên một nền đã biết, gộp lên đúng màu đó và dùng ảnh thường. Không alpha, quầng hay rủi ro định dạng. Không hẳn là cách lách, mà là nhận ra độ trong suốt chỉ đáng sự phức tạp khi nền thực sự thay đổi.

Kiểm tra công việc

Trước khi coi ảnh tách nền đã hoàn thành, hãy kiểm tra danh sách này. Chỉ mất một phút và phát hiện gần như mọi vấn đề.

1. Xem trên nền đen và nền trắng. Mọi quầng sẽ rõ trên một trong hai nền. Bàn cờ xem trước trong trình chỉnh sửa dễ đánh lừa vì xám trung bình che cả viền sáng và tối.
2. Xem ở mức 100 phần trăm và khi thu nhỏ. Quầng chỉ xuất hiện khi đổi tỷ lệ cho thấy nhiễm màu nền ở bước đổi kích thước, không phải trong tệp.
3. Xác nhận tệp thực là PNG hoặc WebP. Kiểm tra phần mở rộng và byte thực, không chỉ thông tin CMS. Tệp có tên logo.png đã qua quy trình JPEG là lỗi phổ biến và khó hiểu.
4. Thử tại nơi dùng thực. Trình duyệt, engine trò chơi và quy trình in ghép ảnh khác nhau. Phép thử có giá trị duy nhất là nơi ảnh thực sự được dùng.
5. Kiểm tra lớp toàn canvas lạc vào. Lớp nền gần như vô hình ở độ đục 1 phần trăm không hiện trong trình chỉnh sửa nhưng tạo lớp màu mờ trong bản xuất.

Câu hỏi thường gặp