ফটোশপে পূর্ণাঙ্গ ওয়েবপেজ ডিজাইন করুন……।।

ফটোশপে পূর্ণাঙ্গ ওয়েবপেজ ডিজাইন করুন……।।

সবাই কেমন আছেন ? অনেক দিন হলো কিছু পোস্ট করা হয় না তাই ভাবলাম ভাইসাব দের জন্য এবং অবশ্যই আপাদের জন্য ও একটা নতুন পোস্ট পাবলিশ দেই। আমারে চিনছেন তো ?? না চিনলে কিন্তু খবর আছে কইলাম হ্যাঁ আমি নিয়ে আসলাম আপনাদের জন্য নতুন একটি টিউন
আমরা অনেকেই আজকাল অডেস্ক এ এবং নানান জায়গায় ফ্রী lancing এর কাজ করি তার মধ্যে বেশির ভাগ সময় দেখা যায় যে client চায় একটা ওয়েবসাইট বানায়া দিতে অথবা client psd ফাইল দিয়া দিবো আপনারে ঐটা থাইকা একটা ওয়েবসাইট বানায়া দিতে হইবো। এখন আমি তো ভাই ( এবং আপা ) ওয়েবসাইট কেমনে বানায় জানি না আপনারা নিশ্চয় জানেন যে html, c++, java, java script, jQuery এবং php এর উপরে উনার অনেক ভিডিও টিউটরিয়াল আছে। কিন্তু আমার কাজ হইতেছে যে ওয়েবসাইট ফটোশপে তৈরি করা যা আজকাল অনেক চলে শুধু ওয়েবসাইট না আমার অনেক ধরনের ফটোশপ টিউটরিয়াল ও আছে যা আপনার গেলেই দেখতে পাবেন। যাই হোক তো আমি ৭ টা টিউটরিয়ালে একটা ওয়েবসাইট ভাগ করে পুরা ওয়েবসাইট কিভাবে বানাবেন তার উপর টিউটরিয়াল দিয়ে দিছি বিডিগিকস ব্লগ এর ফটোশপ ওয়েব টেমপ্লেট   category  তে। এই ওয়েবসাইট এ আপনারা কিভাবে header, slider, logo, text, footer এবং button তৈরি করবেন এবং কোন কোন জায়গায় ব্যাবহার করবেন তা দেখানো আছে আপনারা গেলেই দেখতে পারেন প্রতিটা অংশ ভাগ করে দেয়া আছে।
এখন আমি তো জানি যে বাঙালি অনেক অলস আমি নিজে ও যাই হোক, সেই কারনে আমি আমার ওয়েব টেমপ্লেট এর প্রথম টিউটরিয়ালটি নিচে ( copy paste ) করে দিলাম যাতে আপনারা techtunes এ বসেই আমার টিউটরিয়াল যাচাই করতে পারেন।
আর হ্যাঁ আমাদের গ্রুপ  +  পেজ এ লাইক এবং জইন করতে পারেন। আপনাদের যেকোনো সমস্যা এবং সাহায্য পেতে আমাদের গ্রুপ এ পোস্ট করলেই হবে। আমরা সবাই মিলে হেল্প করার চেষ্টা করবো
যাই হোক নিচে দেখে নিন আমার প্রথম টিউটরিয়ালের পুরা অংশ

নোট্‌স ঃ আমি কিন্তু আমার টিউটরিয়াল নিজে লিখি না আমি ইংলিশ টিউটরিয়ালের বাংলা করে দেই। আগেও বলেছিলাম একবার আবারো বললাম

আপনারা নিশ্চয় অনেক excited। আমি ও কারন আমি এই প্রথম web template নিয়া টিউটরিয়াল দিতাছি এর আগে কখনো দেই নাই। ওয়েব template নিয়া টিউটরিয়াল দেয়া খুব সহজ কাজ না তাই একটু ভয়ে ভয়ে ও আছি যাই হোক ঐটা কোন বেপার না। ওহ ! আপনাদের তো বলাও হয় না। শুরুতেই সবাইরে আমার সালাম এবং বিডিগিকস ওয়েবসাইট এর পক্ষ থেকে আমি ইরা আহমেদ আপনাদের টিউটরিয়ালে ওয়েলকাম জানাইতেছি
আমি ও নতুন এইসবে আপনারা ও হয়তো নতুন তাই আমি হয়তো আপনাদের best advise দিতে পারমু না ওয়েব ডিজাইন এ কিন্তু কিছু কিছু জিনিস আছে যা ওয়েব ডিজাইন করার জন্য অনেক উপকারী এবং করলে অনেক সময় বাইচা যায়। যেমন ধরুন,

