Cách chuyển đổi PSD sang PNG (Làm phẳng Layer đúng cách)
Tại sao chuyển đổi PSD sang PNG lại khó hơn bạn tưởng
Một file PSD không phải là một hình ảnh đơn lẻ. Nó là một công thức phức tạp: một chồng các layer, adjustment layer, mask, smart object, và blending mode chỉ kết hợp với nhau khi một ứng dụng đủ khả năng như Photoshop xử lý chúng. Nếu bạn cố gắng chuyển đổi một file PSD sang PNG mà không hiểu điều này, mọi thứ sẽ không như ý muốn. Bạn có thể nhận được một nền trắng bệt ở những chỗ đáng lẽ phải trong suốt, thấy văn bản bị thiếu vì layer font chữ không được render, hoặc nhận thấy sự thay đổi màu sắc kỳ lạ vì một adjustment layer đã bị bỏ qua. PNG là một định dạng raster đơn giản. Nó lưu trữ một lưới các pixel, chứ không phải một danh sách các chỉ dẫn. Việc chuyển đổi thực chất là một công việc render. Bạn đang gộp tất cả các chỉ dẫn của Photoshop đó thành một lưới pixel cuối cùng, sau đó lưu lưới đó dưới dạng file PNG không mất dữ liệu. Chất lượng hình ảnh cuối cùng của bạn hoàn toàn phụ thuộc vào việc quá trình render đó xử lý mọi thứ được đóng gói trong file nguồn tốt đến mức nào. Những lỗi phổ biến nhất rất dễ nhận ra một khi bạn biết cần tìm ở đâu. Vùng trong suốt thường bị thay thế bằng một màu trắng hoặc đen đặc. Các hiệu ứng layer như đổ bóng (drop shadows) và phát sáng (glows) có thể biến mất hoàn toàn. Smart object có thể được render ở độ phân giải thấp vì chúng không được rasterize trước. Và các profile màu bị loại bỏ có thể làm cho hình ảnh của bạn trông nhợt nhạt trên các màn hình đã được cân chỉnh. Biết trước những cạm bẫy này sẽ giúp bạn tiết kiệm rất nhiều bực bội và công sức làm lại.
Làm phẳng Layer trong Photoshop trước khi xuất file
Nếu bạn có Adobe Photoshop, việc làm phẳng và xuất file thủ công cho bạn toàn quyền kiểm soát. Lựa chọn quan trọng là giữa 'Flatten Image' và 'Merge Visible'. Chúng nghe có vẻ giống nhau, nhưng chúng làm những việc rất khác nhau. 'Flatten Image' (Layer > Flatten Image) gộp tất cả các layer—kể cả những layer bị ẩn—và lấp đầy tất cả các vùng trong suốt bằng màu trắng. Đối với một file PNG cần nền trong suốt, đây gần như luôn là một lựa chọn sai lầm. Thay vào đó, hãy sử dụng 'Merge Visible' (Shift+Ctrl+Alt+E trên Windows / Shift+Cmd+Option+E trên Mac). Phím tắt tuyệt vời này sẽ dập một bản sao đã gộp của tất cả các layer đang hiển thị vào một layer mới ở trên cùng của chồng layer, để lại các layer gốc của bạn nguyên vẹn bên dưới. Sau đó, bạn có thể chỉ xuất layer mới đã gộp đó, với đầy đủ độ trong suốt. Đối với việc xuất file, đừng dùng lệnh 'Save As' cũ. Hãy vào thẳng File > Export > Export As. Trong hộp thoại đó, đặt Định dạng (Format) thành PNG và đảm bảo rằng ô 'Transparency' đã được tích. Để sử dụng trên màn hình, 72 PPI là tiêu chuẩn. Đối với bất cứ thứ gì có độ phân giải cao, như cho in ấn hoặc màn hình Retina, hãy sử dụng 144 hoặc 300 PPI. Hãy nhớ, giá trị PPI chỉ là metadata; một canvas 2000×2000 pixel ở 72 PPI sẽ xuất ra một file PNG 2000×2000 pixel. Kích thước vật lý không thay đổi. Một mẹo chuyên nghiệp cuối cùng: nếu file PSD của bạn sử dụng một profile màu dành cho in ấn, như CMYK hoặc Adobe RGB 1998, bạn phải chuyển nó sang sRGB trước khi xuất cho web. Hãy vào Edit > Convert to Profile, chọn sRGB IEC61966-2.1, và sử dụng rendering Relative Colorimetric với tùy chọn Black Point Compensation được chọn. Bỏ qua bước này là lý do số một khiến các thiết kế được chăm chút cẩn thận trông xỉn màu và nhợt nhạt trên trình duyệt web.
Chuyển đổi PSD sang PNG trực tuyến với CocoConvert
Không phải ai cũng đăng ký gói Photoshop, và ngay cả khi có, việc chuyển đổi cả một thư mục đầy file PSD từng cái một là một công việc cực kỳ nhàm chán. Công cụ [chuyển đổi PSD sang PNG](/convert/psd-to-png) của CocoConvert giải quyết vấn đề này bằng cách xử lý việc render trên máy chủ. Bạn chỉ cần tải file PSD lên và nhận lại một file PNG đã được làm phẳng đúng cách, không cần phần mềm thiết kế nào trên máy của bạn. Công cụ chuyển đổi sẽ gộp một cách thông minh tất cả các layer hiển thị trong khi vẫn bảo toàn kênh alpha. Điều đó có nghĩa là các vùng trong suốt trong file Photoshop của bạn vẫn sẽ trong suốt trong file PNG cuối cùng, mà không bị cái nền trắng đáng ghét đó. Nó xử lý đáng tin cậy các loại layer phổ biến, bao gồm hình ảnh raster, layer văn bản (được render ở độ phân giải gốc của tài liệu), và các adjustment layer cơ bản như Levels, Curves, và Hue/Saturation. Cách sử dụng rất đơn giản. Truy cập /convert/psd-to-png, kéo thả file PSD của bạn vào trang hoặc nhấp vào 'Choose File', và nhấn Convert. Công cụ hỗ trợ các file lên đến 50 MB. Quá trình xử lý thường chỉ mất 5–15 giây cho một file thông thường, sau đó bạn sẽ nhận được một liên kết download cho file PNG không mất dữ liệu đầu ra. Nếu bạn đang xử lý một loạt file, như một bộ icon hoặc UI kit, bạn có thể tải lên nhiều file PSD cùng một lúc. Mỗi file được xử lý riêng, và bạn có thể tải về các file PNG kết quả một cách riêng lẻ hoặc tải tất cả chúng trong một file nén ZIP duy nhất. Đó là một cách tiết kiệm thời gian khổng lồ.
Những gì CocoConvert không xử lý được (Thành thật về điều này)
Các công cụ tự động đều có giới hạn, và biết trước những giới hạn này sẽ tốt hơn là phát hiện ra chúng sau khi đã giao sản phẩm cho khách hàng. Smart Object là thứ chính cần để ý. Nếu file PSD của bạn chứa các Smart Object được nhúng hoặc liên kết, CocoConvert sẽ render chúng ở kích thước trong tài liệu, chứ không phải ở độ phân giải gốc của chúng. Ví dụ, một đồ họa vector 4000px được đặt làm Smart Object trong một canvas 1000px sẽ được render ở kích thước 1000px. Bạn không mất chất lượng so với canvas, nhưng bạn cũng không tận dụng được lợi thế về độ phân giải nội tại cao hơn của Smart Object. Để làm được điều đó, bạn cần rasterize Smart Object trong Photoshop trước (Layer > Smart Objects > Rasterize). Layer 3D và layer video không được hỗ trợ. Bất kỳ file PSD nào chứa các loại layer này sẽ bị bỏ qua các layer cụ thể đó trong file PNG cuối cùng, hiển thị bất cứ thứ gì nằm ở lớp dưới chúng. Một số blending mode phức tạp có thể hơi khó nhằn. Cụ thể, Dissolve, Hard Mix, và một số chế độ dựa trên độ sáng (luminosity) có thể render hơi khác so với trong Photoshop. Sự khác biệt thường nhỏ (vài giá trị màu trên mỗi kênh), nhưng đối với công việc đòi hỏi độ chính xác đến từng pixel, bạn nên luôn xác minh đầu ra so với một bản xuất tham chiếu từ Photoshop. Các file PSD hệ màu CMYK được tự động chuyển đổi sang sRGB trong quá trình xử lý. Việc chuyển đổi này sử dụng một profile ICC tiêu chuẩn, chính xác cho hầu hết các mục đích sử dụng trên web và màn hình. Tuy nhiên, nó sẽ không hoàn toàn khớp với một quy trình làm việc được cân chỉnh tùy chỉnh cho in ấn. Nếu bạn đang chuẩn bị tài sản cho in offset, hãy tự thực hiện việc chuyển đổi màu trong Photoshop để có quyền kiểm soát tối đa.
Chọn cài đặt PNG phù hợp: Độ sâu bit và nén
PNG có hai loại chính, 8-bit và 24-bit (thường được gọi là PNG-8 và PNG-24), và việc chọn đúng loại là rất quan trọng. PNG-24 là tùy chọn chất lượng cao. Nó lưu trữ 16.7 triệu màu cộng với một kênh alpha 8-bit đầy đủ cho độ trong suốt mượt mà. Đây là thứ bạn cần cho ảnh chụp, các dải màu chuyển sắc phức tạp, và bất kỳ hình ảnh nào có các biến thể màu sắc tinh tế. CocoConvert mặc định xuất ra PNG-24, đây là lựa chọn chính xác để chuyển đổi các file PSD phong phú. PNG-8 là lựa chọn thay thế gọn nhẹ hơn. Nó bị giới hạn trong bảng màu 256 màu và tạo ra các file nhỏ hơn nhiều—thường nhỏ hơn 60–70%. Sự đánh đổi là hiện tượng dải màu (banding) có thể nhìn thấy trên các dải màu chuyển sắc và độ trong suốt kiểu 'tất cả hoặc không có gì' (một pixel hoặc là hoàn toàn trong suốt hoặc hoàn toàn mờ đục, không có trạng thái ở giữa). PNG-8 chỉ phù hợp với các đồ họa đơn giản như icon màu phẳng với các cạnh sắc nét. Để có được một file PNG-8, bạn cần xử lý đầu ra PNG-24 trong một công cụ như Photoshop hoặc sử dụng một tiện ích dòng lệnh như pngquant. Nén PNG luôn là nén không mất dữ liệu (lossless), có nghĩa là nó không bao giờ làm giảm chất lượng hình ảnh. Cài đặt mức độ nén hoàn toàn là sự đánh đổi giữa kích thước file và thời gian lưu file. CocoConvert tự động sử dụng một mức nén cân bằng. Nếu bạn bị ám ảnh bởi hiệu suất và cần kích thước file nhỏ nhất tuyệt đối cho một dự án web, bạn có thể giảm thêm 10–20% nữa bằng cách cho file đầu ra chạy qua một công cụ tối ưu hóa chuyên dụng như oxipng hoặc pngcrush. Những công cụ này nén lại dữ liệu một cách mạnh mẽ hơn mà không động đến một pixel nào. Cuối cùng, hãy luôn tự hỏi liệu PNG có phải là định dạng phù hợp hay không. Nếu bạn không cần độ trong suốt, một file JPEG chất lượng cao sẽ nhỏ hơn đáng kể. Để sử dụng trên web hiện đại với độ trong suốt, WebP và AVIF cung cấp khả năng nén vượt trội. Nhưng đối với các file gốc, bàn giao thiết kế, và bất cứ thứ gì có thể cần chỉnh sửa lại, PNG-24 vẫn là vua.
Xử lý độ trong suốt đúng cách: Nhìn sâu hơn
Độ trong suốt của PNG hoạt động thông qua một kênh alpha—một bản đồ thang độ xám 8-bit bổ sung, trong đó mỗi pixel được gán một giá trị trong suốt từ 0 (hoàn toàn trong suốt) đến 255 (hoàn toàn mờ đục). Đây là thứ cho phép các hiệu ứng đổ bóng có cạnh mềm và văn bản được khử răng cưa mượt mà trông đẹp trên mọi nền. Một trong những lỗi chuyển đổi phổ biến nhất liên quan đến alpha đã nhân trước (pre-multiplied alpha). Trong một hình ảnh đã nhân trước, các giá trị màu đã được trộn sẵn với một màu nền, điều này có thể dẫn đến các quầng sáng hoặc tối xung quanh các cạnh nếu ứng dụng xem ảnh mong đợi straight alpha. Bất kỳ ai đã từng vật lộn với những đường viền đen xấu xí trên icon của họ đều hiểu nỗi đau này. CocoConvert xuất ra file PNG với straight alpha, đây là tiêu chuẩn được các trình duyệt web và gần như tất cả các phần mềm hiện đại mong đợi. Để chắc chắn rằng độ trong suốt của bạn đã tồn tại sau khi chuyển đổi, hãy kiểm tra đầu ra. Cách nhanh nhất là mở file PNG trong một trình duyệt web có nền màu. Chỉ cần tạo một file HTML cực kỳ đơn giản với thẻ body có màu và một thẻ `<img>` trỏ đến file PNG của bạn. Nếu các phần trong suốt hiển thị màu nền và các cạnh sạch sẽ, bạn đã thành công. Nếu bạn thấy một hộp trắng hoặc các quầng tối, kênh alpha đã bị xử lý sai. Ngoài ra, hãy kiểm tra layer Background của file PSD—layer mặc định có biểu tượng ổ khóa. Layer này luôn mờ đục 100%. Nếu bạn cần độ trong suốt trong file PNG cuối cùng, bạn phải xóa layer Background đó hoặc chuyển nó thành một layer thông thường (chỉ cần nhấp đúp vào nó trong bảng Layers của Photoshop và nhấn OK). CocoConvert đủ thông minh để kiểm tra điều này; nếu một file PSD chỉ có một layer Background mờ đục, file PNG đầu ra sẽ không có kênh alpha, đây là hành vi chính xác và hiệu quả hơn.
Quy trình làm việc thực tế cho kết quả nhất quán
Nếu bạn thường xuyên chuyển đổi file PSD cho một UI kit, thư viện thương hiệu, hoặc công việc cho khách hàng, một quy trình làm việc nhất quán là người bạn tốt nhất của bạn. Nó tiết kiệm thời gian và loại bỏ những sai lầm ngớ ngẩn. Đối với các file đơn lẻ hoặc các lô nhỏ khi có sẵn Photoshop, hãy bám sát phương pháp thủ công. Sử dụng lệnh dập Merge Visible (Shift+Cmd+Option+E), kiểm tra kỹ profile màu là sRGB, và sau đó sử dụng Export As với tùy chọn trong suốt được bật. Quá trình này mất chưa đến một phút cho mỗi file và cho bạn quyền kiểm soát tối đa. Đối với các lô lớn hoặc khi bạn không có Photoshop, hãy sử dụng công cụ [chuyển đổi PSD sang PNG](/convert/psd-to-png) của CocoConvert. Nó sẽ làm phần việc nặng nhọc. Trước khi tải lên, bạn nên nhanh chóng quét qua các file PSD của mình để tìm các Smart Object phức tạp hoặc layer 3D. Nếu độ chính xác đến từng pixel là không thể thương lượng, hãy rasterize các layer đó trước. Sau khi tải xuống lô file, hãy kiểm tra ngẫu nhiên một vài file PNG kết quả trong trình duyệt để xác nhận độ trong suốt trông ổn. Đối với các tài sản web cho sản phẩm thực tế, kích thước file là tất cả. Sau khi chuyển đổi, hãy cho các file PNG của bạn chạy qua một công cụ tối ưu hóa như oxipng. Một lệnh đơn giản như `oxipng -o 4 --strip safe *.png` mang lại sự cân bằng tuyệt vời giữa độ nén và tốc độ, và loại bỏ an toàn các metadata không cần thiết. Cuối cùng, hãy giúp team của bạn (và cả chính bạn trong tương lai) một việc: ghi lại các cài đặt của bạn. Khi bạn bàn giao tài sản, hãy kèm theo một ghi chú ngắn về định dạng. Chẳng hạn như, 'Tất cả các file PNG đều là sRGB, PNG-24, có độ trong suốt, đã được tối ưu hóa bằng oxipng -o4'. Bước đơn giản này ngăn chặn cuộc hội thoại đáng sợ 'tại sao mấy màu này trông kỳ lạ trên màn hình của tôi?' làm lãng phí thời gian của mọi người.