“ফটোশপ দিয়ে ওয়েবসাইটের থিম তৈরি”

HELLO

তৈরি করা ব্লগটী এমন হবে ছবিতে দেখুন-

চলুন শুরু করি : পর্ব – ১

ধাপ ১

Photoshop ওপেন করে নতুন একটি document নিন যার সাইজ হবে 1400 X 3000 Pixel. মনে রাখুন ব্যাকগ্রাউন্ড যেনো লক না থাকে এবং এটির নাম দিবেন bg

ধাপ ২

এখন আমাদের guide lines সেট করে নিতে হবে। Go to View > New Guide.. >‘Vertical’ সিলেক্ট করে নিচের ভেলু গুলো বসিয়ে দিন। তারপরে ‘Ok’ দিন – 118px, 955px, 977px, 1255px, 1277px,

ধাপ ৩

এখন আমরা প্রথমে হেডার তৈরি করে নিব। Rectangular Tool সিলেক্ট করে কালার কোড দিন #2d2d2d এবং হেডার তৈরি করুন ছবির মতন করে।

ধাপ ৪

নিচের সেটিংস ঠিক করুন Gradient Overlay ব্যবহার করে। এভাবে Layer > Layer Style > Gradient Overlay

ধাপ ৫

এখন আমরা navigation তৈরি করব, Rectangular Marquee Tool সিলেক্ট করে সাইজ দিন Height: 69px এবং আপনার ইচ্ছে মতন একটি কালার দিতে পারেন।এখনlayer box থেকে Opacity পরিবরতন করে 0% apply করুন Gradient Overlay ঠিক করুন নিচের ছিবির মতন করে।

ধাপ ৬

সাধারণ একটি লোগো তৈরি করে নিব আমরা। নিচের ছবিতে সব কিছু দেয়া আছে, যেভাবে আছে ঠিক সেভাবে করে যেতে থাকুন।

ধাপ ৭

এবার একটি ব্যনার বানিয়ে নিব 468×60 Pixels সাইজের।

ধাপ ৮

এবার আমরা যুক্ত করে নিব social network, RSS, Twitter, Facebook, Flickr, এটির সাইজ দিবেন 13px icons এর মাঝে এবং Height: 19px দিবেন।

ধাপ ৯

এবার আমরা সার্চ বক্স তৈরি করে নিব। Rounded Rectangular Tool সিলেক্ট করে কালার দিবেন #EEEEEE

ধাপ ১০

এবার Gradient Overlay থেকে সেটিংস্‌ গুলো ঠিক করে নিন নিচের ছবির মতন।

ধাপ ১১

এবার সার্চ বক্স এবং সার্চ লিখাটির কালার দিন। কালার কোদ দিবেন এটি #CCCCCC

ধাপ ১২

এবার স্টাইল করার জন্য আমরা একটি ছোট রিবন ব্যবহার করব এটির উপরে পরে লগো বসাতে পারবো এটির কালার দিবেন #929292

ধাপ ১৩

Horizontal type Tool অথবা Text Tool নিয়ে একটি পেজ তৈরি করা শুরু করি। হোম এর উপরের কালার দিবেন এই কোড #ebebeb, হোম পেজের কালার দিবেন এই কোড #929292

ধাপ ১৪

নিচের টেক্সট এর কালার দিবেন এটি #333333 এখানে আমরা বিভিগ বসাবো। মানে বিভাগ এর কাল্কার হবে এটি।

ধাপ ১৫

এবার আমরা ক্যাটাগরি পেজ তৈরি করব। Rectangular Marquee Tool হাতে নিন সাইজ দিন 89px by 214px এবং Fill Selection করুন এই কালার কোড দিয়ে #F8F8F8

ধাপ ১৬

এবার লিখা গুলোর ব্যকাগ্রাউন্ড কালার দিব আমরা। Rectangular Marquee Tool নিয়ে সাইজ দিন 87px By 35px এবং কালার দিবেন #FFFFFF

ধাপ ১৭

ক্যাটাগরি তে আমরা একটি shadow যোগ করে দিব। Rectangular Marquee Tool নিয়ে সাইজ দিন 87px By 37px এবার Gradient tool নিয়ে shadow effect তৈরি করুন ছবি মতন।

