Pro Web 2.0 Template ডিজাইন করা শিখি বাংলা টিউটোরিয়ালের মাধ্যমে


clip_image001
ওয়েব ২.০ টেম্পলেট ডিজাইন এর মুল বক্তব্য হল, সাইট এর বাহ্যিক কাঠামো হতে হবে সুন্দর, পরিস্কার সর্বোপরি ইউজার ফ্রেন্ডলি।

আজকে আমরা যে টেম্পলেটটি ডিজাইন করব সেটি সবার আগে দেখে নেইঃ
clip_image002

তাহলে চলুন ডিজাইন করা শুরু করি।

১। প্রথমেই Photoshop 7.0/CS/CS2/CS3 টি চালু করুন। এবার Ctrl+N চেপে নতুন একটি ফাইল ওপেন করে নিন। আমরা ফাইলটির সাইজ নিচ্ছি ৯৬০ বাই ৯০০। অর্থ্যাৎ ইমেজটির প্রস্থ (width) হবে ৯৬০ আর উচ্চতা(height) হবে ৯০০। ফাইলটি একটি নাম দিয়ে দিন। পরর্বতীতে এই নামেই আপনার ইমেজটি সেভ হবে।
ছবিঃ ১
clip_image001[1]

২। ইমেজ এর জন্য ক্যানভাস বানানো হয়ে গেলে একটি “কাঠের ফটো” এনে ব্যাকগ্রাউন্ড এ বসিয়ে দিন। নিচের ছবিটি লক্ষ্য করুন।

clip_image003
৩। ব্যাক-গ্রাউন্ড বসানো শেষ হয়ে গেলে Ctrl+U চেপে একটি ছবির মত বক্স বানিয়ে নিন। বক্স এর ইফেক্ট এর জন্য নিচের ছবিটির ধাপ গুলো অনুসরণ করুন। এই ধাপ গুলো অনুসরন করলে Step 1 এর মত একটি বক্স বানাতে পারবেন। এই বক্স কে “হেডার” বলে। এখানে আপনাকে আপনার ওয়েব সাইট এর লোগো বসাতে হবে।
ছবিঃ ২
clip_image004

৪। এখন হেডার এর বক্স এর মধ্যে আরও কিছু ইফেক্ট যোগ করব। প্রথমেই নতুন একটি Layer বানিয়ে নিন। ব্রাশ বাটন কে সিলেক্ট করে অথবা কি-বোর্ড এর “B” বাটনে প্রেস করে, কি-বোর্ড এর F5 বাটন এ প্রেস করলেই Brush Toolbar টি এক্টিভ হবে (step 1)।
এখানে আপনি অনেক ধরনের ব্রাস পাবেন, এর মধ্যে থেকে আপনি Basic Brush সিলেক্ট করে ফেলুন (Step 2)। এর পরে আপনার পছন্দ ও সুবিধা অনুযায়ী একটি “Brush Diamter” সিলেক্ট করুন। আমি এখানে 35 সিলেক্ট করলাম।

এবার আপনার মুল ক্যানভাস এ মাউস নিয়ে আসলে একটি বৃত্ত দেখতে পাবেন। হেডার এর ইমেজ এর উপরে ক্লিক করুন , দেখবেন নিচের ছবির মত (Step 4) একটি বৃত্ত তৈ্রী হয়েছে। হেডার এর ইফেক্ট পর্ব এখানেই শেষ।

ছবিঃ ৩
clip_image005

৫। এবার আমার হেডার এর নিচে একটি লাইন বসিয়ে দিব। কী-বোর্ড এর Ctrl+U বাটন এ প্রেস করলে উপরে একটি টুল-বার আসবে। নিচের ছবিটি লক্ষ্য করুন। এর পর সুন্দর করে হেডার এর বক্স এর নিচে একটি লাইন টেনে ফেলুন।

ছবিঃ ৪

clip_image006

এখন আমরা লাইন এর নিচে একটি “Shadow” ইফেক্ট দিব। নিচের ছবিটি দেখুন। এবার লাইনের Layer টি সিলেক্ট করে মেনু থেকে Layer > Layer Styles > Drop Shadow টি সিলেক্ট করুন। এর পরে নিচের ছবির মত “সেটিংস” গুলো দিয়ে দিন, দেখবেন আপনার লাইন এর নিচে সুন্দর একটি “Shadow” তৈরী করব।

ছবিঃ ৫
clip_image007

