ওয়েব ডিযাইন রেযোল্যুশন

 ন্যানোডিযাইন্‌স-এর সকল পাঠক ও শুভাকাঙ্ক্ষির প্রতি শুভেচ্ছা

শুভ নববর্ষ ১৪১৯ বঙ্গাব্দ!

জ্ঞান-স্তর: প্রাথমিক

ভার্ষন: ফটোশপ (যেকোনো ভার্ষন)

একজন ওয়েব গ্রাফিক্স ডিযাইনার হিসেবে আপনাকে জানতে হবে আপনার ডিযাইনটিকে আপনি কোন আকারে বানাবেনঅর্থাৎ ডিযাইন শুরু করার জন্য ফটোশপে যে ফাইলটা নিবেন, তার width-height কত নিবেনএজন্য মনে রাখতে হবে, কম্পিউটারে, মনিটরের রেযোল্যুশন বা দৃশ্যমান অংশের আকার আপনার ডিযাইনের এই অংশকে প্রভাবিত করবে (যাদের ভেক্টর গ্রাফিক্স সম্বন্ধে ধারণা আছে, তারা এই আলোচনাকে ভেক্টরের সাথে তুলনা করে গুলিয়ে ফেলবেন না যেন)

জেনে রাখতে হবে, আমরা ফটোশপে কোনো ছবি, লেখা, আঁকিবুকি ইত্যাদি যাবতীয় কিছুকে পিক্সেল (pixels, পিক্‌যেল) দিয়ে হিসাব করিপিক্সেল জিনিসটা হলো ধরা যাক একটা ছোট্ট আকৃতির বর্গক্ষেত্রআমরা হয় dot জিনিসটা বুঝি, একটা ফোঁটাতবে আমাদের কাছে মনে হয়, ডট জিনিসটা গোলাকৃতি কিছুকিন্তু পিক্সেল জিনিসটা গোলাকৃতি না, এটা বর্গাকৃতিরচিত্র ৩.০১-এ লক্ষ করবেন, বাম দিকে একটা ছোট্ট গোলাকৃতি বৃত্ত আছেওটাকে যখন বড় করে দেখছি আমরা ফটোশপে, তখন ওটা হয়ে যাচ্ছে অনেকগুলো বিভিন্ন [কাছাকাছি] রঙের বর্গক্ষেত্রের একটা সমন্বয়

চিত্র ৩.০১: পিক্সেল ধারণা

চিত্র ৩.০১: পিক্সেল ধারণা

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

এবারে ৩.০১ চিত্রে লক্ষ করুন, এই সূত্রমতে, আমাদের ঐ ছোট ডটটার রেযোল্যুশন হচ্ছে 19 × 19 pixels (পড়তে হবে “উনিশ বাই উনিশ পিক্‌যেল”), কারণ উপর থেকে নিচে ১৯ পিক্সেল, তেমনি বাম থেকে ডানে ১৯ পিক্সেলএবারে আপনার মনিটরের রেযোল্যুশন জানলে বিষয়টা আপনি সহজেই বুঝতে পারবেন

বলে রাখি: সাধারণ মনিটরের রেযোল্যুশন হয়ে থাকে 800 × 600 pixels, 1024 × 768 pixels এভাবে আনুপাতিক হারে ক্রমবর্ধমানকিন্তু ওয়াইড স্ক্রিন মনিটরের রেযোল্যুশন হয় 1366 × 768 pixels ইত্যাদি আনুপাতিক হারে ক্রমবর্ধমাননিশ্চয়ই বুঝে গেছেন যে, আপনার মনিটরটা একটা বর্গাকৃতির মনিটর না বলেই ডানে-বামে পিক্সেলের সংখ্যা বেশি দেখাচ্ছে

