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

ও হ্যাঁ শুরু করার আগে দেখে নিন আমরা আজকে কি বানাতে যাচ্ছি,

 

0

স্টেপ ১ -

প্রথমত ফটোশপ এ একটি নতুন ডকুমেন্ট ওপেন করুন 400 x 400 pixels এর। এখন আপনাকে ব্যাকগ্রাউন্ড এ gradient দিতে হবে তাই টুলবার থেকে Gradient Tool  সিলেক্ট করুন তারপর gradient type এ Radial দিন এবং gradient কালার নিচের ছবি দেখে দেখে বদলান তারপর আপনার ইমেজ এর উপরে ড্রাগ করুন।

1

স্টেপ ২ -

এখন আপনার ইমেজ এ হাল্কা নয়েজ অ্যাড করুন Filter > Noise > Add Noise এ গিয়ে।

- 0.5 noise

- uniform

-  monochromatic – tick

 

2

স্টেপ ৩ -

উপরের লিঙ্ক ফোল্ডার এ একটি ফাইল আছে moss-on-rocks-texture নামে ওইটি আপনার ডকুমেন্ট এ প্লেস করুন। এইবার আপনার moss-on-rocks-texture এর ব্লেন্ড মোড Multiply, Overlay or Soft Light এর যেকোনো একটি দিন যেইটি আপনার কাছে ভালো দেখায়এইখানে Multiply ব্যাবহার করা হইছে। তারপর আপনার ইচ্ছা মতো opacity কমিয়ে নিন যেইটা আপনার দেখতে ভালো দেখায়। ২০% দিতে পারেন এটি মুটামুটি ভালো দেখায়।

নোট – আমি যখন বানাই তখন 46% দিয়েছিলাম। আপনাদের পি এস ডি ফাইল দিয়ে দিবো আপনারা চাইলে দেখতে পারেন আমি কি কি ব্যাবহার করেছি। :)

3

স্টেপ ৪ -

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

 

4

 

স্টেপ ৫ -

এখন আপনারা চাইলে আমার দেয়া রেডি মেইড ইমেজ টি ব্যাবহার করতে পারেন অথবা আপনারা নিজে halo এর ইমেজ টি ডাউনলোড করে ব্লেন্ড মোড color dodge  এ দিতে পারেন এবং চাইলে opacity  ও কমিয়ে নিতে পারেন যদি দরকার মনে করেন।

 5

স্টেপ ৬ -

এখন আমরা বাটন তৈরি করব। বাটন তৈরি করতে টুল বার থেকে round rectangle tool সিলেক্ট করুন। তারপর নিজের ইচ্ছা মতো একটি বাটন আঁকুন। আকার পরে আপনি যতটি বাটন তৈরি করতে চান ততবার আপনার বাটনটিকে কপি করে নিন ctrl + J দিয়ে। তারপর আস্তে আস্তে কীবোর্ড এর arrow বাটন ক্লিক করে একটার নিছে আরেকটা প্লেস করুন।

আমি হয়তো আপনাদের ভালো ভাবে বুঝিয়ে বলতেছি না যে ভালো ভাবে প্লেস কিভাবে করতে হয় অথবা কিভাবে কপি করতে হয় কারন আপনারা যদি এই ইমেজ বানানোর লেভেল এ আইসা পরছেন মনে করেন তাইলে আমি আর এসব ছোট খাটো জিনিস বুঝায়া বলার দরকার মনে করি না।

 

6

স্টেপ ৭ -

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

 

7.1

7.2

তারপর pattern !!  pattern টি আমি উপরের ডাউনলোড ফাইল এ png ফরম্যাট এ দিয়ে দিয়েছি আপনাদের png ইমেজ কে pattern বানাতে হলে নতুন একটি ফটোশপ ট্যাব এ আপনার pattern টি ওপেন করুন। তারপর menu > edit > define pattern এ ক্লিক করুন। একটি pop up বার ওপেন হবে ওইখানে যেকোনো একটি নাম দিন তারপরে ok ক্লিক করুন।

 

 7.3

এখন আপনার বাটন দেখতে নিচের ছবির মতো দেখাচ্ছে কিনা দেখুন।

 

7.4

আমার মতে খুব একটা difference তৈরি হয় নাই। কিন্তু আমি যে ইমেজ বানিয়েছিলাম তার pattern overlay এর opacity দিয়েছিলাম ৬০% যার কারনে pattern টি আরও গাড় ভাবে দেখাচ্ছিল। যাই হক,

