Tạo lưới trong suốt cho PNG và SVG
Trang này giúp bạn tạo lưới bằng những đường kẻ cách đều nhau trên nền trong suốt, đúng kích thước pixel bạn chọn. Bạn đặt số cột, số hàng, độ dày và màu đường kẻ, rồi tải lưới xuống dạng PNG hoặc SVG, hoặc sao chép thành nền CSS. Lưới dùng như lớp hướng dẫn đặt lên bản thiết kế, bố cục hoặc ảnh chụp màn hình. Mọi thứ chạy ngay trong trình duyệt và không có tệp nào được tải lên.
Cách tạo lưới online trong bốn bước
Lưới được vẽ ngay trên trang:
- Nhập Chiều rộng canvas (px) và Chiều cao canvas (px). Mỗi giá trị từ 10 đến 5000 và ban đầu là 1920 nhân 1080.
- Đặt Số cột (từ 1 đến 200, ban đầu là 12) và Số hàng (từ 1 đến 200, ban đầu là 6).
- Đặt Độ dày đường kẻ (px) từ 1 đến 50 và chọn Màu đường kẻ. Mặc định là màu đỏ, #FF0000.
- Kiểm tra bản xem trước, rồi nhấn Tải PNG, Tải SVG hoặc Sao chép CSS.
Không có nút áp dụng. Bản xem trước được vẽ lại khi bạn nhập, và nền ô vuông phía sau cho biết phần nào của tệp là trong suốt. Nền ô vuông đó không nằm trong tệp tải xuống.
Kích thước ô theo canvas, số cột và số hàng
Canvas được chia đều: chiều rộng mỗi ô là chiều rộng canvas chia cho số cột, chiều cao mỗi ô là chiều cao chia cho số hàng. Dòng “Mỗi ô có kích thước … × … px” dưới bản xem trước hiển thị kết quả khi bạn đổi giá trị. Muốn ô vuông, hãy chọn các số cho cùng một kích thước theo cả hai hướng. Canvas 1920 × 1080 với 16 cột và 9 hàng cho ô 120 × 120 px.
Các đường kẻ nằm chính giữa mỗi chỗ chia bên trong. Nếu canvas không chia hết, một đường có thể rơi vào giữa hai pixel và trông hơi nhòe trong PNG. Để đường nét sắc, hãy chọn chiều rộng là bội số của số cột và chiều cao là bội số của số hàng.
Tạo lưới ảnh: các kích thước thường dùng
Đây là những kích thước được hỏi nhiều nhất (rộng × cao, cột × hàng, kích thước ô):
- Ô vuông trên Full HD: 1920 × 1080, 16 × 9, 120 × 120 px
- Ô vuông trên 4K: 3840 × 2160, 32 × 18, 120 × 120 px
- Lưới chia 3 cột 3 hàng, hình vuông: 1080 × 1080, 3 × 3, 360 × 360 px
- Lưới chia 3 cột 3 hàng, dọc 9:16: 1080 × 1920, 3 × 3, 360 × 640 px
Một lưới ô vuông PNG ở các kích thước này có thể đặt thẳng lên ảnh hoặc bản thiết kế.
Độ dày, màu đường kẻ và tùy chọn nâng cao
Độ dày đường kẻ là bề rộng nét vẽ tính bằng pixel của canvas. Trên canvas lớn, đường mảnh cần giá trị cao hơn để vẫn nhìn thấy khi ảnh bị thu nhỏ. Ô màu đường kẻ mở bảng chọn màu của trình duyệt và hiển thị mã hex bên cạnh. Hãy chọn màu tương phản với nền bên dưới: trắng trên hình tối, màu tối trên hình sáng.
Trong Tùy chọn nâng cao có ba ô đánh dấu. Lưới thường chỉ có đường ở các chỗ chia bên trong, nên mép của tệp để trống.
- Viền ngoài thêm một khung. Khung được vẽ bên trong mép canvas nên giữ nguyên độ dày đầy đủ.
- Dấu thập ở giữa thêm một đường dọc và một đường ngang đi qua chính giữa. Nếu số cột hoặc số hàng chẵn thì giữa đã có sẵn đường, nên bạn chỉ thấy khác biệt với số lẻ.
- Đường chéo thêm hai đường từ góc này sang góc kia, cắt nhau ở giữa.
Tải PNG, tải SVG hoặc sao chép CSS
Tải PNG lưu một ảnh trong suốt đúng bằng kích thước canvas, với tên như luoi-1920x1080.png. Tải SVG lưu cùng lưới đó dưới dạng đường vector, tên như luoi-1920x1080.svg, không có nền. Sao chép CSS đưa vào clipboard một dòng background-image: url("data:image/svg+xml,...") và một dòng background-size, để lập trình viên đặt lưới lên trang mà không cần tệp ảnh riêng.
Nền lặp lại theo mặc định. Nếu bạn xếp thành các ô lát, hãy nhớ rằng lưới thường không có đường ở mép ngoài. Khi bật Viền ngoài, hai viền gặp nhau ở mỗi mối nối và trông dày gấp đôi giá trị bạn đặt.
Tạo lưới cho ảnh, hay mã bố cục CSS?
Để vẽ lưới lên một bức ảnh bạn đã có, theo cách chia ô để vẽ, hãy dùng công cụ Tạo ảnh lưới vẽ. Nếu bạn muốn dựng bố cục trang và lấy mã grid-template-areas, hãy dùng Tạo CSS Grid. Công cụ này dành cho chính tệp lưới trống và trong suốt.
Nếu cần tạo lưới trong Illustrator, bạn có thể mở tệp SVG ở đó để giữ các đường kẻ dạng vector.
Câu hỏi thường gặp
Làm sao để tạo một lưới PNG nền trong suốt?
Nhập “Chiều rộng canvas (px)” và “Chiều cao canvas (px)”, đặt “Số cột” và “Số hàng”, chọn “Màu đường kẻ”, rồi nhấn “Tải PNG”. Nền của tệp là trong suốt. Nền ô vuông trong bản xem trước chỉ để cho bạn thấy điều đó. Tệp được lưu với tên như luoi-1920x1080.png, kèm kích thước của bạn trong tên.
Làm sao để tạo lưới chia 3 cột 3 hàng?
Đặt “Số cột” là 3 và “Số hàng” là 3. Công cụ vẽ hai đường dọc và hai đường ngang, chia canvas thành chín ô bằng nhau. Bật “Viền ngoài” trong “Tùy chọn nâng cao” nếu bạn muốn thêm khung quanh mép, rồi nhấn “Tải PNG”.
Lưới PNG tỷ lệ 9:16 nên có kích thước bao nhiêu?
Đặt “Chiều rộng canvas (px)” là 1080 và “Chiều cao canvas (px)” là 1920 cho ảnh dọc toàn màn hình. 2160 nhân 3840 là cùng hình dạng 9:16 với độ chi tiết gấp đôi. Cả hai đều nằm trong giới hạn 5000 px. Dòng dưới bản xem trước cho biết kích thước của một ô.
Làm sao để tạo lưới màu trắng đặt lên ảnh?
Chọn màu trắng, #FFFFFF, ở “Màu đường kẻ”. Đường trắng có thể khó thấy trên nền ô vuông của bản xem trước, nhưng PNG tải xuống vẫn giữ chúng trên nền trong suốt, nên chúng hiện rõ khi bạn đặt tệp lên ảnh hoặc bố cục tối.
Tôi có thể tạo lưới dưới dạng SVG không?
Có. Nhấn “Tải SVG” để lưu cùng lưới đó thành tệp vector, ví dụ luoi-1920x1080.svg. Các đường là nét vẽ theo màu bạn chọn và không có màu nền, nên luôn sắc nét ở mọi mức phóng to và mở được trong trình duyệt hoặc phần mềm vector bất kỳ.
Làm sao dùng lưới làm nền CSS?
Nhấn “Sao chép CSS” rồi dán kết quả vào một quy tắc. Bạn nhận được background-image chứa lưới dưới dạng SVG nhúng, cùng background-size bằng kích thước canvas của bạn. Đổi background-size để thay đổi tỷ lệ, hoặc dùng canvas nhỏ và để nền lặp lại. Nếu không bật “Viền ngoài”, mép của mỗi ô lát không có đường.
Làm sao để tạo lưới trong Illustrator hoặc Figma?
Cả hai đều có lưới và đường dẫn riêng. Hãy dùng công cụ này khi bạn muốn một lưới dưới dạng tệp có kích thước chính xác. Mở tệp SVG trong Illustrator để giữ các đường ở dạng vector, hoặc đặt PNG lên tác phẩm như một lớp trong suốt. Trong Figma, bạn có thể thêm một trong hai tệp vào khung.
Vì sao PNG của tôi nhỏ hơn trên iPhone hoặc iPad?
Safari trên iPhone và iPad trả về ảnh trống khi vượt quá khoảng 16 triệu pixel, nên PNG ở đó bị thu nhỏ cho vừa và một ghi chú cho biết kích thước đã lưu. SVG luôn giữ kích thước đầy đủ bạn yêu cầu, hãy dùng nó khi cần kích thước chính xác.
