আপনারা যারা  ওয়েব  টেমপ্লেট  এর উপরে টিউটরিয়াল ১ এবং  টিউটরিয়াল ২ দেখেন নি তারা এখনি দেখে নিন। আমরা টিউটরিয়াল ২ এ ছিলাম ১২ নাম্বার স্টেপ এ আজকে আমরা শুরু করবো ১৩ নং স্টেপ। তো আসুন কথা না বাড়িয়ে স্টেপ শুরু করা যাক।

 

স্টেপ ১৩ -

আপনার সেভ করা ডকুমেন্ট ফটোশপে অপেন করুন। তারপর সব লেয়ার এর উপরে একটি লেয়ার অপেন করুন।এখন পেন্সিল টুল এ যান এবং #01bfd2 কালার ব্যাবহার করে ১ pixel এর একটি লাইন আঁকুন নিচের ছবির মতো করে। এই লাইনের গ্লোয়িং ভাবটাই পেজের টব ন্যাভিগেশন বার আর অন্যান্য কন্টেন্টের মাঝে সেপারেটর হিসাবে কাজ করবে!

 

স্টেপ ১৪-

 

এখন আমরা আমাদের লাইনটাকে একটু modify করবো। যাতে আমাদের লাইনটা দেখতে পুরাই awesome দেখায়। তাই আর দেরি না করে আপনাদের লাইন এর লেয়ার এ একটা layer mask অ্যাড করুন। তারপর gradient tool সিলেক্ট করুন। তারপর নিচের ছবির মতো আপনার gradient এর সেটিংস্‌ change করুন।

এখন আপনার gradient এর cursor তারে নিচের ছবির মতো ডান থেকে বায়ে নিন। দেখবেন যে আপনার লাইন এর দুই দিকের কিছু অংশ রিমুভ হয়ে গেছে এবং কোনা গুলো একটু shard দেখাচ্ছে।

 

 

স্টেপ ১৫-

এখন আমাদের একটু pattern তৈরি করতে হবে যাতে আমরা আমাদের pattern header  এ প্রয়োগ করতে পারি।নিচের ছবির মতো করে একটি pattern তৈরি করুন তারপর পেন্সিল টুল সিলেক্ট করুন এবং ব্রাশ এর সাইজ দিন ২ pixel। এখন ২ টা dots অ্যাড করুন ২ বক্স এর কোনায়। তারপর ব্যাকগ্রাউন্ড অফ করে দিন এবং  Edit > Define Pattern এ দিয়ে আপনাদের pattern ফটোশপে সেভ করে নিন।

নোট্‌সঃ মনে রাখবেন আপ্নার pattern এর সাইজটা যেন অনেক ছোটো হয়।

 

 

 

স্টেপ ১৬-

এখন নতুন একটি লেয়ার অপেন করুন আপনার highlight layer এর নিচে। যেই area তে আপনি আপনার pattern দিতে চান ঐ area সিলেক্ট করুন যেকোনো একটা সিলেকশন টুল দিয়ে। তাপর Shift+F5 ক্লিক করুন কীবোর্ড এ । Fill dialogue box এ আপনি মাত্র যে pattern টি তৈরি করলেন ঐটা সিলেক্ট করুন তারপর OK দিন।

 

 

 

এখন আপনার সিলেকশনে pattern অ্যাড হইছে। আপনার ডকুমেন্ট zoom in করলেই দেখতে পারবেন।

 

 

এখন আপনারা চাইলে এইটারে নিয়া আরও কাজ করতে পারেন। করতে চাইলে pattern এর লেয়ারে একটা লেয়ার মাস্ক অ্যাড করুন। তারপর ফরগ্রাউন্ড কালার সাদা দিন এবং একটা বড় soft brush সিলেক্ট করুন। ব্রাশ এর opacity কমিয়ে ৬০% দিয়ে দিন।  তারপর একবার অথবা ২ বার আপনার pattern এর উপরে ক্লিক করুন।

 

 

এখন দেখুন আপনার pattern আরও ভালো ভাবে blend হইছে।

ওয়েবপেজে এই ধরনের প্যাটার্ন ব্যবহার করে টেক্সচার তৈরী করাটা বর্তমান ওয়েব ডিজাইনিংয়ের একটা কমন ট্রেন্ড! তাই এই জিনিসটা ভালোভাবে আয়ত্ত করাটা গুরুত্বপূর্ন! ডিজাইনের সাথে সামন্জস্যপূর্ন টেক্সচার তৈরী করতে পারাটা একজন ডিজাইনারের key skill….

 

 

