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

স্টেপ ৩ -

প্রথমে আমাদের কয়েকটি 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 এর আরও টিউটরিয়াল পাইতে চোখ রাখুন ব্লগে এবং টিউটরিয়াল কেমন হইছে অথবা হইতেছে আমাকে অবশ্যই জানাবেন :) নেক্সট টিউটরিয়াল এর আগে পর্যন্ত ভালো থাকুন। ধন্যবাদ ।

 

 

 অন্যান্য পর্বসমূহ:

প্রথম পর্ব : ফটোশপ টিউটরিয়াল ৪৬ – ওয়েব টেমপ্লেট ১ [ শুরু করুন ওয়েব ডিজাইনিং ]

দ্বিতীয় পর্ব : ফটোশপ টিউটরিয়াল ৪৭ – ওয়েব টেমপ্লেট ২ [ওয়েব পেজের হেডার তৈরী করা]

তৃতীয় পর্ব : ফটোশপ টিউটরিয়াল ৪৮ – ওয়েব টেমপ্লেট ৩ [ওয়েব পেজের হেডার (২) + লোগো ]

চতুর্থ পর্ব : ফটোশপ টিউটরিয়াল ৪৯ – ওয়েব টেমপ্লেট ৪ [ নেভিগেসন ও স্লাইডার তৈরী]

পঞ্চম পর্ব : ফটোশপ টিউটরিয়াল ৫০ – ওয়েব টেমপ্লেট ৫ -[ স্লাইডার ২]

ষষ্ঠ পর্ব : ফটোশপ টিউটরিয়াল ৫১ – ওয়েব টেমপ্লেট ৬ [কন্টেন্ট ডিজাইন] 

সপ্তম পর্ব : ফটোশপ টিউটরিয়াল ৫২ – ওয়েব টেমপ্লেট ৭ [ফুটার ডিজাইন এবং সমাপ্তি]

ট্যাগসমূহ:

লেখক: ইরা আহমেদ

উনারে অনেক ভালোবাসি আর ভালোবাসি শিখাইতে...।। মানুষকে হাসাইতেও অনেক ভালো লাগে :) ফটোশপিং করা ব্লগ এ টিউটরিয়াল লেখা এবং উনার সাথে অনেক অনেক গল্প করা আমার শখ, অভ্যাস অথবা আমার দৈনন্দিন জীবন বলতে পারেন। ( University khular age porjonto :P )



কথোপকথন শুরু হয়ে গেছে! আপনিও যোগ দিন- ইতোমধ্যে 11 টি মন্তব্য করা হয়েছে :

  1. 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

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

  2. showkaton September 13, 2012, at 10:28 am Reply

    (: ei part ta eimatro ses korlam…dua raiken jno pura tuts ta ses korte pari….

    • ইরা আহমেদon September 13, 2012, at 12:04 pm Reply

      হি হি হি হি হি হি হি হি আপনি পারবেন ভাই :D :D শুধু একটু ট্রায় করলেই হয়া যাবে :D :D :D

  3. Shihab Mridhaon February 8, 2013, at 5:35 am Reply

    Like button ta koi :P like dite mon chay!!!! :D

    • ইরা আহমেদon February 23, 2013, at 1:23 pm Reply

      ফয়সাল আহমেদ আমারে লাইক বাটন দেয় নাই নিজের ভিডিও গুলায় ঠিকই লাইক বাটন রাখছে :P কতো খারাপ দেখছেন :P

  4. অমানুষ আমিon April 9, 2013, at 8:51 am Reply

    ভাই এত ধৈর্যশীল হইব কিভাবে ??
    :P

    • ইরা আহমেদon May 1, 2013, at 11:02 am Reply

      শিখতে চাইলে তো ধৈর্যশীল হইতেই হইবে ভাই নাইলে কেমনে শিখবেন :(

  5. mahmud006on June 17, 2013, at 10:18 am Reply

    পিএসডি টেমপ্লেট বানানোর ভিডিও টিউটোরিয়াল করলে ভাল হইত
    তারপরও ধইন্না পাতা দিলাম

  6. Husain Ahmmedon March 14, 2014, at 10:17 am Reply

    Asadharon tutorial khub valo lagtece.

  7. জসীম উদ্দীনon March 31, 2014, at 12:22 pm Reply

    ভাই, আপনার টিউটোরিয়ালটা দারুন হইছে। যদি আপনার ওয়েবসাইটে পিএসটি টেমপ্লেট বানানোর টিউটোরিয়াল দিতেন, তাহলে দারুণ উপকৃত হতাম।

Leave a Reply

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