এবারে আমাদের মূল আলোচনায় চলে আসিমনে রাখতে হবে, ওয়েব ডিযাইনে এটা মুখ্য নয় যে, আপনার মনিটরের রেযোল্যুশন কত, বরং এটা মুখ্য যে, আপনার ডিযাইন করা ওয়েবসাইট যারা ভিযিট করবে, তাদের মনিটরের রেযোল্যুশন কতজানিয়ে রাখি, বেশ কয়েক বছর আগে বাংলাদেশে যেসব মনিটর ব্যবহৃত হত, সেগুলোর রেযোল্যুশন ছিল 800 × 600এরপর 16 bit এবং 32 bit-এর যেসব গ্রাফিক্স কার্ড আসে, সেগুলো 1024 × 768 সাপোর্ট করা শুরু করেএভাবে 1280 × 960 হলো তার উপরের রেযোল্যুশনএরপর বাজারে আসা শুরু করে ওয়াইড স্ক্রিন মনিটর, এতে উপরে-নিচে এক থাকলেও ডানে-বামে মনিটরের রেযোল্যুশন বাড়তে থাকেফলে আসে 1366 × 768 রেযোল্যুশনের মনিটরএর উপরেরটা হলো 1708 × 960 ইত্যাদিতবে এগুলো হলো আনুপাতিক হারে বাড়া রেযোল্যুশনকিন্তু হিসাব-নিকাশ ছাড়া সুবিধা বিবেচনা করে যেগুলো চলে, সেগুলোর মাপজোকে কোনো ঠিক-ঠিকানা নেই, যেমন: 1024 × 576, 1280 × 720 ইত্যাদি। এই সবগুলো পিক্সেলের হিসাবে।

এখন এই উল্টাপাল্টার দুনিয়াতে আপনি আপনার ওয়েবসাইটের ভিযিটরদেরকে আপনার ডিযাইন করা রেযোল্যুশনেরই মনিটর ব্যবহার করতে হবে বলে বাধ্য করতে পারবেন নাতাই সব দিক হিসাব করে আপনাকে একটা স্ট্যান্ডার্ড রেযোল্যুশন বেছে নিতে হবে, যা অধিকাংশ কম্পিউটার ব্যবহারকারী ব্যবহার করেন, বা ব্যবহার করা স্বাভাবিকবাংলাদেশের প্রেক্ষিতে এই রেযোল্যুশনটা হলো 1024 × 768 px (Pixel-কে সংক্ষেপে px দিয়ে প্রকাশ করা হয়)

মনে রাখতে হবে উপরে-নিচে কত পিক্সেল, তা আমাদের চিন্তা না করলেও চলবে, কিন্তু ডান-বামে কত, তা ভাবতে হবে বলেই এতো আলোচনাযদিও বাংলাদেশে এখন (২০১২ সালে) ওয়াইড স্ক্রিন মনিটরের অবাধ প্রচলন হচ্ছে, কিন্তু তবু 1024 হলো স্ট্যান্ডার্ডকারণ আমি এমন সব মানুষও পেয়েছি, যারা বিশ্বাস করেন, ওয়াইড স্ক্রিনে ছবি চেপে যায় 🙂

চিত্র ৩.০২: মনিটরের রেযোল্যুশন অনুযায়ী ওয়েব ডিযাইন

চিত্র ৩.০২: মনিটরের রেযোল্যুশন অনুযায়ী ওয়েব ডিযাইন

 চিত্র ৩.০২-এ এবারে আপনাদের দৃষ্টি আকর্ষণ করছি। এখানে একটা 1366 × 768 রেযোল্যুশনের ওয়াইড স্ক্রিন মনিটর উদাহরণস্বরূপ নেয়া হয়েছে। যার মধ্যে আমাদের ডিযাইন করা ওয়েবসাইটের পাশ হচ্ছে 980pxজানিয়ে রাখি, এই 980px width-কে আমরা বলছি “ওয়েব ডিযাইন রেযোল্যুশন”কিন্তু কেন 980? অধিকাংশ কম্পিউটারে 1024 যদি কমন হয়, তাহলে 1024 কেন নিলাম না?

