Skip to content

Pereka Lencana

Pereka Lencana ialah penyunting kanvas visual yang dibina ke dalam badges.ninja yang membolehkan anda mencipta imej lencana profesional tanpa sebarang alat reka bentuk.

Pereka Lencana — disertakan dalam modal Cipta Lencana di sebelah bar sisi borang

Gambaran Keseluruhan

Pereka dibuka apabila anda mengklik medan imej semasa mencipta atau menyunting lencana. Ia menyediakan ruang kerja kanvas tempat anda boleh menggabungkan templat, teks dan latar belakang tersuai untuk mencipta imej lencana anda.

Pemilih templat dengan penapis bentuk + warna

Memilih Templat

Pereka merangkumi 80+ templat terbina dalam yang disusun mengikut dua dimensi supaya anda boleh menemui dengan pantas:

  • 8 bentuk — Bulatan, Segi empat sama bulat, Segi enam, Perisai, Segi lapan, Berlian, Sepanduk, Cop
  • 8 palet warna — Emas, Perak, Gangsa, Biru, Hijau, Merah tua, Ungu, Grafit

Untuk memilih:

  1. Klik Templat dalam bar alat pereka.
  2. Gunakan penapis Bentuk dan Warna di bahagian atas pemilih untuk mengecilkan senarai. Pengira di sebelah kanan menunjukkan berapa banyak templat yang sepadan (cth. 8 / 84).
  3. Klik templat untuk menerapkannya pada kanvas.

Templat yang dijana sengaja dibuat bersih — pilih bentuk dan palet, kemudian tambah teks, ikon dan reben anda sendiri dalam pereka.

Templat diterapkan pada kanvas

Menambah Bentuk, Reben & Ikon

Popover Bentuk

Popover Ikon dengan bar warna

Selain templat, pereka dilengkapi dengan tiga perpustakaan aset tambahan yang boleh anda lapis di atas mana-mana templat:

  • Bentuk — 80+ bentuk vektor (bulatan, perisai, segi enam, bintang, pingat, cop, kalungan, sepanduk, bentuk geometri) dikumpulkan ke dalam kategori
  • Reben — 20 tindanan reben hiasan
  • Ikon — 50 ikon piktografi (atom, anugerah, otak, beg bimbit, sijil, kod, mahkota, berlian, diploma, topi konvokesyen, mentol, pingat, roket, perisai-tanda, bintang, sasaran, piala, …)

Pilih satu daripada mana-mana popover dan ia dimasukkan ke kanvas pada warna semasa. Bar warna di dalam setiap popover membolehkan anda mewarna semula aset sebelum anda memasukkannya — berguna apabila anda mahu warna yang berbeza daripada lalai bar alat.

Memuat Naik Latar Belakang atau Imej Tersuai

Anda boleh memuat naik imej anda sendiri untuk digunakan sebagai latar belakang atau sebagai lapisan di atas:

  1. Klik Muat Naik dalam bar alat pereka.
  2. Pilih fail imej daripada komputer anda (PNG atau JPG disyorkan).
  3. Imej diletakkan pada kanvas sebagai objek yang boleh dipilih — seret, skala, putar atau hantar di belakang elemen lain.

Memuat naik imej tidak memadamkan templat atau mana-mana lapisan sedia ada — ia hanya menyusun di atas.

Untuk latar belakang penuh, gunakan imej segi empat sama sekurang-kurangnya 600×600 piksel.

Menambah Teks

Elemen teks ditambah ke kanvas

  1. Klik butang Teks dalam bar alat.
  2. Elemen teks baharu muncul pada kanvas.
  3. Klik teks untuk memilihnya, kemudian taip kandungan anda.
  4. Seret elemen teks untuk meletakkannya pada kanvas.

Anda boleh menambah berbilang elemen teks untuk bahagian berbeza lencana anda (tajuk, penerima, tarikh, dll.).

Teks ditukar daripada Arial kepada Georgia — fon serif diterapkan pada teks terpilih

Pereka merangkumi 11 fon (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

  1. Pilih elemen teks pada kanvas.
  2. Klik dropdown Fon dalam bar alat.
  3. Pilih daripada fon yang tersedia.

Pratonton fon menunjukkan rupa setiap pilihan sebelum anda memilihnya.

Pemilih warna terbuka; pilih hex apa sahaja — emas memberi kontras kuat pada templat biru gelap

Pemilih Warna bar alat mengawal dua perkara serentak:

  • Teks terpilih — memilih warna isi untuk mana-mana elemen teks terpilih.
  • Warna sisip lalai — untuk bentuk, reben dan ikon yang dimasukkan seterusnya, ditambah objek SVG terpilih (mewarna semula lejang dan isi di tempat).

Pilih warna daripada palet atau masukkan kod hex. Di dalam setiap popover bentuk/reben/ikon juga terdapat bar warna yang lebih kecil untuk pilihan warna sekali yang tidak menukar lalai bar alat.

Menjajarkan Elemen

Teks dipusatkan secara mendatar dan menegak melalui butang penjajaran bar alat

Baris penjajaran 6 butang berfungsi pada objek terpilih berbanding kanvas:

ButangTindakan
Jajarkan kiriPinkan ke tepi kiri kanvas
Pusatkan secara mendatarPusatkan pada paksi X kanvas
Jajarkan kananPinkan ke tepi kanan kanvas
Jajarkan atasPinkan ke tepi atas kanvas
Pusatkan secara menegakPusatkan pada paksi Y kanvas
Jajarkan bawahPinkan ke tepi bawah kanvas

Apabila anda menyeret elemen berhampiran pusat kanvas, panduan snap putus-putus ungu muncul dan objek menyangkut ke penjajaran sempurna.

Pilihan Berbilang & Pelapisan

  • Tahan Shift dan klik untuk memilih berbilang objek, atau seret kotak pilihan merentasi kanvas.
  • Gunakan Hantar ke belakang / Bawa ke hadapan untuk mengawal susunan z.
  • Tekan Delete atau klik butang Padam bar alat untuk membuang pilihan.
  • Buat asal / Buat semula (atau Ctrl+Z / Ctrl+Shift+Z) berjalan melalui 20 perubahan terakhir.

Memadam Elemen

  1. Pilih elemen yang ingin anda buang (atau shift-klik untuk beberapa).
  2. Klik butang Padam dalam bar alat, atau tekan kekunci Delete.

Tip untuk Reka Bentuk Lencana yang Baik

  • Buat ringkas — gunakan teks yang jelas dan elakkan kekacauan. Lencana selalunya dipaparkan pada saiz kecil.
  • Gunakan kontras tinggi — pastikan teks boleh dibaca berbanding latar belakang.
  • Sertakan nama lencana — penerima dan penonton harus memahami kelayakan sekilas.
  • Format segi empat sama — lencana dipaparkan paling baik sebagai imej segi empat sama.
  • Konsistensi jenama — gunakan warna dan fon organisasi anda merentasi semua lencana.
  • Uji pada saiz kecil — pratonton lencana anda pada 100x100 piksel untuk memastikan kebolehbacaan.

Menyimpan Imej Lencana

Lencana akhir yang disusun

Apabila anda berpuas hati dengan reka bentuk anda, klik Selesai atau Simpan dalam pereka. Imej ditangkap daripada kanvas dan dilampirkan pada lencana anda. Ia akan dimuat naik ke IPFS apabila anda mencipta atau menyimpan lencana.

badges.ninja Documentation