শুরুতেই সবাইরে আমার সালাম এবং বিডিগিকস ওয়েবসাইট এর পক্ষ থেকে ওয়েলকাম জানাইতেছি। সবাই কেমন আছেন ?? অনেক দিন ওয়েট করতে হইলো আপনাদের। ওয়েট করার জন্য অনেক অনেক ধন্যবাদ এবং আমার ল্যাপটপ নষ্ট ছিল তাই টিউটরিয়াল দিতে পারি নাই তার জন্য দুঃখিত।
আগের পর্বে ঠিক যেইখানে শেষ করছিলাম সেইখান থাইকাই শুরু করা যাক তাহলে……

 

স্টেপ  ৩২ -

ওয়েব সাইটের কালার কম্বিনেশন একটা বিশেষ ব্যাপার। সব ওয়েব ডিজাইনারই  বিভিন্ন রংয়ের কম্বিনেশনে ওয়েব সাইটকে আকর্ষনীয় করে তোলার চেস্টা করে! রংয়ের ব্যাবহারের ডিজাইনাররা কখনোই পিছপা হয় না তবে ওয়েব পেজ ডিজাইনের ক্ষেত্রে কিছু basic জিনিস মাথায় রাখতে হয় যেমন :

খুব বেশি চকচকে কালারে ওয়েব সাইটের readability নষ্ট করা উচিত না বরং সফট ধরনের রংয়ের ব্যাবহারে ওয়েব পেজের ইনফরমেশনের মধ্যে ভিউয়ারের মনোযোগ ধরে রাখার চেস্টা করা উচিত।
ওয়েব পেজটি কিসের জন্য নির্মিত তার উপর ভিত্তি করে রংয়ের ব্যাবহার করা উচিত কেননা আপনি একটা হসপিটালের ওয়েবসাইটে চকচকে লাল নীল হরেক রংয়ের টেক্সট আর ছবির ব্যাবহার করলে জিনিসটা অবশ্যই মানানসই হবে না! আবার একটা আর্টিকেল বেইজড ব্লগের মধ্যে আপনি হাজার হাজার ইমেজ ব্যাবহার করলে ব্লগের মূল প্রাধান্য আর্টিকেল গুলোই পড়ার অযোগ্য হয়ে উঠতে পারে!
এই ধরনের আরো অনেক কিছুই রং নির্বাচনের সময় মাথার রাখা লাগে তবে ভয়ের কিছু নাই কারন প্র্যাকটিস মেকস আ ম্যান পারফেক্ট! আমরা যতো প্র‌্যাকটিস করবো আর আধুনিক ওয়েব টেকের সাথে তাল মিলিয়ে চলার চেস্টা করবো আমাদের ডিজাইনিং স্কিলও ততোই বাড়বে! :D

লক্ষ্য করুন আমাদের সাইটটি মূলত একটি পোর্টফোলিও ক্যাটাগরীর ওয়েব সাইট তাই আমরা চেস্টা করবো সাইটের টেক্সট গুলো যেনো খুব সহজেই আমাদের ভিউয়ারের চোখে পড়ে কেননা ভিউয়ার হয়তো আমার ভবিষ্যৎ ক্লায়েন্ট তাই আমার স্কিল এবং এক্সপেরিয়েন্স গুলো জানার জন্য যেনো ভিউয়ারকে খুজে বেড়াতে না হয় বা এগুলো না দেখে অন্য কিছুতে যেনো চোখ আটকে না যায় তাই একটা সাবল(subtle) রংয়ের ব্যাবহার করবো আমরা! আমার মতে সাবল(sublte) ব্যাকগ্রাউন্ড হিসেবে ওয়েব সাইটের জন্য গ্রে অথবা সাদাই বেস্ট অনেকে সাথে একটু টেক্সচার বা গ্রাডিয়েন্ট ব্যাবহার করলে আরো ভালো!

এখন আমরা light গ্রে ব্যাবহার করবো আমাদের ব্যাকগ্রাউন্ড এর জন্য। গ্র্যাডিয়েন্ট ব্যাবহার করতে gradient tool সিলেক্ট করুন তারপর নিচের ছবি অনুযায়ী আপনার সেটিংস্‌ বদলান।

 

 

 

