ইমেজ স্প্রাইটস্ এর মাধ্যমে বাটন তৈরি(১ম অংশ)

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

ইমেজ স্প্রাইটস্ পদ্ধতিতে বাটন তৈরির কার্যপ্রক্রিয়া

• ইমেজ স্প্রাইটস্ কৌশল প্রয়োগ করে বাটন তৈরির জন্য প্রথমে ফটোশপে বাটনের প্রতিটি অবস্থা প্রদর্শন করে এমন তিনটা ইমেজ পাশাপাশি স্থাপন করে একটা সিঙ্গেল ইমেজ তৈরি করতে হয়।
• এইচ টি এম এল ব্যবহার করে বাটনের জন্য প্রাথমিক গঠন তৈরি করতে হয় এবং বাটনে লিংক যুক্ত করা হয়।
• সি এস এস ব্যবহার করে বাটনের আকার আকৃতি, মার্জিন এবং বাটনেরর বিভিন্ন অবস্থা অর্থাৎ সাধারণ অবস্থায় বাটনটি কেমন দেখাবে, মাউস নিয়ে গেলে অর্থাৎ hover কন্ডিশনে বাটনটি কেমন দেখাবে এবং মাউস ক্লিক করলে অর্থাৎ active কন্ডিশনে বাটনটি কেমন দেখাবে ইত্যাদি নির্ধারণ করা হয়।

ফটোশপে বাটনের জন্য সিঙ্গেল ইমেজ তৈরি

প্রথমে ফটোশপ ওপেন করে File মেনু থেকে New তে ক্লিক করে width:435px এবং height:525px এর একটা ডকুমেন্ট তৈরি করতে হবে। এর পর Rounded rectangle tool সিলেক্ট করে, উপরের প্রোপার্টিস বার থেকে width:420px এবং height:150px এর একটা Rounded rectangle তৈরি করতে হবে। Rounded rectangle এর লেয়ার সিলেক্ট করে Layer মেনু থেকে Layer Style এবং তারপর stroke এ ক্লিক করতে হবে। একটা Layer Style উইন্ডো ওপেন হলে সেখানে size:3px এবং color এ ক্লিক করে #959595 করে দিতে হবে। এরপর ঐ Layer Style উইন্ডোতেই Gradient Overlay তে ক্লিক করে টিক চিহ্ন দিয়ে গ্রেডিয়েন্ট প্রয়োগ করতে হবে।

এরপর কিবোর্ড এ T চেপে বা tools বার হতে text টুল সিলেক্ট করে Download লেখাটি লেখতে হবে লেখার কালার হবে সাদা অর্থাৎ #ffffff। এখই ভাবে text এর লেয়ার সিলেক্ট করে Layer মেনু থেকে Layer Style এবং তারপর stroke এ ক্লিক করে size:1px এবং color এ ক্লিক করে #000000 করে দিতে হবে।একটা বাটন তৈরির কাজ সম্পন্ন।
এখন Ctrl চেপে রেখে Rounded rectangle এবং text এর লেয়ার সিলেক্ট করে Layer মেনু থেকে Group layers সিলেক্ট করে গ্রুপ করতে হবে। এরপর Group layer টি সিলেক্ট করে Alt এবং Shift একসাথে চেপে রেখে একবার কি বোর্ড এর down arrow key চাপতে হবে এর পর Alt ছেড়ে দিয়ে শুধুমাত্র Shift এবং down arrow key ১৬ বার চেপে নিচে নামাতে হবে। এরপর এই নতুন বাটনের লেয়ার গ্রুপে Group 1 copy লেখা থাকবে এটা পূণরায় সিলেক্ট করে একই পদ্ধতিতে তৃতীয় ইমেজ তৈরি করতে হবে। তাহলে Group 1 copy 2 তৈরি হবে।
এখন Group 1 copy এর পাশে ত্রিভুজে ক্লিক করে Rounded rectangle এর Gradient Overlay তে ডাবল ক্লিক করলে Layer Style উইন্ডো আসবে এখান থেকে Gradient বক্সে ক্লিক করতে হবে। Gradient বারের বাম দিকে নিচে যে কালো রং এর color stop টি আছে,সেটাতে ডাবল ক্লিক করে #চিহ্নের পাশের 000000 লেখা গুলোকে ffffff করে ok তে ক্লিক করতে হবে। আর বাম দিকে নিচে যে সাদা রং এর color stop টি আছে,সেটাতে ডাবল ক্লিক করে #চিহ্নের পাশের ffffff লেখা গুলোকে 000000 করে ok তে ক্লিক করতে হবে। অর্থাৎ উল্টা করতে হবে।

একই ভাবে Group 1 copy 2 এর ক্ষেত্রে Gradient Overlay তে ডাবল ক্লিক করলে Layer Style উইন্ডো আসবে এখান থেকে Gradient বক্সে ক্লিক করতে হবে। Gradient বারের বাম দিকে নিচে যে কালো রং এর color stop টি আছে,সেটাতে ডাবল ক্লিক করে #চিহ্নের পাশের 000000 লেখা গুলোকে ffffff করে ok তে ক্লিক করতে হবে। আর বাম দিকে নিচে যে সাদা রং এর color stop টি আছে,সেটাতে ডাবল ক্লিক করে #চিহ্নের পাশের ffffff লেখা গুলোকে 6a0c67 করে ok তে ক্লিক করতে হবে।

এরপর File মেনু থেকে save for web এ ক্লিক করে ডানদিকে উপরে preset এর নিচের ড্রপডাউন থেকে PNG-24 সিলেক্ট করে নিচের দিকে save বাটনে ক্লিক করতে হবে।File name দিতে হবে button ।তাহলে সিঙ্গেল ইমেজটি তৈরি হয়ে যাবে।

সিঙ্গেল ইমেজ