টপিকঃ অভ্র স্কিন বানানোর সহায়িকা

অভ্রর জন্য স্কিন বানানোর একটা টিউটোরিয়াল লেখার জন্য অনেকেই বলেছেন। লিখে ফেললাম একটা, ধাপে ধাপে স্কিন বানানোর নিয়মটা পোস্ট করছি। (কারো ধৈর্যচ্যুতি ঘটাও অস্বাভাবিক না, কিঞ্চিৎ ভয়ে ভয়ে পোস্ট করলাম :-# )

ক) ডিজাইনঃ
--------------
প্রথমেই পরিকল্পনা করে নিন স্কিনটা কেমন হবে। ফটোশপে মূল ডিজাইনটা করে ফেলুন। আমরা এখানে অভ্রর ডিফল্ট স্কিন “অভ্র ভিস্তা” উদাহরণ হিসেবে ব্যবহার করব।

ফটোশপে ডিজাইন করার পর অভ্র ভিস্তার মূল চেহারা দাঁড়ায় এইরকমঃ
http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/main.gif

বাটনে আইকন আর লেখা বসালে সেটা এইরকম দাঁড়ায়ঃ
http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Preview.gif


এখানে মূল বাটন আছে নয়টা।
১) অভ্র আইকনঃ এইটার জন্য তিনটা ইমেজ ডিজাইন করতে হবে।
সাধারণ অবস্থায়ঃ   http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/AvroIcon.gif
মাউস উপরে নিলেঃ  http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/AvroIcon-Over.gif (লক্ষ করুন, আইকনটার ঔজ্জ্বল্য বাড়ানো হয়েছে)
মাউস দিয়ে ক্লিক করলেঃ   http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/AvroIcon-Down.gif (লক্ষ করুন, আইকনটার ঔজ্জ্বল্য বাড়ানোর সাথে সাথে একটু নিচে নিয়ে যাওয়া হয়েছে, যাতে ক্লিক করার ইফেক্ট আসে)

একই ভাবে কীবোর্ড মোড ছাড়া বাকি ৭টা বাটনের জন্য ইমেজ ডিজাইন করুনঃ
২) কীবোর্ড লেআউট:   
http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Keyboards.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Keyboards-Over.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Keyboards-Down.gif   
৩) কীবোর্ড লেআউট ভিউয়ারঃ 
http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Layout.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Layout-Over.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Layout-Down.gif   
৪) অভ্র মাউসঃ     
http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mouse.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mouse-Over.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mouse-Down.gif   
... ইত্যাদি



কীবোর্ড মোড বাটনের জন্য আপনাকে ছয়টা ইমেজ ডিজাইন করতে হবে। ৩টা বাংলা মোডের জন্য, ৩টা ইংরেজী মোডের জন্য।
বাংলাঃ      http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mode-Bangla.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mode-Bangla-Over.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mode-Bangla-Down.gif
ইংরেজীঃ       http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mode-English.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mode-English-Over.gif http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Mode-English-Down.gif


এভাবে সম্পূর্ণ স্কিনটা একটা ফটোশপ ইমেজ হিসেবে রেডী হয়ে গেলে ক্রপ (Crop) টুল দিয়ে কেটে বাটনগুলো আলাদা করে ফেলে সেভ করুনঃ
http://omicronlab.com/images/skin_tutorial/screenshot-1.jpg


অভ্র স্কিন বানানোর জন্য আপনি GIF/JPEG/BMP ফরমেটের ইমেজগুলো ব্যবহার করতে পারবেন। সুতরাং এই তিনটির কোন ফরমেটেই সেভ করুন।

টিউটোরিয়ালটার শেষে সবার অনুশীলনের জন্য আমি অভ্র ভিস্তার সবগুলো ইমেজ দিয়ে দিব, আপাতত পড়ে যেতে থাকেন :)

---------------------------
মেহ্‌দী হাসান খান

Re: অভ্র স্কিন বানানোর সহায়িকা

খ) স্কিন তৈরীঃ
----------------

ডিজাইনের কাজ শেষ। এবার স্কিন বানানোর পালা। অভ্র স্কিন ডিজাইন চালু করুনঃ
http://omicronlab.com/images/skin_tutorial/screenshot-2.gif


নিচের মত উইন্ডো নিয়ে স্কিন ডিজাইনার আসবেঃ

http://omicronlab.com/images/skin_tutorial/screenshot-3.jpg


স্কিনের একটা নাম দিন। নিজের নাম-ধাম ঠিকানা যা মনে চায় লিখুন smile

এর নিচে আপনার স্কিনে কোন কোন বাটন রাখতে চান সেগুলো সিলেক্ট করুন। ছোট স্কিন বানানোর সুবিধার্থে এই অপশনটি রাখা হয়েছে। আপনি চাইলে নিয়মিত ব্যবহার করেন না এমন বাটনগুলো অভ্র টপ বার থেকে ছেটে ফেলতে পারেন।


অভ্র ভিস্তায় আমরা সবগুলো বাটনই রাখছি। তাই সব সিলেক্ট করে পরের ধাপে যান।

---------------------------
মেহ্‌দী হাসান খান

Re: অভ্র স্কিন বানানোর সহায়িকা

http://omicronlab.com/images/skin_tutorial/screenshot-4.jpg

আমরা আমাদের স্কিনে কোন ট্রান্সপারেন্সী ব্যবহার করবনা। তাই মাস্ক ইমেজ এখানে অপ্রয়োজনীয়।

বাদ-বাকি টেক্সট বক্সে ব্রাউজ করে উপযুক্ত বাটনের ইমেজগুলো দেখিয়ে দিন।

এর পরের ধাপে যান।

