সবাই কেম্ন আছেন ? আশা করি ভালো। আমাদের আজকের টিউটরিয়াল হচ্ছে একটি কমলা কালারের স্লাইডার নিয়ে। নিচের ছবিতে দেখে নিন আজকে আমরা কি ধরনের স্লাইডার বানাবো।

orange slider

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

 

স্টেপ ১ – ব্যাকগ্রাউন্ড

শুরুতেই আপনার ব্যাকগ্রাউন্ড  কালার দিন  #e34510 তারপর file>new ক্লিক করে 580×400 এর একটি ডকুমেন্ট ওপেন করুন। নিচের ছবি দেখে দেখে সেটিং বদলান।

1.1

1.2

 

স্টেপ ২ – স্লাইডার 

Rounded rectangle tool select করুন। উপরে দেখবেন একটি অপশন বার আছে ঐখানে নিচের ছবি অনুযায়ী সেটিংস দিন।

width – 384 px

height – 12px

Radius – 25

Color – #bd3b0e

2.1

2.2

 

এবার আপনার shape সিলেক্ট করুন, ডাবল ক্লিক করুন তারপর নিচের ছবিগুলা দেখে দেখে লেয়ার এফেক্ট দিন। Inner shadow

2.3

Drop shadow color – #fa7347

2.4

 

