আপনার ব্র্যান্ড রঙের মধ্যে একটি ১০-ধাপীয় গ্রেডিয়েন্ট তৈরি করুন

১. দুটি ব্র্যান্ড রঙ পরীক্ষা করুন

প্রসঙ্গ ছাড়াই আকর্ষণীয় প্রান্তবিন্দু নির্বাচনের পরিবর্তে প্রতিষ্ঠিত দুটি রঙ দিয়ে শুরু করুন। রঙ A ব্র্যান্ডের প্রাথমিক রঙ হতে পারে, যখন রঙ B একটি সহায়ক বা প্রচার রঙ হতে পারে। প্রতিটিটি বর্তমানে কোথায় উপস্থিত হয় এবং এটি কী যোগাযোগ করে তা রেকর্ড করুন।

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

যদি একটি প্রান্তবিন্দু এখনও অনুমোদিত না হয়, ব্যবহার করুন রঙ প্যালেট জেনারেটর মিশ্রণ ব্যায়াম শুরু করার আগে সংমিশ্রণগুলি অন্বেষণ করতে। দুটি রঙের মধ্যে একটি বিস্তারিত গ্রেডিয়েন্ট তৈরি করবেন না যা এখনও বিতর্কিত হচ্ছে।

এই পরীক্ষাটি একটি সাধারণ সমস্যা প্রতিরোধ করে: একটি পুরানো লোগো রঙ, একটি অনুমোদিত প্রচার মান বা সংকুচিত স্ক্রিনশট থেকে অনুলিপি করা কোড থেকে একটি পালিশ গ্রেডিয়েন্ট তৈরি করা।

২. বৈধ হেক্স প্রান্তবিন্দু প্রস্তুত করুন

কালার মিক্সার তার প্রান্তবিন্দু হিসাবে হেক্স মানগুলি ব্যবহার করে। প্রতিটি ছয়-অঙ্কের হেক্স মান একটি হ্যাশ চিহ্ন দিয়ে শুরু হয় এবং লাল, সবুজ এবং নীলকে প্রতিনিধিত্ব করে এমন জোড় রয়েছে। উদাহরণ স্বরূপ, #2563EB একটি শক্তিশালী নীল এবং #E11D48 একটি প্রাণবন্ত লাল-গোলাপী।

একটি কর্তৃত্বপূর্ণ ব্র্যান্ড ফাইল, ডিজাইন-সিস্টেম লাইব্রেরি বা উৎস কোড থেকে মানগুলি অনুলিপি করুন। একটি অফিসিয়াল কোড উপলব্ধ থাকলে লোগো স্ক্রিনশট থেকে স্যাম্পলিং এড়িয়ে চলুন। ইমেজ সংকোচন, ডিসপ্লে সেটিংস এবং রঙ ব্যবস্থাপনা একটি স্ক্রিনশট থেকে সংগ্রহ করা মানটি সামান্য পরিবর্তন করতে পারে।

প্রতিটি প্রান্তবিন্দু সাদা, হালকা ধূসর, কয়লা এবং কালো পটভূমিতে রাখুন। এটি এখনও সম্পূর্ণ গ্রেডিয়েন্ট পরীক্ষা করে না, তবে এটি প্রকাশ করে যে একটি সাধারণ প্রসঙ্গে প্রান্তবিন্দু দৃষ্টিগতভাবে দুর্বল হয়ে ওঠে কিনা।

প্রান্তবিন্দুগুলিকে অস্থায়ী কাজ করার নাম দিন যেমন brand-start এবং brand-end। সেগুলির নাম "বাম" এবং "ডান" দেবেন না কারণ গ্রেডিয়েন্ট দিক পরে পরিবর্তিত হতে পারে। রঙগুলি তাদের পরিচয় বজায় রাখা উচিত এমনকি যখন গ্রেডিয়েন্ট উল্লম্ব, কর্ণ বা রেডিয়াল হয়ে ওঠে।

৩. একটি দশ-ধাপীয় গ্রেডিয়েন্ট তৈরি করুন

কালার মিক্সার খুলুন, রঙ A এবং রঙ B প্রবেশ করুন এবং ধাপগুলির সংখ্যা দশে সেট করুন। ফলাফল তৈরি করুন এবং প্রতিটি প্রদর্শিত মান তার মূল ক্রমে একটি কাজ করার ডকুমেন্টে অনুলিপি করুন।