৬। এরপর একটি Ctrl+U বাটন এ প্রেস করলে উপরে একটি টুল-বার আসবে। এখান থেকে “Rount Rectangle Tool” টি সিলেক্ট করুন এবং এর “Radius” দিন 10px. এর পরে আপনার ইমেজ ক্যানভাসে একটি Rectangle একে ফেলুন। (ছবিঃ৬ অনুসরন করুন )
ছবিঃ ৬
clip_image008

Rectangle আকা হয়ে গেলে এতে ইফেক্ট ব্যবহার করুন।( ছবিঃ৭ অনুসরন করুন )

ছবিঃ ৭
clip_image009

৭। এখন আমরা এই বক্স এর নিচে একটি “Shadow” বসাবে। নিচে ছবিটি(ছবিঃ ৮) দেখুন এবং ধাপ গুলো অনুসরন করুন।
ছবিঃ ৮
clip_image010
এই ধাপ গুলো ঠিক মত বসাতে পারলে আপনি “Rectagle Box” এর নিচে একটি “Shadow” দেখতে পাবেন। এর পরের ধাপে আমরা “Rectagle Box” টির দৃশ্যমানতা (opacity) কমাবো।

৮। “Rectagle Box” টিকে সিলেক্ট করে নিন। এর পরে হাতের ডান পাশে “Layers” নামে একটি টুল বক্স পাবেন। ওখানেই পেয়ে যাবেন দৃশ্যমানতা (opacity)কমানোর অপশন টি।

নিচের ছবিটি লক্ষ্য করুন।
clip_image011

৯। এবার পুনরায় ইমেজটিকে সিলেক্ট করুন, এর পরে Layer>smart Objects>Conver to Smart Object এ ক্লিক করুন।
এখন আপনার ইমেজটি একটি “Object” এ কনভার্ট হয়েছে। এর পরে কী-বোর্ড এর “M” বাটন এ প্রেস করুন, অথবা “টুল বার” থেকে “Rectangular Marquee tool” টি কে সিলেক্ট করুন, এর পরে নিচের ছবিটিকে লক্ষ্য করুনঃ
clip_image012

একটি ডটেড লাইন আসবে। এর পরে রাইট-বাটন এ ক্লিক করে “Layer Via Copy” এই অপশন কে সিলেক্ট করুন। আপনি দেখতে পাবেন আপনার লেয়ার টি আলাদা হয়ে গেছে।

ঠিক নিচের ছবিটির মতঃ
clip_image013

১০। এবার “Right Side” এ কিছু “Straight Line” বসিয়ে দিব এবং এই লাইনের জন্য কিছু ইফেক্ট যোগ করব। চলুন দেখি।

clip_image014

১১। এমনি করে আরও তিনটি লাইন যোগ করলাম। এবার টেম্পলেটে কিছু “টেক্সট” যোগ করি, না হলে টেম্পলেটিকে একদম এতিম-এতিম লাগছে। তাই নিজের ইচ্ছামত কিছু “টেক্সট” বসিয়ে নিলাম। নিচের ছবিটি দেখুনঃ

clip_image015

১২। ধাপ ১১ এর মত করে আর একটি Quote Post এর জন্য কিছু ইনপুট ফিল্ড বানিয়ে বসিয়ে নিলাম। নিচের ছবি টি দেখুনঃ
clip_image016

১৩। হাতের বাম পাশ এর অংশটি এখন খালি। এখানেও আপনি নিচের ছবির মত কিছু “টেক্সক্ট” বসিয়ে নিন। ছবি টি দেখুনঃ

clip_image017

১৪। এখন আমরা কিছু মেনু ডিজাইন এর কাজ করব। চলুন শুরু করি। প্রথমে একটি বক্স একে নেই, “Rectangle tool ” ব্যবহার করে। এর পরে আপনি “Gradient Tool” ব্যবহার করে ইচ্ছা মত কালার করে নিতে পারবেন। নিচের ছবিটিতে Gradient Tool” ব্যবহার করে ডিজাইন করা হয়েছে।

clip_image018

১৫। সবশেষে আপনি সাইট এর উপরে একটি মনের মত লোগো বসিয়ে দিন। আমি নিজের মনের মত একটি লোগো সাইট এর উপরে বসিয়ে দিলাম।
নিচের লোগোটি দেখুন।
clip_image019

১৬। এই তো হয়ে গেল একটি টেম্পলেট ডিজাইন। এক নজরে সম্পুর্ন টেম্পলটটি দেখুন।

clip_image002[1]

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

টিউটোরিয়াল সোর্সঃ http://www.coolajax.net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s