ফটোশপে তৈরী ওয়েব ২.০ লেআউট, নান্দনিক ওয়েবসাইট তৈরীর জন্য খুবই জনপ্রিয় একটি উপায়

1
802

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

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

ফাইনাল রেজাল্ট

আমরা যে ওয়েব ২.০ লেআউটটি তৈরী করবো সেটির ফাইনাল আউটলুকটি দেখে নিতে পারি।

ধাপ ১

প্রথমে ফটোশপে 1200px x 1050px সাইজের নতুন একটি ডকুমেন্ট তৈরী করুন।

ধাপ ২

এখন আমরা ব্যাকগ্রাউন্ড তৈরী করবো। প্রথমেই Gradient Tool টি ‍সিলেক্ট করুন। এবং নিশ্চিত হয়ে নিন এটি Linear Gradient এ সেট করা হয়েছ। এবার আপনি foreground কালারের জন্য#a1e8fe এবং ব্যাকগ্রাউন্ড কালারের জন্য #59d3fa ব্যবহার করুন। এবার দেখুন নিচের চিত্রের মত গ্রাডিয়েন্ট তৈরী হয়েছে কিনা।

ধাপ ৩: গ্রিডসিস্টেম কে ডকুমেন্টের মাঝখানে রাখা

নতুন একটি লেয়ারে 960px চওড়ার একটি গ্রিড তৈরী করুন যেটিতে ১২টি বার থাকবে এবং প্রত্যেকটি বার 60px চওড়াবিশিষ্ট হবে। একটি বার থেকে আরেকটি বারের দূরত্ব হবে 20px. এবার গ্রিডটিকে ডকুমেন্টের মাঝখানে রাখুন। গ্রিডটি আপনার গাইড হিসাবে কাজ করবে। আরেকটি বিষয় আপনাকে খেয়াল রাখতে হবে যে আপনার ডিজাইনের বিষয়বস্তু যেন গ্রিডের চেয়ে প্রশস্ত না হয়। ৯৬০ গ্রিড সিস্টেম ওয়েব ডেভেলপমেন্টের প্রসারকে বিস্তৃত করতে দারুন একটি প্রচেষ্টা। এ গ্রিড সিস্টেম 960px চওড়া ডকুমেন্টবিশিষ্ট সাধারণভাবে প্রচলিত ডাইমেনশন সরবরাহের মাধ্যমে সুন্দরভাবে কাজটি করে যাচ্ছে। আপনি আরো বিস্তারিত জানতে 960 Grid System সাইটে ভিজিট করতে পারেন অথবা গ্রিড সিস্টেম ডাউনলোড করেও নিতে পারেন।

ধাপ ৪: লোগো এবং নেভিগেশন আইটেমের জন্য পাত্র তৈরী করা

আমরা এখন লোগো এবং নেভিগেশন আইটেমের জন্য পাত্র তৈরী করতে যাচ্ছি। পাত্রটি তৈরী করতে Rounded Rectangle Tool টি সিলেক্ট করুন এতে Shape Layer সিলেক্টেড অবস্থায় থাকবে। রেডিয়াস সেটি করুন 10px.

ধাপ ৫:

300px চওড়াবিশিষ্ট একটি রাউন্ডেড রেক্টেঙ্গল তৈরী করুন। এবার 620px চওড়াবিশিষ্ট দ্বিতীয় আরেকটি রেক্টেঙ্গল তৈরী করুন। এ দুটি রেক্টেঙ্গল নিম্নে উল্লেখিত চিত্রের মত গ্রিডের উপর অবস্থিত হবে।

ধাপ ৬:

প্রত্যেকটি রাউন্ডেড রেক্টেঙ্গেলে নিম্ন উল্লেখিত Layer Style সেটিংস প্রয়োগ করুন।

এবার আপনার রাউন্ডেড রেক্টেঙ্গল টুলটি দেখতে নিচের চিত্রের মত হবে।

ধাপ ৭:লোগো এবং নেভিগেশনে টেক্সট লেখা:

নেভিগেশন আইটেমে টেক্সট লিখতে Type Tool টি সিলেক্ট করুন। কালার ব্যবহার করুন #5f5f5f; এক্ষেত্রে আমি ব্যবহার করেছি Rockwell ফন্ট। নেভিগেশন আইটেমটি দ্বিতীয় রেক্টেঙ্গেল এবং প্রথমরেক্টেঙ্গেলের কোম্পানীর লোগোর সাথে যুক্ত করুন (বর্তমান লোগোতে আমরা একটি কোম্পানীর নাম উদাহরণ হিসাবে ব্যবহার করেছি)।

ধাপ ৮: নেভিগেশন আইটেমের জন্য Separators তৈরী করা

