ওয়েব ডিজাইনের জন্য একটি পিএসডি ফাইল তৈরি করুনঃ ১ম খন্ড

ওয়েব ডিজাইন টিউটোরিয়াল

আমরা ইতিমধ্যে আমাদের ওয়েব ডিজাইন টিউটোরিয়ালের তিনটি ধাপ পার করেছি। এখন আমরা দেখবো কিভাবে অ্যাডবি ফটোশপের সাহায্যে থিমের মোকআপ বা পিএসডি ফাইল তৈরি করতে হয়। আমরা নীচের মত দেখতে একটি থিম ডিজাইন তৈরি করবো:

স্পা ওয়েবসাইটের
চলুন, তাহলে এবার শুরু করি:

ধাপ ১: এডোবি ফটোশপের একটি নতুন ডকুমেন্ট খুলুন এবং এর নাম দিন “Home Spa”। এবার এর প্রস্থ সেট করুন ১৪০০ পিক্সেল এবং উচ্চতা সেট করুন ২০০০ পিক্সেল। কালার মোড থেকে RGB এবং রেজ্যুলেশন ৭২ সেট করুন এবং ওকে ক্লিক করুন।

ধাপ ২: Ctrl+R চেপে রুলার প্রদর্শন করুন এবং রুলারের উপর ডান মাউস বাটন ক্লিক করে রুলারটি পিক্সেল হিসেবে সেট করুন।  এবার এই ডকুমেন্টটি ১১ টি লম্বালম্বি গাইডে বিভক্ত করুন। এগুলো যথাক্রমে  200, 250, 400, 425, 650, 700, 750, 900, 925, 1050 এবং 1200px পর পর হবে। একই সাথে সমান্তরালভাবে ১৭ টি গাইডে বিভক্ত করুন। এগুলো যথাক্রমে 50, 200, 700, 750, 800, 850, 1000, 1025, 1100, 1300, 1325, 1400, 1600 এবং 1700 পিক্সেল পর পর হবে।

গাইড সেটআপ করার পর আপনার ডকুমেন্টটি দেখতে নিচের মত দেখাবে।

এডোবি ফটোশপে ওয়েব ডিজাইনের জন্য গাইড সেটআপ

ধাপ ৩: ঠিক আছে, এবার হোমপেইজ ডিজাইন করার পালা। তাই সবার প্রথমে রেক্টেঙ্গেল টুল সিলেক্ট করে ডকুমেন্টের উপরের দিকে ৫০ পিক্সেল উচ্চতা ও ১৪০০ পিক্সেল প্রস্থের একটি আয়তক্ষেত্র তৈরি করতে হবে। এর রং হবে #663399। এবার আনুভূমিক টাইপ টুল সিলেক্ট করুন ও নিচের চিত্র অনুযায়ী অক্ষর সেটিংস সেটআপ করুন।

এডোবি ফটোশপে অক্ষর সেটআপ করা।

 

ধাপ ৪ঃ ২০০ পিক্সেল লম্বালম্বি গাইডের পর, এবার আমরা আমাদের ওয়েব পেইজের লোগো বা নাম সেটআপ করবো। আপাতত, আমি লোগো তৈরি করতে টেক্সট টুলটি ব্যবহার করবো। তাই আমি টেক্সট টুল সিলেক্ট করে আমদের ওয়েব পেইজের নামটি লিখবো। শিফট কী ধরে রেখে টেক্সট লেয়ার এবং হেডার লেয়ার দুটোই সিলেক্ট করুন ও এই টেক্সটটি লম্বালম্বিভাবে হেডারের মাঝখানে স্থাপন করুন।

ওয়েবসাইটের লোগো তৈরি করা হয়ে গেছে।

এখন, আমাদের ওয়েব পৃষ্ঠার লোগোটি সম্পূর্ণ হয়েছে, এবং আমরা আমাদের মূল মেনু তৈরি করতে যাচ্ছি। তবে মেনুটি তৈরি করার আগে আমাদের হেডারের বাম কোণে কয়েকটি সোশ্যাল মিডিয়া আইকন এবং একটি সার্চ আইকন স্থাপন করতে হবে।

ধাপ ৫. এজন্য প্রথমে আমরা iconfinder.com এ যাবো এবং সেখান থেকে picon social সিলেক্ট করবো। এছাড়াও ফন্ট অসাম থেকে পিএসডি আইকন ব্যবহার করতে পারেন। এখন, কিছু দরকারী সোশ্যাল আইকন ডাউনলোড করে ফটোশপ ডকুমেন্টে স্থাপন করে 30x30px মাপে রিসাইজ করে নিন এবং বেগুনী ব্যাকগ্রাউন্ডের বিপরীতে আইকনের রং সাদা সেট করুন। শিফট কী চেপে আইকনের উপর রাইট ক্লিক করে সবগুলো আইকন একত্রে সিলেক্ট করে নিন। এবার Ctrl+G  একত্রে চেপে নতুন গ্রুপ তৈরি করে এর নাম দিন “Social icons“।

সোশ্যাল মিডিয়া বাটন যেভাবে সেটআপ করবেন।

ইতিমধ্যেই হেডার তৈরি করে ফেললাম। এবার আমরা আমাদের থিমের মূল মেনু ডিজাইন করবো। তাহলে এখন সাথেই থাকুন এবং পরবর্তী আর্টিকেলের অপেক্ষায় থাকুন।

Leave a Reply