Skip to content

Trình thiết kế huy hiệu

Trình thiết kế huy hiệu là trình chỉnh sửa canvas trực quan được tích hợp sẵn trong badges.ninja, cho phép bạn tạo hình ảnh huy hiệu chuyên nghiệp mà không cần bất kỳ công cụ thiết kế nào.

Trình thiết kế huy hiệu — nhúng trong hộp thoại Tạo huy hiệu kèm thanh bên biểu mẫu

Tổng quan

Trình thiết kế mở ra khi bạn nhấp vào trường hình ảnh trong lúc tạo hoặc chỉnh sửa huy hiệu. Nó cung cấp một không gian làm việc canvas, nơi bạn có thể kết hợp các mẫu, văn bản và nền tùy chỉnh để tạo hình ảnh huy hiệu.

Bộ chọn mẫu với bộ lọc hình dạng + màu sắc

Chọn mẫu

Trình thiết kế kèm theo hơn 80 mẫu dựng sẵn được tổ chức theo hai chiều để bạn nhanh chóng tìm thấy:

  • 8 hình dạng — Tròn, Vuông bo góc, Lục giác, Khiên, Bát giác, Thoi, Biểu ngữ, Huy chương tròn
  • 8 bảng màu — Vàng, Bạc, Đồng, Xanh dương, Xanh lá, Đỏ thẫm, Tím, Than chì

Để chọn:

  1. Nhấp Mẫu trên thanh công cụ trình thiết kế.
  2. Dùng bộ lọc Hình dạngMàu sắc ở đầu bộ chọn để thu hẹp danh sách. Bộ đếm ở phải hiển thị số mẫu khớp (ví dụ 8 / 84).
  3. Nhấp vào một mẫu để áp dụng lên canvas.

Các mẫu được tạo ra cố ý giữ đơn giản — chọn một hình dạng và bảng màu, sau đó thêm văn bản, biểu tượng và dải ruy băng của riêng bạn trong trình thiết kế.

Mẫu đã được áp dụng lên canvas

Thêm hình dạng, dải ruy băng & biểu tượng

Popover Hình dạng

Popover Biểu tượng kèm thanh màu

Ngoài các mẫu, trình thiết kế còn có ba thư viện tài nguyên có thể xếp chồng lên bất kỳ mẫu nào:

  • Hình dạng — hơn 80 hình vector (vòng tròn, khiên, lục giác, ngôi sao, huy chương, con dấu, vòng hoa, biểu ngữ, hình học) được chia theo nhóm
  • Dải ruy băng — 20 lớp phủ ruy băng trang trí
  • Biểu tượng — 50 biểu tượng đồ họa (nguyên tử, giải thưởng, bộ não, cặp, chứng chỉ, mã, vương miện, kim cương, bằng, mũ tốt nghiệp, bóng đèn, huy chương, tên lửa, khiên kiểm tra, sao, mục tiêu, cúp...)

Chọn một mục từ bất kỳ popover nào và nó được chèn vào canvas với màu hiện tại. Thanh màu trong từng popover cho phép bạn đổi màu tài nguyên trước khi chèn — hữu ích khi bạn muốn màu khác với mặc định trên thanh công cụ.

Tải lên nền hoặc hình ảnh tùy chỉnh

Bạn có thể tải hình ảnh của riêng mình để dùng làm nền hoặc làm một lớp chồng lên:

  1. Nhấp Tải lên trên thanh công cụ trình thiết kế.
  2. Chọn một tệp hình ảnh từ máy tính (nên dùng PNG hoặc JPG).
  3. Hình ảnh được đặt trên canvas dưới dạng đối tượng có thể chọn — kéo, phóng to/thu nhỏ, xoay hoặc đưa xuống sau các phần tử khác.

Tải lên hình ảnh không xóa mẫu hay các lớp hiện có — chỉ xếp chồng lên trên.

Với nền đầy đủ, hãy dùng hình vuông ít nhất 600×600 pixel.

Thêm văn bản

Phần tử văn bản đã thêm vào canvas

  1. Nhấp nút Văn bản trên thanh công cụ.
  2. Một phần tử văn bản mới xuất hiện trên canvas.
  3. Nhấp vào văn bản để chọn, sau đó nhập nội dung.
  4. Kéo phần tử văn bản để đặt vị trí trên canvas.

