আসসালামু আলাইকুম।ঈদ মোবারাক। স্বাগতম আপনাদের সবাইকে আমার টিউটোরিয়ালে। সবাই নিশ্চয় অনেক ভাল আছেন! আজকে আমি  ওয়েব টেমপ্লেট তৈরি করা নিয়ে লিখব। কিছুদিন ধরে ওয়েব ডিজাইনিং নিয়ে নেটে ঘাটাঘাটি করে যা শিখলাম তা নিয়ে লিখব ভাবছিলাম! সেই ভাবনা থেকে লেখা শুরু করে দিলাম! আমরা যারা বিভিন্ন ব্লগ এ আসা যাওয়া করি সাধারনত কম বেশি সবাই ওয়েব ডিজাইনিং, ওয়েব ডেভেলপিং শেখার জন্য অনেক আগ্রহ দেখায়। কিন্তু এসব আসলে কী, কিভাবে করে বা কিভাবে শেখা যায় তা আমাদের অজানা অন্তত আমার আজানা ছিল ওয়েব ডিজাইনিংটা কী সেটা! ভাবতাম কোডিং করেই তো সাইট বানায়, ওখানে আবার ফটোশপে  ডিজাইন করা কেন? সেজন্য এটা কি, কিভাবে করে তা জানতে লেগে গেলাম। যা জানতে পারলাম তাই আজকে শেয়ার করবো। সবকিছু গুছিয়ে লিখে ফেলা সম্ভব হবেনা হয়তো, তাই যতটুকু পারি কিভাবে  ওয়েব টেমপ্লেট ডিজাইন করে  সে পদ্ধতিটা লিখব। আরও বেশি বেশি জানার জন্য গুগলে সার্চিং, সার্ফিং করে জেনে নিবেন আশা করি কেননা গুগল সবচেয়ে বড় টিচার সবার জন্য, ইংরেজিরে সার্চ করলেই সব বের হয়ে আসে তবে গুগল থেকে ভাল মানের টিউটোরিয়াল  খোঁজে বের করতেও জানতে হয়! কিন্তু বাংলায় সার্চ করলে অনেক কম ফলাফল পাওয়া যায়, তাও সবটা যে অনেক ভাল মানের তা নয়,   ইংলিশ বোঝারও একটা ব্যাপার আছে! আমাদের মাতৃভাষা যেহেতু ইংলিশ না তাই আমাদের ইংরেজি পড়তে খুব একটা ভাল লাগেনা! তারপরও পড়ি বাধ্য হয়ে তা না হলে কিভাবে শিখব? তবে বাংলা পড়ে যতটা সহজে শিখতে পারি ইংরেজি পড়ে ততটা সহজে শেখা যায়না! আর অনেক বিষয় বুঝিনা বলে এড়িয়ে যায়। তবে সবাই যে এড়িয়ে যায় তা না।

মূল কথায় আসি...

আমার আজকের লেখার শিরোনাম ”ফটোশপে সম্পূর্ন ওয়েবসাইট ডিজাইন বা ওয়েব টেমপ্লেট তৈরি করে  সে পিএসডি থেকে এইচটিএমএল এ রূপান্তরের টিউটোরিয়াল!”

যেহেতু ওয়েব template ডিজাইন করবো সুতরাং এটা করতে যা জানা প্রয়োজন হবে তা হল-

১) ফটোশপ

২) html

৩) CSS

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

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

তো আজকে শুরু করছি প্রথম পর্ব। যার শিরোনাম-

পর্ব-১: ফটোশপে সম্পূর্ন ওয়েবসাইট ডিজাইন বা ওয়েব টেমপ্লেট তৈরি।

কাজ শেষে আমরা যা তৈরি করবো অর্থাৎ সর্বশেষে আজকের ফলাফল যা হবেঃ

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

২. প্রথমে ফটোশপে আইডিয়া করে নিলাম সাইটটি।

আমি ফটোশপে আইডিয়া করে নিলাম কেমন ডিজাইন করেত চাই তা। কি কি থাকবে তা দিলাম

