Skip to content

ব্যাজ ডিজাইনার

ব্যাজ ডিজাইনার হলো badges.ninja-এ অন্তর্নির্মিত একটি ভিজ্যুয়াল ক্যানভাস এডিটর যা আপনাকে কোনো ডিজাইন টুল ছাড়াই পেশাদার ব্যাজের ছবি তৈরি করতে দেয়।

Badge Designer — embedded in the Create Badge modal alongside the form sidebar

ওভারভিউ

যখন আপনি একটি ব্যাজ তৈরি বা সম্পাদনার সময় image ক্ষেত্রে ক্লিক করেন তখন ডিজাইনার খোলে। এটি একটি ক্যানভাস কর্মক্ষেত্র সরবরাহ করে যেখানে আপনি আপনার ব্যাজের ছবি তৈরি করতে টেমপ্লেট, টেক্সট এবং কাস্টম ব্যাকগ্রাউন্ড একত্রিত করতে পারেন।

Template picker with shape + color filters

একটি টেমপ্লেট নির্বাচন

ডিজাইনারে 80+ অন্তর্নির্মিত টেমপ্লেট অন্তর্ভুক্ত রয়েছে যা দুটি মাত্রায় সংগঠিত যাতে আপনি দ্রুত একটি খুঁজে পেতে পারেন:

  • 8 আকৃতি — Circle, Rounded square, Hexagon, Shield, Octagon, Diamond, Banner, Seal
  • 8 রঙ প্যালেট — Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite

একটি বেছে নিতে:

  1. ডিজাইনার টুলবারে Templates এ ক্লিক করুন।
  2. তালিকা সংকুচিত করতে পিকারের শীর্ষে Shape এবং Color ফিল্টার ব্যবহার করুন। ডানদিকে কাউন্টার দেখায় কতটি টেমপ্লেট মিলছে (যেমন 8 / 84)।
  3. ক্যানভাসে প্রয়োগ করতে একটি টেমপ্লেটে ক্লিক করুন।

জেনারেট করা টেমপ্লেটগুলি ইচ্ছাকৃতভাবে পরিষ্কার — একটি আকৃতি এবং প্যালেট বেছে নিন, তারপর ডিজাইনারে আপনার নিজস্ব টেক্সট, আইকন এবং রিবন যোগ করুন।

Template applied to the canvas

আকৃতি, রিবন ও আইকন যোগ করা

Shapes popover

Icons popover with color bar

টেমপ্লেটের বাইরে, ডিজাইনার তিনটি অতিরিক্ত সম্পদ লাইব্রেরি নিয়ে আসে যা আপনি যেকোনো টেমপ্লেটের উপরে স্তরিত করতে পারেন:

  • আকৃতি — 80+ ভেক্টর আকৃতি (বৃত্ত, শিল্ড, ষড়ভুজ, তারা, পদক, সিল, মালা, ব্যানার, জ্যামিতিক ফর্ম) বিভাগে গোষ্ঠীবদ্ধ
  • রিবন — 20টি সজ্জাসূচক রিবন ওভারলে
  • আইকন — 50টি চিত্রসূচক আইকন (atom, award, brain, briefcase, certificate, code, crown, diamond, diploma, graduation-cap, lightbulb, medal, rocket, shield-check, star, target, trophy, …)

যেকোনো পপওভার থেকে একটি বেছে নিন এবং এটি বর্তমান রঙে ক্যানভাসে ঢোকানো হয়। প্রতিটি পপওভারের ভিতরে Color bar আপনাকে সম্পদ ঢোকানোর আগে সেটিকে পুনরায় রঙ করতে দেয় — টুলবারের ডিফল্ট থেকে ভিন্ন রঙ চাইলে উপযোগী।

একটি কাস্টম ব্যাকগ্রাউন্ড বা ছবি আপলোড

আপনি ব্যাকগ্রাউন্ড হিসাবে বা উপরে একটি স্তর হিসাবে ব্যবহারের জন্য আপনার নিজস্ব ছবি আপলোড করতে পারেন:

  1. ডিজাইনার টুলবারে Upload এ ক্লিক করুন।
  2. আপনার কম্পিউটার থেকে একটি ছবি ফাইল নির্বাচন করুন (PNG বা JPG প্রস্তাবিত)।
  3. ছবিটি একটি নির্বাচনযোগ্য অবজেক্ট হিসাবে ক্যানভাসে রাখা হয় — টেনে আনুন, স্কেল করুন, ঘোরান, বা অন্যান্য উপাদানের পিছনে পাঠান।

একটি ছবি আপলোড করলে টেমপ্লেট মুছে ফেলা হয় না বা কোনো বিদ্যমান স্তর — এটি কেবল উপরে স্তূপ হয়।

সম্পূর্ণ ব্যাকগ্রাউন্ডের জন্য, কমপক্ষে 600×600 পিক্সেলের একটি বর্গাকার ছবি ব্যবহার করুন।

টেক্সট যোগ করা

Text element added to the canvas

  1. টুলবারে Text বোতামে ক্লিক করুন।
  2. ক্যানভাসে একটি নতুন টেক্সট উপাদান প্রদর্শিত হয়।
  3. টেক্সট নির্বাচন করতে ক্লিক করুন, তারপর আপনার বিষয়বস্তু টাইপ করুন।
  4. ক্যানভাসে অবস্থান নির্ধারণ করতে টেক্সট উপাদানটি টেনে আনুন।

আপনি আপনার ব্যাজের বিভিন্ন অংশের (শিরোনাম, প্রাপক, তারিখ ইত্যাদি) জন্য একাধিক টেক্সট উপাদান যোগ করতে পারেন।