মনে রাখতে হবে, একটা ওয়েবসাইট দেখা হয় একটা ব্রাউজারে, যেমন: ইন্টারনেট এক্সপ্লোরার, মযিলা ফায়ারফক্স, অপেরা, গুগল ক্রোম, সাফারি ইত্যাদি সেই ব্রাউজারের নিজস্ব একটা চেহারা আছে। তার উপরের দিকে কিছু জায়গা জুড়ে থাকে মেনু বার, ট্যাব, বিভিন্ন টুল্‌স বা সরঞ্জাম, এ্যাড্রেস বার ইত্যাদি হাবিজাবি। চিত্র ৩.০২-তে লক্ষ করুন “প্রথম দর্শন” বলে একটা অংশ আমরা দেখাবার চেষ্টা করেছি হলদে রং দিয়ে, যখনই আপনি কোনো ওয়েবসাইট, ব্রাউযারে খুলবেন, তখন প্রথমেই এই অংশটি আপনার নজরে আসবে। [উদাহরণের 768-এর] কিছু অংশ উপরের দিকে বাদ যাবে বিভিন্ন টুলবার আর মেনুবারের কারণে, আর নিচের দিকে কিছু অংশ বাদ যাবে ব্রাউযারের ফুটার বারের কারণে। ঠিক একইভাবে ডানদিকে কিছু অংশ বাদ যাবে স্ক্রলবারের (যে বার দিয়ে উপরে নিচে নাড়াচাড়া করে নিচের দিকের কন্টেন্ট দেখা হয়) কারণে ‘প্রথম দর্শন’ অংশটিও ব্রাউযারভেদে বিভিন্ন হয়ে থাকে, তাই আমরা প্রায় সমান () চিহ্ন দিয়ে বিষয়টা বোঝাবার চেষ্টা করেছি। এই যাবতীয় হিসাব-নিকাশ করে নিয়েই পৃথিবীব্যাপী 980px width-কে শ্রেষ্ঠ এবং ঝামেলাহীন মাপ হিসেবে ধরা হচ্ছে এখন (২০১২)

 

এবারে এভাবে [চিত্র ৩.০২-এর মতো] একটা পূর্ণাঙ্গ ওয়েবসাইটের নকশা করার জন্য প্রথমেই আপনি মোটামুটি ওয়াইড স্ক্রিনের হিসাব নেয়ার জন্য 980 না নিয়ে বরং 1366 × 1000 দিয়ে ফাইল নিনএজন্য ফটোশপে File > New… ক্লিক করুন (Ctrl+N) এবারে এভাবে দিন:

Width: 1366 pixels

Height: 1000 pixels

Resolution: 300 pixels/inch

[Color] Mode: RGB Color (8 bit)

[Background] Content: White

প্রথমে যদিও আমরা Height: 1000px নিচ্ছি, কিন্তু যখনই আপনার ওয়েবসাইট নকশার প্রয়োজনে নিচের দিকে আরো বাড়ানোর দরকার হবে, তখনই আপনি উচ্চতা বাড়িয়ে নিতে পারেন। যাহোক এই ফাইলটি ওভাবে রেখেই আপনি একই পদ্ধতিতে আরেকটা ফাইল নিন, তবে মাপগুলো দিন এরকম: Width: 980px, Height: 1000px; OK করুন। নতুন খোলা ফাইলে কীবোর্ডে Ctrl+A (Select all) চেপে সম্পূর্ণ জমিনটুকু সিলেক্ট করুন। এবারে কীবোর্ডে Ctrl+C (Copy) চেপে কপি করুন। বন্ধ করে দিন এই নতুন ফাইলটি (এর আর দরকার হবে না)

এবারে একটু আগে নেয়া 1366 ফাইলটিতে গিয়ে Ctrl+V (Paste) চেপে পেস্ট করুন সদ্য কপি করা অংশটি। সাদার মাঝে সাদা অংশ পেস্ট হয়ে কিছুই বোঝা যাবে না। তাই কীবোর্ডে Ctrl+I (Invert) চেপে রংটা বিপরীত করে দিনএবারে আপনি স্পষ্ট বুঝতে পারবেন, 1366 সাদা জমিনে 980 width-এর একটা কালো অংশ ঠিক মাঝ বরাবর বসে গেছে এই নতুন লেয়ারটির Opacity কমিয়ে নিলে তা আপনার ডিযাইনকে 980’র মধ্যে রেখে করতে সহায়তা করবে। চিত্র ৩.০৩-এ দেখুন

