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

 

স্টেপ ১৯ -

টেক্সট টুলে ক্লিক করে আপনি আপনার ইচ্ছা মতো যে যে মেনু বসাতে চান তা বসিয়ে নিন। টেক্সট এর ফন্ট arial এবং কালার #1eafb5 ব্যাবহার করতে পারেন। তারপর টেক্সট লেয়ার গুলা সিলেক্ট করে (ctrl+click) একটা গ্রুপ এ নিয়ে নিন ctrl+G  দিয়ে। গ্রুপ এর নাম দিয়ে দিন টেক্সট গ্রুপ অথবা মেনু অথবা আপনাদের ইচ্ছা মতো কিছু একটা ।

 

 

 

স্টেপ ২০ -

এখন আমাদের ন্যাভিগেশন বাটন অ্যাড করতে হবে। এই জিনিসটার সাথে আপনারা সবাই পরিচিত, যেমন কোনো ওয়েবসাইটের নেভিগেশন অংশে মাউস নেওয়া মাত্রই তা হাইলাইটেড হয় অথবা অনেক সময় আপনি যে পেইজে অবস্থান করেন ঐ পেইজটা হাইলাইটেড থাকে, সেই হাইলাইটেড বাটনের ডিজাইনটা আমরা করবো এখন। তো এটা করার জন্য নতুন লেয়ার অপেন করুন এবং লেয়ার এর নাম দিন ন্যাভিগেশন বাটন। এখন Rectangular Marquee Tool সিলেক্ট করুন তারপর একটা সিলেকশন তৈরি করুন। যেকোনো কালার দিয়ে ফিল করে দিন কারন আমরা এইটায় লেয়ার স্টাইল অ্যাড করবো তাই কালার নিয়ে ভাবতে হবে না।  তারপর আপনাদের fill (not opacity)  zero করে দিন।

 

 

লেয়ার এর উপর ডাবল ক্লিক করুন লেয়ার স্টাইল অপেন করার জন্য। তারপর নিচের ছবি অনুযায়ী লেয়ার স্টাইল দিন।

 

 

এই অংশটুকুতে যেটা ভাবার বিষয় সেটা হইতেছে কেনো আমরা ন্যাভিগেশন বারের কোনো একটা অংশকে হাইলাইট করি? আসলে এর প্রয়োজনীয়তাটা কি? একটা ওয়েবসাইট কতো বেশি ইউজার ফ্রেন্ডলী তা নির্ভর করে যেই পার্টগুলার উপরে তার একটা হইতেছে ন্যাভিগেশন বার। নেভিগেশন বার থেকেই যেনো পুরা ওয়েবসাইট সম্পর্কে একটা আইডিয়া ভিউয়ার পায়া যায় তা খেয়াল রাখা আবশ্যক! আর হাইলাইটের দরকার এই জন্য কেননা একজন ইউজার ওয়েবপেজে প্রবেশ করা মাত্রই ন্যাভিগেশন বারে চোখ রাখে এবং নতুন ইউজারকে সাইটের সঠিক দিকনির্দেশনা দেওয়ার জন্য এই হাইলাইট টাই আমাদের ভরসা! তাই হাইলাইটেড অংশ ডিজাইনের সময় আমাদের সব সময় মাথায় রাখতে হবে যে হাইলাইটেড পার্ট টা যেনো খুব বেশি জ্বলজ্বলে না হয় কিন্তু অন্য সব গুলা এলিমেন্টের মাঝেও আলাদা ভাবে বুঝা যায় বা সহজে খুজে পাওয়া যায়! আর এই আলাদা standout design দেওয়ার সময় অবশ্যই মাথায় রাখতে হবে যেনো পেজের মূল ডিজাইনের সাথে সামন্জস্যপূর্ন থাকে!

 

স্টেপ ২১ -

শেষ হয়ে গেলো আমাদের ন্যাভিগেশন বার তৈরি করা এখন আমাদের একটা slider তৈরি করা দরকার।

ওয়েবসাইটের হোমপেজে স্লাইডারের ব্যাবহার এখন কমন একটা ব্যাপার! স্লাইডার ছাড়া ওয়েবসাইট খুব কমই পাইবেন! এর উপকারিতা মূলত ২ টা:

১। নির্দিষ্ট জায়গার মধ্যে অধিক ইনফরমেশন ডিসপ্লে করা
২। সাইটের সৌন্দর্য বৃদ্ধি করা

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

আমাদের একেবারেই সাধারন স্লাইডারের মধ্যে থাকবে একটা পিকচার আর সাথে কিছু টেক্সট। সাধারনত ব্লগের স্লাইডার যেরকম হয়! ডিজাইন শুরু করার জন্য প্রথমেই 580 x 295 pixels একটা সিলেকশন তৈরি করুন।

 

 

এখন নতুন একটি লেয়ার অপেন করুন তারপর গ্রেয় অথবা যেকোনো কালার দিয়ে আপনার সিলেকশন ফিল করুন।

 

 

এখন আপনি যে ইমেজ বসাতে চান আপনার slider এ তা আপনার ডকুমেন্ট এর উপরে drop করুন তারপর create clipping mask ব্যাবহার করে আপনার ছবিটাকে বসান slider এর ভিতরে। যদি দেখেন যে আপনার ইমেজ বেশি ছোটো অথবা বেশি বড় দেখাইতেছে তখন আপনি ctrl + t ক্লিক করে আপনার ইমেজ ছোটো বড় করতে পারবেন।

 

 

স্টেপ ২২ -

