Blog / Hướng dẫn

Hướng dẫn thực tế về chuẩn bị ảnh, hoạt ảnh sprite, bảng màu và tài liệu PDF. Mỗi bài đều độc lập, dù bạn có dùng công cụ của chúng tôi hay không.

Tạo PNG tròn góc trong suốt, tính vùng 4:5, kiểm tra từng ảnh trước tải theo lượt.

Chỉnh sửa ảnhBởi Dev.SWL6 phút đọc
Đọc hướng dẫn →
Ảnh chân dung trong vườn chuyển từ ảnh ngang sang vùng chọn vuông và ảnh đại diện tròn.

Chọn logo trong suốt, kiểm tra ảnh sáng và tối, áp dụng vị trí tương đối và xem ngoại lệ trước khi xuất ZIP.

Xuất bản ảnhBởi Dev.SWL6 phút đọc
Đọc hướng dẫn →
Ảnh cốc gốm cho thấy dấu bản quyền trên nền sáng, tối và trong bố cục dọc.

Phân biệt lỗi định dạng, dung lượng, kích thước; chuyển HEIC theo bộ và kiểm tra bản tải trước khi chia sẻ.

Ảnh từ điện thoạiBởi Dev.SWL5 phút đọc
Đọc hướng dẫn →
Ảnh phong cảnh từ điện thoại trong tệp HEIC trở thành bản sao JPG hoặc PNG để chia sẻ.

Hiểu hiện RAW, phân biệt bản dựng với thumbnail, chọn JPG/PNG không bỏ DNG.

Nhiếp ảnh RAWBởi Dev.SWL5 phút đọc
Đọc hướng dẫn →
DNG từ máy ảnh hoặc điện thoại được phát triển thành bản sao JPG hoặc PNG trong khi bản gốc được giữ riêng.

So riêng sửa màu nền nhiễm, xóa pixel mờ và cắt đệm, rồi kiểm tra PNG trên nền sáng và tối.

Làm sạch spriteBởi Dev.SWL4 phút đọc
Đọc hướng dẫn →
Cùng cáo cam trên nền tối, trái có viền nhạt thừa, phải mép lông sạch.

Thực hành với lưới 4 × 3 đã đo, phân biệt đường viền và khoảng cách, đồng thời giữ vị trí sau khi bỏ qua hoặc loại ô trùng.

TilesetBởi Dev.SWL4 phút đọc
Đọc hướng dẫn →
Tileset cỏ, đá, đất và nước có mũi tên phân biệt nội dung ô, lề ngoài và khoảng cách.

Chẩn đoán điểm cắt và thứ tự trước đổi FPS; giữ neo có ý nghĩa trong khi giữ chuyển động có chủ ý.

Khắc phục sự cố hoạt ảnhBởi Dev.SWL4 phút đọc
Đọc hướng dẫn →
Ba tư thế lữ khách lệch trên ba tư thế giày cùng baseline đứt.

Vì sao hình chữ nhật cập nhật GIF có thể để lại vệt, cách lấy các khung PNG hoàn chỉnh và khi nào nên giữ thời gian trễ khung gốc thay vì chỉ xuất lưới.

Phát triển trò chơiBởi Dev.SWL5 phút đọc
Đọc hướng dẫn →
Robot đồ họa pixel, một mảng tay giơ lên và khung robot hoàn chỉnh đã ghép.

Dùng frame, spriteSourceSize và sourceSize từ bản xuất Aseprite tương ứng để dựng lại các PNG đủ kích thước, căn chỉnh đồng nhất thay vì các tư thế đã cắt bị nhảy vị trí.

Phát triển trò chơiBởi Dev.SWL5 phút đọc
Đọc hướng dẫn →
Nhà thám hiểm áo choàng xanh được cắt sát cạnh canvas có đệm hiển thị độ lệch trên và trái gốc.

Bắt đầu từ pixel sạch, lọc màu mép nhạt, dùng thống kê màu chính xác để tạo dải bóng, màu nền và sáng có chủ ý.

Pixel artBởi Dev.SWL5 phút đọc
Đọc hướng dẫn →
Nhân vật lữ hành đồ họa pixel mặc áo xanh cạnh sáu vai trò màu: viền, bóng, màu nền, vùng sáng, da và điểm nhấn.

Xây dựng thứ tự đọc cuối từng trang, chèn trang chụp, xóa trang không muốn và kiểm tra bản tải xuống trước khi chia sẻ.

Quy trình PDFBởi Dev.SWL5 phút đọc
Đọc hướng dẫn →
Năm trang tài liệu minh họa theo thứ tự đọc: bìa, hai trang đề xuất, bảng giá và phê duyệt.

Tính các ô bằng nhau, kiểm tra thứ tự và căn chỉnh khung, chọn tốc độ phát và hiểu GIF tác động thế nào tới màu và độ trong suốt.

