আর ফটোশপ বিরোধী কোন সফট নয় !! আসুন ফটোশপ দিয়েই ইমেজ স্লাইড বানিয়ে ফেলি!!! (ওয়েব ডিজাইনারদের বেশি কাজে দিবে)

কেমন আছেন সবাই? ভাল নিশ্চয়ই।। আমিও ভাল আছি।।

আমি ফটোশপের কিছু কিছু কাজের জন্য ফটোশপের বিকল্প হিসাবে কিছু সফট নিয়ে ২/৩ টা টিউন করেছিলাম।। তাই কমেন্ট পেয়েছি যে আমি নাকি ফটোশপ বিরোধী আর আমি নিজে ফটোশপ পারি না বলে এই সব টিউন করে থাকি।। সত্যি কথা বলতে আমি কখনই ফটোশপের বিরধিতা করি না।। আর সব সময়ই ফটোশপকে বস মানি।।
ফটোশপ দিয়ে সব ধরনের কাজ ই করা যায় তবে কিছু কিছু কাজ আছে যেগুলো ফটোশপে করতে অনেক সময় লাগে আর নতুন্দের কথা চিন্তা করে টিউন গুল করেছিলাম।।

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

যারা ওয়েব ডিজাইন করে থাকেন তাদের মনে হয় বেশি কাজে লাগবে।। তবে চলুন আসল কাজে নামা যাক>>>

http://cdn.designfestival.com/files/2012/08/22b1.jpg

http://cdn.designfestival.com/files/2012/08/final.jpg

উপরের ছবিটি দেখুন, এখন আমরা কিভাবে এটা বানাতে পারি ফটোশপ ব্যাবহার করে সেটাই দেখব ধাপে ধাপে >>>

ধাপ ১

ফটোশপ ওপেন করে file হতে new তে ক্লিক করলে নিচের মত বক্স আসবে।। ছবির মত সব কিছু ঠিক করে ওকে করে নতুন পেজ বানিয়ে নিন।।

ধাপ ২

এবার আপনাকে স্লাইড এর মূল ফ্রেম বানাতে হবে।। সেজন্য আপনাকে foreground color নির্বাচন করতে হবে।। এখানে কালার কোড #06d0fb দেয়া হল, তাতে নিচের মত রঙ আসবে।। আপনি ইচ্ছা মত দিতে পারেন।। ছবিটা দেখেন তাহলে ক্লিয়ার হতে পারবেন।।

slider

ধাপ ৩

এবার আপনাকে লেয়ার ওপেন করতে হবে।। সেজন্য বাম দিকের মেনু গুল হতে rectangle layer এ ক্লিক করে “Layer Style” window ওপেন করেন।।

এবার নিচের ছবির মত সেটিং গুলো পরিবর্তন করুন।।

slider

slider

slider

slider

ধাপ ৪

এবার নতুন rectangle বানাতে হবে 926px width ও 270px height দিয়ে ।। আর কালার দিতে হবে #08a2c3 ।।

rectangle বানাতে new এ ক্লিক করলেই হবে।।

slider

এবার নতুন rectangle এর জন্য নিচের ছবির মত সেটিং গুলো ঠিক করে নিন।।

slider

slider

slider

slider

ধাপ ৫

আবার 912px width ও  252px height দিয়ে rectangle বানাতে হবে আর color কোড হবে #222222

slider

ধাপ ৬

এবার ফটোশপ এর file হতে open এ ক্লিক করে একটা ইমেজ সিলেক্ট করে তা ড্রাগ করে এবং রিসাইজ করে লেয়ারের মধ্যে নিতে হবে।। সংক্ষেপে (Ctrl + “T”) চাপলে ফ্রী ত্রান্সফের করা যায়।।

slider

ইমেজের লেয়ারের উপর ডবল ক্লিক করে সেটিং গুলো নিচের মত পরিবর্তন করে নিতে হবে।।

slider

slider

ধাপ ৭

