ফটোশপ টিউটরিয়াল ৪৭ - ওয়েব টেমপ্লেট ২ [ওয়েব পেজের হেডার তৈরী করা]...।। | BdGeeks
Home Blog ফটোশপ টিউটরিয়াল ৪৭ – ওয়েব টেমপ্লেট ২ [ওয়েব পেজের হেডার তৈরী করা]…।।
প্রথমেই শুভেচ্ছা নিন। ওয়েব টেমপ্লেট ১ নিশ্চয় দেখছেন আপনারা সবাই । আজকে আমরা মেইন টিউটরিয়াল শুরু করবো তাই আপনাদের সেভ করা ডকুমেন্ট অপেন করুন।
প্রথমে আমাদের কয়েকটি guide line অ্যাড করতে হবে। এখন আপনারা অনেকেই হয়তো ভাবতেছেন যে guide line কি ??
যারা জানেন না গাইড কি তাদের বলচ্ছি যে গাইড হচ্ছে ক্যানভাস এর উপরে আঁকা লাইন যেগুলা আপনার ইমেজ এ কখনো সেভ হবে না শুধু আপনি যখন কোন একটি ছবি বানাবেন তখন আপনাকে দেখাবে ইমেজ/ক্যানভাস এর উপরে। আপনি চাইলেই গাইড যেকোনো সময় অন অফ করে পারবেন। গাইড অন অফ করতে ctrl + ; ব্যাবহার করতে পারেন অথবা Menu>view>show>guides এ গিয়ে ও অন অফ করতে পারবেন। গাইড ব্যাবহার করা হয় তখন যখন আপনাকে একটি জিনিস হিসাব করে বানাতে হবে। ধরেন আপনি চাইতেছেন একটি ইমেজ প্লেস করতে আপনার ক্যানভাস এর ঠিক মাঝখানে তখন আপনি গাইড এর সাহায্য নিতে পারেন। এটি Photoshop এর অনেক useful একটি টুল যা অনেক কঠিন কাজকে সহজ করে তোলে। যাই হোক,
আমারা ও আমাদের টেমপ্লেটে গাইড ব্যাবহার করবো। আপনারা যারা যারা লক্ষ্য করেন নি একটা জিনিস তারা আজকে একটু লক্ষ্য করুন। ধরুন আপনি একটি ওয়েবসাইট এর গেলেন অথবা নিচের ওয়েবসাইট গুলায় যান,
১। adobe
২। psd tuts
৩। three uk
যাওয়ার পরে দেখেন যে ওয়েবসাইট এর মেইন যে কনটেন্ট গুলা ওগুলার ডানে এবং বায়ে খালি border থাকে। border গুলা কিন্তু ২ দিক থাইকাই সমান মাপের এক ইঞ্ছি ও কম অথবা বেশি না। এরকম সব সাইট গুলায় থাকে না কিন্তু মেইন পয়েন্ট টা এইটা না। আমার দেখানোর মেইন বিষয় হইতেছে যে ,
নিচের adobe স্ক্রীন সটে লক্ষ্য করে দেখুন,
নীল ২ টা লাইন দেয়া আছে, এই নীল ২ টা লাইন হইতেছে ফটোশপ এ অ্যাড করা গাইড লাইন। অ্যাডোবি ওয়েবসাইট এর লোগো থাইকা শুরু কইরা ডানে বায়ে যা আছে তার কিছুই কিন্তু নীল রঙের লাইন গুলার বাইরে বাইর হয়নাই আবার কোন কিছু ঐ লাইন এর বেশি ভিতরে ও নাই যেমন ধরেন লোগো এর ঠিক নিচে নীল একটা horizontal লাইন। তার ঠিক নিচে ছবিটা ।
এইটারে মূলত padding বলা হয় আপনারা যারা ওয়েব ডেভেলপার তাদের জানার কথা এইটা কি জিনিস।
আশা করি আমি Chinese ভাসায় কথা বলতেছি না এবং যা এতক্ষন বললাম তার একটু হইলেও বুঝাইতে পারছি। এখন আমাদের মেইন template এ আশা যাক।
Ctrl+A চাপুন। চাপার পরে দেখতে পারবেন যে আপনার পুরা ডকুমেন্ট সিলেক্ট হইছে।
সিলেকশন টাকে একটু shrink(মানে ছোটো করা) করার লাইগা আমাদের Menu> Select > Transform Selection এ যাইতে হবে তারপর নিচের ছবি অনুযায়ী আপনার সিলেকশন এর width কমিয়ে নিন।
এখন সিলেকসন এ গাইড লাইন অ্যাড করুন। Ctrl + R অথবা Menu>views>rulers ব্যাবহার করে রুলার একটিভেট করে নিন। রুলারের উপরে ডাবল ক্লিক করে দেখে নিন আপনার রুলার pixel এ আছে কিনা। না থাকলে ruler এর unit টাকে pixel বানিয়ে নিন। তারপর নিচের ছবির মতো করে গাইড লাইন অ্যাড করুন। গাইড লাইন অ্যাড করতে রুলার এর উপরে(আপনার ক্যানভাসের পাশে ঠিক যেইখানে রুলারের উপরে নাম্বারগুলা লেখা আছে ) বাম থেকে মাউস এ ক্লিক করে ধরে ডানে ক্যানভাস এর উপরে ছেড়ে দিন।
এখন যেহেতু আমরা আমাদের border বাইর করলাম এখন আমাদের বাইর করতে হবে padding। আমরা padding বাইর করতে আবারো Menu> Select > Transform Selection এ যাইতে হবে কিন্তু এইবার আমরা কমাবো 40 pixel ( 20 pixel on each side ) । নিচের ছবি দেখে দেখে সেটিংস্‌ দিয়ে দিন।
এখন আবারো স্টেপ ৫ এর মতো ছবিতে গাইড লাইন অ্যাড করুন।
এখন আমরা template এর header এর একটা সিলেকশন তৈরি করবো তাই ফটাফট 465 pixels height এর একটা সিলেকশন তৈরি করুন নিচের ছবির মতো।
এখন নতুন একটা লেয়ার অপেন করুন তারপর সিলেক্ট করা অংশ টুকুতে একটা গ্রেয় রঙের কালার দিয়ে দিন paint bucket টুল ব্যাবহার করে। লেয়ার এর নাম change করে header দিয়ে দিন।
এখন আমরা header এ gradient অ্যাড করবো তাই লেয়ার এর উপরে ডাবল ক্লিক করুন তারপর নিচের ছবি দেখে দেখে gradient দিন।
এখন দেখুনতো আপনার ছবি নিচের ছবির মতো হইছে কিনা !!!!
এখন আমরা header এ highlight অ্যাড করবো । নতুন লেয়ার অপেন করুন Ctrl+Alt+Shift+N চেপে। লেয়ার এর নাম দিন highlight। তারপর একটা soft brush সিলেক্ট করুন ব্রাশ টুল এ ক্লিক করে brush এর diameter দিন ৬০০ px. তারপর আপনার ফরগ্রাউন্ড কালার change করে #19535a দিন। এখন শুধু একবার আপনার header এর উপরে ক্লিক করুন। নিচের ছবি লক্ষ্য করুন।
১১০ pixel height এর একটা সিলেকশন তৈরি করুন নিচের ছবির মতো,
তারপর delete চাপুন যাতে আপনার header দেখেতে নিচের ছবির মতো দেখায়,
আমাদের highlight টা অনেক বড় দেখাইতেছে তাই আমরা highlight টারে একটু shrink কইরা নেই। ctrl + T চাপুন। তারপর নিচের cursor ক্লিক করে চেপে ধরে উপরের দিকে উঠান। যাতে আপনার highlight টা আগের চেয়ে ছোটো দেখায়।
এখন আমাদের make sure করতে হবে যে আমাদের highlight টা যেন একদম middle এ থাকে । তাই layer, header and highlight ৩ টা লেয়ারই একসাথে সিলেক্ট করুন। তারপর “v” চাপুন। উপরে অপশন প্যানেল এ দেখতে পারবেন Align Horizontal Centers নামে একটা বাটন আছে ঐটায় ক্লিক করুন। ক্লিক করলে দেখবেন যে আপনার highlight টা আপনার ক্যানভাস এর ঠিক মাজখানে চলে আসছে।
আজকেই টিউটরিয়াল এই header পর্যন্তই। আশা করি আপনাদের ভালো লেগেছে এবং এই ওয়েবসাইট template এর আরও টিউটরিয়াল পাইতে চোখ রাখুন ব্লগে এবং টিউটরিয়াল কেমন হইছে অথবা হইতেছে আমাকে অবশ্যই জানাবেন নেক্সট টিউটরিয়াল এর আগে পর্যন্ত ভালো থাকুন। ধন্যবাদ ।
showkaton September 12, 2012, at 1:15 pm	Reply
darun…..tobe onno tuts er motho pura tutorial ta ek page e paile valo hoto….
ইরা আহমেদon September 12, 2012, at 1:43 pm	Reply
ভাইয়া আপনার কমেন্ট এর লাইগা ধন্যবাদ। আর ফয়সাল এগুলা নিয়া ভিডিও টিউটরিয়াল বানাইবো পার্ট পার্ট দেখায়া। তাই আলাদা ভাবে করতে হইতেছে। আর এগুলা অনেক লম্বা তাই পার্ট পার্ট কইরা দিতেছি।
showkaton September 13, 2012, at 10:28 am	Reply
(: ei part ta eimatro ses korlam…dua raiken jno pura tuts ta ses korte pari….
হি হি হি হি হি হি হি হি আপনি পারবেন ভাই শুধু একটু ট্রায় করলেই হয়া যাবে
Shihab Mridhaon February 8, 2013, at 5:35 am	Reply
Like button ta koi like dite mon chay!!!!
ইরা আহমেদon February 23, 2013, at 1:23 pm	Reply
ফয়সাল আহমেদ আমারে লাইক বাটন দেয় নাই নিজের ভিডিও গুলায় ঠিকই লাইক বাটন রাখছে কতো খারাপ দেখছেন
অমানুষ আমিon April 9, 2013, at 8:51 am	Reply
ভাই এত ধৈর্যশীল হইব কিভাবে ??
ইরা আহমেদon May 1, 2013, at 11:02 am	Reply
শিখতে চাইলে তো ধৈর্যশীল হইতেই হইবে ভাই নাইলে কেমনে শিখবেন
mahmud006on June 17, 2013, at 10:18 am	Reply
পিএসডি টেমপ্লেট বানানোর ভিডিও টিউটোরিয়াল করলে ভাল হইত
তারপরও ধইন্না পাতা দিলাম
Husain Ahmmedon March 14, 2014, at 10:17 am	Reply
Asadharon tutorial khub valo lagtece.
জসীম উদ্দীনon March 31, 2014, at 12:22 pm	Reply
ভাই, আপনার টিউটোরিয়ালটা দারুন হইছে। যদি আপনার ওয়েবসাইটে পিএসটি টেমপ্লেট বানানোর টিউটোরিয়াল দিতেন, তাহলে দারুণ উপকৃত হতাম।