Phát triển trò chơiBởi Dev.SWL5 phút đọc
Đọc hướng dẫn →
Tám tư thế đi bộ của nhà thám hiểm pixel art khăn đỏ sắp trong bảng, dẫn tới hoạt ảnh lặp.

Instagram đưa ảnh vào vài tỷ lệ hỗ trợ và cắt phần thừa từ tâm, nên đầu ảnh mất. Hướng dẫn gồm tỷ lệ còn giữ, bẫy carousel, vùng an toàn Tin và lý do 4K không lợi.

Mạng xã hộiBởi Dev.SWL11 phút đọc
Đọc hướng dẫn →
Khung bảng tin, Tin, hồ sơ Instagram cạnh nhau với ảnh cắt giữa cho vừa mỗi khung

Xóa theo màu, phân đoạn AI và chọn thủ công giải quyết các vấn đề khác nhau; chọn sai khiến ảnh tách nền có quầng hoặc lỗ. Hướng dẫn này giải thích mỗi phương pháp thực sự làm gì và cách biết ảnh cần phương pháp nào.

Định dạng ảnhBởi Dev.SWL10 phút đọc
Đọc hướng dẫn →
Cùng chủ thể cắt ba cách: ngưỡng màu, phân đoạn AI, vùng chọn vẽ tay

HTTP/2 bỏ lập luận số yêu cầu vốn là lý do sprite CSS ra đời, nên nhiều hướng dẫn giải quyết vấn đề bạn không còn. Bài này gồm lý do thật còn dùng, toán background-position/background-size retina và khi nào SVG tốt hơn.

Phát triển webBởi Dev.SWL11 phút đọc
Đọc hướng dẫn →
Bảng sprite tám biểu tượng trong lưới 4 × 2 với một biểu tượng được viền, cạnh phần tử nhỏ chỉ hiển thị biểu tượng đó bằng background-position

Trình tạo ảnh AI hiếm khi đặt sprite trên lưới đều, nên cắt hàng cột đơn giản làm mất đầu và chân. Hướng dẫn này giải thích vì sao khoảng cách lệch, cách phát hiện theo nội dung sửa vấn đề và cách đưa khung sạch vào Unity hoặc Godot.

Phát triển trò chơiBởi Dev.SWL9 phút đọc
Đọc hướng dẫn →
Bảng sprite có các tư thế với kích thước và độ lệch không đều

Bài đăng lưới chín ô biến một ảnh thành dải ảnh trên hồ sơ của bạn. Hướng dẫn này trình bày kích thước ảnh nguồn, cách cắt chín ô bằng nhau và thứ tự tải lên ngược để ảnh không bị xáo trộn.

Mạng xã hộiBởi Dev.SWL7 phút đọc
Đọc hướng dẫn →
Ảnh chia thành chín ô đánh số cạnh hàng đợi tải lên đảo ngược

Quầng trắng mảnh quanh phần cắt hầu như không phải lỗi phần cắt. Hướng dẫn nói nơi pixel mép khử răng cưa lấy sai màu, định dạng giữ alpha, cách xóa viền đã gắn sẵn.

Định dạng ảnhBởi Dev.SWL8 phút đọc
Đọc hướng dẫn →
Bảng sprite cáo trên nền trắng đặc đồng nhất trước khi xóa

Texture Type, Sprite Mode, Pixels Per Unit, Filter Mode và nén đều có các giá trị mặc định không phù hợp với hình 2D. Hướng dẫn này giải thích từng thiết lập, cách cắt trong Sprite Editor và khi nào cắt sheet trước tốt hơn tính năng tự cắt của Unity.

Phát triển trò chơiBởi Dev.SWL10 phút đọc
Đọc hướng dẫn →
Bảng sprite kiểm lâm bốn hàng bốn cột cách đều trên nền trong suốt

Godot 4 đọc bảng sprite theo ba cách: AnimatedSprite2D với SpriteFrames, vùng AtlasTexture và hframes/vframes trên Sprite2D. Hướng dẫn gồm chọn cách, lọc pixel art và lý do bảng không đều phá cả ba.

Phát triển trò chơiBởi Dev.SWL10 phút đọc
Đọc hướng dẫn →
Lưới khung cứng vừa với bảng đều nhưng cắt xuyên bảng không đều

Phần lớn bảng sprite AI có lưới lệch, nền gắn sẵn và chữ rối. Hướng dẫn cho cách diễn đạt cụ thể sửa từng lỗi, hai ví dụ đầy đủ và quy trình sau tạo.

Quy trình AIBởi Dev.SWL11 phút đọc
Đọc hướng dẫn →
Độ trong suốt thật so với mẫu caro được vẽ sẵn trong ảnh

