PSD থেকে HTML বাংলা PDF টিপস: আমরা অনেক সময়ই দেখি, পিএসডি থেকে এইচটিএমএল এ ডিজাইন কনভার্ট করতে তুলনা মূলক দ্বিগুণ সময় এরও বেশি লাগে।
এর কারণ হচ্ছে ত্রুটি যুক্তো পিএসডি ডিজাইন। যারা এ পেশায় নতুন, তারা প্রায়ই এমন কিছু পিএসডি ডিজাইন করে, যা এইচ টি এম এল এ রূপ দিতে অনেকটা বেগ পেতে হয়।
একজন ওয়েবসাইট ডিজাইনার হিসেবে যখন আপনার ডিজাইন করা পিএসডি ফাইলটি এইচটিএমএল এ কনভার্ট করতে পাঠাবেন।
তখন আপনার জন্য একটি চিন্তার বিষয় হচ্ছে আপনার পিএসডি ফাইলটি আসলেই দ্রুত এবং যথাযথ এইচটিএমএল এর কনভার্ট করার ফাইলটি উপযুক্ত কি না?
PSD থেকে HTML
যদিও আমরা অনেক সময়ই দেখি, পিএসডি থেকে এইচটিএমএল এ ডিজাইনটি কনভার্ট করর তুলনা মূলক দ্বিগুণ সময় বেশি লাগে।
এর কারণ হচ্ছে ত্রুটি যুক্তো পিএসডি ডিজাইন। এবং যারা এ পেশায় নতুন, তারা প্রায়ই এমন কিছু পিএসডি ডিজাইন করে।
যা এইচটিএমএল এ রূপ দিতে অনেকটা বেগ পেতে হয়। তার ফলে নষ্ট হয় অনেক মূল্যবান সময়।
তাই আজ আমরা সময় সাশ্রয়ের পিএসডি থেকে এইচটিএমএল রূপান্তর করার জন্য বেশ কিছু টিপস সংগ্রহ করা হয়েছে।
যা অনুসরণ করলে আমরা খুব সু-শৃঙ্খল পিএসডি ডিজাইন করতে সক্ষম হবেন।
আড়ো পড়ুন: CSS (Cascading Style Sheets) এর গুরু করার ৭ টি ফর্রমূলা
আড়ো পড়ুন: All HTML Tags লিস্ট বাংলা।
লেয়ার (Layer) গুলোকে ইনট্যাক্ট রাখুন:
অনেক ডিজাইনার পিএসডি ফাইলের আকার ছোট রাখতে লেয়ার গুলোকে মার্জ (Merging Layer) করে রাখেন।
এটা হয়তো প্রিন্ট ডিজাইনের জন্য ঠিক আছে। কিন্তু যখন একজন ডেভেলপার আপনার করা পিএসডি ফাইলটিকে এইচটিএমএল এ কনভার্ট করতে যাবেন।
তখন তার প্রতিটি গ্রাফিক্স উপকরণ যেমন: টেক্সট, ইমেজ বা ফন্ট ইত্যাদির প্রয়োজন হবে।
তাই লেয়ার (Layer) গুলোকে মার্জ না করে ইনট্যাক্ট রাখুন অর্থাৎ প্রতিটি লেয়ার কে আলাদা আলাদা করে রাখুন।
এর ফলে ডেভেলপার আপনার ডিজাইনের প্রতিটি এলিমেন্ট সূক্ষ্মভাবে বিশ্লেষণ করতে পারবে।
লেয়ার গুলোকে শৃঙ্খলতার সাঙ্গে সাজিয়ে রাখুন:
পিএসডি ডিজাইন করার ক্ষেত্রে লেয়ার গুলোকে ধারাবাহিক ভাবে সাজিয়ে রাখলে এবং তা বেশি সফলতার দাকে এগিয়ে যায়।
যেমন হেডারের পরে বডি ও বডির পরে ফুটার। হেডারের পরে কখনো যেন ফুটার না আসে সেদিকে খেয়াল রাখতে হবে।
আবার হেডারের মধ্যে ২টি গ্রুপ থাকবে। যেমন লোগো ও মেনুবার। তাই প্রতিটি লেয়ার অত্যান্ত সাজানো গোছানো রাখা দরকার।
মনে রাখুন ডেভেলপার যখন ডিজাইনটি করবে, তখন তার যেন বিশেষ কোন অংশ খুঁজে পেতে বেশী সময় না লাগে।
লেয়ার গুলোকে শৃঙ্খলতার সাঙ্গে সাজিয়ে রাখলে তা অনেক কম সময়ের মধ্যে এইটিএমএল এ কনভার্ট করা যায়।
অবজেক্টের সাইজকে যথাযথ রাখুন:
পিএসডি ডিজাইন করার সময়ে আপনার ওয়েবসাইটে অনেক ধরনের অবজেক্ট ব্যবহারের প্রয়োজন হবে। যেমন: বাটন, বক্স, শেপ ইত্যাদি।
একের অধিক সমজাতীয় অবজেক্ট তৈরি করলে খেয়াল রাখতে হবে উভয়ে সাইজ একই সঠিক মাপে হয়েছে কিনা।
কখনো কখনো দেখা যায়, একটি থেকে আর একটির Margin বা Padding কম বেশি হয়ে থাকে।
এরকম হলে চলবে না। প্রফেশনাল একটি ডিজাইন উপহার দেওয়ার জন্য এটি একটি অতী গুরুত্বপূর্ণ বিষয়।
এলিমেন্ট সাজানোর জন্য Grid ব্যবহার করুন:
ফটোশপের Grid লাইন দেওয়া থাকে মূলত প্রতিটি এলিমেন্ট পরস্পর সমান সারিতে অবস্থান করছে কিনা এটা মনোযোগ সহকারে দেখা।
অনেক অনেক ক্ষেত্রে অবজেক্টের সাইজ পরিমাপ করার জন্য ব্যবহার করা হয়ে থাকে।
আপনাদের ডিজাইন করা প্রতিটি এলিমেন্ট বা অবজেক্টকে যথাযথ ভাবে সাজাতে Grid লাইনের সঠিক ব্যবহার করতে হবে।
এটি ব্যবহারের ফলে আপনি দেখতে পারবেন, কোন অবজক্ট নির্ধারিত এরিয়ার বাইরে চলে গেছে কিনা।
হোভার ইফেক্ট তৈরি করুন:
যখন কোনো পিএসডি ডিজাইন প্রফেশনালি করতে যাবেন, এটা চিন্তার করুন যে এইচটিএমএল এর ডিজাইনটির ফাংশনালিটি কেমন হবে।
ফটোশপেই প্রয়োজনীয় অবজেক্ট গুলো হোভার ইফেক্ট দিতে চেষ্টা করুন।
এর ফলে ডেভেলপার বুঝতে পারবে একটি অবজেক্ট Enable এবং Disable উভয় অবস্থাতেই কেমন দেখাবে।
Blending Modes ব্যবহার করবেন না:
ফটোশপে করা Blending Modes গুলো কখনো কখনো CSS এর বাস্তব রূপ দিতে অনেকটা কস্ট পেতে হয়।
অনেক সময় সম্ভবই হয়ে ওঠে না। কারণ, CSS এর বেশি কিছু সীমাবদ্ধতা রয়েছে।
তাই কোন অবজেক্টকে Blending Modes দেবেন না যেটা আপনি চান এইটিএমএল এও হোক। অবজেক্টকে নরমাল রাখার সর্বোচ্চ চেষ্টা করবেন।
কনটেন্ট এর Flexibility নিয়ে ভাবুন:
ফটোশপে কিছু কিছু টেক্সট নির্দিষ্ট এরিয়ার মধ্য খুব ভালো ভাবে ফিক্সড হয়ে থাকে।
এবং ওই একই টেক্সট এইচটিএমএল এ ভালো ভাবে ফিক্সড হয় না, বরং এরিয়ার বাইরে চলে যায়, অর্থাৎ Overflow হয়ে যায়।
সুতরাং আপনি আপনার টেক্স বক্সে যত গুলো টেক্সট রাখবেন, তা এইচটিএমএল কনভার্ট করার সময়েও রাখা যাবে কিনা, সেটা চিন্তা করতে হবে।
আর সবশেষে, পুরো ডিজাইনটিকে বেশ কয়েক বার রিভিউ করতে হবে। খুঁজে বের করুন কোথাও কোনো ত্রুটি আছে কিনা।
থাকলে সে গুলো সমাধান করবেন। এই বিষয় গুলো মানে রেখে আপনার পিএসডি ডিজাইনকে আরো সমৃদ্ধ করুন। ধন্যবাদ।