Chuyển pixel art thành vector mà vẫn giữ cạnh sắc nét

Bạn có thể chuyển pixel art thành vector, nhưng trước tiên hãy quyết định các pixel vuông có cần còn nhìn thấy hay không. Để giữ diện mạo gốc, dựng lại ảnh thành lưới hoặc tranh ghép đối tượng. Để biến sprite thành minh họa mượt, dùng vector hóa đường viền. Đây là hai kết quả khác nhau, và công cụ đồ lại thông thường không thể chọn giúp bạn.

Nếu đang chỉnh sửa sprite trò chơi trong Scratch, nút Convert to Vector thay đổi chế độ chỉnh sửa mà không đồ lại bitmap. Dùng các bước kiểm tra khả năng chỉnh sửa trang phục Scratch để quyết định giữ pixel, vẽ lại một phần hay nhập hình SVG đã đồ lại, rồi so sánh tâm của trang phục thay thế với bản gốc.

Nếu mục tiêu thật sự chỉ là hiển thị pixel art sắc nét trên website hoặc trong trò chơi, có thể bạn không cần SVG. PNG có kích thước phù hợp và được phóng theo kiểu lân cận gần nhất thường nhỏ hơn và trung thành với nguồn hơn; trên web, thuộc tính image-rendering cung cấp các cách hiển thị crisp-edges và pixelated để giữ cạnh sắc.

Ba kết quả giải quyết ba công việc khác nhau

Vấn đề không nằm ở định dạng nào “tốt hơn” mà ở ý nghĩa của các khối vuông. Trong pixel art, cạnh bậc thang thường có chủ ý. Làm mượt chúng có thể phá hỏng thiết kế như thêm độ mờ vào bản vẽ nét.

Giữ lưới và làm mượt đường viền là hai công việc khác nhau

Cách 1: giữ chính xác lưới pixel

Cách chuyển thành vector sát nghĩa nhất biến các ô raster thành hình chữ nhật vector. Một pixel đỏ trở thành một ô vuông đỏ. Một dãy pixel đỏ liền nhau có thể giữ thành các ô riêng hoặc gộp thành hình chữ nhật lớn hơn khi việc đó không thay đổi hình bao.

Trước khi bắt đầu, tìm kích thước lưới thật của thiết kế. Sprite hiển thị ở 800 × 800 pixel có thể bắt nguồn từ lưới 32 × 32 được phóng theo lân cận gần nhất. Cấu trúc 32 × 32 mới là thứ bạn cần tái tạo, không phải kích thước hiển thị đã phóng lớn.

Quy trình Object Mosaic trong Illustrator

Adobe có tài liệu về cách tích hợp sẵn để chuyển bitmap nhúng thành tranh ghép:

1. Đặt pixel art gốc vào Illustrator và nhúng ảnh.
2. Chọn ảnh rồi chọn Object > Create Object Mosaic.
3. Đặt số ô khớp với lưới pixel gốc nếu bạn biết kích thước.
4. Dùng ô vuông và đầu ra có màu.
5. Giữ ảnh raster nguồn cho đến khi kiểm tra tranh ghép xong, rồi xóa hoặc ẩn nó.
6. So sánh hình bao ngoài, các khe bên trong và bảng màu với bản gốc khi phóng lớn.

Tài liệu Create Object Mosaic của Adobe mô tả lệnh, tùy chọn ô vuông, thiết lập màu và cách xử lý raster nguồn. Quy trình pixel art là một ứng dụng thực tế của cách tạo tranh ghép đã được mô tả đó.

Tranh ghép đối tượng có thể trung thành về cấu trúc nhưng vẫn kém hiệu quả. Sprite 64 × 64 có 4.096 ô trước khi gộp. Xóa các ô hoàn toàn trong suốt, gộp hình chữ nhật cùng màu liền nhau khi có thể, và tránh đưa đối tượng vô hình vào SVG cuối cùng.

