DIY - এসো নিজে করি : "আমার বাংলা ব্লগ" -এর লোগোটা আনিম্যাটেড করলাম (Animation work is not very hard, but so much time consuming)

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

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

এখানে আমি একটি ড্যানসিং অবজেক্ট তৈরী করেছি মোট ১১ টা স্থিরচিত্র দিয়ে । একটি ছবির পরে পরবর্তী ছবিটা দেখানোর মাঝে আমি ০.২ সেকেন্ড delay রেখেছি । আমাদের ব্রেইন ১১ টা স্থির চিত্র পরপর দ্রুত দেখার জন্য সিগন্যাল পাঠাচ্ছে যে ছবিটা একটা মুভিং অবজেক্ট ।

নিচে ১১ টা ফ্রেমের ছবিগুলি পরপর দিয়ে দিলাম, দেখুন --

উপরের ১১টা ছবি ০.২ সেকেন্ডের বিরতিতে পরপর দেখলে আমাদের ব্রেইন সবগুলিকে একত্র করে একটি মাত্র চলমান দৃশ্য দেখতে পায় । তাই আসলে আমাদের ব্রেন এর সীমাবদ্ধতাকেই কাজে লাগিয়ে আমরা আমাদের চারিপাশের ঘটমান দৃশ্যাবলী রিয়েল টাইম চলমান দেখতে পাই ।

এ বার আসা যাক আমাদের মূল প্রজেক্টে, "আমার বাংলা ব্লগ" এর একটা আনিম্যাটেড লোগো create করা । আমি আগেই বলে রাখছি আমি কিন্তু মোটেও প্রফেশনাল কোনো গ্রাফিক্স designer নই, আর এটা আমার প্রথম আনিম্যাটেড কোনো ক্রিয়েশন । সো, নো হাসাহাসি :)

স্টেপ-০১

আমার বাংলা ব্লগের লোগোটা আমি এর আগে নিজে নিজেই ফটোশপে তৈরী করেছিলাম, তো সেখান থেকে প্রত্যেকটা অবজেক্ট আমি আলাদা আলাদা png ফরম্যাট -এ সেভ করে নিলাম :

স্টেপ-০২

(স্কেচপ্যাড ওয়েব এপ্লিকেশন)[sketchpad.app] টা ওপেন করলাম । সব png অব্জেক্টগুলিকে স্ট্যাম্প হিসাবে কনভার্ট করে স্কেচপ্যাডে আপলোড করলাম

স্টেপ-০৩

সব অব্জেক্টগুলিকে বিভিন্ন আকারে ও পজিশনে বিন্যস্ত করলাম একটি একটি করে, মোট ৬০ টা ফ্রেমে । নিচে কয়েকটি ফ্রেম randomly দিলাম আপনাদের দেখার জন্য --

উপরে ২২, ৩১, ৩৮, ৫১ ও ৫৮নং ফ্রেমগুলি দেয়া হয়েছে ।

স্টেপ-০৪

টোটাল ৬০টি ফ্রেমের বাড়তি অংশটুকু ক্রপ করে দিলাম, এখানে কয়েকটি random ফ্রেম দেওয়া হলো, দেখুন --

৭, ৯, ১১ ও ১৫ নং ছবি গুলি ক্রপ করা

স্টেপ-০৫

মূল কাজ শেষ, এই বার একটি ওয়েব বেসড GIF Maker সাইট এ আমাদের এই ৬০টি ফ্রেম দিয়ে মুহূর্তের মধ্যে একটি gif বানিয়ে ফেললাম । তারপরে ডাউনলোড করে নিলাম, ব্যাস কাজ শেষ ।

ফাইনাল আউটপুট

এই আমাদের কাঙ্খিত সেই আনিম্যাটেড "আমার বাংলা ব্লগ" এর লোগো -

পরিশেষে : অ্যানিমেশন -এ মজা পেয়েছি, কিন্তু এতো বেশি টাইম নষ্ট হয় যে ভবিষ্যতে আর কোনো কিছু অ্যানিমেশন করতে গেলে দু'বার ভাবতে হবে :)