Bạn có thể thêm nhiều phần tử văn bản cho các phần khác nhau của huy hiệu (tiêu đề, người nhận, ngày, v.v.).

Đổi phông chữ

Văn bản đổi từ Arial sang Georgia — áp dụng phông có chân cho văn bản đã chọn

Trình thiết kế gồm 11 phông chữ (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

  1. Chọn phần tử văn bản trên canvas.
  2. Nhấp menu Phông chữ trên thanh công cụ.
  3. Chọn từ các phông có sẵn.

Bản xem trước phông chữ cho thấy mỗi lựa chọn sẽ trông như thế nào trước khi bạn chọn.

Đổi màu

Bộ chọn màu mở; chọn hex bất kỳ — vàng cho độ tương phản mạnh trên mẫu xanh đậm

Bộ chọn Màu trên thanh công cụ điều khiển hai thứ cùng lúc:

  • Văn bản đã chọn — chọn màu nền cho bất kỳ phần tử văn bản được chọn.
  • Màu chèn mặc định — áp dụng cho các hình dạng, ruy băng và biểu tượng được chèn tiếp theo, cùng các đối tượng SVG đã chọn (tô lại nét và màu nền tại chỗ).

Chọn một màu từ bảng màu hoặc nhập mã hex. Bên trong mỗi popover hình dạng/ruy băng/biểu tượng còn có thanh màu nhỏ để chọn màu một lần mà không thay đổi mặc định của thanh công cụ.

Căn chỉnh phần tử

Văn bản căn giữa ngang và dọc qua các nút căn chỉnh trên thanh công cụ

Hàng căn chỉnh 6 nút hoạt động trên (các) đối tượng đã chọn tương đối với canvas:

NútHành động
Căn tráiGhim vào mép trái canvas
Căn giữa ngangCăn giữa trục X của canvas
Căn phảiGhim vào mép phải canvas
Căn trênGhim vào mép trên canvas
Căn giữa dọcCăn giữa trục Y của canvas
Căn dướiGhim vào mép dưới canvas

Khi bạn kéo phần tử gần tâm canvas, đường căn chỉnh nét đứt màu tím sẽ xuất hiện và đối tượng sẽ tự bám vào vị trí căn chỉnh hoàn hảo.

Chọn nhiều & phân lớp

  • Giữ Shift và nhấp để chọn nhiều đối tượng, hoặc kéo khung chọn quanh canvas.
  • Dùng Đưa ra sau / Đưa lên trước để kiểm soát thứ tự z.
  • Nhấn Delete hoặc nhấp nút Xóa trên thanh công cụ để gỡ lựa chọn.
  • Hoàn tác / Làm lại (hoặc Ctrl+Z / Ctrl+Shift+Z) duyệt 20 thay đổi gần nhất.

Xóa phần tử

  1. Chọn phần tử cần gỡ (hoặc shift-click để chọn nhiều).
  2. Nhấp nút Xóa trên thanh công cụ, hoặc nhấn phím Delete.

Mẹo thiết kế huy hiệu tốt

  • Giữ đơn giản — dùng văn bản rõ ràng, tránh rối mắt. Huy hiệu thường hiển thị ở kích thước nhỏ.
  • Dùng độ tương phản cao — bảo đảm văn bản đọc được trên nền.
  • Đưa tên huy hiệu vào — người nhận và người xem nên hiểu chứng chỉ ngay từ cái nhìn đầu.
  • Định dạng vuông — huy hiệu hiển thị tốt nhất dưới dạng hình vuông.
  • Đồng nhất thương hiệu — dùng màu và phông chữ tổ chức xuyên suốt mọi huy hiệu.
  • Thử ở kích thước nhỏ — xem trước huy hiệu ở 100x100 pixel để đảm bảo đọc được.

Lưu hình ảnh huy hiệu

Huy hiệu hoàn chỉnh

Khi bạn hài lòng với thiết kế, nhấp Xong hoặc Lưu trong trình thiết kế. Hình ảnh được chụp từ canvas và gắn vào huy hiệu. Nó sẽ được tải lên IPFS khi bạn tạo hoặc lưu huy hiệu.

badges.ninja Documentation