এখন টেক্সট এর জন্য নতুন লেয়ার সিলেক্ট করতে হবে।। আমি এখানে Androgyne ফন্ট ইউজ করেছি, আপনি ইচ্ছা মত করতে পারেন।।
slider

ধাপ ৮

এবার আমরা বাটন বানাবো পরের ইমেজ দেখার জন্য।। সেজন্য আপনাকে rounded rectangle ব্যাবহার করতে হবে।।  সেটিং গুলো নিচের মত পরিবর্তন করতে পারেন।। কালার কোড #e32121

slider

ধাপ ৯

বাটনের জন্য লেয়ার স্টাইল ওপেন করে  সেটিং গুলো নিচের ছবির মত করে নিন।।

slider

slider

slider

slider

ধাপ ১০

এখন আমরা কিছু টেক্সট অ্যাড করবো।। তার আগে drop shadow এর সেটিং ঠিক করে নিন।।

slider

লাল বাটনের উপর Right- ​​click করে টেক্সট লেয়ার থেকে “Copy Layer Style.” সিলেক্ট করতে হবে ।। এবার right-​​click করতে হবে “Description” এর উপর, “Paste Layer Style” সিলেক্ট করে সেটিং গুলো পরিবর্তন করে নিতে হবে।।

slider

ধাপ ১১

এখন আমরা স্লাইড এর কন্ট্রোল বানাবো।। সেজন্য pen tool ব্যাবহার করতে হবে ।। নিচের মত shape shown ড্র করতে হবে।। আর সেটিং গুলো ইমেজ দেখে ঠিক করে নেন।।

slider

এখন লাল বাটন হতে লেয়ার স্টাইল কপি করে নতুন drawn shape layer এ পেস্ট করতে হবে।।

slider

এখন ব্যাক সাইড এ নতুন shape অ্যাড করতে হবে।। ২ টি rounded rectangle বানাতে হবে কালার হবে #2e2e2e , (Ctrl + “T”). চেপে ফ্রী ত্রান্সফের করে ড্রাগ করে বসাতে হবে নিচের ইমেজের মত করে।।

slider

ধাপ ১২

এখন ellipse tool থেকে “Shape” tool ড্র করে লেয়ারের উপরে ellipse বসাতে হবে।।  fill color হবে #313131  এবং #c1c1c1 হবে 2px stroke এর জন্য ।।

slider

ছবির মত সেটিং পরিবর্তন করুন।।

slider

slider

ধাপ ১৩

এখন  #57fff5 কালার foreground এর জন্য  এবং  একটা arrowhead আকাতে হবে  pen tool. ব্যাবহার করে।।

slider

ধাপ ১৪

এখন অনেকটা ফ্রেম হয়ে গেছে।। এখন আমরা যেটা করবো তা হল নিচে ক্লিক বাটন বানাবো।। জেন পরের ইমেজ এ ইচ্ছা মত যেতে পারি সেজন্য frontmost parts হতে লেয়ার এ   “Edit” > “Transform” > “Flip Horizontal” এ গিয়ে right side এ পরিবর্তন করতে হবে।। তাহলে নিচের মত পরিবর্তন আসবে।।

slider

ধাপ ১৫

এখন slider navigation বানাতে হবে।।  এটা   pen tool ব্যাবহার করে বানাতে হবে।। color #d1d1d1.

slider

এখন লাল অংশের বাটন টুকু লেয়ার কপি করে নতুন navigation layer এ পেস্ট করতে হবে।। আঙ্গেল করে ২ টি নতুন rectangles বানাতে হবে।।
slider

ধাপ ১৬

navigation complete হলে নিচের ছবির মত দেখাবে।।

slider

একটি inner shadow অ্যাড করতে হবে নিচের মত ভেলু দিয়ে।।

slider

slider

ধাপ ১৭

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

লাল অংসর অবজেক্ত টুকু অ্যাড করবো ।।

slider

slider

ধাপ ১৮

