Cách xuất từng lớp (layer) PSD ra PNG nền trong suốt

Đôi khi một bức ảnh phẳng là không đủ. Lập trình viên cần logo, sản phẩm và tiêu đề thành các ảnh riêng. Người làm motion design muốn từng thành phần của poster chuyển động độc lập. Họa sĩ game cần từng mảnh của một sprite sheet. Trong mọi trường hợp, việc cần làm đều giống nhau: biến mỗi lớp của file PSD thành một file PNG riêng, nền trong suốt, mà không làm hỏng cách các mảnh khớp với nhau.

Nếu bạn chỉ cần toàn bộ thiết kế thành một ảnh duy nhất, công cụ chuyển PSD sang PNG làm việc đó chỉ trong một bước. Bài hướng dẫn này nói về cách lấy từng lớp ra một cách gọn gàng, và về những thiết lập quyết định các file PNG đó có dùng được về sau hay không.

Trả lời nhanh

• Photoshop, tất cả các lớp: File → Export → Layers to Files, chọn PNG-24, giữ Transparency bật, và chỉ đánh dấu Trim Layers nếu bạn muốn cắt sát.
• Photoshop, vài lớp: chọn các lớp, nhấp chuột phải, chọn Quick Export as PNG. Mỗi lớp thành một file PNG đã cắt sát, đặt theo tên lớp.
• Không có Photoshop: mở công cụ PSD sang PNG miễn phí, chọn xuất mọi lớp và tải về một file ZIP. Công cụ chạy trong trình duyệt, xử lý được file PSD và PSB, tối đa 50 file một lần, và không cần đăng nhập.
• Photopea hoặc GIMP: làm được, nhưng từng lớp một. Ổn với vài lớp, nhưng chậm nếu có tới năm mươi lớp.

Trước khi xuất: bốn quyết định

1. Giữ kích thước canvas hay cắt sát?

Lựa chọn này quyết định cách bạn dùng lại các file PNG, vì vậy hãy chốt nó trước tiên.

• Kích thước canvas: mọi file PNG có cùng kích thước với tài liệu, lớp nằm đúng vị trí ban đầu và phần còn lại trong suốt. Xếp chồng các file trong bất kỳ phần mềm chỉnh sửa, công cụ dựng video hay slide nào, chúng đều khớp chính xác.
• Cắt sát (trim): mỗi file PNG được cắt vừa khít phần pixel nhìn thấy được của lớp. File nhẹ hơn và dễ đưa vào trang web hay ứng dụng, nhưng thông tin vị trí bị mất, nên bạn sẽ cần tọa độ để dựng lại bố cục.

Kích thước canvas: 1200 × 900 px, sản phẩm vẫn nằm đúng vị trí như trong thiết kế.

Cắt sát: 722 × 429 px, cắt vừa khít phần pixel của chính lớp đó.

Cắt sát sẽ cắt theo mọi pixel không hoàn toàn trong suốt. Một bóng đổ mềm hay một quầng sáng mờ cũng được tính, nên file PNG cắt sát có thể lớn hơn vật thể bạn nhìn thấy.

2. Xuất những lớp nào?

• Lớp đang hiện hay lớp ẩn: lớp ẩn thường là phiên bản cũ hoặc phương án thay thế. Hãy quyết định có cần chúng hay không trước khi xuất ra cả một thư mục đầy đồ thừa.
• Từng lớp hay cả nhóm: một nút bấm gồm hình khối, icon và nhãn chữ có thể hữu ích hơn khi là một ảnh đã gộp thay vì ba file riêng.
• Lớp điều chỉnh: loại lớp này không có pixel riêng mà chỉ thay đổi các lớp bên dưới. Khi xuất riêng, một lớp sẽ không mang theo tác động của lớp điều chỉnh, còn bản thân lớp điều chỉnh thì không cho ra thứ gì dùng được.
• Clipping mask: một lớp được clip khi xuất riêng sẽ mất hình dạng mà nó được clip vào. Hãy xuất lớp gốc và các lớp được clip cùng nhau thành một nhóm, hoặc gộp chúng trên một bản sao.
• Chế độ hòa trộn (blend mode): bóng đổ đặt ở Multiply hay quầng sáng đặt ở Screen chỉ trông đúng khi nằm trên các lớp bên dưới. Khi thành một file PNG riêng, chúng được vẽ ở chế độ Normal và có thể trông như một vệt tối hoặc sáng.

3. Tên file và thư mục

Tên lớp sẽ trở thành tên file, nên bạn sẽ nhận được những file kiểu “Layer 47 copy 3.png” nếu không đổi tên trước. Bỏ ra vài phút trong bảng Layers sẽ giúp bạn khỏi mất cả giờ đoán mò về sau.