চিত্র ৩.০৩: 1366-এর মধ্যে 980 পিক্সেলে ওয়েবসাইট নকশার পদ্ধতি

চিত্র ৩.০৩: 1366-এর মধ্যে 980 পিক্সেলে ওয়েবসাইট নকশার পদ্ধতি

 চিত্র ৩.০৩-এ আমরা 980px কালো লেয়ারটির অপাসিটি ১০% করে নেয়ায় ওটা হালকা ছাই রঙা হয়ে নিচে থেকে যাচ্ছে, আর আমরা আমাদের ওয়েবসাইটের নকশা সেটাকে ভিত্তি ধরে সুন্দর করে মাপজোক সহকারে নকশা করতে পারছি।

এখানে যে পদ্ধতিটা দেয়া হলো, সেটাকে অকথ্য ভাষায় ‘বাংলা পদ্ধতি’ বলা যেতে পারে, নিয়মতান্ত্রিক পদ্ধতি এটা না নিয়মতান্ত্রিক পদ্ধতি হলো টুলবারের Rectangular Marquee Tool (M) নিয়ে Fixed Aspect Ratio অথবা Fixed Size স্টাইলে 980 × 1000 ধরে নির্দিষ্ট অংশ সিলেক্ট করে রং ভরাট করা। কিন্তু এ পদ্ধতিতে মাপজোক সমান হওয়া, এবং মাঝামাঝি অবস্থান বাছাই করা ডিযাইনার-ভেদে আপেক্ষিক। তাই সবার জন্য সহজ পদ্ধতিটা আমরা এখানে উল্লেখ করলাম।

এখন প্রশ্ন হলো, আপনি কি 980px-এর মধ্যে ওয়েবসাইট ডিযাইন করতে বাধ্য? না, ডিযাইন করা একজন ডিযাইনারের আত্মার খোরাক। তাই এখানে ব্যাকরণ মানতেই হবে, এমন কোনো কথা নেই। তবে যেহেতু এই ডিযাইনের একটা ব্যবহারযোগ্যতা আছে, তাই একটু-আধটু ব্যাকরণ আপনি মানতেই পারেন। তবে এর মধ্যে থেকেই আপনি কিছু নমনীয়তা আনতে পারেন, যেমন: আপনি 980px থেকে কমিয়ে আরো চোঙা আকৃতির ওয়েবসাইটের ডিযাইন করতে পারেন, কিংবা আপনি সামান্য একটু বেড়ে 1000px-এর মধ্যে নকশা করতে পারেন। তবে, 980px মেনে চলাটা স্ট্যান্ডার্ড, আর কিছু না।

 

এই পদ্ধতি অবলম্বন করে একটা ওয়েবসাইটের ভিত্তি তৈরি করে ফেলা এখন আপনার জন্য সময়ের ব্যাপার মাত্র। তো শুরু করে দিন, আর আমাদের জানান, কী বুঝেছেন, কী বুঝেননি, আর পদ্ধতিটা ব্যবহার করে আপনাদের অভিজ্ঞতা কেমন।

এই পোস্টটা আমি উৎসর্গ করছি, আমার শিক্ষিকা তাহমিনা খাতুনকে। তাঁর ডিযাইনকে আমি শ্রদ্ধা করি এবং যতটুকু তিনি শিখিয়েছেন, তার জন্য আমি তাঁর কাছে কৃতজ্ঞ। ওয়েবসাইট ডিযাইনে আপনাদের অভিযান আনন্দময় হোক।

 

-মঈনুল ইসলাম

গ্রাফিক্স ডিযাইনার ও ওয়েব ডেভলপার

wz.islam@gmail.com

1 comment

আপনার মন্তব্য জানান...