নতুন একটি লেয়ার নিয়ে প্রত্যেকটি নেভিগেশনের মাঝখানে আমরা একটি separator যুক্ত করব। এখানে আমি একটি লাইন যুক্ত করেছি #dedede কালার ব্যবহার করে।

ধাপ ৯:

সেপারেটরটি ডুপ্লিকেট কপি তৈরী করুন। এটি করতে আপনাকে ফলো করতে হবে Layer> Layer Style> Blending Options > Color Overlay উল্লেখিত নির্দেশনা। এবার ডুপ্লিকেটকপিটির কালার পরিবর্তন করতে #ffffff ব্যবহার করুন। ডুপ্লেকেট কপিটি ডানদিকে 1px সরিয়ে দিন। এর ফলে একটি subtle engraved effect তৈরী হবে।

ধাপ ১০: হেডার তৈরী করা

এবার চলুন লোগো এবং নেভিগেশনের নিচে হেডার তৈরী করা যাক। Type Tool ব্যবহার করে কোম্পানীর ট্যাগলাইন এবং তার নিচে একটি ছোট বর্ণনা লিখুন। এবার আমরা একটি হাল্কা ড্রপ শ্যাডো দেব ডিজাইনটিতে ভিন্নতা আনার জন্য।

ধাপ ১১:

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

ধাপ ১২: রাউন্ডেড বাটন তৈরীকরণ:

এবার আমরা 28px রেডিয়াস বিশিষ্ট Rounded Rectangle টুল ব্যবহার করে একটি বাটন তৈরী করব যেখানে লেখা থাকবে “Learn More”। এ বাটনটি সত্যিই খুব উপকারী। কারণ যদি কোন ভিজিটর আপনার কোম্পানী সম্পর্কে জানতে চায় তাহলে তারা এই বাটনে ক্লিক করার মাধ্যমে জানতে পারবে।

ধাপ ১৩: কল-টু-আ্যকশন বক্স তৈরীকরণ

এবার আরও একবার রাউন্ডেড রেক্টেঙ্গল টুলটি ব্যবহার করে 16px রেডিয়াস ব্যবহার করে 300px এর একটি রেক্টেঙ্গল তৈরী করতে হবে। এবার Blending Options এ যান এবং ধাপ ৬ এর ‍সেটিংস অনুসারে একটি ড্রপ শ্যাডো ইফেক্ট প্রদান করুন।

ধাপ ১৪:

এবার আমরা এইমাত্র যে রেক্টেঙ্গলটি তৈরী করলাম সেটি ‍সিলেক্ট করব। এজন্য Ctrl বাটনটি চেপে ধরে রেখে ঐ বাটনটির লেয়ারের উপর থেকে বাটনে ক্লিক করুন। তাহলে বাটনটি সিলেক্ট হয়ে যাব। এবার রেক্টেঙ্গল লেয়ারের উপরে আরও একটি নতুন লেয়ার তৈরী করব।

ধাপ ১৫:

এবার এ গ্রাডিয়েন্টটিকে 1px উপরে তুলুন। এটা করলে যদিও ছবিটি দেখতে আগের চেয়ে খুব বেশি পার্থক্য মনে হবে না। আপনি নিচের চিত্রটি লক্ষ্য করুন, তখন এটি দেখতে ঠিক এরকম লাগবে।

ধাপ ১৬:

আমাদের তৈরীকৃত বক্সটি কল-টু-আ্যকশন বাটন হিসাবে কাজ করবে। যদি আপনি চান ব্যবহারকারীগণ এক নিমিষেই আপনার সাইটের জানতে পারুক সে ক্ষেত্রে এ বাটনটি খুবই উপকারী হবে। তো চলুন এবার আমাদের বাটনটিতে একটি হেডিং, কিছু বর্ণনা এবং একটি আইকন যুক্ত করা যাক। আইকন যত ছোটই হোকনা কেন, খেয়াল রাখুন সেটি যেন আপনার ডিজাইনকে আরো আকর্ষণীয় করে তোলে। তাছাড়া আইকনটি এমন হতে হবে যেটি দেখেই যেন ভিজিটরগণ আপনার সাইট সম্পর্কে ধারণা পেয়ে যায়।

আমি এ টিউটোরিয়ালটিতে যে সুন্দর আইকনটি ব্যবহার করেছি সেটি DeviantArt এর Wilson Ink থেকে নেওয়া। আপনি আইকনটি দেখে নিতে পারেন এবং সেটি ডাউনলোড করতে পারেন। এ আইকন সেটটিGreen and Blue Icon Set হিসাবে পরিচিত। এ আইকনগুলি শুধুমাত্র ব্যক্তিগত ব্যবহারের জন্য উন্মুক্ত।

ধাপ ১৭:

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

