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

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

ওভারভিউ

ডিজাইনারটি সরাসরি ব্যাজ তৈরি / সম্পাদনা উইন্ডোর ভেতরে খোলে। এর তিনটি অংশ:

• বাঁ রেইল — মাঝের প্যানেলকে টেমপ্লেট, আপলোড, এলিমেন্ট, টেক্সট, অ্যাট্রিবিউট, QR কোড ও লেয়ার-এর মধ্যে বদলায়।
• প্যানেল — রেইলে নির্বাচিত মোডের টুলগুলো।
• ক্যানভাস — ব্যাজের লাইভ, সম্পাদনযোগ্য প্রিভিউ। আপনি যা-ই যোগ করেন তা একটি আসল, নির্বাচনযোগ্য অবজেক্ট, যা সরানো, স্টাইল বদলানো, ক্রম পাল্টানো বা মুছে ফেলা যায়।

ব্যাজের বিস্তারিত (ইস্যুকারী, নাম, বিবরণ, মানদণ্ড ও শেয়ার টেক্সট) ঠিক ক্যানভাসের নিচে থাকে, ফলে ডিজাইন ও সনদের তথ্য একই উইন্ডোতে থাকে — আলাদা কোনো ধাপ নেই।

টেমপ্লেট দিয়ে শুরু করা

বিল্ট-ইন ডিজাইন দেখতে রেইলে টেমপ্লেট-এ ক্লিক করুন। Recognition পরিবার আপনাকে একটি পুরোপুরি সাজানো পেশাদার ব্যাজ দেয় — আকৃতিযুক্ত ফ্রেম এবং সম্পাদনযোগ্য প্লেসহোল্ডার টেক্সট (প্রতিষ্ঠান, শিরোনাম, উপশিরোনাম ও যাচাই সিল) — আটটি রঙের প্যালেটে (Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite)। তালিকা ছোট করতে ক্যাটাগরি ফিল্টার ব্যবহার করুন, অথবা একদম শুরু থেকে করতে ফাঁকা ক্যানভাস বেছে নিন।

প্রয়োগ করতে একটি টেমপ্লেটে ক্লিক করুন। এর টেক্সট সাধারণ, সম্পাদনযোগ্য লেয়ারে পরিণত হয়, যা আপনি বদলাতে বা সরাতে পারেন — কিছুই স্থায়ীভাবে বসানো নয়।

এলিমেন্ট — আকৃতি, আইকন, রিবন ও ব্যাকগ্রাউন্ড

এলিমেন্ট প্যানেল আপনার ব্যাজের উপরে গ্রাফিক্স যোগ করে:

• লাইন — অনুভূমিক / উল্লম্ব রেখা।
• আকৃতি — ভরাট ও আউটলাইন আয়তক্ষেত্র, গোলাকার কোণের আয়তক্ষেত্র, বৃত্ত ও ত্রিভুজ।
• আইকন — ৭০টি চিত্রলিপির আইকন (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy ও আরও অনেক), সার্চযোগ্য।
• রিবন — ২৮টি সাজসজ্জার রিবন ওভারলে, Straight / Pointed / Tails / Decorative হিসেবে সাজানো।
• বেস — বিভিন্ন ক্যাটাগরির (বৃত্ত, শিল্ড, ষড়ভুজ, তারা, মেডেল, সিল, পুষ্পমাল্য, ব্যানার, জ্যামিতিক) ৮০টি রঙ-পরিবর্তনযোগ্য বেস আকৃতি।

প্রতিটি আইকন, রিবন ও বেস বর্তমান রঙে বসে এবং যেকোনো সময় নতুন রঙ করা যায়।

ব্যাকগ্রাউন্ড আকৃতি

এলিমেন্ট → ব্যাকগ্রাউন্ড আকৃতি-তে ৬৮টি তৈরি ফ্রেম আছে (আকৃতি × প্যালেট লাইব্রেরি)। একটি প্রয়োগ করলে ব্যাজের ব্যাকগ্রাউন্ড ফ্রেম বদলে যায়, কিন্তু আপনার টেক্সট ও এলিমেন্ট উপরে থেকে যায় — সাজানো টেমপ্লেট ছাড়া নির্দিষ্ট আকৃতি/রঙের সমন্বয় চাইলে এটি কাজে লাগে।

নিজের ছবি আপলোড করা

নিজের লোগো, ছবি বা গ্রাফিক যোগ করতে আপলোড প্যানেল ব্যবহার করুন। PNG, JPEG ও SVG গ্রহণযোগ্য, সর্বোচ্চ ৫ MB। ছবিটি একটি সাধারণ ফোরগ্রাউন্ড অবজেক্ট হিসেবে বসে — ডিজাইনের উপরে স্তরবদ্ধ হয় এবং ব্যাকগ্রাউন্ড কখনও মুছে দেয় না। ব্যাজের ব্যাকগ্রাউন্ড বদলাতে এর বদলে একটি টেমপ্লেট বা ব্যাকগ্রাউন্ড আকৃতি বেছে নিন।