স্টেপ ১৭-

ব্যাকগ্রাউন্ড এর কাজ মুটামুটি শেষ এখন আমাদের কাজ করতে হবে লোগো নিয়া। লোগো অ্যাড করার আগে আমরা লোগো এর জন্য একটা highlight অ্যাড করে নেই। নতুন একটি লেয়ার অপেন করুন। নাম দিন ” logo spot light ” । তারপর #19535a এই কালার ব্যাবহার করে আপনার header এর বামের উপরের কোনায় ব্রাশ দিয়ে একবার ক্লিক করুন। নিচের ছবি দেখুন,

 

 

স্টেপ ১৮-

এখন আমরা আসল লোগো অ্যাড করি। যেইটারে শুধু text logo বলা যায়। উপরের ডাউনলোড লিঙ্ক থেকে ডাউনলোড করে নিন bebas নামের ফন্টটি। তারপর টেক্সট টুল এর সাহায্যে আপনার ইচ্ছা মতো যেকোনো একটা টেক্সট বসিয়ে নিন।আপনারা চাইলে অন্য ফন্ট ও ব্যাবহার করতে পারেন :)

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

 

 

এখন আপনার টেক্সট লেয়ার এর উপরে ডাবল ক্লিক করে লেয়ার স্টাইল অপেন করুন তারপর লোগো তে নিচের ছবির মতো করে সেটিং দিন।

 

 

 

আজকের টিউটরিয়াল এই পর্যন্তই। নেক্সট টিউটরিয়ালের অপেক্ষায় থাকুন। ধন্যবাদ সবাইকে :)

 

 

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

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

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

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

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

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

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

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

ট্যাগসমূহ:

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

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



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

  1. showkaton September 13, 2012, at 11:26 am Reply

    apu,14no. step partesina kno bujtesina?jokon e gradient cursor ta left to right kori pura background change hoiya jai.

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

      ভাইয়া আপনি প্রথমে দেখুন যে আপনার লেয়ার মাস্ক সিলেক্ট করা নাকি !! যদি লেয়ার মাস্ক সিলেক্ট না করে আপনি লাইন টার thumb line এ ক্লিক করে gradient দেয়ার ট্রায় করেন তাইলে পুরাটা change হয়ে যাবে।

  2. showkaton September 15, 2012, at 2:38 pm Reply

    thanks apu,ami layer mask add na korei try korechilam.ekon hoise.ami single row marquee tool ta konomotei use korte parchina.eita select korar por pain tool diye color fill korte chaile hochhe na.apnar jodi solution thake ektu help koren.

    • ইরা আহমেদon September 15, 2012, at 3:06 pm Reply

      bhai apni single row marquee tool bebohar na kore ractangular marque tool bebohar korte somossha ki :O :O ami to bhai photoshop shikha shuru korar por thaika single row kokonoi use kori nai tai ai somporke kisu bulte prtesi na bt apni single row tool select kore option bar e dekhen to shob kisu 0% e ase kina !!!!

  3. showkaton September 18, 2012, at 12:57 pm Reply

    apnar comment r jonno tnx.ami single marquee tools er solution ta paiyaa gesi :D .ekon arekta problem,seita hochhe navigation menu separation line tar niche pattern kaj kortese but upore kaj kortese na.

  4. Shihab Mridhaon February 8, 2013, at 5:43 am Reply

    টিউটোরিয়াল তো নয় যেন আগুনের গোলা……… :P
    -ধন্যবাদ :D

  5. সোহাগon March 31, 2013, at 6:10 pm Reply

    আপনার টিউটোরিয়াল গুলু অসাধারন হইছে এবং হইতে থাকবে ইশাআল্লাহ । সো নাইছ……লাভলি……লাভলি (অহ সরি লাভলি আমার গার্লফ্রেন্ডের নাম ) :P

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

    Onek kichu jantechi valo lagtece. Ar apnar logo design er tutorial er opekkhay thaklam :)

  7. Swarnali pramanik.on September 25, 2014, at 11:02 am Reply

    শেখার শুরুতে এমন টিউটোরিয়া দেখে ভাল লাগছে!!! আমি নতুন ওয়েব ডিজাইন শিখছি।
    ফটোশপ সম্পর্কেও তেমন কিছ জানি না।তাই সমস্যায় পড়ছি। স্টেপ ১৫:
    কিভাবে ২ টা dots অ্যাড করব ২ বক্স এর কোনায়?
    প্লিজ বলেন Teacher.

Leave a Reply

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