ধাপ ১৮:

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

ধাপ ১৯:

এবার আমরা footer তৈরী করবো এবং যেখানে আমরা ওয়েবসাইটের কপিরাইট এবং অন্যান্য যোগাযোগের তথ্যাদি রাখতে পারব।

ধাপ ২০:

এবার ফটোশপে 25px x 25px সাইজের নতুন একটি ডকুমেন্ট তৈরী করুন। এবার পুরো ডকুমেন্টটি কালো (#000000) রংয়ের ব্যাকগ্রাউন্ড দিয়ে পূর্ণ করুন।

ধাপ ২১:

লেয়ারের সবচেয়ে উপরে কালো ব্যাকগ্রাউন্ডের নতুন একটি লেয়ার তৈরী করুন। এবার Zoom Tool টি ব্যবহার করে ডকুমেন্টটি জুম করে এটির সর্ব্বোচ্য সাইজে নিয়ে যান যেন এটি পরিষ্কারভাবে দেখা যায়।এবার Pencil Tool টির সাইজ 1px সেট করুন এবং ফোরগ্রাউন্ড কালার হিসাবে সাদা (#FFFFFF) রং ব্যবহার করুন।নিচের চিত্রের মত আপনার ডকুমেন্টটিতে লাইন টানুন। এবার এটি একটু নোট করেরাখুন কত পিক্সেলের লাইন আপনার টানা প্রয়োজন এবং সেটি ডকুমেন্টের কোন কোন অংশে।

এবার আপনি লাইনগুলিকে নিচের চিত্রের মত সংযুক্ত করে দিন।

ফাঁকা জায়গাগুলি সাদা রং দিয়ে পূর্ণ করে দিন যেন নিচের চিত্রের মত ফলাফল পাওয়া যায়

ধাপ ২২:

কালো রংয়ের ব্যাকগ্রাউন্ড দিয়ে লেয়ারটি হাইড করুন এবং এরপর Edit>Define Pattern অপশনে যান। কালো ব্যাকগ্রাউন্ডের লেয়ার তৈরী করা হয়েছিল সাদা রংকে আরো ফুটিয়ে তোলার জন্য।আপনার ব্রাশটির নাম দিন “diagonals” এবং ok বাটনে প্রেস করুন।

ধাপ ২৩:

এবার আমরা এতক্ষন ধরে তৈরীকৃত ডিজাইন স্ট্রাকচারটি দেখব। গ্রাডিয়েন্ট ব্যাকগ্রাউন্ডের উপরে একটি নতুন লেয়ার তৈরী করব। এজন্য নিম্নলিখিত নির্দেশনা অনুযায়ী কাজ করব। Edit>Fill and on the contents dropdown, use pattern. এরপর Custom Pattern এ ক্লিক করুন এবং আমরা “diagonals” নামে এইমাত্র যে প্যাটার্নটি তৈরী করেছি সেটিকে খুজে বের করুন এবং ok করুন।সবকিছু ঠিকভাবে করলে আপনি নিচের চিত্রের মত একটি চিত্র পাবেন।

ধাপ ২৪:

লেয়ারের ব্লেন্ড মোড সেট করুন Overlay এবং Opacity দিন 4%. তাহলে আপনি নিচের চিত্রের মত একটি ফলাফল পাবেন।

ধাপ ২৫:

একদম নিচ থেকে শুরু করে শীর্ষ পর্যন্ত একটি সাধারন feathered Eraser ব্যবহার করে diagonal lines এর প্রায় ৬0% মুছে ফেলুন যেন এটি দেখতে নিচের চিত্রের মতো হয়।

ধাপ ২৬:

ব্যাস আমরা পেয়ে গেলাম খুবই সুন্দর, নজরকাড়া একটি ওয়েব ২.০ লেআউট। আশা করি টিউটোরিয়ালটি বুঝতে পেরেছেন। যদি কেউ এখনও কোন সমস্যাবোধ করে থাকেন তাহলে আরো একবার বা প্রয়োজনে একাধিকবার টিউটোরিয়ালটি প্রাকটিস করুন। তাহলে আশা করা যায় আপনি সমস্যাগুলি কাটিয়ে উঠবেন।

এবার আপনি নিজে একটি ওয়েব ২.0 লেআউট তৈরী করার চেষ্টা করুন। আমার বিশ্বাস আপনি পারবেন।

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

1 মন্তব্য

  1. আসাম শালা । ভাইয়া চরম লাগল টিউনটা । স্ক্রিনশট দিয়ে অনেক সুন্দরভাবে বুঝিয়েছেন । কিন্তু ভাইয়া প্র্যাকটিস ফাইলগুলা দিলে আরো ভালো হত ।

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

thirteen − 9 =