এবার rectangular marque tool সিলেক্ট করুন এবং নিচের ছবি অনুযায়ী একটি বক্স আঁকুন। ফিল কালার হবে white (#ffffff)

 

2.5

 

2.6

 

এবার লেয়ারের উপরে ডাবল ক্লিক করুন তারপর লেয়ার এফেক্ট ওপেন করুন। এবার নিচের ছবির মতো করে লেয়ার এফেক্ট দিন।

2.7

 

সব গুলা লেয়ারকে এখন একট গ্রুপে নিয়ে নিন । নাম দিন স্লাইডার।

স্টেপ ৩ – হভার  

নতুন একটি লেয়ার ওপেন করুন। rounded marquee tool সিলেক্ট করুন। অপশন থেকে radius দিন ৫ px।  এবার একটি শেপ আঁকুন যার width হবে  ৭২ px এবং height হবে ৫ px। তারপর আবার custom shape tool সিলেক্ট করুন এবং একটি Triangle আঁকুন। নিচের ছবিতে দেখুন কিভাবে করা হয়েছে।

3.1

3.2

 

এবার Triangle shape এবং round rectangle shape ২ টি এক সাথে সিলেক্ট করুন (ctrl+ click)। তারপর ctrl+e চাপুন। এটি করাতে আপনার ২ টি shape একটি shape এ পরিণত হবে। এবং shape টির উপরে ডাবল ক্লিক করুন এবং নিচের ছবি অনুযায়ী লেয়ার এফেক্ট দিন।

Inner shadow color – #f57044

3.3

Inner glow color – #bd390f

3.4

color overlay color – #e54510

3.5

Drop shadow

3.6

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

 

স্টেপ ৪ – টেক্সট 

Helvitica OT1 নামের ফন্টটি প্রয়োজনীয় ফাইলস থেকে ডাউনলোড করে নিন। তারপর টেক্সট টুল সিলেক্ট করুন। কালার দিন সাদা, ফন্ট এর সাইজ দিন ২.৮৮ px। এবার নিচের ছবির মতো করে টেক্সট বসান।

0.0

4.2

স্টেপ ৫ – circles 

এবার ellipse tool সিলেক্ট করুন তারপর নিচের ছবির মতো করে একটি গোলাকার বৃত্ত আঁকুন।

5.1

5.2

 

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

Inner shadow color – white (#ffffff)

Distance – 1

Angle – 90 ( untick global light )

 

5.3

 

 

Gradient Overlay

5.4

Drop shadow

5.5

 

সব লেয়ার এফেক্ট দেওয়া শেষ হয়ে গেলে আপনার বৃত্ত নিচের ছবির মতো দেখাবে।

5.6

 

এবার আপনার বৃত্তের লেয়ারের একটি কপি তৈরি করুন ctrl+j ক্লিক করে। তারপর আপনার কীবোর্ড এর right arrow বাটন চেপে ডানে সরান যাতে আপনার ইমেজ নিচের ছবির মতো দেখায়।

5.7

 

ফাইনাল স্টেপ  

এখন আমাদের সর্বশেষ টেক্সট টুকু অ্যাড করার পালা। টেক্সট টুল সিলেক্ট করুন তারপর স্টেপ ৪ এর সেটিং এর মতো টেক্সট অপশন এর সেটিংস্‌ দিন।

font – helvetica OT1

font size – 2.88px

font color – #ffffff

এবার প্রথমে শুধু ১০ লেখুন এবং লেয়ার টিতে ডাবল ক্লিক করে নিচের ছবির মতো লেয়ার এফেক্ট দিয়ে নিন।

color – #9e2d04

6.1

 

তারপর ১০ এর  আবার ১০ টি লেয়ার কপি করুন এবং একটা একটা করে keyboard এর  right arrow দিয়ে ডানে সরিয়ে নাম্বার change করে দিন ২০, ৩০, ৪০ থেকে ১০০ পর্যন্ত  নিচের ছবির মতো মনে রাখবেন যে সব গুলে এক লেয়ার রে লেখবেন না কারণ এতে আপনার alignment ঠিক থাকলে ও spacing ঠিক থাকবেন না। আপনার নাম্বার গুলার spacing অ্যান্ড alignment যাতে সঠিক থাকে সেজন্য ১০ থেকে ১০০ লেখার পরে সব গুলা লেয়ার সিলেক্ট করুন  তারপর move tool সিলেক্ট করুন দেখবেন উপরে align vertical centers এবং distribute horizontal centers নামে অপশন পাবেন এই ২ টি অপশন এ ক্লিক করুন।

১। align vertical centers – এই অপশনটি আপনার সব গুলা টেক্সট এর alignment টা ঠিক রাখে যেমন ধরুন সব গুলা টেক্সট এর নিচে একটা লাইন আঁকলে দেকবেন যে সব গুলা টেক্সট ঐ লাইনটার উপরে সমানে বসেছে।

২। Distribute horizontal centers – এইটা আপনার প্রথম টেক্সট আর শেষ টেক্সট এর মধ্যে যতটুকু spacing আছে তা সব গুলা লেয়ার এর মধ্যে সমান ভাগে ভাগ করে দেয়।

6.2

 

এখন সব গুলা নাম্বার এর উপরে আমরা একটি করে লাইন দিবো। লাইন দিতে line tool সিলেক্ট করুন তারপর উপর থেকে radius দিন ১ pixel। এবার লেয়ারটি উপরে ডাবল ক্লিক করে নিচের ছবি অনুযায়ী কালার লেয়ার এফেক্ট দিন।

6.1

 

টেক্সটে যেভাবে কপি করেছেন, ডানে সরাইছেন, alignment and distribute করছেন তার সব কিছুই আবার লাইন গুলায় রিপিট করুন এবং একটি আলাদা গ্রুপে সব গুলা লেয়ার ঢুকাতে ভুলবেন না।

এই হলো আমাদের final image।

orange slider

 

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

ট্যাগসমূহ:

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

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



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

  1. Saffat Rafsanon September 23, 2013, at 11:42 pm Reply

    অনেক সুন্দর হয়েছে। ধন্যবাদ :)

  2. saiful.dreamlandon October 1, 2013, at 10:42 pm Reply

    অসাধারন একটি টিউটোরিয়াল……………… ইশ্ ইউনিভার্সিটিটা যদি অনেক অনেক দিন বন্ধ থাকত…….তাহলে…. :P

    • ইরা আহমেদon October 6, 2013, at 1:08 pm Reply

      হিহিহিহি সময় পেলে কইরেন টিউটরিয়ালতো আছেই :)

  3. ফটোশপের উপর ভিডিও টিউটোরিয়াল করবার কোন চিন্তা ভাবনা আছে কি ? তারপর বিজনেস কার্ড ও লোগো ডিজাইনের উপর আর টিউটোরিয়াল পেলে ভালো হয় । অনেক ধন্যবাদ ।।

  4. Ruhulon September 5, 2014, at 11:04 am Reply

    Apnar uni ki jibito asen?? uni kobe j tutorial toiri korecilen r kono khobor nai. ami unar boro fan.

Leave a Reply to মোঃ সাহিদুজ্জামান শুভ Cancel reply

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