স্টপগুলির নাম দেওয়ার আগে, একটি স্ট্রিপ হিসাবে সম্পূর্ণ রূপান্তর দেখুন। এটি অবিরত বোধ করে নাকি একটি অঞ্চল হঠাৎ লাফিয়ে যায়? মাঝখানটি নিস্তেজ হয়ে ওঠে? একটি প্রান্তবিন্দু অন্যটির চেয়ে দৃষ্টিগতভাবে অনেক শক্তিশালী?

একটি গাণিতিকভাবে সমান ক্রম সর্বদা দৃষ্টিগতভাবে সমান দেখায় না। একটি উজ্জ্বল হলুদ একটি অন্ধকার নীলের চেয়ে উজ্জ্বল এবং আরও শক্তিশালী দেখা যেতে পারে এমনকি যখন মিশ্রণ শতাংশগুলি সমানভাবে বিতরণ করা হয়। অনুভূত উজ্জ্বলতা, হিউ এবং স্যাচুরেশন সবই ক্রমটি কেমন অনুভব করে তা প্রভাবিত করে।

নিম্নলিখিত উদাহরণটি দেখায় যে দুটি নমুনা প্রান্তবিন্দুর মধ্যে দশটি মান কীভাবে ডকুমেন্ট করা যেতে পারে। আপনার ফলাফল নির্বাচিত রঙ এবং সরঞ্জাম বা ডিজাইন অ্যাপ্লিকেশন দ্বারা ব্যবহৃত ইন্টারপোলেশন পদ্ধতির উপর নির্ভর করবে।

४. মধ্যবিন্দু এবং রূপান্তর পথ পরিদর্শন করুন

মধ্যবিন্দু বিশেষ মনোযোগ প্রাপ্য কারণ এটি প্রকাশ করে কীভাবে দুটি ব্র্যান্ড রঙ ইন্টারঅ্যাক্ট করে। যখন নীল এবং লাল-গোলাপী মিশ্রিত হয়, কেন্দ্রটি বেগুনির মধ্য দিয়ে চলতে পারে। অন্যান্য সংমিশ্রণগুলি কম পূর্বাভাসযোগ্য ফলাফল তৈরি করতে পারে। পরিপূরক রঙ, উদাহরণ স্বরূপ, নিরপেক্ষ মধ্য মান তৈরি করতে পারে।

মধ্যবিন্দুটি শুধুমাত্র একটি বড় আলাদা সোয়াচ হিসাবে বিচার করবেন না। এটি প্রতিবেশী স্টপগুলির মধ্যে রাখুন এবং তারপর এটি একটি বাস্তবসম্মত উপাদানে পরীক্ষা করুন। একটি রঙ যা নিজে থেকে আকর্ষণীয় বোধ করতে পারে চার্ট বা চিত্রকল্পে ঠিক প্রয়োজনীয় রূপান্তর প্রদান করতে পারে।

তৈরি করা মধ্যবিন্দুটি আপনার ডিজাইন সফ্টওয়্যারে একটি সাধারণ ৫০ শতাংশ ওভারলে-র সাথে তুলনা করুন। মানগুলি ভিন্ন হতে পারে কারণ অ্যাপ্লিকেশনগুলি বিভিন্ন স্থানে রঙ ইন্টারপোলেট করতে পারে বা স্বচ্ছতা ভিন্নভাবে প্রয়োগ করতে পারে। চূড়ান্ত উৎপাদন পরিবেশের সাথে মেলে এমন ওয়ার্কফ্লো ব্যবহার করুন।

মধ্যবিন্দুটিকে গৃহীত, সামঞ্জস্যযোগ্য বা প্রত্যাখ্যাত হিসাবে লেবেল করুন। যদি এটি ঘোলাটে হয়ে যায়, প্রথমে সিদ্ধান্ত নিন যে নিরপেক্ষ অঞ্চল উপকারী কিনা। একটি নিস্তেজ কেন্দ্র প্রাণবন্ত প্রান্তবিন্দুগুলির মধ্যে ভিজ্যুয়াল বিশ্রাম প্রদান করতে পারে। যদি এটি ডিজাইনকে দুর্বল করে, অফিসিয়াল ব্র্যান্ড রঙের পরিবর্তনের পরিবর্তে একটি ইচ্ছাকৃত মধ্যবর্তী স্টপ যোগ করার বিবেচনা করুন।

५. দুর্বল বা ঘোলাটে স্টপগুলি সরান

দশটি উত্পন্ন স্টপ মানে যে সমস্ত দশটি স্থায়ী ডিজাইন টোকেন হতে হবে না। ব্যায়ামটি দশটি মান ব্যবহার করে রূপান্তরটি দৃশ্যমান করতে। চূড়ান্ত সিস্টেমটি শুধুমাত্র এমন রঙগুলি ধরে রাখা উচিত যা একটি পুনরাবৃত্ত সমস্যার সমাধান করে।

