পিএসডি টু এইচটিএমএল পূর্ণাঙ্গ কোর্স – ১ম পর্ব (পিএসডি থেকে ইমেজ আলাদাকরন)

পিএসডি টু এইচটিএমএল পূর্ণাঙ্গ কোর্স – ১ম পর্ব (পিএসডি থেকে ইমেজ আলাদাকরন)

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

পিএসডি ডাউনলোড লিংক

এবার কাজে নেমে পড়া যাক। আর কাজ বলতে প্রথমেই যা করতে হবে তা হচ্ছে পিএসডি থেকে প্রয়োজনীয় ইমেজগুলোকে কেটে আলাদা করতে হবে। এক্ষেত্রে ২ টি প্রধান রুল মেনে কাজ করতে হবে –

  1. যতোটা সম্ভব কাজ ইমেজ ব্যাবহার না করে এইচটিএমএল, সিএসএস দিয়ে করতে হবে। অর্থাৎ যেই কাজটা সিএসএস দিয়ে করা সম্ভব সেটা কক্ষনোই ইমেজ ব্যাবহার করে করবেন না।
  2. যেই ইমেজ গুলোতে ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড আছে সেইগুলা .png তে আর যেইগুলোতে ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড নেই সেইগুলো .jpg তে সেভ করবেন। আর অবশ্যই ফটোশপে save না ব্যাবহার করে save for web ব্যাবহার করুন।

এখন আমাদের পুরো টেমপ্লেট একবার দেখে নেই –

পিএসডি টু এইচটিএমএল টেমপ্লেট

পিএসডি টু এইচটিএমএল টেমপ্লেট

এখানে যেই যেই জায়গায় ইমেজ ব্যাবহার করা হয়েছে আমরা সেইগুলা নাম্বারিং করে চিহ্নিত করলাম।

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

এবার আসি ২ নং চিহ্নিত জায়গায়। এটা সাইটের লোগো যেটা সিএসএস দিয়েও হুবহু করা যাবে। তবে বর্তমান ট্রেন্ডে লোগো হিসেবে ইমেজই ব্যাবহার করা হয়। তবে ক্লায়েন্টের কাজ করার ক্ষেত্রে এধরনের বিষয়গুলা অবশ্যই জিজ্ঞেস করে নিবেন। কিন্তু আমরা এখানে বর্তমান ট্রেন্ড অনুযায়ী ইমেজ হিসেবেই লোগো ব্যাবহার করবো।

৩ নং অবশ্যই একটা স্টিল ইমেজ। এটা নিয়ে পরে ভাবা যাবে, এখন খালি ইমেজটা নিয়ে নেন।

৪ নং দ্বারা যেই চারটি আইকন চিহ্নিত করেছি এইধরনের আইকনগুলো সাধারনত ফন্ট এওয়াসাম (Font Awesome) ব্যাবহার করে দেওয়া হয়। তবে যদি সেইম আইকন ফন্ট এওয়াসামে না পাওয়া যায় আবার হুবহু করা বাধ্যতামূলক হয় তবে এইগুলো ইমেজ হিসেবে ব্যাবহার করা যুক্তিযুক্ত। তবে এখন ফন্ট এওয়াসামের মত আরও অনেক সাইট আছে যেখানে এইধরনের কাস্টম আইকন পাওয়া যায় যা ফন্ট এওয়াসামের অনুরুপভাবে ব্যাবহার করা যাবে। আমরা যেহেতু কোন ক্লায়েন্টের জন্য কাজ করছি না, তাই আমরা এই আইকনগুলো ফন্ট এওয়াসামে না পেলেও ফন্ট এওয়াসাম থেকে অন্য অনুরুপ আইকন ব্যাবহার করবো তাই এগুলো কেটে নেওয়ার কোন প্রয়োজন নেই।

আর ৫ নং চিহ্নিত জায়গায় পোর্টফলিও ইমেজগুলো সবগুলাই নিতে হবে।

