মাত্র ২০ মিনিটে ফটোশপের সাহয্যে তৈরি করুন প্রাইস টেবিল

3
350

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

Final output

ধাপ ১

প্রথমেই একটি 1200×600 সাইজের নতুন একটি ডকুমেন্ট নিন। আসলে আমাদের প্রাইস টেবিলটি বা মূল্য কূপণটি 1000x340px সাইজের মধ্যেই হয়ে যাবে। কিন্তু কাজটি করার সময় আমাদের কিছু ওয়ার্কস্পেসের প্রয়োজন হবে। এ কারণেই আমরা ডকুমেন্টটির সাইজ একটু বড় নিয়েছি।

ধাপ ২

এবার ফটোশপ থেকে Rounded Rectangle টুলটি ‍সিলেক্ট করুন এবং 1000×340 px সাইজের একটি শেপ তৈরী করুন। এবার 1 px stroke ব্যবহার করে শেপটির উপর হালকা দৃশ্যমান outer glow ইফেক্টটি আ্যপ্লাই করুন। আমাদের মূল প্রাইস টেবিলের শেপের কালারের চেয়ে stroke কালার একটু গাঢ় প্রদান করুন।

ধাপ ৩

কাজের সুবিধার্থে আমরা আমাদের প্রাইস টেবিল ৩ ভাগে ভাগ করব। এবং এ ৩টি ভাগ হচ্ছে যথাক্রমে “header”, “content” এবং “CTA” জোন। এখানে “header” সেকশনে শুধুমাত্র এই প্রজেক্টটির নাম থাকবে। এবার Rectangle Tool টি ব্যবহার করে 1000px চওড়া এবং 70px উচ্চতার একটি শেপ তৈরী করুন। এবার এটির উপর গাঢ় ধূসর রং (#e0e3e3) এবং Drop Shadow আ্যাপ্লাই করুন যেন Outer Glow আ্যাপ্লাই করলে যে ইফেক্ট পাওয়া যায়, ঠিক সেরকম একটি ইফেক্ট পাওয়া যায়।

ধাপ ৪

আমরা যে প্রাইস টেবিলটি তৈরী করতে যাচ্ছি সেটিতে ৪টি প্যাকেজ থাকবে যেন গ্রাহক যে কোন একটিতে সাইনআপ করতে পারেন। এ ৪টি প্যাকেজের মধ্যে একটি প্যাকেজকে বিশেষভাবে হাইলাইট করব এবং এটিকে “Best Deal” বা সবচেয়ে ভাল প্যাকেজ হিসাবে উল্লেখ করা হবে। এবার Rounded Rectangle Tool ব্যবহার করে 250x290px সাইজের একটি শেপ তৈরী করুন। আমরা Base Layer এ যে ইফেক্ট ব্যবহার করেছি, এ শেপটিতেও আপনি অবশ্যই সেই একই ইফেক্ট ব্যবহার করবেন।

ধাপ ৫

এবার ৩য় ধাপে যে কাজগুলি করা হয়েছে, সেই একই কাজ আবার করুন শুধুমাত্র Header এর কালার ব্যাতীত। এক্ষেত্রে Header এ আপনি গাঢ় ধূসর রং (#d1d1d1)ব্যবহার করবেন।

ধাপ ৬

আমরা আমাদের প্রাইস প্যাকেজে ২টি ফন্ট ব্যবহার করব যথাক্রমে “Open Sans” এবং “Helvetica”। আমাদের টেবিলের “Header” অংশে প্যাকেজের নাম লেখার জন্য “Open Sans” এর Semibold weight ব্যবহার করব।

ধাপ ৭

আমরা আমাদের প্রত্যেকটি প্যাকেজের মূল্য লেখার জন্য “Helvetica” ব্যবহার করব। যেহেতু আমরা আমাদের “Advanced” প্যাকেজটি হাইলাইট করতে চাই, সুতরাং আমরা প্রাইস ট্যাগ বা মূল্য কুপনটিতে উজ্জল লাল রং ব্যবহার করব।

ধাপ ৮

এরপর আমরা “content” অংশে চলে যাবো। এটি ৩টি ফিচারের সমন্বয়ে গঠিত হবে যা আমরা আমাদের গ্রাহকদের অফার করতে যাচ্ছি। এটা দেখতে খুবই সাধারণ বা সাদামাটা টাইপের। আমরা আমাদের ফন্ট হিসাবে “Open Sans” ব্যবহার করব। সংখ্যা লেখার ক্ষেত্রে এটি হবে 24pt Bold সাইজের এবং টেক্সটে এর ক্ষেত্রে সাইজ হবে 14pt Regular. প্রত্যেকটি ফিচার একটি “dotted line” দ্বারা বিভক্ত থাকবে কিন্তু সহজেই একটি simple line দ্বারা পরিবর্তনযোগ্য হবে।

ধাপ ৯

প্রত্যেকটি প্যাকেজে অবশ্যই একটি করে CTA বাটন থাকবে যেটি গ্রাহকদেরকে যেকোন প্যাকেজ গ্রহন করার অপশন দেবে। এসব বাটন ”বিস্তারিত তথ্য জানুন”, ”মূল্য পরিশোধ করুন” ইত্যাদি অপশন সংবলিত থাকবে।

ধাপ ১০

এবার Gradient Overlay ইফেক্ট আ্যপ্লাই করুন এবং Blend Mode সেট করুন ‍Soft Light এবং Opacity 40%.

ধাপ ১১

বাটনের কাজ শেষ করুন Stroke এর একটি Gradient Type যুক্ত করে।

ধাপ ১২

আমাদের নির্ধারিত ফন্ট “Open Sans Bold” এর 24pt সাইজ ব্যবহার করে বাটনের উপর কিছু টেক্সট লিখুন। আমরা “Choose Plan” লিখেছি কারন এটি আমাদের কাছে বেশ ভাল মনে হয়েছে। আপনি এটাও লিখতে পারেন বা আপনার ইচ্ছামতো লিখতে পারেন। আমাদের এইমাত্র তৈরীকৃত “Content” এবং “CTA” সেকশন দুটি Duplicate করুন এবং এগুলি পাশাপাশি বসান। ‍যদি এখনও বুঝতে সংশয় থাকে তাহলে ফাইনাল রেজাল্টে(শেষ ধাপ) একবার চোখ ‍বুলিয়ে নিন।

ধাপ ১৩

আসলে অন্যান্য প্যাকেজগুলির সঙ্গে “Advanced” প্যাকেজটির তেমন কোন পার্থক্য নেই শুধুমাত্র উজ্জল প্রাইস ট্যাগ এবং CTA বাটন ছাড়া। তেমনি লাল রংয়ের বাটনটি এবং ধূসর রংয়ের বাটনটি প্রায় একই রকম শুধুমাত্র base color এর ভিন্নতা ছাড়া। এবং এ বেস কালারটি হচ্ছে #ed161c এছাড়াও ‍stroke color যেটি দেওয়া হয়েছে সেটি আপনি নিচে দেখতে পারেন।

ধাপ ১৪

এবার Stroke Color টিতে পূর্বের ধূসর রং পরিবর্তন করে উল্লেখিত লাল রং ব্যবহার করুন এবং বাটনের কাজটি শেষ করুন।

ফাইনাল রেজাল্ট

3 মন্তব্য

একটি উত্তর ত্যাগ