প্রতিটি স্টপটিকে তার আগে এবং পরে একটির সাথে তুলনা করুন। যদি দুটি মান সাধারণ উপাদান আকারে প্রায় আলাদা করা অসম্ভব হয়, তাদের আলাদা নাম প্রয়োজন নাও হতে পারে। যদি একটি মধ্য মান খুব বেশি স্যাচুরেশন হারায়, সিদ্ধান্ত নিন যে এটি একটি নিস্তেজ সহায়ক রঙ হিসাবে কাজ করে কিনা বা সরানো উচিত।

ক্রমটিকে গ্রেস্কেলে পরীক্ষা করুন। এটি হিউ থেকে বিভ্রান্তি ছাড়াই উজ্জ্বলতা অগ্রগতি প্রকাশ করে। যদি একাধিক সংলগ্ন রঙ একই ধূসরে বিপর্যাস হয়ে যায়, তারা চার্ট বা ডেটা ভিজ্যুয়ালাইজেশনের জন্য যথেষ্ট টোনাল বিচ্ছিন্নতা প্রদান করতে পারে না।

প্রতিটি অস্বাভাবিক রূপান্তর "মেরামত" করবেন না। দুটি ব্র্যান্ড রঙ মিশ্রণের উদ্দেশ্য হল আবিষ্কার করা কীভাবে তারা সম্পর্কযুক্ত। কখনও কখনও সঠিক সিদ্ধান্ত হল তারা একটি ক্রমাগত গ্রেডিয়েন্ট তৈরি করবেন না। তারা নিরপেক্ষ রূপান্তরের সাথে আলাদা ঠোস হিসাবে আরও ভালভাবে কাজ করতে পারে।

६. একটি পূর্বাভাসযোগ্য নামকরণ সিস্টেম তৈরি করুন

স্টপগুলি পর্যালোচনা করা হয়েছে একবার, স্থিতিশীল নাম নির্ধারণ করুন। সবচেয়ে সহজ সিস্টেমটি রঙগুলি তাদের অবস্থান অনুসারে সংখ্যা করে, যেমন blend-01 এর মাধ্যমে blend-10। এটি ক্রমটি সংরক্ষণ করে কিন্তু বর্ণনা করে না কীভাবে প্রতিটি মান ব্যবহার করা উচিত।

একটি শক্তিশালী সিস্টেম কাঁচা মান থেকে শব্দার্থিক ভূমিকাগুলি আলাদা করে। কাঁচা টোকেনগুলি সম্পূর্ণ রঙ ক্রম রেকর্ড করে। শব্দার্থিক টোকেনগুলি নির্বাচিত রঙকে প্রচার পটভূমি, চার্ট শুরু, চার্ট মধ্যবিন্দু বা চিত্রকল্প জোর হিসাবে দায়িত্বের সাথে সংযুক্ত করে।

:root {
  --blend-01: #2563eb;
  --blend-02: #3a5bd9;
  --blend-03: #4f53c7;
  --blend-04: #644cb5;
  --blend-05: #7944a3;
  --blend-06: #8d3c90;
  --blend-07: #a2347e;
  --blend-08: #b72d6c;
  --blend-09: #cc255a;
  --blend-10: #e11d48;

  --campaign-gradient-start: var(--blend-01);
  --campaign-gradient-middle: var(--blend-06);
  --campaign-gradient-end: var(--blend-10);
}

যদি আপনি টোকেনের একটি বড় তালিকা বা ব্যবহার লেবেল বজায় রাখেন, তাহলে অ্যালফাবেটাইজ টুল রেফারেন্স তালিকা সর্টিপ্রমত এবং দুর্ঘটনাজনক ডুপ্লিকেট লাইন সরাতে পারে। সংখ্যায়িত গ্রেডিয়েন্ট ক্রমটি নিজেই বর্ণানুক্রমে সাজিয়ে দিন না, কারণ এর ভিজ্যুয়াল অর্ডার অক্ষত থাকতে হবে।

७. দরকারী ডিজাইন ভূমিকা নির্ধারণ করুন

একটি গ্রেডিয়েন্ট ক্রম মূল্যবান হয়ে ওঠে যখন এর স্টপগুলি সামঞ্জস্যপূর্ণভাবে পুনরায় ব্যবহার করা যায়। প্রকল্পের উপর ভিত্তি করে ভূমিকা নির্ধারণ করুন, প্রতিটি রঙের জন্য একটি কৃত্রিম ব্যবহার অনুসন্ধান করার পরিবর্তে।