“Dùng WebP cho mọi thứ” sai đủ thường xuyên để đáng lưu ý. Hướng dẫn này giải thích cách từng định dạng nén, định dạng nào giữ kênh alpha và trường hợp phổ biến khi WebP nén mất dữ liệu lại lớn hơn PNG dùng bảng màu.

Định dạng ảnhBởi Dev.SWL9 phút đọc
Đọc hướng dẫn →
Ba cột so khả năng JPG, PNG và WebP

Ba cách quản dung lượng: chiều, định dạng, quality. Hướng dẫn theo ưu tiên, điểm quality tốt, lượng tử palette, bỏ metadata và cách đạt đích phổ biến.

Định dạng ảnhBởi Dev.SWL9 phút đọc
Đọc hướng dẫn →
Ba khối: kích thước, định dạng rồi chất lượng

Đổi kích thước thông thường khiến pixel art nhòe bệt vì pha trộn những màu vốn không nên trộn với nhau. Hướng dẫn này trình bày phóng thu theo lân cận gần nhất, lý do hệ số phải là số nguyên, và tác dụng thực sự của kết xuất CSS pixelated, bộ lọc point trong engine và thuật toán kiểu hqx.

Pixel artBởi Dev.SWL9 phút đọc
Đọc hướng dẫn →
Phóng song tuyến tính để cạnh mờ cạnh phóng láng giềng gần nhất giữ khối pixel sắc

Atlas giảm lệnh vẽ bằng cách đóng nhiều sprite vào một texture, nhưng đặt sát cạnh làm màu lân cận tràn qua đường nối. Hướng dẫn này trình bày bin packing, đệm và mở rộng cạnh, khi nào kích thước lũy thừa hai còn quan trọng và cắt gọn ảnh hưởng điểm xoay ra sao.

Phát triển trò chơiBởi Dev.SWL10 phút đọc
Đọc hướng dẫn →
Sprite sát mép gây lem màu, bên cạnh cùng sprite có đệm

Bản xem trước liên kết trống gần như luôn do một vài nguyên nhân cụ thể: kích thước sai, định dạng không được hỗ trợ, URL tương đối hoặc bộ nhớ đệm cũ. Hướng dẫn này trình bày chuẩn 1200x630, cắt vùng an toàn, lý do WebP không phù hợp ở đây và cách buộc từng nền tảng quét lại.

Định dạng ảnhBởi Dev.SWL9 phút đọc
Đọc hướng dẫn →
Thẻ 1200 × 630 có đánh dấu vùng an toàn, được bao quanh bởi ba bản xem trước nền tảng cắt ảnh khác nhau

Tileset khó hơn bảng sprite vì các đường nối phải khớp khi đặt ô cạnh nhau. Hướng dẫn này trình bày cách chọn kích thước ô, tìm độ lệch lưới khi đồ họa không bắt đầu ở pixel 0, xử lý tràn màu khi không có khoảng cách và nhập vào Unity hoặc Godot.

Phát triển trò chơiBởi Dev.SWL11 phút đọc
Đọc hướng dẫn →
Lớp lưới lệch chia ô thành các phần tư, cạnh lưới có độ lệch đúng chứa một ô trong mỗi vùng

Số khung và tốc độ phát riêng, nhầm khiến hoạt ảnh chậm hoặc tốn vẽ. Hướng dẫn gồm cảm giác 8, 12, 24 fps, tốc độ theo hành động, khung giữ và tách fps hoạt ảnh khỏi trò chơi.

Phát triển trò chơiBởi Dev.SWL10 phút đọc
Đọc hướng dẫn →
Cùng chu kỳ đi bộ ở ba dải 8, 12, 24 khung mỗi giây

Favicon vẫn phức tạp dù web đã tiến lên, phần lớn hướng dẫn liệt kê nhiều tệp hơn cần. Hướng dẫn này gồm bộ tối thiểu thật, mỗi nền tảng yêu cầu gì, site.webmanifest, thiết kế rõ ở 16 pixel và vượt cache.

Định dạng ảnhBởi Dev.SWL9 phút đọc
Đọc hướng dẫn →
Logo chi tiết trở nên khó đọc ở 16 pixel cạnh biểu trưng đơn giản vẫn đọc rõ

Yêu cầu mô hình tạo cùng nhân vật hai lần, giáp đổi màu, áo choàng xuất hiện và tỷ lệ đổi. Hướng dẫn này trình bày tác dụng và giới hạn khóa seed, cố định màu và vật liệu trong lời nhắc, tạo từ ảnh tham khảo và sửa lệch sau đó.

Quy trình AIBởi Dev.SWL10 phút đọc
Đọc hướng dẫn →
Nhân vật thay đổi màu và vóc dáng qua bốn lần tạo, cạnh bốn phiên bản nhất quán