ফন্ট পরিবর্তন

Text switched from Arial to Georgia — serif font applied to the selected text

ডিজাইনারে 11টি ফন্ট অন্তর্ভুক্ত রয়েছে (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

  1. ক্যানভাসে একটি টেক্সট উপাদান নির্বাচন করুন।
  2. টুলবারে Font ড্রপডাউনে ক্লিক করুন।
  3. উপলব্ধ ফন্টগুলি থেকে বেছে নিন।

ফন্ট পূর্বরূপ দেখায় নির্বাচন করার আগে প্রতিটি বিকল্প কেমন দেখায়।

রঙ পরিবর্তন

Color picker open; pick any hex — gold gives strong contrast on dark-blue templates

টুলবার Color পিকার একসাথে দুটি জিনিস নিয়ন্ত্রণ করে:

  • নির্বাচিত টেক্সট — যেকোনো নির্বাচিত টেক্সট উপাদানের জন্য পূরণের রঙ বেছে নেয়।
  • ডিফল্ট ইনসার্ট রঙ — পরবর্তী ঢোকানো আকৃতি, রিবন এবং আইকনের জন্য, এছাড়াও নির্বাচিত SVG অবজেক্ট (জায়গায় স্ট্রোক এবং পূরণ পুনরায় রঙ করে)।

প্যালেট থেকে একটি রঙ বেছে নিন বা একটি হেক্স কোড লিখুন। প্রতিটি আকৃতি/রিবন/আইকন পপওভারের ভিতরে এককালীন রঙ পছন্দের জন্য একটি ছোট Color barও রয়েছে যা টুলবারের ডিফল্ট পরিবর্তন করে না।

উপাদান সারিবদ্ধ করা

Text centered horizontally and vertically via the toolbar alignment buttons

6-বোতাম সারিবদ্ধকরণ সারি ক্যানভাসের আপেক্ষিক নির্বাচিত অবজেক্ট(s) এ কাজ করে:

বোতামক্রিয়া
Align leftক্যানভাসের বাম প্রান্তে পিন করুন
Center horizontallyক্যানভাস X অক্ষে কেন্দ্র করুন
Align rightক্যানভাসের ডান প্রান্তে পিন করুন
Align topক্যানভাসের শীর্ষ প্রান্তে পিন করুন
Center verticallyক্যানভাস Y অক্ষে কেন্দ্র করুন
Align bottomক্যানভাসের নীচের প্রান্তে পিন করুন

যখন আপনি একটি উপাদান ক্যানভাসের কেন্দ্রের কাছে টেনে আনেন, তখন ড্যাশযুক্ত বেগুনি স্ন্যাপ গাইড প্রদর্শিত হয় এবং অবজেক্টটি নিখুঁত সারিবদ্ধতায় স্ন্যাপ হয়।

বহু-নির্বাচন ও স্তরায়ন

  • একাধিক অবজেক্ট নির্বাচন করতে Shift ধরে ক্লিক করুন, অথবা ক্যানভাস জুড়ে একটি নির্বাচন বাক্স টেনে আনুন।
  • z-ক্রম নিয়ন্ত্রণ করতে Send to back / Bring to front ব্যবহার করুন।
  • নির্বাচন সরাতে Delete চাপুন বা টুলবার Delete বোতামে ক্লিক করুন।
  • Undo / Redo (বা Ctrl+Z / Ctrl+Shift+Z) শেষ 20টি পরিবর্তনের মাধ্যমে হাঁটে।

উপাদান মুছে ফেলা

  1. আপনি যে উপাদানটি সরাতে চান তা নির্বাচন করুন (অথবা একাধিকের জন্য shift-ক্লিক করুন)।
  2. টুলবারে Delete বোতামে ক্লিক করুন, অথবা Delete কী চাপুন।

ভাল ব্যাজ ডিজাইনের জন্য টিপস

  • এটি সহজ রাখুন — পরিষ্কার টেক্সট ব্যবহার করুন এবং বিশৃঙ্খলা এড়িয়ে চলুন। ব্যাজটি প্রায়শই ছোট আকারে প্রদর্শিত হবে।
  • উচ্চ কনট্রাস্ট ব্যবহার করুন — নিশ্চিত করুন টেক্সট ব্যাকগ্রাউন্ডের বিরুদ্ধে পাঠযোগ্য।
  • ব্যাজের নাম অন্তর্ভুক্ত করুন — প্রাপক এবং দর্শকদের এক নজরে ক্রেডেনশিয়াল বুঝতে হবে।
  • বর্গাকার ফরম্যাট — বর্গাকার ছবি হিসাবে ব্যাজ সবচেয়ে ভাল দেখায়।
  • ব্র্যান্ড সামঞ্জস্য — সমস্ত ব্যাজ জুড়ে আপনার সংস্থার রঙ এবং ফন্ট ব্যবহার করুন।
  • ছোট আকারে পরীক্ষা করুন — পাঠযোগ্যতা নিশ্চিত করতে আপনার ব্যাজটি 100x100 পিক্সেলে পূর্বরূপ দেখুন।

ব্যাজের ছবি সংরক্ষণ

Final composed badge

যখন আপনি আপনার ডিজাইনে সন্তুষ্ট হন, ডিজাইনারে Done বা Save এ ক্লিক করুন। ছবিটি ক্যানভাস থেকে ক্যাপচার করা হয় এবং আপনার ব্যাজে সংযুক্ত হয়। আপনি যখন ব্যাজ তৈরি বা সংরক্ষণ করবেন তখন এটি IPFS-এ আপলোড হবে।

badges.ninja Documentation