এখন একটা একটা করে অবজেক্ট বানিয়ে নিতে হবে আর তা নিদিষ্ট স্থানে লাগাতে হবে।।
slider

ধাপ ১৯

sliderরিবনের সেটিং গুলো নিচের মত হবে।।

slider

slider

slider

ধাপ ২০

রিবনের মধ্যে কোন টেক্সট ও লিখে দেয়া যাবে।। ছবিতে তা দেখান হয়েছে।।

slider

ধাপ ২১

সব শেষে আমরা একপাসের রিবনকে Transform করে সব কনায় বসাতে পারি।। সেজন্য rectangle বানিয়ে “Edit” > “Transform” > “Distort.” এখান থেকে ইচ্ছা মত স্থানে বসাতে পারবো।।

slider

ধাপ ২২

এখন  shadow layer এ right-​​click করে option থেকে “Rasterize Layer,” and go to “Filter” > “Blur” > “Gaussian Blur.”  তে গিয়ে তা ৪০% করে দিতে হবে।। নিচের ছবির মত করে।।

slider

slider

কাজ শেষ।।

অনেক গুলো ধাপ পার হতে হয়েছে তাই লেখা গুলো খুব ই সংক্ষেপ হয়ে গেছে।।

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

>>>ভাল লাগলে কমেন্ট করতে ভুলবেন না<<<

   ফেসবুক এ আমাকে পেতে নিচে ক্লিক করুন---

Level 0

আমি kazi Kowshik। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 22 টি টিউন ও 281 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

জটিল ভাই :)) অনেক ধন্যবাদ আপনাকে 😀

Level 0

এতদিনে কাজের একটা টিউন করার জন্য ধন্যবাদ 😀 আর আমার কথায় মাইন্ডে নিয়েন না। আমি সবাইকে একটু খুচাইতে পছন্দ করি :p আবার ধন্যবাদ সুন্দর টিউন করার জন্য। এরকম টিউন আরও চাই 😀

    @iamnayem: মানুষকে খোঁচালে নিজেই খোঁচা খাইতে হয়।। সবাইকে উৎসাহিত করার চেষ্টা করবেন, নিরউৎসাহিত নয়।। ভাল থাকবেন।।

Level 0

এতদিনে কাজের একটা টিউন করার জন্য ধন্যবাদ 😀 আর আমার কথায় মাইন্ডে নিয়েন না। আমি সবাইকে একটু খুচাইতে পছন্দ করি :p আবার ধন্যবাদ সুন্দর টিউন করার জন্য। এরকম সুপার টিউন আরও চাই 😀

ভাই দুই মিনিটে এই কাজ করার সফটওয়্যারটির নাম বলবেন কি? 😛

আশা করছি টিউনটি নির্বাচিত হবে !

Level 0

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

Level 0

ভাই এটার পিডিফ বানিযে দেবেন কেউ।হেল্প মি……..।

Level New

ধন্যবাদ। সুন্দর টিউনটির জন্য……….

Level 0

দারুন একটি টিউন করেছেন ভাই। আপনি চালিয়ে যান আপনার সাথে অনেকেই আছে।

    @aktar01745: সাথে থাকার জন্য ধন্যবাদ।। আপনারা সাথে থাকলে অনেকটা এগিয়ে যেতে পারবো।।

Jotil tune.Onik donobad upnake.

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

    @মোঃ রেজাউল করিম: নিয়মিত আমার টিউন গুলো পড়ার জন্য আপনাকে অসংখ্য ধন্যবাদ।।
    এটা শুধু একটা স্লাইডএর একটা পিকচার।। প্লে করতে হলে এমন আরও কিছু ছবি বানিয়ে html/js কোড দিয়ে web site এ প্লে করা যাবে।।

কৌশিক ভাই দারুন একটা টিউন করেছেন। ভাইয়া এইটা Photoshop এর কোন ভার্শন। আমি Photoshop 7 ব্যাবহার করি।

    @wantedvirus: ভাই এখানে শুধু নির্দেশনা গুলো দেয়া হয়েছে।। letest সব ভার্সন দিয়েই বানানো যাবে।। নির্দেশনা গুলো ঠিক থাকলেই হবে।।