এখন পিছনে হাল্কা একটা কন্টেইনার অ্যাড করতে পারেন 3f5c7a এই কালার ব্যাবহার করে তারপর layer mode Multiply দিন এবং opacity কমিয়ে 50% এ নিয়ে আসুন।

স্টেপ ৮ -

এখন আমরা বাটন গুলায় shine অ্যাড করব। এটি করতে আপনাকে প্রথমে সব গুলি বাটন সিলেক্ট করতে হবে। ctrl দিয়ে ক্লিক করে প্রথমে আপনার একটি বাটন সিলেক্ট করে নিন তারপরের বাটন গুলি সিলেক্ট করতে আপনাকে  ctrl and shift ধরে ক্লিক করতে হবে।

8

স্টেপ ৯ -

বাটন গুলা সিলেক্ট করা শেষ হয়ে গেলে আপনার সিলেকশন টিকে 2 pixels contract করুন Select > Modify > Contract এ গিয়ে। এখন নতুন একটি লেয়ার ক্রিয়েট করুন। তারপর গ্রেডিয়েন্ট টুল এ গিয়ে white to transparent gradient chose করুন। তারপর বা থেকে ডানে আপনার cursor ড্রাগ করুন দেখবেন নিচের ছবির মতো দেখাচ্ছে আপনার ইমেজ।

  9

 

স্টেপ ১০ -

এখন পেন টুল সিলেক্ট করুন তারপর নিচের ছবি দেখে দেখে একটি curved path আঁকুন।

 

10

স্টেপ ১১ -

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

 

11

স্টেপ ১২ -

এখন এই লেয়ার এ layer mask অ্যাড করুন। তারপর black gradient ড্রাগ করুন উপর থেকে নিচে দেখবেন নিচের ছবির মতো একটি এফেক্ট দেখতে পাচ্ছেন।

 

12

 

স্টেপ ১৩ -

এক দিক বানানো তো শেষ হয়ে গেল এখন অন্ন দিক বানাতে আপনারা চাইলে স্টেপ ৮ থেকে ১২ ফলো করতে পারেন অথবা আপনার লেয়ার টিকে সিলেক্ট করে ctrl + j চাপুন যাতে নতুন একটি কপি তৈরি হয়। তারপর ctrl + t চাপুন দেখবেন একটি বক্স appear হইছে। ওইটার ভিতরে রাইট ক্লিক করলে নিচে দেখতে পাবেন flip horizontal নামে একটি অপশন আছে ঐটায় ক্লিক করুন। তারপর রাইট arrow ক্লিক করে করে আপনি আপনার লেয়ারটিকে ডানে বসাতে পারেন অথবা move tool ব্যাবহার করে ও ডানে বসাতে পারেন।

এই হল gradient এর ফাইনাল রেজাল্ট :D

 

13

স্টেপ ১৪ -

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

14

ফাইনাল স্টেপ -

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

নতুন একটি ফাইল্ ওপেন করুন তারপর ব্রাশ টুল সিলেক্ট করুন। foreground কালার লাল দিন তারপর সফট একটি ব্রাশ chose করে ডানের দিকে ব্রাশ করুন হাল্কা। তারপর ব্লেন্ড মোড color এ দিন এবং opacity কমিয়ে 39% এ দিন। আপনারা চাইলে কমাতে অথবা বাড়াতে পারবেন এবং চাইলে অন্য ব্লেন্ড মোড ব্যাবহার করে দেখতে পারেন।

এরই মধ্যে দিয়ে শেষ হয়ে গেল আমাদের verticle বাটন বানানো। আমি নিজে একটি বানালাম নিচে দেখুন,

 

0.1

 

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

 

ট্যাগসমূহ:

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

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



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

  1. imdadul haqueon August 20, 2012, at 12:51 pm Reply

    awesome

  2. Mohammad Kamar Uddinon October 26, 2012, at 3:15 pm Reply

    I did not get how can I apply white to transparent gradient . Can you tell me? Although I checked the PSD file but did not get a clue….thanks for tutorials

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

      কতো নাম্বার স্টেপ এ সমস্যায় পরছেন ভাই ??

  3. micky mouseon April 11, 2013, at 10:17 pm Reply

    oree..awsm

  4. আহমেদ রাজুon December 29, 2013, at 3:19 pm Reply

    ৮ নম্বর স্টেপে সমস্যায় পড়লাম। উল্লেখ্য, সিএস ৫ ও সিএস ৬ দিয়ে চেষ্টা করেছি সিলেক্ট করতে পারছি না। স্টেপটি সম্পর্কে আরো বিস্তারিত জানালে ভালো হত। আরো ভাল হতো স্ক্রীন শর্ট যোগ করলে।

Leave a Reply

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