তো চলুন দেখে নেই কিভাবে পিএসডি থেকে ইমেজ গুলোকে সবথেকে সহজ উপায়ে আলাদা করবেন –

  1. আপনার এইচটিএমএল প্রোজেক্টের জন্য একটা প্রোজেক্ট ডিরেক্টরি তৈরি করে নিন এবং তার মধ্যে images নামে একটা ফোল্ডার করুন যেখানে আমাদের প্রোজেক্টে ব্যাবহারকৃত সমস্ত ইমেজ গুলো থাকবে।
  2. পিএসডি টিকে ফটোশপে ওপেন করুন।
  3. মুভ টুল নিন এবং যেই লেয়ারটি কেটে আলাদা ইমেজ করতে হবে সেই লেয়ার সেলেক্ট করুন।
  4. এবার alt কী চেপে ধরে লেয়ার পেলেট থেকে সেলেক্টকৃত লেয়ারের চোখের আইকনে ক্লিক করুন (এতে ঐ লেয়ার ছাড়া বাকি সব লেয়ার অদৃশ্য হয়ে যাবে, শুধু ঐ লেয়ারটাই দেখা যাবে)।
  5. এই অবস্থায় ফটোশপের Image মেনু থেকে Trim সেলেক্ট করুন (এতে পুরো পিএসডি এর সাইজ এই লেয়ারের সাইজে হয়ে যাবে এবং লেয়ারের বাইরের ফাঁকা অংশগুলো চলে যাবে)।
  6. এবার সেভ করার জন্য File মেনু থেকে Save for web সেলেক্ট করে সেভ ফর ওয়েব ডায়ালগ বক্স নিয়ে আসুন।
  7. ট্রান্সফারেন্ট অংশযুক্ত ইমেজ (যেমনঃ লোগো বা আইকন) এর ক্ষেত্রে  PNG-24 এবং যেগুলোতে ট্রান্সফারেন্ট অংশ নেই (যেমনঃ ব্যাকগ্রাউন্ড, পোর্টফলিও ইমেজ) JPG ফরমেটে সেভ করুন এবং পাশাপাশি ব্যাবহারের জায়গা অনুযায়ী কুয়ালিটি বাড়িয়ে কমিয়ে অপ্টিমাইজ করুন। যেমন, যদি লেয়ারটি কোন স্লাইডারের বা কল-টু-একশন এর ব্যাকগ্রাউন্ড হয় তবে তার কোয়ালিটি খুব কম করে ফেলা যায় কিন্তু সাইট লোগো এর ক্ষেত্রে কোয়ালিটি কমানো একদমই উচিত না।
  8. Save এ ক্লিক করুন.
  9. ইমেজটিকে প্রজেক্ট ডিরেক্টরি এর ভেতরে তৈরি করা images ফোল্ডারের ভিতরে সেভ করুন।
  10. সবশেষে history পেলেট থেকে সবার উপরে থাকা পিএসডি টির নামের উপর ক্লিক করুন, এতে আপনার পিএসডি একদম প্রথম অবস্থায় ফিরে যাবে।
  11. যেই লেয়ারগুলো আমাদের ইমেজ হিসেবে ব্যাবহার করতে হবে তার সবগুলোর জন্য এইভাবে ৩ নং থেকে ১০ নং পর্যন্ত একই কাজগুলো করতে হবে এবং এইভাবেই প্রত্যেকটি ইমেজকে পিএসডি থেকে আলাদা করতে হবে।

আজ এই পর্যন্ত। পোস্টের লেখা থেকে যাদের বুঝতে অসুবিধা হচ্ছে তাদের জন্য নিচে ভিডিও টিউটোরিয়াল দেওয়া হল।

২য় পর্বঃ টুইটার বুটস্ট্রাপ ও ফন্ট এওয়াসাম এর ব্যাবহার

Leave a Reply

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