---------------------------
মেহ্‌দী হাসান খান

Re: অভ্র স্কিন বানানোর সহায়িকা

http://omicronlab.com/images/skin_tutorial/screenshot-5.jpg

স্কিনে মেনু কাস্টোমাইজেশনের জন্য এইসব অপশন রাখা হয়েছে। অভ্র কীবোর্ড ৫ থেকে এই অপশন বাদ দেয়া হয়েছে (স্ক্রিনশট অভ্র কীবোর্ড ৪ এর স্কিন ডিজাইনারের উপর ভিত্তি করে দেয়া)।

এইখানে কোন পরিবর্তন করার প্রয়োজন নেই।

পরের ধাপে যান।

---------------------------
মেহ্‌দী হাসান খান

Re: অভ্র স্কিন বানানোর সহায়িকা

http://omicronlab.com/images/skin_tutorial/screenshot-7.jpg

এইবার মাউস দিয়ে টেনে টেনে মূল ছবির উপর বাটনগুলো বসান। সূক্ষ্ম পরিমাপের জন্য নিচের X Pos, Y Pos লেখা বক্সে সরাসরি মান বসিয়ে দিতে পারেন।

এইখানে উল্লেখ্য, আপনি যেকোন ক্রমে বাটনগুলো বসাতে পারেন। অর্থাৎ লেআউট ভিউয়ারের পরেই অভ্র আউস, তারপরেই টুলস ইত্যাদি হতেই হবে এমন কোন কথা নেই। এটা নির্ভর করবে আপনার পছন্দের উপর।

সবগুলো বাটন জায়গা মত বসানো হলে পরের ধাপে যান।

---------------------------
মেহ্‌দী হাসান খান

Re: অভ্র স্কিন বানানোর সহায়িকা

http://omicronlab.com/images/skin_tutorial/screenshot-8.jpg

আমাদের স্কিন বানানো প্রায় শেষ। এবারের বক্সে পুরো স্কিনের একটা প্রিভিউ ইমেজ তৈরী করে সেটা দেখিয়ে দিন।

অভ্র ভিস্তাতে আমরা নিচের ইমেজটি প্রিভিউ ইমেজ হিসেবে ব্যবহার করেছিঃ
http://omicronlab.com/images/skin_tutorial/WinVista_Skin_Images/Preview.gif


এবার পরের ধাপে যান।

---------------------------
মেহ্‌দী হাসান খান

Re: অভ্র স্কিন বানানোর সহায়িকা

http://omicronlab.com/images/skin_tutorial/screenshot-9.jpg

কোন ফোল্ডারে স্কিনটি সেভ করবেন সেটা দেখিয়ে দিন। অভ্র কীবোর্ড যে ফোল্ডারে ইন্সটল করা আছে সেটার ভিতর Skin নামে আরেকটা ফোল্ডার দেখতে পাবেন, ঐখানে না রাখলে অভ্র স্কিন খুঁজে পাবে না।

এরপর Build বাটনটিতে ক্লিক করুন।

আপনার স্কিন রেডী!!! dancing



(সবকিছু ঠিকঠাক থাকলে ২৬ মার্চ মহান স্বাধীনতা দিবস এবং অভ্রর পঞ্চম প্রতিষ্ঠা বার্ষিকী উপলক্ষে অভ্র কীবোর্ড ৫ রিলিজ করা হবে। অনেক নতুন ফিচারের সাথে এখানে নতুন কিছু স্কিনও আসছে। সুন্দর কিছু স্কিন ডিজাইন করে এর মধ্যে যদি পাঠিয়ে দিতে পারেন তাহলে অভ্রর মূল প্যাকেজের সাথে তা দিয়ে দেওয়ার ব্যবস্থা করা যেতে পারে smile )



ডাউনলোড:
টিউটোরিয়ালে ব্যবহৃত ইমেজগুলো নিয়ে অনুশীলন করতে চাইলে এখান থেকে ডাউনলোড করুন (মূল ফটোশপ ফাইলসহ দেয়া আছে):
http://omicronlab.com/images/skin_tutor … Images.zip



[কৃতজ্ঞতা স্বীকারঃ অভ্র ভিস্তা স্কিনটি ডিজাইন করেছেন মোঃ তানবিন ইসলাম সিয়াম]

---------------------------
মেহ্‌দী হাসান খান

Re: অভ্র স্কিন বানানোর সহায়িকা

অসাধারন ভাবে জঠিল একটা বিষয় সহজভাবে বুঝিয়ে দেওয়ার জন্য অসংখ্য ধন্যবাদ।
বোনাস রেপু। thumbs_up

রক্তের গ্রুপ AB+

microqatar'এর ওয়েবসাইট

লেখাটি GPL v3 এর অধীনে প্রকাশিত

Re: অভ্র স্কিন বানানোর সহায়িকা

থ্যাঙ্কস big_smile
+ রেপু smile

অ আ ই ঈ উ ঊ ঋ এ ঐ ও ঔ
ক খ গ ঘ ঙ চ ছ জ ঝ ঞ ট ঠ ড ঢ ণ ত থ দ ধ ন প ফ ব ভ ম য র ল শ ষ স হ ক্ষ ড় ঢ় য়
ৎ ং ঃ ঁ

আলোকিত'এর ওয়েবসাইট

লেখাটি CC by-nc-nd 3. এর অধীনে প্রকাশিত

১০

Re: অভ্র স্কিন বানানোর সহায়িকা

রেপুর জন্য ধন্যবাদ আর কষ্ট করে পড়ার জন্য শুকরিয়া @ microqatar এবং আলোকিত ভাই smile

---------------------------
মেহ্‌দী হাসান খান