ধাপ ১৮

Shadow Layer এর ৩টি কপি বানিয়ে নিন।

ধাপ ১৯

যেভাবে আমরা ক্যাটাগরি বানিয়েছিলাম ঠিক একি ভাবে আবার করুন নিচের ছবির সাহায্যে।

ধাপ ২০

ক্যাটাগরি এর টেক্সট এর কালাক দিন #333333 এবং apply করে দিন ছবির মতন।

ধাপ ২১

গতকালের পর ১ এবং আজকের সমস্ত কাজের পরে আপনি এই ছবির মতন দেখতে পাবেন যদি সব ঠিক থাক মত করে থাকেন।

ধাপ ২২

এখন আমরা হেডার এর ব্যাকগ্রাউন্ড তৈরি করে নিব। প্রথমে Rectangular Marquee Tool নিয়ে সাইজ দিন height: 411px এবং কালার দিন e0e0e0 এবার এপলাই দিন Gradient Overlay থেকে Layer > Layer Style > Gradient Overlay

ধাপ ২৩

এবার আমরা ব্যাকগ্রাউন্ড কোন্টেন্ট করব।Rectangular Marquee Tool নিয়ে সাইজ দিন width: 837px এবার ব্যাকগ্রাউন্ড ফিন করে দিন #FFFFFF কালার দিয়ে বাকিটা ছবি দেখে দেখে হুবুহু করে নিন।

ধাপ ২৪

এবার ছোট একটি লাইন বানানো ইমেজ এবং টেক্সট এর মাঝখানে ব্যবহার করার জন্য। Rectangular Marquee Tool নিয়ে সাইজ দিবেন Height: 3px এবং কালার দিবেন #eFeFeF

ধাপ ২৫

এবার আমরা তৈরি করব পোস্ট, টেক্সট এবং ইমেজ এর ব্যাকগ্রাউন্ড। আবারো Select Rectangular Marquee Tool নিন এবং সাইজ দিবেন Height: 115px তারপরে অ্যাপ্লাই Gradient Overlay থেকে।এখানে দিয়েঃ Layer > Layer Style > Gradient Overlay

ধাপ ২৬

আবার আগের মতই করুন মাত্র যা কিছু করলাম।

ধাপ ২৭

উপরে দান পাশের জন্য এই সাইজের 728×90 Pixels একটি ব্যনার বানাব।

ধাপ ২৮

এখন 200×200 Pixel এর একটি ইমেজ তৈরি করে project work এর মাঝে ড্রাগ করে দিন।

ধাপ ২৯

এখন text tool নিয়ে Category tutorial লিখে আপলাই দিন ছবির মত।

ধাপ ৩০

টাইটেল লিখতেও আগের মতন করুন মাত্র যা করলাম।

ধাপ ৩১

এবার আমরা Rectangular Marquee Tool নিয়ে কেটাগরি এবং তারিখ ও টাইম এর ব্যাকগ্রাউন্ড তৈরি করে নিব। সাইজ দিবেন 281px by 21px কালার #F8F8F8 তারপরে ছবির মত করে দেখে দেখে আপলাই করে দিন।

ধাপ ৩২

সাইটের লিখা হলে “Posted on 14 Dec, 2010 by admin in Tutorials” লিখা থাকে সেটি তরি করে নিব এখন। এগুলো লিখার জন্য নিচের ছবির মত দেখে দেখে করে নিন।

ধাপ ৩৩

আগের মতই টেক্সট লিখুন এবং আগের মতই করুন মাত্র যা যা করলাম ছবি দেখে নিন।

ধাপ ৩৪

সাইটের বাটনে লিখা থাকে “Continue reading” এবার সেটা তৈরি করব। Rounded/Elliptical Marquee Tool নিয়ে কালার দিন #dadada এবং ছোট একটি ফর্ম তৈরি করে ছবির মত এপলাই করুন।

ধাপ ৩৫

Duplicate layer নিয়ে এপলাই করে দিন সেটিংস ঠিক ছবির মত।

ধাপ ৩৬