আপনি gradient দেওয়ার আগে নতুন একটি লেয়ার অপেন করে নিবেন যাতে আমরা চাইলেই আমাদের গ্র্যাডিয়েন্ট এর লেয়ার অন অফ করতে পারি। তারপর আপনার cursor নিচের ছবির মতো উপর থেকে নিচে নিন।

 

 

এখন আপনাদের ব্যাকগ্রাউন্ড দেখতে নিচের ছবির মতো দেখাচ্ছে কিনা দেখুন,

 


স্টেপ ৩৩ -

এখন আমাদের slider rotation control অ্যাড করার পালা। স্লাইডারের ইমেজগুলোকে কন্ট্রোল করার জন্য ইউজার অপশনের ব্যাবহার আপনারা অনেক সাইটেই দেখে থাকবেন, ঠিক তেমনই একটা অপশন দিচ্ছি এখানে আমরা!

কন্ট্রোল অ্যাড করতে ellipse tool সিলেক্ট করে নিন তারপর  গ্রে কালার ব্যাবহার করে আপনার হেডার এর নিচে ৪ ৫ টা বিন্দু আঁকুন আপনার নিজের ইচ্ছা অনুযায়ী তবে বেশি বড় করবেন না। circle গুলা আঁকা শেষ হয়ে গেলে সব গুলিকে একটা গ্রুপ এর মধ্যে ঢুকিয়ে নিন।

 

স্টেপ ৩৪ -

এখন আমরা একটু inner shadow অ্যাড করবো শুধু মাত্র একটা বিন্দু তে যাতে আমরা বুঝতে পারি যে আসলে আমরা এখন কোন slider এ আছি(active slider)। । প্রথমে যেকোনো একটা circle সিলেক্ট করুন তারপর ডাবল ক্লিক করুন এবং inner shadow দিন নিচের ছবির মতো।

স্টেপ ৩৫ -

controller দেয়া শেষ এখন আমাদের একটি divider অ্যাড করতে হবে যাতে জিনিসটা আরও বেশি professional দেখায় এবং সব কিছুর আলাদা আলাদা(separated) একটা ভাব থাকে।

divider অ্যাড করতে পেন্সিল টুল সিলেক্ট করুন তারপর নতুন লেয়ার অপেন করে #aaaaaa কালার দিয়ে ১ পিক্সেল এর একটি লাইন আঁকুন।

 

 

আগের টিউটরিয়ালে যে আমরা আমাদের একটা লাইন এর ২ পাশ smooth করেছিলাম gradient mask ব্যাবহার করে আমরা আবার সেভাবে পেন্সিল এ আঁকা লাইনের লেয়ার এ একটি লেয়ার মাস্ক অ্যাড করবো তারপর নিচের ছবির মতো গ্র্যাডিয়েন্ট দিলে আমাদের লাইন টি ২ দিক থেকে smooth হয়ে আসবে।

 

 

স্টেপ ৩৬ -

এখন আমাদের মেইন কন্টেন্ট অ্যাড করার পালা যেইখানে থাকবে আমাদের প্রোজেক্ট অথবা আমাদের প্রয়োজনীয় কিছু জিনিস যা আপনারা visitors দের দেখাতে চান শুরুতেই।আমি এইখানে অ্যাড করবো ৩ টা কলাম। আপনারা চাইলে ২ টা কলাম অথবা একটা কলাম ও রাখতে পারেন। কলাম গুলার মাজখানে কিছুটা padding রাখতে হবে তানাহলে সব হাবি জাবি দেখাবে তার আমাদের বুঝে শুনে একটা সাইজ chose করতে হবে যাতে কন্টেন্ট গুলা সমান ও থাকে আবার মাজখানে যেন সমান ফাক ও থাকে । তাই আপনার যখন নিজে নিজে এরকম সাইট বানানোর ট্রায় করবেন তখন একটু maths করে নিবেন। এইখানে আমরা ২৯০ পিক্সেল wide এর বক্স ব্যাবহার করবো এবং মাঝখানের padding এ দিবো ২৫ পিক্সেল ফাকা জায়গা।

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

 

 

স্টেপ ৩৭ -