Cách 2: tạo SVG dạng lưới không cần Illustrator

Bạn có thể dựng cùng loại tệp bằng tập lệnh hiểu pixel hoặc công cụ chuyển đổi chuyên dụng. Nguyên tắc quan trọng hơn ứng dụng:

1. Đọc nguồn ở kích thước lưới gốc.
2. Ánh xạ từng pixel không trong suốt thành một hình chữ nhật vector chính xác.
3. Giữ các giá trị bảng màu mà không khử răng cưa.
4. Chỉ gộp ô liền nhau khi hình đã gộp tạo ra cùng lưới nhìn thấy.
5. Xuất với viewBox SVG khớp kích thước lưới gốc.
6. Thử SVG ở kích thước hiển thị nguyên và không nguyên.

Dự án vectorize-pixelart mã nguồn mở là một ví dụ về tiện ích chuyển đổi dành riêng cho pixel. Nó cũng cho thấy giới hạn chung: lưới lớn hoặc phức tạp có thể tạo SVG nặng. Trước hết hãy xem tiện ích cũ như tài liệu nghiên cứu. Kiểm tra mã và tình trạng bảo trì trước khi đưa nó vào quy trình sản xuất.

Nếu quen với mã SVG, bạn cũng có thể dựng lại sprite nhỏ bằng các phần tử <rect> thủ công. Điều đó hợp lý với biểu tượng 12 × 12. Với cảnh chi tiết, đây không phải cách sử dụng một buổi chiều hiệu quả.

Cách 3: chủ động làm mượt hình

Đôi khi các pixel là bản nháp chứ không phải đặc trưng của thiết kế. Bạn có thể muốn biến nhân vật, bông hoa hoặc biểu tượng thành nhãn dán, đồ họa in hay logo sạch với đường viền bo tròn.

Nếu chủ ý muốn cách diễn giải đã làm mượt đó, PerfectVector phù hợp với hướng đồ lại đường viền. Tải lên phiên bản lớn nhất được phóng theo lân cận gần nhất mà bạn có, rồi đánh giá kết quả như một minh họa mới:

1. Loại bỏ khử răng cưa trước. Pixel viền mờ tạo thêm màu và các hình nhỏ ở cạnh.
2. Kiểm soát bảng màu. Nếu nguồn dùng tám màu, kết quả đồ lại không nên tự tạo hàng chục màu do nén hoặc làm mờ.
3. Kiểm tra đường chéo bậc thang. Quyết định phần nào nên thành đoạn thẳng, phần nào nên thành đường cong.
4. Kiểm tra lỗ và khe rộng một pixel. Khe nhỏ có thể khép lại khi các vùng liền kề được đơn giản hóa.
5. Xem số nút. Mục đích của làm mượt không phải thay mỗi góc vuông bằng vài đường cong nhỏ.
6. Thử ở kích thước đích. Đường cong mượt dễ nhìn ở kích thước áp phích có thể xóa mất mặt hoặc bàn tay ở kích thước biểu tượng.

Cách này thay đổi thiết kế. Lưu PNG nguồn cạnh SVG để không ai nhầm bản diễn giải vector với bản lưu trữ chính xác.

Các vấn đề chuẩn bị làm mọi cách chuyển đổi tệ hơn

Nguồn đã được đổi kích thước có làm mượt. Quay lại sprite gốc hoặc đổi kích thước bằng nội suy lân cận gần nhất. Khi các màu pha trộn mới ở cạnh đã được ghi vào ảnh, lưới gốc khó khôi phục hơn.

Tệp là JPG. Nén tạo các khối màu và quầng nhiễu quanh mọi cạnh pixel sắc. Dùng PNG gốc bất cứ khi nào có thể.

Nền trong suốt đã thành nền trắng đặc. Nền trắng có thể trở thành hàng nghìn ô không mong muốn hoặc một hình đồ lại lớn. Khôi phục độ trong suốt trước khi chuyển đổi, rồi kiểm tra kết quả trên nền tương phản. Hướng dẫn về nền SVG trong suốt trình bày cách kiểm tra đó.

