PSD থেকে HTML করার গুরুত্বপূর্ণ কিছু টিপস

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

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

আমরা অনেক সময়ই দেখি, পিএসডি থেকে এইচটিএমএল এ ডিজাইনটি কনভার্ট করতে তুলনামূলক দ্বিগুণ সময় বেশি লাগে। এর কারণ হচ্ছে ত্রুটিযুক্ত পিএসডি ডিজাইন। যারা এ পেশায় নতুন, তারা প্রায়ই এমন কিছু পিএসডি ডিজাইন করে, যা এইচটিএমএল এ রূপ দিতে অনেকটা বেগ পেতে হয়। ফলে নষ্ট হয় অনেক মূল্যবান সময়।

তাই আজ আমরা সময় সাশ্রয়ের পিএসডি থেকে এইচটিএমএল রূপান্তরের জন্য বেশ কিছু টিপস সংগ্রহ করছি। যা অনুসরণ করলে আপনি খুব সু-শৃঙ্খল পিএসডি ডিজাইন করতে সক্ষম হবেন।

লেয়ারগুলোকে ইনট্যাক্ট রাখুন

অনেক ডিজাইনার পিএসডি ফাইলের আকার ছোট রাখতে লেয়ারগুলোকে মার্জ (Merging Layer) করে রাখেন। এটা হয়তো প্রিন্ট ডিজাইনের জন্য ঠিক আছে। কিন্তু যখন একজন ডেভেলপার আপনার করা পিএসডি ফাইলটিকে এইচটিএমএল এ কনভার্ট করতে যাবেন, তখন তার প্রতিটি গ্রাফিক্স উপকরণ যেমন: টেক্সট, ইমেজ বা ফন্ট ইত্যাদির প্রয়োজন পরবে।

তাই লেয়ারগুলোকে মার্জ না করে ইনট্যাক্ট রাখুন অর্থাৎ প্রতিটি লেয়ারকে আলাদা আলাদা রাখুন। এর ফলে ডেভেলপার আপনার ডিজাইনের প্রতিটি এলিমেন্ট সূক্ষ্মভাবে বিশ্লেষণ করতে পারবে।

লেয়ারগুলোকে শৃঙ্খলতার সাথে সাজিয়ে রাখুন

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

খেয়াল রাখুন ডেভেলপার যখন ডিজাইনটি করবে, তখন তার যেন বিশেষ কোন অংশ খুঁজে পেতে সময় না লাগে। লেয়ারগুলোকে শৃঙ্খলতার সাথে সাজিয়ে রাখলে তা অনেক কম সময়ের মধ্যে এইটিএমএল এ কনভার্ট করা যায়।

অবজেক্টের সাইজকে যথাযথ রাখুন

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

কখনো কখনো দেখা যায়, একটির থেকে আরেকটির Margin বা Padding কম বেশি হয়েছে। এরকমটি হলে চলবে না। প্রফেশনাল একটি ডিজাইন উপহার দেয়ার জন্য এটি একটি অতীব গুরুত্বপূর্ণ বিষয়।

এলিমেন্ট সাজানোর জন্য Grid ব্যবহার করুন

ফটোশপের Grid লাইন দেয়া থাকে মূলত প্রতিটি এলিমেন্ট পরস্পর সমান সারিতে অবস্থান করছে কি না এটা দেখার জন্য। কিছু কিছু ক্ষেত্রে অবজেক্টের সাইজ পরিমাপ করার জন্য ব্যবহার করা হয়ে থাকে।

আপনার ডিজাইন করা প্রতিটি এলিমেন্ট বা অবজেক্টকে যথাযথভাবে সাজাতে Grid লাইনের সঠিক ‌ব্যবহার করুন। এটি ব্যবহারের ফলে আপনি দেখতে পারবেন, কোন অবজক্ট নির্ধারিত এরিয়ার বাইরে চলে গেল কিনা।

হোভার ইফেক্ট তৈরি করুন

যখন কোন পিএসডি ডিজাইন প্রফেশনালি করতে যাবেন, এটা চিন্তার করুন যে এইচটিএমএল -এ ডিজাইনটির ফাংশনালিটি কেমন হবে। ফটোশপেই প্রয়োজনীয় অবজেক্টগুলোন হোভার ইফেক্ট দিতে চেষ্টা করুন। এর ফলে ডেভেলপার বুঝতে পারবে একটি অবজেক্ট Enable এবং Disable উভয় অবস্থাতেই কেমন দেখাবে।

Blending Modes ব্যবহার করবেন না

ফটোশপে করা Blending Modes গুলো কখনো কখনো CSS এ বাস্তবরূপ দিতে অনেকটা বেগ পেতে হয়। কখনো কখনো সম্ভবই হয়ে ওঠে না। কারণ, CSS এর বেশি কিছু সীমাবদ্ধতা রয়েছে। তাই কোনো অবজেক্টকে Blending Modes দেবেন না যেটা আপনি চান এইটিএমএল এও হোক। অবজেক্টকে নরমাল রাখার সর্বোচ্চ চেষ্টা করুন।

কনটেন্ট এর Flexibility নিয়ে ভাবুন

ফটোশপে কিছু কিছু টেক্সট নির্দিষ্ট এরিয়ার মধ্য খুব ভালোভাবে ফিক্সড হয়ে যায়। কিন্তু ওই একই টেক্সট এইচটিএমএল এ ভালোভাবে ফিক্সড হয় না, বরং এরিয়ার বাইরে চলে যায়, অর্থাৎ Overflow হয়ে যায়। সুতরাং আপনি আপনার টেক্স বক্সে যতগুলো টেক্সট রাখবেন, তা এইচটিএমএল কনভার্ট করার সময়েও রাখা যাবে কি না, সেটা চিন্তা করুন।

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