প্রান্তবিন্দুগুলি প্রাথমিক ব্র্যান্ড রঙ হিসাবে থাকতে পারে। মধ্যবর্তী মানগুলি একটি চার্ট স্কেল, চিত্রকল্প সিরিজ, অগ্রগতি সূচক বা প্রচার সিস্টেমকে সমর্থন করতে পারে। একটি নরম মধ্যবিন্দু একটি বড় সজ্জাসংক্রান্ত এলাকা হিসাবে কাজ করতে পারে, যখন একটি শক্তিশালী স্টপ একটি গুরুত্বপূর্ণ পরিসংখ্যান হাইলাইট করতে পারে।

যদি ক্রমটি আলাদা এবং অর্থপূর্ণ থাকে তাহলে সাধারণ ডেটার প্রতিনিধিত্ব করতে একটি ক্রমাগত ব্র্যান্ড গ্রেডিয়েন্ট ব্যবহার এড়িয়ে চলুন। ব্যবহারকারীরা মানগুলির মধ্যে পার্থক্য বুঝতে সক্ষম হতে হবে। যখন গ্রেডিয়েন্ট সজ্জাসংক্রান্ত হয়, আরও স্বাধীনতা রয়েছে, যখন এটি তথ্য যোগাযোগ করে, স্পষ্টতা অগ্রাধিকার নেয়।

८. গ্রেডিয়েন্ট দিক এবং টাইপোগ্রাফি পরীক্ষা করুন

একই রঙগুলি দিক পরিবর্তন হলে বিভিন্ন ছাপ তৈরি করতে পারে। একটি অনুভূমিক গ্রেডিয়েন্ট একটি পৃষ্ঠা জুড়ে গতিবেগ পরামর্শ দিতে পারে। একটি উল্লম্ব গ্রেডিয়েন্ট গভীরতা তৈরি করতে পারে। একটি কর্ণ দিক প্রায়শই আরও শক্তিশালী বোধ করে, যখন একটি রেডিয়াল গ্রেডিয়েন্ট একটি কেন্দ্রীয় বিন্দুর দিকে মনোযোগ আঁকে।

ফিগমার অফিসিয়াল গাইড স্ট্রোক হিসাবে গ্রেডিয়েন্ট ব্যবহার করা লিনিয়ার, রেডিয়াল, কৌণিক এবং হীরা গ্রেডিয়েন্ট প্রকার বর্ণনা করে। একাধিক ধরনের পরীক্ষা করুন, তবে সবচেয়ে দৃষ্টিনন্দন বিকল্পের পরিবর্তে সংমিশ্রণকে সমর্থন করে এমন সংস্করণ চয়ন করুন।

গ্রেডিয়েন্টের জন্য একটি বাস্তব শিরোনাম, অনুচ্ছেদ এবং বোতাম যোগ করুন। সাদা, কয়লা এবং অন্যান্য অনুমোদিত পাঠ্য রঙগুলি একাধিক অবস্থানে পরীক্ষা করুন। একটি পাঠ্য রঙ রঙ A এর উপর পঠনীয় হতে পারে এবং পটভূমি রঙ B এর কাছাকাছি যাওয়ার সময় ব্যর্থ হতে পারে।

সজ্জাসংক্রান্ত পাঠ্য পরীক্ষাগুলি ফ্যান্সি টেক্সট জেনারেটর দিয়ে অন্বেষণ করা যেতে পারে, তবে ইউনিকোড-স্টাইল করা পাঠ্য গুরুত্বপূর্ণ শিরোনাম, নেভিগেশন বা অ্যাক্সেসযোগ্য ওয়েব বিষয়বস্তুতে যথাযথ টাইপোগ্রাফি প্রতিস্থাপন করা উচিত নয়। এটি সীমিত সৃজনশীল অন্বেষণের জন্যই ব্যবহার করুন এবং চূড়ান্ত বার্তা পাঠনীয় রাখুন।

যখন একটি একক পাঠ্য রঙ সম্পূর্ণ গ্রেডিয়েন্ট জুড়ে কাজ করতে পারে না, শব্দ থেকে শব্দে পাঠ্য রঙ পরিবর্তন করে রাখবেন না। একটি ঠোস প্যানেল যোগ করুন, বিষয়বস্তু পুনরায় অবস্থান করুন বা অপরিহার্য পাঠ্য ছাড়াই একটি এলাকার জন্য গ্রেডিয়েন্ট সংরক্ষণ করুন।

९. সিএসএস-এ গ্রেডিয়েন্ট প্রয়োগ করুন