Level 0

100/101 !!!!!!!!!!!!!!! for U !!!

Level 0

বাংলায় অনুবাদ করার জন্য ধন্যবাদ।
http://designfestival.com/learn-how-to-design-a-colorful-image-slider-in-photoshop/

বাংলা টিউটোরিয়াল http://www.youtube.com/user/me2resan

valo, keep it up, I am a Graphics Designer ami aita korte pari..

Level 2

চমৎকার না বলে পারলাম না। ধন্যবাদ কৌশিক ভাই।

vai apnar ta adobe photoshop koto version? nice tune .

Bai Apnaka jode kosa na dito taila hoito ato sundor+Sundor+Sundor Tutorial ta ato sundor cora patamna. So apnak thanks dewr age j kosa dia apnk ai kaj ti corta baddo corsa take thanks dilam then ato sundor akta tuner jonno apnake o so many thanks. Awsommmmmm,,,,,, akn daktase maja maja kosaio kaj hoi, hahahahaha

    @Md. Shafiul Azam Teto: বাহ খুব সুন্দর চিন্তা ভাবনা করেছেন ত, এই কাজ টা ২ মিনিটে করা গেলে আপনার কেমন লাগতো একটু ভেবে দেখুন !!!

      Level 0

      @এম এম কৌশিক: আর কৌশিক ভাই আপনি আপনার নিজের ধারায় টিউন করতে থাকুন। আপনাকে আর খোঁচাব না :p আসলে আমি মাঝে মাঝে ভুলে যাই Online Blogging একটা সিরিয়াস জায়গা এইখানে কার বাক্তি স্বাধীনতায় হস্তক্ষেপ করা অনুচিত। শুধু আপনার কাছে প্রত্যাশা রইল টিউন গুলর এমন কোন নাম দিয়েন না যাতে করে টাইটেল নাম Photoshop এর বিপক্ষে চলে যায়। আপনার টিউনগুলর মান অনেক ভাল। তাই আপনি “সহজেই শিখুন গ্রাফিক্স ডিজাইনিং” এই টাইটেলে আপনার করা এই রকম টিউন গুল নিয়তি চেইন টিউন করলে অনেক অনেক ভাল লাগবে। 😀 দয়া করে “এমন অনেক সফট আছে যেগুলো দিয়ে ফটোশপের এই কাজ ২ মিনিটে করা যায়।“ এইরকম লাইন আর ইউজ করেন না।

    Level 0

    @মোঃ আল মামুন: @Md. Shafiul Azam Teto: আপনাকেও ধন্যবাদ, কিন্তু কষ্ট দিয়ে কাজ আদায় করলে কেউ আর Positive sense এ দেখেনা :p

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

আর আপনি যদি স্লাইড শো তৈরি করে থাকেন তাহলে উদাহরণ সহকারে পোস্ট করে দিবেন প্লিস।
🙂
DM

@iamnayem @ এম এম কৌশিক Bai akta shotte cota ke janen amra poro nirvorshil hoi takta like core jar carona amar shob kisu shortcut corta chai. bt akbaro babena ata ke amader jonno kote nake lav hoi, hoito 2min a ai kaj ta amra complete corta parvo tik bt ata amader kono cradit takbena r apne j shikalen tate shob nejar cradit takbe taina. so amra shikta chi nd shikata chi then karo upr depend corta china. nija kisu cora dekata chi. so tim laguk bt otai amadr jonno best. bul hola koma corben.

    @Md. Shafiul Azam Teto: ভাই আমি আপনার কথার সাথে একমত।। কিন্তু এমন ও ত হতে পারে যে ২ মিনিতের মধ্যে আমন ইমেজ আপনার প্রয়োজন তখন কি করবেন?? শিখে রাখা ভাল সাথে সাথে সফট ও বেবহার করতে হবে।।