• Đặt tên lớp theo đúng nội dung của nó: “Logo”, “Tiêu đề”, “Bóng sản phẩm”.
• Tránh các ký tự mà hệ thống file không chấp nhận, như / \ : * ? " < > |. Công cụ tốt sẽ tự động thay thế chúng, nhưng tên file sẽ khó đọc hơn.
• Cẩn thận với tên trùng. Hai lớp cùng tên “Shape 1” có thể ghi đè lên nhau ở một số công cụ, hoặc bị thêm số vào tên ở công cụ khác.
• Nếu thứ tự quan trọng, ví dụ cho hoạt ảnh, hãy dùng công cụ tự đánh số file hoặc tự thêm 01, 02.

4. Kích thước, DPI và màu sắc

• Trên màn hình, pixel mới là thứ quan trọng. Một file PNG 1200 × 900 có cùng số pixel dù ở 72 hay 300 DPI; DPI chỉ cho máy in biết nên in lớn cỡ nào.
• Thu phóng ngay khi xuất, đừng để sau. Nếu thiết kế được làm ở 2× cho màn hình mật độ điểm ảnh cao, xuất ở 50% sẽ cho bạn bộ 1× chỉ trong một lần. Thu nhỏ một lần từ bản gốc cho kết quả sắc nét hơn so với chỉnh lại kích thước các file đã xuất.
• Độ sâu bit: tài liệu 16-bit và 32-bit thường được xuất thành PNG 8-bit, đúng với định dạng mà trình duyệt và phần lớn ứng dụng cần.
• Màu sắc: với web, sRGB là lựa chọn an toàn. Một file in CMYK chuyển sang PNG có thể trông hơi khác so với bản xem trước trên màn hình của Photoshop.

Cách 1: Layers to Files trong Photoshop

Cách kinh điển để xuất mọi lớp trong một lần chạy:

1. Ẩn các lớp bạn không muốn xuất, nếu có.
2. Chọn File → Export → Layers to Files.
3. Chọn thư mục lưu ở Destination và, nếu muốn, một tiền tố tên file ở File Name Prefix.
4. Đánh dấu Visible Layers Only nếu bạn đã ẩn lớp ở bước 1.
5. Đặt File Type là PNG-24. PNG-8 giới hạn mỗi file ở 256 màu và cho viền trong suốt thô hơn.
6. Giữ Transparency bật. Đánh dấu Trim Layers nếu muốn file cắt sát; bỏ trống nếu muốn file theo kích thước canvas.
7. Nhấn Run và chờ. Tài liệu lớn có thể mất vài phút.

Mọi file sẽ nằm chung trong một thư mục. Photoshop thêm tiền tố và một số thứ tự vào tên của từng lớp, và không tạo lại các nhóm lớp thành thư mục.

Cách 2: Quick Export và Export As trong Photoshop

Với vài lớp được chọn, các lệnh xuất trong bảng Layers sẽ nhanh hơn:

• Quick Export as PNG: chọn một hoặc nhiều lớp (Ctrl-click trên Windows, Cmd-click trên Mac), nhấp chuột phải và chọn Quick Export as PNG. Mỗi lớp được lưu thành một file PNG cắt sát riêng, đặt theo tên lớp. Bạn đặt định dạng và thư mục lưu mặc định trong File → Export → Export Preferences.
• Export As: nhấp chuột phải và chọn Export As khi bạn cần kiểm soát kỹ hơn. Bạn có thể đặt định dạng, độ trong suốt, tỉ lệ như 50% hay 200%, kích thước canvas chính xác, và có chuyển sang sRGB hay không.

Nếu chọn một nhóm thay vì các lớp bên trong, Photoshop sẽ xuất cả nhóm thành một file PNG đã gộp. Đó là cách nhanh nhất để khắc phục các vấn đề về clipping mask và chế độ hòa trộn nêu ở trên.

Cách 3: Xuất miễn phí trên trình duyệt bằng PSD sang PNG của Image2Layer

Nếu bạn không có Photoshop, hoặc có cả một thư mục PSD cần xử lý, công cụ PSD sang PNG miễn phí sẽ xử lý hàng loạt ngay trong trình duyệt. Không cần đăng nhập, không tốn credit, và file được xử lý trên thiết bị của bạn thay vì bị tải lên.

1. Thêm file. Thả tối đa 50 file PSD hoặc PSB cùng lúc, mỗi file tối đa 500 MB.
2. Chọn nội dung cần lưu: toàn bộ ảnh, từng lớp, hoặc cả hai.
3. Chọn kích thước canvas hay cắt sát cho các file lớp. Lớp ẩn sẽ bị bỏ qua, trừ khi bạn đánh dấu tùy chọn để đưa chúng vào.
4. Chọn kích thước: 100% giữ nguyên mọi pixel; 50% hoặc 25% cho file nhẹ hơn để xem trước và làm mockup. Bạn cũng có thể giới hạn cạnh dài nhất.
5. Tải xuống các file PNG, hoặc tải toàn bộ trong một file ZIP.

Trong file ZIP, mỗi lớp là một ảnh PNG trong suốt mang tên lớp và được đánh số từ trên cùng của chồng lớp, nên thứ tự được giữ nguyên. Các lớp nằm trong những thư mục mang tên nhóm của chúng, và các ký tự mà hệ thống file không chấp nhận sẽ được thay thế. Độ phân giải lưu trong PSD cũng được ghi vào từng file PNG.