সাইটের “Comment” লিখাতা তৈরি করে নিন এবং এপলাই করুন সেটিংস করে নিন ছবির মত Layer > Layer Style > Drop Shadow

ধাপ ৩৭

এবার আমরা আরেকটা “continue reading” বাটন তৈরি করে নিব ছবির মত।

ধাপ ৩৮

এবার Buttons Layers সিলেক্ট করুন এবং layers টি ড্রাগ করুন নতুন group এ এবং সাইজ দিন বদলে নিন ছবির মত।

ধাপ ৩৯

আরেকটি লাইন তৈরি করুন ছবির মত।

ধাপ ৪০

Duplicate Post Group তৈরি করে নিন।

ধাপ ৪১

একটি ভাবে আমরা ৫টি পোস্ট তৈরি করে নিব।

ধাপ ৪২

এবার আমরা তৈরি করব “Next Page” প্রথমে Rounded/Elliptical Marquee Tool নিয়ে কালার দিন #dadada এবং ছোট একটি ফর্ম তৈরি করুন ছবি দেখে দেখে।

ধাপ ৪৩

Duplicate Layer তৈরি করুন ছবির মত করে।

ধাপ ৪৪

এবার আমরা এই টেক্সট টি তৈরি করব “Page 1 of 3″ সব কিছু ছবিতে দেয়া আছে এর আগেও করেছিলেন।

ধাপ ৪৫

এবার আমরা sidebar তৈরি করে নিব, Select Rectangular Marquee Tool নিয়ে সাইজ দিন Height: 323px Fill Background করে কালার দিন #eaeaea settings Stroke থেকে এপলাই করুন ছবির মত করে।

ধাপ ৪৬

এবার আমরা Rss Subscriber আইকন তৈরি করব। ছবির মত করে।

ধাপ ৪৭

নতুন টেক্সট নিয়ে লিখুন “RSS Subscriber” তারপরে ছবির মত করে।

ধাপ ৪৮

এবার আমরা Twitter Followers, Facebook Fans, Comment তৈরি করে নিব ছবির মত করে।

ধাপ ৪৯

এবার Rectangular Marquee Tool নিন এবং একটি লাইন তৈরি করুন সাইজ দিবেন Height: 1px, কালার #FFFFFF #D7D7D7

ধাপ ৫০

এবার Advertising Widgets তৈরি করে নিব আমরা, প্রথেম Rectangular Marquee Tool নিন সাইজ দিন 279px by 409 তারপরে ছবির মত stroke সেটিংস ঠিক করুন।

ধাপ ৫১

এবার আমরা আমাদের তৈরি করা ব্যানার গুলো ফর্মের মাঝে এড করে দিব।

ধাপ ৫২

আবারো Rectangular Marquee টুল নিন এবং ইউডগেট তৈরি করুন Categories, Archives, Pages এর জন্য। সাইজ দিবেন Height: 20px line ও widgets এর মাঝের স্থানে এবং উপরের সাইজ দিন 276px by 286px

ধাপ ৫৩

নতুন ফর্ম নিন নিচের ছবির মতন । সাইজ দিবেন Height: 40px form ও background এর মাঝে এবং এদের সাইজ দিবেন: 256px by 272px তারপরে এপলাই করুন সেটিংস stroke

ধাপ ৫৪

আবার লাইন এবং টেক্সট বসিয়ে দিন।

ধাপ ৫৫

আরেকটি লাইন নিন এবং Rectangular Marquee Tool নিয়ে Recent Widget তৈরি করুন

ধাপ ৫৬

ইমেজ যুক্ত করুন এবং লাইন তৈরি করুন ছবির মত।

ধাপ ৫৭

কালার দিবেন #D66F0D

ধাপ ৫৮

আরেকটি লাইন নিন এবং Rectangular Marquee Tool নিয়ে Flickr Widget তৈরি করুন।

ধাপ ৫৯

এবার আমরা তৈরি করব Footer, সেজন্য আবারো নিতে হবে Rectangular Marquee Tool এবং সাইজ হবে 1159px by 630px

ধাপ ৬০

এবার text tool নিন এবং Categories widget তৈরি করুন ছবির মত দেখে দেখে।