Thiết kế có hiệu ứng bán trong suốt. Quầng sáng, bóng đổ và độ không trong suốt một phần (opacity) không phải các ô pixel truyền thống. Quyết định giữ chúng làm hiệu ứng raster, lượng tử hóa thành màu đặc hay thiết kế lại cho bản vector.

Bạn có cần vector cho website không?

Không nhất thiết. Nếu thiết kế là sprite trò chơi hoặc biểu tượng giao diện, PNG vẫn có thể là bản gốc phù hợp. Dùng tài nguyên ở kích thước gốc, phóng theo bội số nguyên khi có thể, và thiết lập trình duyệt hoặc bộ máy dựng hình dùng nội suy pixelated hoặc lân cận gần nhất.

SVG dạng lưới hữu ích khi cần chỉnh bảng màu như các đối tượng, cần in lớn hoặc hệ thống bàn giao yêu cầu vector. Nó không tự động làm tài nguyên màn hình nhỏ nhẹ hơn. Một đối tượng vector cho mỗi ô có thể nặng hơn PNG gọn.

Đây là một trường hợp mà “SVG phóng lớn vô hạn” đúng nhưng chưa đầy đủ. Thiết kế có thể phóng mãi nhưng đồng thời tốn nhiều tài nguyên để lưu, chỉnh sửa hoặc hiển thị. Hướng dẫn PNG so với SVG giải thích lựa chọn định dạng rộng hơn, còn ý nghĩa của vector hóa ảnh giải thích vì sao cách đồ lại thông thường ưu tiên hình thay vì lưới pixel.

Kiểm tra cuối cùng trước khi bàn giao

Trước khi bàn giao tệp, so sánh với bản gốc ở kích thước gốc và kích thước đầu ra dự kiến.

• Kích thước lưới khớp nguồn.
• Không thêm màu viền do khử răng cưa.
• Ô trong suốt vẫn trong suốt.
• Hình bao bậc thang còn nguyên với cách giữ lưới.
• Cạnh mượt là lựa chọn có chủ ý với cách đồ lại đường viền.
• Khe rộng một pixel, mắt, điểm sáng và lỗ bên trong vẫn thể hiện đúng.
• Các ô cùng màu lặp lại chỉ được đơn giản hóa khi hình ảnh vẫn giống hệt.
• SVG không vô tình nhúng raster gốc. Nếu có, nó vẫn có thể trông vỡ hạt dù mang phần mở rộng SVG.

Quy trình rõ ràng nhất là quy trình nói rõ sự đánh đổi. Giữ lưới khi pixel chính là thiết kế. Làm mượt đường viền khi muốn một cách diễn giải vector mới. Giữ PNG khi vector không mang lại khả năng kiểm soát hữu ích.

Nguồn

1. Adobe Illustrator — Tạo bản phác thảo và tranh ghép — lệnh Object Mosaic, ô vuông, đầu ra có màu và yêu cầu raster nhúng.
2. MDN — CSS image-rendering — hiển thị theo kiểu lân cận gần nhất cho pixel art trên web.
3. W3C — Đặc tả PNG, phiên bản thứ ba — mô hình raster không mất dữ liệu và hoạt động kênh alpha của PNG.
4. W3C — Các hình cơ bản trong SVG — hình học chữ nhật dùng cho SVG tái tạo từng ô lưới.
5. W3C — Hệ tọa độ SVG và viewBox — ánh xạ hệ tọa độ lưới gốc vào vùng nhìn SVG.

Nếu muốn đường viền mượt thay vì giữ lưới, hãy chuyển thiết kế qua PerfectVector, rồi so sánh hình bao, khe rộng một pixel và các chi tiết nhỏ với bản pixel gốc trước khi sử dụng.