যেমন- একটা হেডার, মেনুবার,ব্যানার,কলাম,কনটেন্ট, সাইডবার ফুটার আরো যা যা লাগে তা এঁকে নিলাম!

কাজটি করার ক্ষেত্রে আমি ফটোশপ সিএস-৬ এক্সটেন্ডেড ব্যবহার করেছি।

ধাপ-১: প্রথমে ফটোশপ ওপেন করি। ১৬৮০px*১০৫০px একটা ডকুমেন্ট নিই।

নিচের মত করে-

ব্যাকগ্রাউন্ডে একটি ইমেজ দেয়ার জন্য নিচের ইমেজটি ডকুমেন্টে ওপেন করি।।

ইমেজটি transform tool এর সাহায্যে ব্যাকগ্রাউন্ডের সমান সাইজ করে ব্যাকগ্রাউন্ডের সাথে মিলিয়ে এন্টার বাটনে ক্লিক করি। transform tool সেট করা না থাকলে layer টি সিলেক্ট করে কিবোর্ডের Ctrl+T একসাথে চেপে transform করে ইমেজটির সাইজ  ডকুমেন্টের  সমান করা যাবে।

layer প্যালেট এ ক্লিক করে একটি নতুন লেয়ার (layer) অর্থাৎ নতুন স্তর নিব।

আর layer প্যালেট সেট করা না থাকলে মেনুবার থেকে Window>Layers এভাবে সেট করে নিতে হবে।

layer টি নেয়ার পর তাতে paint bucket tool এর সাহায্যে #cc৯৯৯৯৯ কালার দিই।

এবং Fill 72% করে দিই। নিচের ছবির মত করে-

এখন ইমেজ আর কালারের সমন্বয়ে  যা হল  তা মূল ব্যাকগ্রাউন্ড ।। ছবিটি দেখতে হবে নিচের মত-

এবার ডকুমেন্টের কেন্দ্রে ৯৬০px width রেখে এর ২ পাশে ২টি guide স্থাপন করি যা সাইটের সকল উপাদান ধারণ করবে।

(উপরের চিত্রের মত করে )

আমি ক্যালকুলেশন করে সেগুলো বের করেছি যা 360px এবং 1320px।

guide স্থাপন করার নিয়মঃ মেনুবারের View>New Guides.. ।

এভাবে new guide এ vertical এ একবার ৩৬০px   করে ওকে প্রেস করে আবার new guide এ vertical  এ 1320px দিয়ে  ওকে প্রেস করতে হবে।

এখন টুলস প্যালেটের সবার উপরের ২ নাম্বারে rectangular marquee tool সিলেক্ট করে এর সাহায্যে একটি আয়ত আঁকি।

অথবা উপরে  fixed size এ height, width নিচের মত করে দিয়েও সহজে আয়ত আঁকা যায়। একটি new layer নিয়ে তাতে সাদা কালার কোড #ffffff দিয়ে ফিল করি। আবারও গাইড সেট করবো। সাদা  ব্যাকগ্রাউন্ড এর উভয় পাশে ৩০পিএক্স । তাহলে guide ২টি সেট করেতে হবে 390px এবং 1290px । নিচের ছবির মত-

new layer নিয়ে rectangular marquee tool সিলেক্ট করে উপরে বাম পাশে কোণায় ৩০০px*৫০px এ একটা

আয়ত আঁকি। সাদা কালার দিয়ে ফিল করি।  লোগোটা বাম পাশে রাখব এর সাইজ হবে ৩০০px*৫০px এর মধ্যে তাই এই সাইজটা নেয়া।

লোগোতে কোম্পানির নাম আর স্লোগান থাকবে। প্রথমে  কোম্পানির নাম লিখলাম কালার কোড #333333 এবং #cc৯৯৯৯৯, font: Hobo Std, weight: bold  সিলেক্ট করে দিলাম। layer প্যালেটে ঐ layerটা সিলেক্ট করে  ডাবল ক্লিক করে নিচের মত ব্লেন্ড সেটিং করে দিই।