slider এর ছবিটাকে আরেকটু আকর্ষনীয় করার জন্য আমরা আমাদের ছবির নিচে একটি shadow দিয়ে নেই কি বলেন ? আপনারা যারা shadow দিতে চান না তারা এই স্টেপ skip করতে পারেন। আসেন দেখি shadow দেয় কিরকম। shadow দিবেন এই কারনে যাতে দেখলে মনে হয় ছবিটা একটু ঝুলে আছে অথবা ছবিটার ছায়া পরতেছে নিচে। shadow দিতে প্রথমেই নতুন একটা লেয়ার অপেন করুন। তারপর ব্রাশ টুল সিলেক্ট করুন, ব্রাশ এর diameter 400 pixels দিন।

নোটসঃ ব্রাশ এর সাইজ মনে হয় differ করে cs5 এবং cs6 এ। তাই আপনাদের যেরকম সাইজ এর ব্রাশ ইমেজ এর সাথে suit করে সেরকম সাইজ এর ব্রাশ ব্যাবহার করবেন।

এখন ব্রাশ palette অপেন করুন তারপর নিচের ছবি অনুযায়ী সেটিংস দিয়ে নিন।

 

 

ব্রাশ এর কালার দিন #000000 তারপর নিচের ছবির মতো একটা spot অ্যাড করুন।

 

 

এখন আমরা Gaussian blur অ্যাড করবো যাতে আমাদের spot এর কালো ভাবটা একটু কমে যায়। Gaussian blur অ্যাড করতে Menu> Filter > Blur > Gaussian blue এ যান তারপর 4 pixel ব্লার দিন।

 

 

স্টেপ ২৩ -

এখন আমরা এতো বড় স্পট দিয়ে কি করবো আমাদের তো এতো দরকার নেই। তাই আসুন এটার কিছু অংশ delete করে নেই। প্রথমে rectangular marquee tool সিলেক্ট করুন। তারপর যে স্পট বানালেন মাত্র ঐটার অর্ধেক অংশ সিলেক্ট করুন। নিচের ছবিতে দেখুন। তারপর delete চাপুন দেখবেন যে আপনার স্পট এর অর্ধেক অংশ delete হয়ে গেছে।

 

 

স্টেপ ২৪ -

এখন আমরা আমাদের shadow আমাদের ইমেজ এর উপরে এবং নিচে place করবো। move tool সিলেক্ট করুন তারপর আপনার বানানো স্পট ছবির উপরে place করুন। shadow কিভাবে place করবেন তা নিচের ছবিতে দেখুন।

 

 

আপনি যদি মনে করেন যে আপনার স্পট খুব বেশি উঁচা দেখাইতেছে তাইলে ctrl + t চেপে উপর থেকে নিচে একটু কমিয়ে নিন। ( In other way shrink it vertically)

তারপর আপনার স্পট যেন ঠিক মাঝখানে থাকে আপনার ছবির সেজন্য আপনার স্পট লেয়ার এবং ছবির লেয়ার সিলেক্ট করুন তারপর Align Horizontal Centers এ ক্লিক করুন।

 

 

স্টেপ ২৫ -

এখন তো আমাদের ছবির উপরে shadow দেয়া হয়ে গেছে আপনারা চাইলে ছবির নিচে ও shadow দিতে পারেন। ছবির নিচে shadow দিতে প্রথমে spot লেয়ার এর একটা কপি তৈরি করুন। তারপর কপি করা লেয়ার move tool ব্যাবহার করে নিচে নামান। তারপর ctrl+t চাপুন এবং রাইট ক্লিক করে নিচে  flip vertically নামে একটা অপশন পাবেন ঐটায় চাপুন

 

 

আজকের পর্বে অনেক লেখলাম তাই এইখানেই শেষ করতেছি যদিও আমাদের slider এর কাজ এখনো শেষ হয় নি। শেষ করতে পরবর্তী টিউটরিয়াল দেখুন অথবা পরবর্তী টিউটরিয়ালের অপেক্ষায় থাকুন। সাথে থাকার জন্য ধন্যবাদ সবাইকে। :)

 

 

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

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

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

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

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

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

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

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

ট্যাগসমূহ:

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

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



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

  1. ইলিয়াস আহমেদon September 13, 2012, at 3:06 am Reply

    সুন্দর টিউটো’র অনেক অনেক ধন্যবাদ।

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

      কমেন্ট করার জন্য আপনাকেও ধন্যবাদ :) :) :)

  2. showkaton October 2, 2012, at 9:05 am Reply

    sundor ekta tuts er jonno abar o tnx.create clipping mask ta ki karone use kora hoy,ektu bolben?

  3. ইরফানon May 15, 2013, at 12:08 pm Reply

    Fill 0 korbo kivabe?

  4. Nababurbdon December 23, 2013, at 2:30 am Reply

    At first ..Apnr Design ta khub sundor hoechee tobe amr mone hoche je psd content gulu khub common and psd er height khub kom mone hochee….Sob mille ekbar normall psd mone hochee… Tobe Design ta khub gochano…………

    • ইরা আহমেদon December 23, 2013, at 4:42 pm Reply

      এইটা আমার বানানো না ভাই এইটা অন্য একজন ইংলিশ টিউটরিয়াল দিছিলো আমি তার বাংলা করে দিছি মাত্র। তাই নিজে কিছু বদলাই নাই :) আর নরমালই দিতে চাইছিলাম কারণ ফয়সাল আহমেদ এইটা নিয়া psd to html টিউটরিয়াল বানাইছেন এবং উনি বেসিক জিনিস গুলা তুইলা ধরতে চাইছিলেন।

  5. Husain Ahmmedon April 8, 2014, at 6:43 am Reply

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

  6. Mehedi Hassanon June 7, 2014, at 9:09 pm Reply

    vai psd ta download korbo kivabe…?plz download link ta den

Leave a Reply

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