1. ভূমিকা
শেষ আপডেট: ০৯/২১/২১
অ্যাপগুলি বেসলাইন স্কিম, ব্যবহারকারীর তৈরি গতিশীল রঙ, অথবা ব্র্যান্ড রঙ থেকে বিভিন্ন ধরণের রঙ গ্রহণ করতে পারে।
ম্যাটেরিয়াল ইউ-এর সাথে প্রবর্তিত নতুন গতিশীল রঙের বৈশিষ্ট্যগুলিতে ডুব দেওয়ার জন্য প্রস্তুত হোন। এই ল্যাবে, আপনি রঙ সিস্টেম কীভাবে কাজ করে, অ্যাক্সেসযোগ্য রঙ প্যালেট তৈরির চালিকা ধারণাগুলি এবং সর্বশেষ ডিজাইন সরঞ্জামগুলি ব্যবহার করে গতিশীল রঙের সাথে আপনার অ্যাপটিকে কল্পনা করতে সাহায্য করার পদ্ধতিগুলি শিখতে গতিশীল রঙ প্যালেট তৈরি করবেন।
তুমি কি শিখবে
- মেটেরিয়াল ডিজাইনের রঙে নতুন কী আছে
- আপনার অ্যাপে ব্যবহারকারী-উত্পাদিত রঙ কীভাবে প্রয়োগ করবেন
- সাহায্য করার জন্য সরঞ্জাম
পূর্বশর্ত
এই ল্যাবের জন্য আমরা কিছু মৌলিক নকশা ধারণার উপর ভিত্তি করে তৈরি করব।
- মৌলিক নকশা ধারণা সম্পর্কে জ্ঞান: রঙ প্যালেট
- বর্তমান অ্যান্ড্রয়েড রঙের স্কিম এবং ভূমিকা সম্পর্কে জ্ঞান।
- ফিগমার জ্ঞান
তোমার যা লাগবে
2. শুরু করুন
সেটআপ
শুরু করার জন্য আপনাকে Designlab Figma ফাইলটি অ্যাক্সেস করতে হবে। ল্যাবের জন্য আপনার যা কিছু প্রয়োজন তা Figma ফাইলে রয়েছে। আপনি হয় ফাইলটি ডাউনলোড এবং আমদানি করতে পারেন অথবা Figma কমিউনিটি থেকে এটি ডুপ্লিকেট করতে পারেন।
প্রথমে, ফিগমাতে সাইন ইন করুন অথবা একটি অ্যাকাউন্ট তৈরি করুন ।
ফিগমা কমিউনিটি থেকে ডুপ্লিকেট
আপনার অ্যাপের "ভিজ্যুয়ালাইজিং ডাইনামিক কালার উইথ ম্যাটেরিয়াল ডিজাইন " ফাইলে নেভিগেট করুন অথবা ফিগমা কমিউনিটির মধ্যে "ভিজ্যুয়ালাইজিং ডাইনামিক কালার ইন ইওর অ্যাপ উইথ ম্যাটেরিয়াল ডিজাইন" অনুসন্ধান করুন। ফাইলটি আপনার ফাইলগুলিতে কপি করতে উপরের ডানদিকের কোণায় "ডুপ্লিকেট" এ ক্লিক করুন।
ফাইল লেআউট
ফাইলটি ঘুরে দেখুন। আপনি লক্ষ্য করবেন যে ফাইলটি স্বয়ংসম্পূর্ণ, একটি ভূমিকা দিয়ে শুরু হচ্ছে। প্রতিটি বিভাগ আর্টবোর্ডের একটি সারিতে বিভক্ত যা একে অপরের সাথে সংযুক্ত, বিভাগের জন্য কিছু মূল ধারণা সহ, তারপরে অনুশীলন করা হয়। বিভাগ এবং অনুশীলনগুলি একে অপরের উপর ভিত্তি করে তৈরি, তাই সেগুলি ক্রমানুসারে সম্পন্ন করা উচিত।
এই কোডল্যাবটি আপনাকে সেই ধারণাগুলি এবং অনুশীলনগুলি আরও বিশদে পরিচালনা করবে। নতুন ম্যাটেরিয়াল ইউ বৈশিষ্ট্যগুলি সম্পর্কে আরও জানতে কোডল্যাবের সাথে পড়ার পরামর্শ দিচ্ছি।
ইন্ট্রো আর্টবোর্ড থেকে শুরু করে, এমন কিছু বোতাম আছে যা আর্টবোর্ডগুলিকে ক্রমানুসারে লিঙ্ক করে, বোতামে ক্লিক করে লিঙ্কটি অ্যাক্সেস করুন।
ফিগমা প্লাগইন ইনস্টল করুন
এই কোডল্যাবটি ডায়নামিক কালার স্কিম এবং টোকেন তৈরি করতে একটি নতুন ফিগমা প্লাগইনের উপর ব্যাপকভাবে নির্ভর করে। ফিগমা কমিউনিটি পৃষ্ঠা থেকে সরাসরি ফিগমা প্লাগইন ইনস্টল করুন অথবা ফিগমা কমিউনিটিতে "ম্যাটেরিয়াল থিম বিল্ডার" অনুসন্ধান করুন।
৩. রঙের ধারণা
ডাইনামিক কালার কী?
মেটেরিয়াল ইউ রঙকে আরও ব্যক্তিগতকৃত অভিজ্ঞতা হিসেবে পুনর্কল্পনা করে। গতিশীল রঙ নিষ্কাশনের মাধ্যমে, সম্ভাব্য রঙের অভিজ্ঞতার পরিসর উল্লেখযোগ্যভাবে বিস্তৃত হয়।
ডায়নামিক কালার হল ম্যাটেরিয়াল ইউ-এর একটি গুরুত্বপূর্ণ অংশ যেখানে একটি অ্যালগরিদম ব্যবহারকারীর ওয়ালপেপার থেকে কাস্টম রঙ সংগ্রহ করে তাদের অ্যাপ এবং সিস্টেম UI-তে প্রয়োগ করার জন্য।
আলোকসজ্জা
গতিশীল রঙ অপ্রত্যাশিত প্রেক্ষাপটে কাজ করার জন্য তৈরি। বিভিন্ন দেখার প্রেক্ষাপটে বৈসাদৃশ্য অনুপাত পরিচালনা করার জন্য, আলোকসজ্জার স্তর হল মূল বৈশিষ্ট্য যা পণ্য দল প্রতিটি নির্দিষ্ট রঙের সংমিশ্রণ পরীক্ষা না করেও রঙগুলিকে সফলভাবে একত্রিত করতে দেয়।
একই রকম উজ্জ্বলতা সম্পন্ন উপাদানগুলির স্পষ্টতার জন্য উপযুক্ত বৈসাদৃশ্য থাকবে না, অন্যদিকে ভিন্ন উজ্জ্বলতা সম্পন্ন উপাদানগুলি আরও স্পষ্টভাবে চিহ্নিত করা যাবে।
টোনাল প্যালেট
একটি টোনাল প্যালেট হল একটি রঙের (একটি গতিশীল নিষ্কাশিত রঙ) অনুবাদ যা সম্পর্কিত টোনের বর্ণালীতে রূপান্তরিত হয়। একটি রঙের তেরোটি টোনে অনুবাদের ফলে টোনাল রেঞ্জের একটি গ্রুপ, যাকে টোনাল প্যালেট বলা হয়, বিভিন্ন প্রসঙ্গে প্রয়োগ করা যায়, একটি উপাদানের ভিতরের পৃথক উপাদান থেকে শুরু করে সমগ্র অ্যাপ থিম পর্যন্ত।
রঙ একটি স্বর পরিসরে রূপান্তরিত।
৪. রং বের করা
বীজ থেকে প্রকল্প
চলুন দেখি মেটেরিয়াল থিম বিল্ডারের সাথে গতিশীল রঙ কীভাবে কাজ করে।
- ম্যাটেরিয়াল থিম বিল্ডার খুলুন। ডাইনামিক সিলেক্টেড থাকলে, একটি ছবি ড্রপ করুন অথবা ফাইল ব্রাউজার থেকে একটি নির্বাচন করুন। লক্ষ্য করুন ছবির উপর ভিত্তি করে বীজের রঙ আপডেট হবে।
- রঙের মানগুলি একটি ওয়ালপেপার থেকে বের করা হয় এবং একটি "টাইপ" বরাদ্দ করা হয় যা নির্ধারণ করে যে রঙটি একটি স্কিমের অন্যান্য রঙের সাথে কীভাবে সম্পর্কিত হবে। এই "কী রঙগুলি" (ডানদিকে) এই মানগুলি প্রতিফলিত করার জন্য আপডেট করা হয়েছে।
- এরপর এগুলোকে আলোকসজ্জা-ভিত্তিক টোনাল প্যালেটে রূপান্তরিত করা হয়, যা আলো থেকে গাঢ় টোন সহ পাঁচটি রঙের পরিসর তৈরি করে। রঙের আউটপুটে টোনাল প্যালেটগুলিকে সেভাবেই লেবেল করা হয়।
- পাঁচটি স্বরবৃত্তীয় পরিসর থেকে, নির্দিষ্ট স্বরগুলিকে (আলোকিততার উপর ভিত্তি করে) একটি স্কিম গঠনকারী পূর্বনির্ধারিত ভূমিকায় স্লট করা হয়। নকশা টোকেনের মাধ্যমে রঙগুলিকে একটি স্কিম-এ ম্যাপ করা হয়।
একটি টারশিয়ারি টোনাল রেঞ্জ থেকে তৈরি এবং উপাদানগুলিতে ম্যাপ করা টারশিয়ারি রঙের ভূমিকা।
৫. থিম এবং টোকেন
ডিজাইন টোকেনগুলি একটি পণ্য জুড়ে নমনীয়তা এবং ধারাবাহিকতা সক্ষম করে, উদাহরণস্বরূপ, ডিজাইনারদের একটি UI-তে একটি নির্দিষ্ট মানের পরিবর্তে একটি উপাদানের রঙের ভূমিকা নির্ধারণ করার অনুমতি দেয়। টোকেনগুলি একটি উপাদানের নির্ধারিত ভূমিকা এবং একটি ভূমিকার জন্য নির্বাচিত রঙের মানের মধ্যে একটি সেতু হিসাবে কাজ করে। গতিশীল রঙের প্রবর্তনের সাথে সাথে নির্দিষ্ট রঙের পরিবর্তে রঙের ভূমিকার জন্য ডিজাইন করা আরও মৌলিক।
থিমগুলিতে রঙ এবং ধরণ উভয়ের জন্যই মেটেরিয়াল ডিজাইন টোকেন থাকে, যা নিশ্চিত করে যে ডিজাইন এবং কোডে ব্যবহারকারীর তৈরি প্যালেট এবং কাস্টম মান সহ বেসলাইন উপস্থাপনের জন্য সত্যের একটি উৎস রয়েছে।
ফিগমাতে, প্লাগইনটি এই টোকেনগুলিকে স্টাইল হিসেবে জেনারেট করে, অর্থাৎ জেনারেট করা স্টাইলগুলি ব্যবহার করলে আপনি MD টোকেনগুলি ব্যবহার করবেন।
টোনাল প্যালেটের রঙগুলি ডিজাইন টোকেনের মাধ্যমে হালকা বা গাঢ় স্কিমে ম্যাপ করা হয়।
ম্যাপিং সিস্টেমটি একটি উপাদানের প্রতিটি উপাদানকে একটি স্বর নির্ধারণ করে।
টোকেন সেটআপ করুন
আপনার ডিজাইনে গতিশীল রঙ প্রয়োগ করতে আমাদের বিদ্যমান ম্যাটেরিয়াল-থিমের টোকেনগুলিতে মকআপ সেট করতে হবে।
- লেআউটের ফ্রেম নির্বাচন করে এবং swap এ ক্লিক করে এই থিমটি ব্যবহার করার জন্য লেআউটের সমস্ত টোকেন (ফিগমা স্টাইল) ডানদিকে সেট করা যাক। আপনি নির্বাচিত রঙগুলিতে স্টাইল প্রিফিক্স আপডেট দেখতে পাবেন।
নির্বাচিত ডিজাইনে ব্যবহৃত সংযুক্ত থিমটি আপডেট করতে সোয়াপ ক্লিক করুন।
- এবার একটি ছবি দিন অথবা ফাইল ব্রাউজার থেকে একটি নির্বাচন করুন। মকআপের মানগুলি ছবিটি থেকে নিষ্কাশিত গতিশীল রঙের উপর নির্ভর করবে।
- শাফেল বোতামে ক্লিক করুন, এটি ছবি থেকে বের করার পরিবর্তে বীজের রঙকে এলোমেলোভাবে এক্সট্রাপোলেট করবে। গতিশীল রঙ আপনার ডিজাইনের মকগুলিকে কীভাবে প্রভাবিত করতে পারে তা দ্রুত দেখার এটি আরেকটি উপায়।
বীজের রঙ এলোমেলোভাবে সাজানোর জন্য শাফেল বোতামে ক্লিক করুন।
থিম ছাড়া প্লাগইন খুললে শুরু করার জন্য একটি সেটআপ স্ক্রিন দেখাবে। 'শুরু করুন' আপনার মকআপের সাথে সংযোগ স্থাপন করতে বা মেটেরিয়াল ডিজাইন কিটের সাথে ব্যবহার করার জন্য একটি ফিগমা স্টাইল গ্রুপ হিসাবে ডিফল্ট বেসলাইন 'ম্যাটেরিয়াল-থিম' তৈরি করবে।
৬. UI তে প্রয়োগ করা
প্রদত্ত লেআউটগুলি ম্যাটেরিয়াল ডিজাইন কিট দিয়ে তৈরি করা হয়েছিল যা ম্যাটেরিয়াল ডিজাইন টোকেন ব্যবহার করে, তবে কিছু কাস্টম উপাদান রয়েছে যা ম্যাপ করা হয়নি।
- আর্টিকেল কার্ডগুলি নির্বাচন করুন। পূরণের ক্ষেত্রে, স্টাইল (চারটি বিন্দুর আইকন) কে material-theme/surface এ সেট করুন। (আপনি surface এর জন্যও অনুসন্ধান করতে পারেন)।
- একই প্রক্রিয়ায়, কার্ডগুলিতে টাইপটি নির্বাচন করুন এবং অন-সারফেসে সেট করুন এবং চেকবক্সগুলিকে প্রাথমিকে সেট করুন।
ডিজাইনের কার্ডগুলিতে ব্যবহৃত ফিগমা স্টাইল।
এরপর আমরা বাকি স্কিমগুলির মাধ্যমে পুনরাবৃত্তি করার জন্য অতিরিক্ত মক তৈরি করব।
থিম তৈরি করুন এবং পুনরাবৃত্তি করুন
আমরা এখন গতিশীল রঙ কল্পনা করার জন্য একটি মকআপ সম্পূর্ণরূপে সংযুক্ত করেছি, তবে আমরা একাধিক থিম তৈরি করতে পারি এবং একসাথে বিভিন্ন ধরণের গতিশীল রঙ কল্পনা করার জন্য সেগুলিকে পৃথক মকআপে অদলবদল করতে পারি।
- প্লাগইন মোডালে, ড্রপডাউনে ক্লিক করুন এবং 'নতুন থিম যোগ করুন ' নির্বাচন করুন।
- একটি অনন্য থিমের নাম তৈরি করুন এবং 'থিম তৈরি করুন ' এ ক্লিক করুন। এটি প্রতিটি তৈরি থিমের জন্য নতুন রঙের ডায়াগ্রামও তৈরি করবে।
ড্রপডাউন মেনু দিয়ে একটি নতুন থিম যোগ করা হচ্ছে।
- একটি ছবি যোগ করুন অথবা বীজের রঙ এলোমেলো করুন।
- প্লাগইন মোডালে, একটি মকআপ (অ্যাপ UI কম্পোনেন্ট) নির্বাচন করুন এবং swap এ ক্লিক করুন। এটি ড্রপডাউনে দেখানো বর্তমান থিমে স্টাইলের মান আপডেট করবে।
- মকআপটি ডুপ্লিকেট (CMD + D) করুন।
নির্বাচিত ডিজাইনে ব্যবহৃত সংযুক্ত থিমটি আপডেট করতে সোয়াপ ক্লিক করুন।
- ১-৫ ধাপ পুনরাবৃত্তি করুন।
এখন আপনার কাছে বিভিন্ন গতিশীল রঙের পুনরাবৃত্তি সহ একাধিক ডিজাইন আছে!
৭. অভিনন্দন
গতিশীল রঙ শেখা এবং প্রয়োগ করার ক্ষেত্রে দারুন কাজ! মেটেরিয়াল থিম বিল্ডার আপনার জন্য মেটেরিয়াল ডিজাইনে রঙকে আরও সহজ করে তুলতে সাহায্য করার জন্য এখানে রয়েছে গতিশীল রঙ কল্পনা করে, কাস্টম থিম তৈরি করে এবং কোডে রপ্তানি করে।
যদি আপনার কোন প্রশ্ন থাকে, তাহলে টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় আমাদের জিজ্ঞাসা করতে দ্বিধা করবেন না।
আরও ডিজাইন কন্টেন্ট এবং টিউটোরিয়ালের জন্য youtube.com/MaterialDesign- এ আমাদের সাথেই থাকুন।