Skip to content

Perancang Lencana

Perancang Lencana adalah editor kanvas visual yang dibangun ke dalam badges.ninja yang memungkinkan Anda membuat gambar lencana profesional tanpa peralatan desain apa pun.

Perancang Lencana — disematkan dalam modal Buat Lencana di samping bilah sisi formulir

Ikhtisar

Perancang terbuka saat Anda mengklik bidang gambar saat membuat atau mengedit lencana. Ia menyediakan ruang kerja kanvas tempat Anda dapat menggabungkan templat, teks, dan latar kustom untuk membuat gambar lencana Anda.

Pemilih templat dengan filter bentuk + warna

Memilih Templat

Perancang mencakup 80+ templat bawaan yang diorganisasikan sepanjang dua dimensi sehingga Anda dapat menemukannya dengan cepat:

  • 8 bentuk — Lingkaran, Persegi membulat, Segi enam, Perisai, Segi delapan, Belah ketupat, Spanduk, Stempel
  • 8 palet warna — Emas, Perak, Perunggu, Biru, Hijau, Merah tua, Ungu, Grafit

Untuk memilih:

  1. Klik Templat di bilah alat perancang.
  2. Gunakan filter Bentuk dan Warna di bagian atas pemilih untuk mempersempit daftar. Penghitung di sebelah kanan menampilkan berapa banyak templat yang cocok (mis. 8 / 84).
  3. Klik templat untuk menerapkannya pada kanvas.

Templat yang dihasilkan sengaja dibuat bersih — pilih bentuk dan palet, lalu tambahkan teks, ikon, dan pita Anda sendiri di perancang.

Templat diterapkan pada kanvas

Menambahkan Bentuk, Pita & Ikon

Popover Bentuk

Popover Ikon dengan bilah warna

Selain templat, perancang dilengkapi dengan tiga pustaka aset tambahan yang dapat Anda lapisi di atas templat mana pun:

  • Bentuk — 80+ bentuk vektor (lingkaran, perisai, segi enam, bintang, medali, stempel, karangan bunga, spanduk, bentuk geometris) yang dikelompokkan ke dalam kategori
  • Pita — 20 hamparan pita dekoratif
  • Ikon — 50 ikon piktografis (atom, penghargaan, otak, koper, sertifikat, kode, mahkota, berlian, ijazah, topi wisuda, bola lampu, medali, roket, perisai-centang, bintang, target, piala, …)

Pilih satu dari popover mana pun dan akan disisipkan ke kanvas dengan warna saat ini. Bilah warna di dalam setiap popover memungkinkan Anda mewarnai ulang aset sebelum menyisipkannya — berguna saat Anda menginginkan warna berbeda dari default bilah alat.

Mengunggah Latar Belakang atau Gambar Kustom

Anda dapat mengunggah gambar Anda sendiri untuk digunakan sebagai latar belakang atau sebagai lapisan di atas:

  1. Klik Unggah di bilah alat perancang.
  2. Pilih berkas gambar dari komputer Anda (PNG atau JPG direkomendasikan).
  3. Gambar ditempatkan pada kanvas sebagai objek yang dapat dipilih — seret, skala, putar, atau kirim ke belakang elemen lain.

Mengunggah gambar tidak menghapus templat atau lapisan yang ada — hanya menumpuk di atas.

Untuk latar belakang penuh, gunakan gambar persegi minimal 600×600 piksel.

Menambahkan Teks

Elemen teks ditambahkan ke kanvas

  1. Klik tombol Teks di bilah alat.
  2. Elemen teks baru muncul pada kanvas.
  3. Klik teks untuk memilihnya, lalu ketik konten Anda.
  4. Seret elemen teks untuk memposisikannya pada kanvas.

Anda dapat menambahkan beberapa elemen teks untuk bagian berbeda dari lencana Anda (judul, penerima, tanggal, dll.).

Mengubah Font

Teks diubah dari Arial ke Georgia — font serif diterapkan pada teks terpilih

Perancang mencakup 11 font (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

  1. Pilih elemen teks pada kanvas.
  2. Klik dropdown Font di bilah alat.
  3. Pilih dari font yang tersedia.

Pratinjau font menunjukkan tampilan setiap opsi sebelum Anda memilihnya.

Mengubah Warna

Pemilih warna terbuka; pilih hex apa saja — emas memberikan kontras kuat pada templat biru gelap

Pemilih Warna bilah alat mengontrol dua hal sekaligus:

  • Teks terpilih — memilih warna isi untuk elemen teks terpilih mana pun.
  • Warna sisip default — untuk bentuk, pita, dan ikon yang akan disisipkan berikutnya, ditambah objek SVG terpilih (mewarnai ulang goresan dan isi di tempat).

Pilih warna dari palet atau masukkan kode hex. Di dalam setiap popover bentuk/pita/ikon juga ada bilah warna lebih kecil untuk pilihan warna sekali yang tidak mengubah default bilah alat.

Menyelaraskan Elemen

Teks dipusatkan secara horizontal dan vertikal melalui tombol penyelarasan bilah alat

Baris penyelarasan 6 tombol bekerja pada objek terpilih relatif terhadap kanvas:

TombolTindakan
Selaraskan kiriPinkan ke tepi kiri kanvas
Pusatkan horizontalPusatkan pada sumbu X kanvas
Selaraskan kananPinkan ke tepi kanan kanvas
Selaraskan atasPinkan ke tepi atas kanvas
Pusatkan vertikalPusatkan pada sumbu Y kanvas
Selaraskan bawahPinkan ke tepi bawah kanvas

Saat Anda menyeret elemen dekat pusat kanvas, panduan snap putus-putus ungu muncul dan objek menyangkut ke penyelarasan sempurna.

Pilihan Ganda & Pelapisan

  • Tahan Shift dan klik untuk memilih beberapa objek, atau seret kotak pilihan melintasi kanvas.
  • Gunakan Kirim ke belakang / Bawa ke depan untuk mengontrol urutan z.
  • Tekan Delete atau klik tombol Hapus bilah alat untuk menghapus pilihan.
  • Urungkan / Ulangi (atau Ctrl+Z / Ctrl+Shift+Z) berjalan melalui 20 perubahan terakhir.

Menghapus Elemen

  1. Pilih elemen yang ingin Anda hapus (atau shift-klik untuk beberapa).
  2. Klik tombol Hapus di bilah alat, atau tekan tombol Delete.

Tips untuk Desain Lencana yang Baik

  • Buat sederhana — gunakan teks yang jelas dan hindari kekacauan. Lencana sering ditampilkan dalam ukuran kecil.
  • Gunakan kontras tinggi — pastikan teks dapat dibaca terhadap latar belakang.
  • Sertakan nama lencana — penerima dan pemirsa harus memahami kredensial sekilas.
  • Format persegi — lencana ditampilkan paling baik sebagai gambar persegi.
  • Konsistensi merek — gunakan warna dan font organisasi Anda di semua lencana.
  • Uji pada ukuran kecil — pratinjau lencana Anda pada 100x100 piksel untuk memastikan keterbacaan.

Menyimpan Gambar Lencana

Lencana akhir yang tersusun

Saat Anda puas dengan desain Anda, klik Selesai atau Simpan di perancang. Gambar diambil dari kanvas dan dilampirkan ke lencana Anda. Akan diunggah ke IPFS saat Anda membuat atau menyimpan lencana.

badges.ninja Documentation