দিক এবং স্টপগুলি অনুমোদিত হয়েছে একবার, সিএসএস ব্যবহার করে ওয়েব সংস্করণ তৈরি করুন। এমডিএন সংজ্ঞায়িত করে linear-gradient() একটি সিএসএস ফাংশন হিসাবে যা একটি সরল লাইনে দুই বা আরও রঙের মধ্যে একটি ক্রমান্বয়ে রূপান্তর উৎপাদন করে।

.brand-gradient {
  background-color: #2563eb;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #4f53c7 22%,
    #7944a3 44%,
    #a2347e 66%,
    #cc255a 84%,
    #e11d48 100%
  );
}

ঠোস background-color একটি ফলব্যাক সরবরাহ করে। নির্বাচিত গ্রেডিয়েন্ট স্টপগুলি স্বয়ংক্রিয়ভাবে সমস্ত দশটি মান যোগ করার পরিবর্তে ইচ্ছাকৃতভাবে স্থাপন করা হয়। সিএসএস-তে কম স্টপ ব্যবহার করা দশ-ধাপীয় অনুসন্ধানকে অবৈধ করে না, এটি দেখায় যে পর্যালোচনা প্রক্রিয়া চূড়ান্ত প্রভাবের জন্য প্রয়োজনীয় মানগুলি চিহ্নিত করেছে।

সিএসএস-ট্রিকস একটি বিস্তারিত প্রদান করে সিএসএস গ্রেডিয়েন্টের গাইড দিক, রঙ স্টপ, রেডিয়াল গ্রেডিয়েন্ট, পুনরাবৃত্তি গ্রেডিয়েন্ট এবং সম্পর্কিত প্রয়োগ প্যাটার্নগুলি কভার করে।

প্রকল্পের জন্য প্রাসঙ্গিক ব্রাউজার এবং ডিভাইসগুলিতে প্রয়োগটি পরীক্ষা করুন। লাইভ সিএসএস ফলাফলটি অনুমোদিত ডিজাইন ফাইলের সাথে তুলনা করুন। সামান্য পার্থক্য দৃশ্যমান হতে পারে ডিসপ্লে সেটিংস, রঙ প্রোফাইল, ব্রাউজার রেন্ডারিং এবং রপ্তানি পদ্ধতির কারণে।

१०. সিস্টেম পরীক্ষা করুন, ডকুমেন্ট করুন এবং রপ্তানি করুন

একটি গ্রেডিয়েন্ট সমাপ্ত হয় না যখন এটি এক মনিটরে আকর্ষণীয় দেখায়। এটিকে বড় এবং ছোট আকারে, পাঠ্য ছাড়াই এবং সাথে, হালকা এবং অন্ধকার পার্শ্ববর্তী পৃষ্ঠগুলিতে এবং নিম্ন-মানের ডিসপ্লেতে পরীক্ষা করুন।

দৃশ্যমান ব্যান্ডিং, দুর্বল বৈসাদৃশ্য, অপ্রত্যাশিত ঘোলাটে অঞ্চল এবং প্রান্তবিন্দুগুলির সাথে সম্পর্কহীন মনে হয় এমন মধ্যবর্তী রঙগুলি খুঁজুন। একটি ঠোস রপ্তানিকৃত ইমেজও পরীক্ষা করুন কারণ সোশ্যাল প্ল্যাটফর্ম এবং উপস্থাপনা সফ্টওয়্যার এটি একটি লাইভ সিএসএস পটভূমি থেকে ভিন্নভাবে সংকুচিত বা প্রক্রিয়া করতে পারে।

দুটি প্রান্তবিন্দু, সমস্ত দশটি উত্পন্ন স্টপ, ধরে রাখা উৎপাদন স্টপ, প্রবেশিত দিক, অনুমোদিত ব্যবহার এবং নিষিদ্ধ ব্যবহার ধারণ করে এমন একটি পৃষ্ঠার গ্রেডিয়েন্ট স্পেসিফিকেশন তৈরি করুন। বাস্তব টাইপোগ্রাফি এবং উপাদান বিষয়বস্তু সহ গ্রেডিয়েন্টটি দেখানো উদাহরণ যোগ করুন।

যদি প্রতিটি স্পেসিফিকেশন পৃষ্ঠা একটি জেপিজি হিসাবে প্রস্তুত করা হয়, তাহলে জেপিজি টু পিডিএফ কনভার্টার সেগুলিকে একটি সাজানো নথিতে একত্রিত করতে পারে। রপ্তানি করা পিডিএফটি খুলুন এবং একটি ক্লায়েন্ট বা ডেভেলপমেন্ট টিমের সাথে ভাগ করার আগে রঙগুলি মূল ডিজাইনের সাথে তুলনা করুন।