বক্স গুলা আঁকা শেষ হয়ে গেলে guides অ্যাড করুন বক্স গুলা মাজখানে যাতে আমরা আমাদের কলাম কে বক্স ছাড়াই ৩ ভাগে ভাগ করে নিতে পারি। তারপর বক্স গুলা রিমুভ করে দিন।

 

 

স্টেপ ৩৮ -

উপরের ডাউনলোড সোর্স থেকে আইকন সেট গুলা ডাউনলোড করে নিন। তারপর যেকোনো ৩ টা আইকন আপনার কলাম এর ভিতরে বসান। text tool ব্যাবহার করে আপনার ইচ্ছা মতো আইকন গুলার একটা title দিয়ে দিন।

 

 

এখন আপনার প্রোজেক্ট এর অথবা আপনি যে জিনিসের আইকন ব্যাবহার করেছেন তা সম্মন্ধে কিছু description অ্যাড করুন যেকোনো ধরনের একটা ফন্ট ব্যাবহার করে।

 

 

স্টেপ ৩৯ -

আপনারা নিশ্চয় অনেক ওয়েবসাইট এর দেখেছেন যে read more নামে একটি অপশন থাকে কারন পুরা description এই জন্য এনাফ জায়গা থাকে না। তাই আমরা এখন একটি read more বাটন তৈরি করবো। read more বাটন তৈরি করতে rounded rectangle tool সিলেক্ট করুন তারপর আপনার radius ২০ দিন।

 

 

স্টেপ ৪০ -

আমরা আমাদের বাটনটাকে একটু সুন্দর করে তুলি আসেন। button এর লেয়ার এ ডাবল ক্লিক করে লেয়ার স্টাইল অপেন করে নিন তারপর নিচের ছবির মতো করে সেটিং দিন।

 

 

 

স্টেপ ৪১ -

এখন আমাদের read more বাটন এ টেক্সট টুল ব্যাবহার করে read more লিখে নিন গ্রেয় কালার দিয়ে। তারপর বাটনটি ২ বার কপি করে অন্য কলাম গুলায় বসান।

 

 

স্টেপ ৪২ -

read more বাটন বানানো শেষ হয়ে গেলো এখন আমরা কিছু ছবি অ্যাড করি যাতে visitors রা এসে দেখতে পারেন যে আমরা কি কি প্রোজেক্ট নিজে কাজ করতেছিলাম অথবা করতেছি। উপরে যেরকম ৩ টা বক্স এঁকেছিলাম আমরা এখন আবারো সেরকম ৩ টা বক্স আঁকবো তারপর আমরা বক্স গুলার বাইরে একটু বর্ডার দিবো। আপনি বক্স গুলা যেকোনো কালার দিতে পারেন কারন বক্স তো পিকচার এর নিচে ঢেকে যাবে দেখা যাবে না। বর্ডার দিতে যেকোনো একটা বক্স সিলেক্ট করে ডাবল ক্লিক করলে লেয়ার স্টাইল অপেন হবে তারপর নিচের ছবি অনুযায়ী stroke দিয়ে নিন।

 

 

 

 

স্টেপ ৪৩ -

এখন যে লেয়ার এ আপনি লেয়ার স্টাইল দিয়েছেন ঐ লেয়ার এ রাইট ক্লিক করলে দেখবেন যে copy layer style নামে একটা অপশন আছে ঐখানে ক্লিক করলে আপনার লেয়ার স্টাইল কপি হবে। তারপর অন্য বক্স গুলায় রাইট ক্লিক করলে দেখতে পাবেন যে paste layer style নামে একটা অপশন আছে ঐখানে ক্লিক করলে আপনাকে প্রত্যেকটায় লেয়ার স্টাইল দিতে হবে না। আপনার লেয়ার স্টাইল গুলা এমনিতেই paste হয়ে যাবে।

 

স্টেপ ৪৪ -

তারপর আপনি আপনার যে যে ইমেজ ব্যাবহার করতে চান তা ড্রাগ করে ড্রপ করে দিন আপনার ডকুমেন্ট এর উপরে তারপর create clipping mask ব্যাবহার করে আপনার ইমেজটিকে বক্স এ ক্লিপ করে দিন।

 

