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.
Đọc hướng dẫ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.
Đọc hướng dẫn →
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ẻ.
Đọc hướng dẫn →
Hiểu hiện RAW, phân biệt bản dựng với thumbnail, chọn JPG/PNG không bỏ DNG.
Đọc hướng dẫn →
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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →
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ủ ý.
Đọc hướng dẫn →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.
Đọc hướng dẫn →
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í.
Đọc hướng dẫn →
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ủ ý.
Đọc hướng dẫ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ẻ.
Đọc hướng dẫn →
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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →“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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →Đổ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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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.
Đọc hướng dẫn →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 đó.
Đọc hướng dẫn →