১ - প্রথমে ভাবেন যে আপনি যে ওয়েব সাইট টা বানাবেন তার আসলে কি উদ্দেশে বানাইবেন। কেউ হয়তো বানাইতে চান ব্লগ, আবার কেউ প্রোফাইল, আবার কেউ গানের ওয়েবসাইট, নাচের ওয়েবসাইট, শিক্ষামূলক ওয়েবসাইট।ওয়েব সাইট এর মুল লক্ষ্য টা কি ??
২ - এখন গানের ওয়েবসাইট বানাইলে আপনারে মাথায় রাখতে হবে যে লোগো, ব্যাকগ্রাউন্ড, মেনু, পিকচার এগুলায় যাতে এক ধরনের হিন্ট থাকে যে এইটা একটা গানের ওয়েবসাইট। পাবলিক ঢুকার পড়ার যাতে না সাথে সাথেই বুঝতে পারে যে সাইট টা মিউজিক এর। আবার ধরেন শিক্ষামূলক কোন ওয়েবসাইট বানাইলেন আপনি যদি আইকন গুলাতে বই, কম্পিউটার, কলম, খাতা এইশব ব্যাবহার করেন তাইলে সাইট এর একটা শিক্ষামূলক ভাব থাকে। যাই হোক এইটা হইতেছে আমার মতামত। আপনারা যেরকম ইচ্ছা আপনাদের টা বানাইতে পারেন কোন সমস্যা নাই।
৩ - সাইট এর ডিজাইন কিরকম করবেন ?? কিছুই বুজতেছেন না, কেমনে শুরু করবেন কই থাইকা শুরু করবেন কিচ্ছু জানেন না। এক কাজ করলে কেমন হয় একটা খাতা কলম নিয়া আপনারা একটা ওয়েবসাইট এর স্কেচ আঁকতে পারেন। কারন কম্পিউটার এর থাইকা আমার মতে খাতা কলমে আমরা comfortable ফীল করি অনেক। তারপর যা যা ভাবছেন তা তা কম্পিউটার এর ফটোশপ এ করা শুরু করলেন।
৪ - আমার ৪ নং advise হইলো যে সব সময় কালার গুলারে related রাখার ট্রায় করবেন। ধরেন আপনার ব্যাকগ্রাউন্ড কালার কালো, আপনার ব্যাকগ্রাউন্ড কালার কালো হইলে আপনি টেক্সট এর লাইগা গ্রেয় ব্যাবহার করতে পারেন কারন গ্রেয় আর কালো এর কালার কোড খুব কাছা কাছি। আপনি যদি ব্যাকগ্রাউন্ড কালার দেন লাল আর টেক্সট দেন নীল আমার মনে হয় না আপনার ওয়েবসাইট খুব একটা সুন্দর হবে। ওয়েবসাইট তখন খালি ঝক ঝক করবে যা আজকালকের ওয়েবসাইট এ খুব কম থাকে। আজকালকের professional ওয়েবসাইট গুলায় কালার খুবই কম থাকে।
৫ - কোন একটা জিনিস পুরা পুরি ডিজাইন করা শুরু করার আগে আপনাদের একটা simple look দরকার প্রথমে যাতে ওয়েবসাইট এর ইমেজ টা আপনার চোখে ভাসে। যেমন ধরুন নিচের ছবির !!!

উপরের এই template হইতেছে শুধু গ্রেয় কালার ব্যাবহার করে বানানো। এটা করার সুবিধা এই যে, আমরা ওয়েবসাইট এর দিকে তাকাইলেই বুঝতে পারতেছি যে, আমাদের কোন জায়গায় কি কি নিয়ে কাজ করতে হবে।
তারপর আমরা ডিজাইন করে আস্তে আস্তে নিচের ওয়েবসাইট template এর মতো একটা template ডিজাইন করতে পারি যা নিয়ে আমার আজকের এই টিউটরিয়াল

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

উপরের ছবিটা বানাইছি আমি আমারটা হয়তো ওদের মতো same হয় নাই কিন্তু আপারা same বানাইতে পারবেন আশা করি তো আসুন শুরু করা যাক
আসেন তাইলে আমরা শুরু করি কি বলেন ?? আজকে আমি আপনাদের মাত্র ২ টি স্টেপ দেখাবো।
স্টেপ ১ -
প্রথমে নতুন একটা ফাইল অপেন করি আমরা । আমাদের layout টা হবে 960 pixel wide । আমি ঠিক জানি না আপনারা 960 grid system নামে কিছু জানেন নাকি আসলে আমি নিজেই ঠিক কইতে পারতেছি না এইটা আসলে কি কিন্তু আমার মনে হয় আপনার ওয়েব ডিজাইন এর layout width যদি ৯৬০ পিক্সেল হয় তাইলে PSD to HTML করতে সুবিধা অনেক আর ৯৬০ কেই এখন পর্যন্ত ওয়েব পেজের জন্য স্ট্যান্ডার্ড ধরা হয় (যদি না আপনি পেজটাকে রেসপনসিভ বানাতে চান)। হয়তো - আমি সত্যি জানি না এটা সম্বন্ধে ফয়সাল বাসায় আসার সাথে সাথে জিজ্ঞেসা করবো যদি মনে থাকে আর নাইলে আপনারা গুগল মামার কাছ থাইকা জাইনা নিন 960 pixel wide layout এর লগে 960 grid system রিলেটেড কিনা !!! যাই হোক,
আমাদের ডকুমেন্ট এর সাইজ হবে height 1500 and width 1200 pixel.........।। নিচের ছবি দেখে দেখে নতুন একটি ডকুমেন্ট অপেন করুন।

স্টেপ -২
এখন আপনারা আমি যে গ্রেয় layout টা দিছি ঐটা দেখে দেখে একটা layout বানান ( layout টা হয়তো পরে কাজে লাগবে হয়তো না কিন্তু আমার মতে practice করাটা জরুরি) । আমি আপনাদের বলবো না কোনটার কি সাইজ অথবা কতো পিক্সেল উপরে নিচে। আপনারা নিজের ইচ্ছা মতো এবং নিজে যা জানেন এবং শিখছেন ফটোশপে তা প্রয়োগ করে দেখে দেখেgrey layout টার মতো একটা লেআউট তৈরি করুন। খেয়াল করেন যে কোন শেপ টা দেখতে কিরকম, কোনটা বার বার তৈরি করতে হবে না শুধু কপি করে অন্য জায়গায় বসাতে হবে, কোনটার height ঠিকি থাকবে কিন্তু width একটু বেশি হবে এগুলা বিবেচনা করে একটা layout তৈরি করুন।
তারপর আপনার এই PSD ফাইলটা সেভ করে রাখুন
সৌজন্যে: বিডিগিকস