টেক্সট যোগ ও স্টাইল করা

টেক্সট প্যানেলে আছে:

• শিরোনাম / উপশিরোনাম / সাধারণ টেক্সট যোগ করুন — আগে থেকে মাপ ঠিক করা টেক্সট অবজেক্ট।
• কম্বিনেশন — Certificate of Achievement, Awarded to বা Verify at -এর মতো তৈরি স্তবক — প্রতিটি লাইন আলাদাভাবে সম্পাদনযোগ্য থাকে।

যেকোনো টেক্সট অবজেক্ট নির্বাচন করলে ক্যানভাসের উপরে কনটেক্সচুয়াল টুলবার দেখা যায়:

• ফন্ট — Sans, Serif, Handwriting, Mono ও System হিসেবে সাজানো ৫০টি ফন্টের লাইব্রেরি। ড্রপডাউন থেকে একটি বেছে নিন; প্রতিটি অপশন নিজের টাইপফেসে প্রিভিউ দেখায়।
• + ফন্ট — বর্তমান সেশনের জন্য ব্র্যান্ডের টাইপফেস (TTF, WOFF, WOFF2, OTF) আপলোড করুন।
• ফন্ট সাইজ — − / + স্টেপার (বা সংখ্যা টাইপ করে) হ্যান্ডেল না টেনেই নির্বাচিত টেক্সটের মাপ নিখুঁতভাবে বদলায়।
• রঙ — নির্বাচিত টেক্সটের ফিল ঠিক করে (এবং নতুন আকৃতি/আইকনের ডিফল্ট রঙও)।
• অ্যালাইনমেন্ট — ছয়টি বোতাম ক্যানভাসের সাপেক্ষে নির্বাচনকে বাঁ / মাঝ / ডান এবং উপর / মধ্য / নিচে সাজায়।

ডাইনামিক অ্যাট্রিবিউট

অ্যাট্রিবিউট প্যানেল টেক্সট অবজেক্ট হিসেবে ডাইনামিক টোকেন বসায় — , , , , , । প্রতিটি টোকেন ইস্যুর সময় প্রাপক অনুযায়ী পূরণ হয়, ফলে একটি ডিজাইন যাঁদের ইস্যু করবেন প্রত্যেকের জন্য নিজেকে ব্যক্তিগতকৃত করে নেয়। এভাবেই ব্যাজের গায়ে প্রাপকের নাম বা ইস্যুর তারিখ বসে।

QR কোড

QR কোড প্যানেল -এর সঙ্গে যুক্ত একটি স্ক্যানযোগ্য কোড বসায়। প্রতিটি ইস্যু করা সনদে এটি সেই সনদের পাবলিক যাচাই পৃষ্ঠায় নিয়ে যায়, ফলে প্রিন্ট করা ব্যাজ স্ক্যান করে যে কেউ তা যাচাই করতে পারেন।

লেয়ার

লেয়ার প্যানেল ক্যানভাসের প্রতিটি অবজেক্টের তালিকা দেখায়। এখান থেকে প্রতিটি লেয়ার পুনর্বিন্যাস (সামনে আনা / পিছনে পাঠানো), লুকানো/দেখানো, নির্বাচন ও মুছে ফেলা যায়। ব্যাকগ্রাউন্ড ফ্রেম সবার নিচে আটকানো থাকে এবং অ-ইন্টারঅ্যাক্টিভ থাকে, ফলে সব ক্লিক ফোরগ্রাউন্ড এলিমেন্টেই যায়।

আনডু / রিডু (Ctrl+Z / Ctrl+Shift+Z) শেষ ২০টি পরিবর্তন পর্যন্ত যায়, আর ক্যানভাসের কেন্দ্রের কাছে কোনো অবজেক্ট টানলে ড্যাশ-রেখার স্ন্যাপ গাইড দেখা যায়।

ব্যাজ সংরক্ষণ

আলাদা কোনো "এক্সপোর্ট" ধাপ নেই। ডিজাইন ও বিস্তারিত তৈরি হলে:

• ব্যাজ তৈরি করুন ক্যানভাসকে PNG হিসেবে ধরে, আমাদের ইমেজ CDN-এ আপলোড করে (Amazon S3, অপরিবর্তনীয় কনটেন্ট-অ্যাড্রেসড URL-এর অধীনে সরবরাহ করা) এবং ব্যাজটি তার সম্পাদনযোগ্য ডিজাইনসহ সংরক্ষণ করে — ফলে ব্যাজ আবার খুললে আরও সম্পাদনার জন্য আপনার আলাদা লেয়ারগুলো ফিরে আসে।
• খসড়া সংরক্ষণ করুন চলমান ব্যাজ সার্ভারে সংরক্ষণ করে (ডিভাইস জুড়ে)। খসড়াগুলো আপনার ব্যাজ তালিকায় খসড়া চিহ্নসহ দেখায়, এবং পরে যেকোনোটি আবার তুলে নিতে পারেন।

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

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