Muốn xem bên trong file trước? Hãy mở file PSD online bằng Trình xem PSD miễn phí để kiểm tra tên lớp, bật/tắt từng lớp và xem file dùng những font nào. Trình xem cũng có thể lưu lớp đang chọn thành PNG, hoặc mọi lớp đang hiển thị thành một file ZIP. Còn nếu toàn bộ ảnh bị trắng trong các ứng dụng khác, công cụ chuyển đổi sẽ dựng lại ảnh từ các lớp. Hướng dẫn mở file PSD không cần Photoshop giải thích vì sao lại xảy ra chuyện đó.

Cách 4: Photopea

Photopea mở file PSD kèm các lớp ngay trên trình duyệt. Photopea có thể xuất riêng lớp đang chọn thành PNG, còn File → Export as → PNG lưu ảnh đang hiển thị. Để lấy mọi lớp, hãy lặp lại thao tác đó cho từng lớp, hoặc ẩn tất cả trừ một lớp trước mỗi lần xuất. Cách này ổn với vài lớp; với hàng chục lớp, một công cụ xử lý hàng loạt sẽ nhanh hơn.

Cách 5: GIMP

GIMP mở được PSD kèm lớp và nhóm lớp. Lệnh File → Export As của GIMP lưu ảnh đang hiển thị, vì vậy:

• Một lớp theo kích thước canvas: Shift-click vào biểu tượng con mắt của lớp để chỉ hiện lớp đó, rồi chọn File → Export As và đặt tên file có đuôi .png.
• Một lớp cắt sát: chọn lớp, chọn Edit → Copy, rồi Edit → Paste as → New Image, sau đó Image → Crop to Content, rồi xuất file.

Các plug-in do cộng đồng phát triển có thể xuất lớp hàng loạt; hãy kiểm tra xem plug-in có hỗ trợ phiên bản GIMP của bạn không trước khi dựa vào nó.

So sánh các cách xuất lớp

Lỗi nền trong suốt thường gặp và cách khắc phục

File PNG bị nền trắng

Gần như chắc chắn thiết kế có một lớp nền không trong suốt, và lớp này được xuất như mọi lớp khác. Trong Photoshop, lớp “Background” bị khóa hoàn toàn không thể chứa vùng trong suốt. Hãy ẩn lớp đó, xóa nó trên một bản sao, hoặc bỏ nó ra khỏi lần xuất.

Viền bị quầng sáng hoặc tối (halo)

Mép mềm của một vật thể đã tách nền thường còn dính màu của nền cũ. Khi đặt lên nền mới, phần màu này lộ ra thành một đường viền mỏng sáng hoặc tối. Hãy xem trước các file PNG trên cả nền tối lẫn nền sáng trước khi bàn giao. Trong Photoshop, Layer → Matting → Defringe hoặc tùy chọn Decontaminate Colors trong Select and Mask sẽ làm sạch phần viền này.

Bóng đổ trông xám hoặc bẩn

Bóng đổ mềm vốn bán trong suốt, nên trông xám trên nền ô bàn cờ; điều đó là bình thường. Nếu nó trông sai trên nền cuối cùng, nhiều khả năng bóng đổ dùng chế độ Multiply trong PSD. Hãy dựng lại bóng đổ trong ứng dụng đích với cùng chế độ hòa trộn, hoặc xuất bóng đổ gộp chung với vật thể.

Vùng trong suốt hiện thành màu đen hoặc trắng

Một số trình xem ảnh và ứng dụng nhắn tin hiển thị pixel trong suốt thành màu đen hoặc trắng. Trước khi kết luận là xuất bị lỗi, hãy mở file PNG trong trình duyệt hoặc một phần mềm chỉnh sửa có hiển thị nền ô bàn cờ.

Lỡ chọn JPG

JPG không lưu được độ trong suốt, nên vùng trong suốt sẽ bị lấp bằng một màu đặc. Chỉ dùng JPG khi bạn muốn có nền màu đặc; công cụ PSD sang JPG cho phép bạn chọn màu nền đó. Với bản gửi duyệt mà mỗi lớp nằm trên một trang riêng, PSD sang PDF là định dạng phù hợp hơn.

Hướng dẫn và công cụ liên quan

• Cách mở file PSD không cần Photoshop giới thiệu các trình xem và phần mềm chỉnh sửa miễn phí trên mọi nền tảng.
• File PSD là gì? giải thích về lớp, mặt nạ và khi nào nên dùng PSD thay vì PNG.
• Bắt đầu từ một ảnh phẳng không có lớp nào? Ảnh thành lớp và chế độ AI của PNG sang PSD sẽ tách ảnh thành các lớp riêng; khác với các công cụ PSD miễn phí, tách lớp bằng AI có dùng credit. Hãy đọc trước bài cách biến ảnh phẳng thành file PSD nhiều lớp.
• Xem mọi công cụ miễn phí và công cụ AI trong tất cả công cụ.

Câu hỏi thường gặp về cách xuất lớp PSD ra PNG