এর নিচে #cccccc কালারে, arial ফন্টে  কোম্পানির স্লোগান লিখলাম । এবার টেক্সট ২টিকে গ্রুপ করে নিলাম logo  নামে । group করলাম যেভাবে-

ডান পাশে সামাজিক যোগাযোগ সাইটের আইকন গুলো বসাবো একই সাইজ করে। তার জন্য fixed sized ব্যবহার করবো । ৩২px*৩২px height এবং width সিলেক্ট করে দেব প্রত্যেকটা ইমেজ এর জন্য।

মেনুবার তৈরি করবো এবারঃ

প্রথমে সবগুলো মেনু লিখে প্রত্যেকের মাঝে যাতে ২০px করে ফাঁকা রাখব। এজন্য আমি guide   ব্যবহার করেছি। যাতে এক মেনু থেকে অন্য মেনু সমান দূরত্বে থাকে।

হোম মেনুতে টেক্সট এর বদলে আইকনও ব্যবহার করা যায়। আমি নিচের আইকনটা ব্যবহার করলাম।

new layer নিয়ে, rectangular marquee tool এর সাহায্যে Home মেনু এর উপর একটি আয়ত আঁকি এবং তা সাদা রঙ (কালার কোড #ffffff) দিয়ে ফিল করি। ঐ layer এ মাউস রেখে ডাবল ক্লিক করে নিচের ছবির মত-

gradient overlay ইফেক্ট দিব। Gradient ইফেক্ট দেয়ার জন্য উপরের ছবির Gradient কালারের উপর ক্লিক করে Gradient Editor এ বাম পাশের কালার #cc৯৯৯৯৯ দিয়ে opacity 100% এবং ডান পাশের opacity 0% করে দিলাম।নিচের ছবির মত-

এবার layer rename করে nav1 নাম দিলাম।

এবার about  menu তে visited link হিসেবে এর কালার পরিবর্তন করে দিব। অর্থাৎ আমরা যখন কোন সাইটের যাই তখন visited link গুলার কালার চেঞ্জ হতে দেখা যায় এর ফলে আমাদের সুবিধা হয় কোন লিংকটি আমরা ভিজিট করলাম কোনটা করলাম না তা বুঝতে। তাই visited link হিসেবে about এর কালার চেঞ্জ করে দিব। about টেক্সট layer এ ডাবল ক্লিক করে gradient এ নিচের মত করে সেটিং দিতে হবে-

কালার কোড হবে #996699।

মেনুবার তৈরির কাজ শেষ।

ব্যানার যুক্তকরণঃ

একটা ছবি ওপেন করলাম(ব্যাকগ্রাউন্ডে ব্যবহৃত ছবিটাই) এবং height, width ফিক্সড করে দিলাম ৯০০px*৩০০px ।

ছবিটি মেনুবারের পরে একটু ফাঁক রেখে (5px) বসালাম। ব্যানার এডিং শেষ, এর উপর স্লাইডার টেক্সট আছে একটি, ওটা যুক্ত করতে হবে এখন। rectangular marquee tool সিলেক্ট করে ব্যানার এর উপরে একপাশে একটি আয়ত আঁকি।

একটি  new layer নিয়ে তা #000000 অর্থাৎ কালো রঙে ফিল করি এবং opacity 65% করে দিই।

এর উপর এবার একটা শিরোনাম দিই যার font: Arial এবং কালার কোড #ffcccc । ছবিটার সম্পর্কে কিছু বর্ননা থাকবে শিরোনাম এর নিচে তা টেক্সট আকারে লিখব। কালার কোড হবে #cccccc  font: Arial, weight: regular। এখানে ব্যানারের কাজ শেষ।

কন্টেন্ট তৈরিঃ

ব্যানারের  ৩০px নিচে কন্টেন্টে যা লিখব সে প্যারাগ্রাফের হেডলাইন দেব  এখন । ফন্টঃ Arial,  weight: bold, কালার কোড হবে #996666।

এর নিচে line tool এর সাহায্যে একটি রেখা আঁকব যার সেটিং নিচের ছবির মত হবে।

কালার হবে #CCCCCC।

লাইনটি দেখতে হবে এমন-

এর নিচে একটা আয়ত আঁকব , new layer নিয়ে তা  #FFFFFF কালার দিয়ে ফিল করা হবে। এই অংশে প্রথমে প্যারাগ্রাফের প্রথম অংশ থাকবে ফন্ট Arial, কালার কোড #৩৩৩৩৩৩, সাইজ মানানসই। এরপর ২টি ইমেজ যুক্ত করবো ২টি বাক্সের ভিতরে। এজন্য ২টি বাক্স আঁকতে হবে।

বাক্স আঁকার জন্য rectangle tool সিলেক্ট করে 300px*200px width, height নির্ধারন করে( নিচের ছবির মত অনান্য উপাদানও নির্ধারন করে)

দিয়ে একটি আয়ত আঁকি যার বর্ডার হবে #cccccc কালারের(stroke color) ।

লেয়ায়রটিকে duplicate করি।

লেয়ার duplicateকরার নিয়ম : layer duplicate করার জন্য layerটি সিলেক্ট করে রাইট বাটন ক্লিক করতে হবে, একটি মেনু আসবে এবং অনেকগুলো অপশন থাকবে তার মধ্যে duplicate layer সিলেক্ট করতে হবে। এবার ছবি নিয়ে সেটিকে 280px*180px transform  এ ফিক্সড সাইজ (fixed size) নির্ধারন করে দিয়ে enter চাপি। ছবি বক্সের মাঝামাঝিতে স্থাপন করি।

শেষ অংশে  প্যারাগ্রাফের অংশ থাকবে আবারও যার সেটিং  উপরের পারাগ্রাপের মতই হবে।

এবার সাইডবার ঃ

সাইডবারের উপরে হেডলাইন দিব যার কালার কোড #996666 । এর নিচে প্রত্যেকটা টপিকসের জন্য আলাদা আলাদা আইকন নিব। আইকনগুলো আমি গুগল থেকে সার্চ করে নিয়েছি। তবে এগুলো সোর্স ফাইলে দেয়া আছে। সবার উপরের আইকনের পাশের টেক্সট এর কালার কোড হবে #000000।

মাঝের আইকনটাই নীল রং দিলে কেমন হয়? আইকনটা নীল সুতরাং কালার কোড ও তার সাথে রিলেটেড দিই। কালার কোড দিলাম #000066। নিচের আইকনের পাশের টেক্সট এর কালার কোড #000000 দিলাম।

এবার কনটেন্ট সাইডবার এর নিচে একটা রেখা টানব line tool এর সাহায্যে যার কালার কোড হবে #cccccc । কোন stroke থাকবেনা।

(কনটেন্টের উপরের লাইনের মত করে সেটিং হবে।)

ফুটার তৈরি :

রেখার নিচে মাঝখান বরাবরটাই ফুটার টেক্সট লিখব কালার কোড #333333।

আমার ওয়েবসাইট ডিজাইন করা শেষ!

এভাবে সম্পুর্ণ ওয়েব টেমপ্লেট তৈরি করা যায়।

যে ছবিগুলো  ব্যবহার করেছি অর্থাৎ  template এর source ফাইল এখানে এবং টেম্পলেটের psd fileএর ডাউনলোড লিঙ্ক এখানে

পরবর্তী পর্বে দেখানো হবে কিভাবে psd ফাইল থেকে HTML এ রুপান্তর করা যায়।

ধন্যবাদ সবাইকে এতক্ষন কষ্ট করে সাথে থেকে এত বড় লেখা পড়ার জন্য। আল্লাহ হাফেজ।

পোস্টটি লিখেছেন টিউটোহোস্ট এর সাপোর্ট বিভাগে কর্তব্যরত নিলুফার ইয়াসমিন। পুর্বে প্রকাশিত এখানে।