এরকম একটা একটা করে আপনার ইমেজ গুলাকে clipping mask দিয়ে ক্লিপ করে দিন।

 

 

স্টেপ ৪৫ -

আমরা যেভাবে আমাদের header এবং slider এর নিচে  shadow দিয়েছিলাম তা চাইলে এই ছবি গুলার নিচেও দিতে পারি। তাই আসুন দেরি না করে দিয়ে নেই shadow।

 

 

তারপর আপনার ছবির description অ্যাড করে নিন টেক্সট টুল ব্যাবহার করে। আপনার ইচ্ছা মতো যেকোনো টেক্সট ব্যাবহার করতে পারেন। আর হ্যাঁ read more বাটন গুলাকে আবারো কপি করে description এর নিচে বসাতে পারেন।

 

 

 

আজকের টিউটরিয়াল এই পর্যন্তই।। আমাদের পরবর্তী টিউটরিয়াল হবে এই টেমপ্লেট এর ফাইনাল টিউটরিয়াল আশা করি আপনারা এই টিউটরিয়াল প্রাকটিস করবেন এবং পরবর্তী টিউটরিয়াল পর্যন্ত আমাদের সাথে থাকবেন। ভালো থাকুন।। ধন্যবাদ :)

 

 

 অন্যান্য পর্বসমূহ:

প্রথম পর্ব : ফটোশপ টিউটরিয়াল ৪৬ – ওয়েব টেমপ্লেট ১ [ শুরু করুন ওয়েব ডিজাইনিং ]

দ্বিতীয় পর্ব : ফটোশপ টিউটরিয়াল ৪৭ – ওয়েব টেমপ্লেট ২ [ওয়েব পেজের হেডার তৈরী করা]

তৃতীয় পর্ব : ফটোশপ টিউটরিয়াল ৪৮ – ওয়েব টেমপ্লেট ৩ [ওয়েব পেজের হেডার (২) + লোগো ]

চতুর্থ পর্ব : ফটোশপ টিউটরিয়াল ৪৯ – ওয়েব টেমপ্লেট ৪ [ নেভিগেসন ও স্লাইডার তৈরী]

পঞ্চম পর্ব : ফটোশপ টিউটরিয়াল ৫০ – ওয়েব টেমপ্লেট ৫ -[ স্লাইডার ২]

ষষ্ঠ পর্ব : ফটোশপ টিউটরিয়াল ৫১ – ওয়েব টেমপ্লেট ৬ [কন্টেন্ট ডিজাইন]

সপ্তম পর্ব : ফটোশপ টিউটরিয়াল ৫২ – ওয়েব টেমপ্লেট ৭ [ফুটার ডিজাইন এবং সমাপ্তি]

ট্যাগসমূহ:

লেখক: ইরা আহমেদ

উনারে অনেক ভালোবাসি আর ভালোবাসি শিখাইতে...।। মানুষকে হাসাইতেও অনেক ভালো লাগে :) ফটোশপিং করা ব্লগ এ টিউটরিয়াল লেখা এবং উনার সাথে অনেক অনেক গল্প করা আমার শখ, অভ্যাস অথবা আমার দৈনন্দিন জীবন বলতে পারেন। ( University khular age porjonto :P )



কথোপকথন শুরু হয়ে গেছে! আপনিও যোগ দিন- ইতোমধ্যে 6 টি মন্তব্য করা হয়েছে :

  1. morichikaon November 8, 2012, at 12:20 pm Reply

    A lot of thanks to Ghomtawali(covered veil) for presenting excellent tutorials for us.Actually it is a very nice initiative . Bangladesh hopes her sons and daughters come forward to help each other so that she can uphold her above all nations in the wold. Wish you all the best.

    Morichika

  2. Asifon May 18, 2013, at 5:34 pm Reply

    video tutorial dile vhalo hoto

  3. Shaonon December 18, 2013, at 5:02 am Reply

    ভাইয়া কাজগুলো photoshop এর কোন version এ করছেন জানালে উপকৃত হবো…

  4. kholilon February 22, 2015, at 2:45 pm Reply

    boss khub valo hoyech amra noutn der jonno

Leave a Reply to kholil Cancel reply

Your email address will not be published. Required fields are marked *