সবাইকে স্বাগতম জানাচ্ছি "হাতে ধরে PSD2HTML পুর্নাঙ্গ কোর্স" এর দ্বিতীয় কোর্সে। অনেকের অনুরোধে ভিডিও টিউটোরিয়াল সহ টিউন করতে অনেক দেরি হয়ে গেলো। এখন থেকে প্রতি কোর্সের সাথেই পাবেন একটি করে ভিডিও টিউটোরিয়াল।
গত কোর্সে আমরা পিএসডি টু এইচটিএমএল সম্পর্কে জেনেছি, পিএসডি টু এইচটিএমএল করতে প্রয়োজনীয় টুল সম্পর্কে জেনেছি, পিএসডি মোকাপ ফাইল টি পর্যবেক্ষন করেছি এবং পিএসডি টেমপ্লেট ফাইলটি ডাউনলোড করেছি।
➡ গত কোর্সের টিউন দেখুন এখানেঃ https://www.techtunes.io/web-design/tune-id/239737
➡ গত কোর্সের টিউটোরিয়াল দেখুন এখানেঃ http://www.youtube.com/watch?v=_mUVVEWayDs
➡ ফটোশপ এর বেসিক ট্রিক্স
পিএসডি টু এইচটিএমএল করতে ফটোশপ এর কিছু বেসিক ট্রিক্স আছে। এগুলোই আপনাদের সামনে তুলে ধরা হবে এই অংশে।
➡ পিএসডি ফাইল স্লাইস করা
এই অংশে পিএসডি ফাইল টি কিভাবে স্লাইস করবেন টা দেখানো হবে। স্লাইস টুল এর সাহায্যে আমরা পিএসডি ফাইল টিকে স্লাইস করবো।
➡ Youtube Link: http://www.youtube.com/watch?v=2QKCzlZEIt0
পিএসডি টু এইচটিএমএল করতে আপনাকে ফটোশপ ভালো করে জানা থাকতে হবে। এবং শুধু ফটোশপ এর সাধারন ব্যবহারই আপনাকে পিএসডি টু এইচটিএমএল করার উপযোগী করে তুলবে না, ফটোশপ এর এক্সক্লুসিভ কিছু টিপস ও ট্রিক্স ও কাজে লাগাতে হবে পিএসডি টু এইচটিএমএল করতে হলে। আমি এখন আপনাদের সেই এক্সক্লুসিভ ট্রিক্সই দেখাবো।
গ্রিড হচ্ছে বলতে পারেন সীমানা বা বর্ডার নির্ধারন করা। আপনি ফটোশপ এ একটি ইমেজ এর কোন একটি অংশের সীমানা নির্ধারন করতে পারবেন গ্রিড এর সাহায্যে। এতে করে পরে সেই মাপে আপনি ইমেজ টি ক্রপ বা স্লাইস বা মাপ নিতে পারবেন।
গ্রিড ব্যবহার করতে হলে আপনাকে ফটোশপ এ রুলার ইনেবল করতে হবে। এর জন্য প্রথমে যেকোনো একটি ফাইল ওপেন করে নিন, অথবা আমাদের পিএসডি মোকাপ টি ওপেন করুন। এবার View তে গিয়ে Rulers এ ক্লিক করুন। অথবা কিবোর্ড এ CTRL + R চাপুন, তাহলেই রুলার চলে আসবে।
এবার গ্রিড তৈরি করার জন্য রুলার এর উপর ক্লিক করে ড্রাগ করে আপনি যে স্থানে গ্রিড বসাতে চান সেখানে নিয়ে ছেড়ে দিন।
PSD2HTML করতে হলে আমাদের অনেক ক্ষেত্রেই অটো সিলেক্ট ব্যবহার করতে হবে। এই ফিচার টি ফটোশপ এর CS6 ও CC তে আছে। CS5 বা অন্য ভার্সন এ আছে কিনা আমার ঠিক মনে নেই। থাকলেও অন্য সিস্টেম এ থাকতে পারে। কারো জানা থাকলে টিউমেন্ট এ জানিয়ে দিবেন আশা করি।
অটো সিলেক্ট অন করতে টুলস থেকে Move টুল টি সিলেক্ট করুন। শর্টকাট কি V চাপলেও এই টুল টি সিলেক্ট হয়ে যাবে।
এবার উপরের Auto-Select অপশন টি তে টিক দিন।
এই ফিচার এর সাহায্যে আপনি যে স্থানে ক্লিক করবেন সেই লেয়ার টি সিলেক্ট হয়ে যাবে। এতে অনেক সুবিধা আছে, সামনে কাজ করতে গেলেই বুঝবেন।
মারকিউ টুলের সাহায্যে আমরা আমাদের টেম্পলেট এর বিভিন্ন অংশের পরিমাপ নিতে পারবো। এই ফিচার টি আমি ফটোশপ CS6 ও CC তে পেয়েছি। এটি খুবি কাজের একটি ফিচার এবং অনেক কাজে লাগে।
এই অপশন টি CS6 ও CC তে বিল্টিন অবস্থায় থাকলেও এর পরিমাপ inch তে দেখায়। আমাদের দরকার Pixel এ। এর জন্য ছোট একটি সেটিং করতে হবে। ফটোশপ এর টপ বার থেকে Edit > Preferences > Units and Rulers এ ক্লিক করুন।
এবার নতুন যে উইন্ডো আসবে সেখান থেক Ruler অপশন টি কে Pixel করে দিন।
এটি খুবি উপকারি একটি ট্রিক এবং অনেক ক্ষেত্রে এটি কাজে লাগে। বিশেষ করে যখন একাধিক লেয়ার এর ফাইল থাকে এবং সেখান থেকে একসাথে একাধিক লেয়ার এর ইমেজ কপি করতে তখন এটি কাজে লাগে।
একাধিক লেয়ার সহ একটি ইমেজ এর অংশ যদি কপি করতে চান তাহলে মারকিউ টুল এর সাহেজ্যে ইমেজ এর অংশ টুকু সিলেক্ট করুন।
উদাহরন হিসেবে এখানে আমাদের স্লাইডার এর যে ইমেজ টি দেখছেন, সেটি অনেক গুলো লেয়ার এর সমন্যয়।
সেক্ষেত্রে আমরা মারকিউ টুল দিয়ে পুরো স্লাইডার টি সিলেক্ট করবো।
এবার কিবোর্ড এর ctrl+shift+c চাপবো। অথবা Edit মেনু থেকে Copy Merged সিলেক্ট করবো।
এবার ctrl+n চেপে বা File মেনু থেকে New সিলেক্ট করে Clipboard এর পরিমাপে নতুন একটি ডকুমেন্ট খুলবো। এখানে কোন পরিবর্তন করতে হয় না, যা থাকে তাই দিয়ে ওকে করতে হয়।
নতুন ডকুমেন্ট এ ctrl+v চেপে আমরা পেস্ট করলেই আমাদের সম্পুর্ন ইমেজ টি সেখানে চলে আসবে। এবার আমরা এটিকে jpeg বা png ফরমেট এ সেভ করে নিবো।
কিছু কিছু ক্ষেত্রে হয়তো এমন একটি ইমেজ কপি করতে হতে পারে যেটি চারকোনা বা গোল না। অর্থাৎ যেটিকে আমরা মারকিউ টুল দিয়ে সিলেক্ট করতে পারবো না।
এক্ষেত্রে এই ইমেজ টির লেয়ার টি বের করুন। এই ইমেজ এর লেয়ার টি testimonial ফোল্ডার এ comments নামে আছে।
আপনি কিবোর্ড এর ctrl বাটন চেপে ধরে লেয়ার এর বক্স টিতে ক্লিক করুন।
ইমেজ টি সিলেক্ট হয়ে যাবে। এবার কিবোর্ড এর shift+ctrl+c চেপে কপি মার্জড করে নিন।
এবার ctrl+n চেপে নতুন এটি ট্রান্সপেরেন্ট ব্যকগ্রাউন্ড ডকুমেন্ট খুলুন।
এবার নতুন ডকুমেন্ট এ ইমেজ টি পেস্ট করে সেভ করে নিন।
আপাতত এইটুকুই, খুব ছোট কিছু প্রয়োজনীয় ট্রিক্স দেখালাম। ভবিষ্যতে কাজের ক্ষেত্রে হয়তো আরো দেখানো হবে।
পিএসডি ফাইল স্লাইস বলতে আমরা কি বুঝি? পিএসডি ফাইল স্লাইস বলতে বোঝানো হয় একটি পিএসডি ফাইল থেকে প্রয়োজনীয় অংশ বা লোগো বা আইকন কেটে নেয়া হয়। আমি স্লাইস টুল এর সাহায্যে পিএসডি ফাইল কে স্লাইস করানো দেখাবো।
আমাদের পিএসডি ফাইল থেকে যে অংশ গুলো কাটতে হবে সেগুলো আমি নিচের ছবিতে দেখাচ্ছি। আমাদের পিএসডি ফাইলটি থেকে সকল টেক্সট ও অন্যান্য জিনিস রিমুভ করে শুধু মাত্র ইমেজ গুলো, এবং যেই ইমেজ গুলো আমাদের প্রয়োজন হবে সেগুলো এখানে রাখা হয়েছে।
গ্রিড ও স্লাইস টুলের সাহায্যে স্লাইস করাটা তুলনামূলক দ্রুত ও সহজ। তবে এটি সব ক্ষেত্রে ব্যবহার নাও করা যেতে পারে। তবে যেসকল ক্ষেত্রে এটি ব্যবহার করা যাবে, আমরা অবশ্যই সেখানে এই পদ্ধতি ব্যবহার করে স্লাইস করবো।
স্লাইস করতে প্রথমে টেমপ্লেট এর ডিফল্ট গ্রিড গুলোকে হাইড করে নিবো। এর জন্য View তে গিয়ে Clear Guides এ ক্লিক করুন।
এবার আমরা শুধু আমাদের প্রয়োজনীয় ইমেজ গুলো রেখে বাকি সব ইমেজ ও ব্যাকগ্রাউন্ড এর লেয়ার অফ করে দিবো। Layers বক্স থেকে নিচের মত লেয়ার গুলো অফ করে নিন। লেয়ার অফ করতে বাম পাশের চোখের উপর ক্লিক করবেন।
Navigation লেয়ার ফোল্ডার পুরোটা অফ করে দিন। top logo থেকে top bg অফ করবেন। header থেকে নিচের মত লেয়ার গুলো অফ করে নিন।
middle section থেকে নিচের মত লেয়ার গুলো অফ করবেন এবং text box 4 এর মত করে text box 1,2,3 থেকেও একই ভাবে শুধু দুটি টেক্সট ও arrow টি অফ করবেন।
latest works থেকে নিচের তিনটি লেয়ার অফ করবেন
testimonial ও clients থেকে নিচের তিনটি লেয়ার অফ করুন।
bottom box পুরোটা হাইড হবে। footer থেকে নিচের লেয়ার গুলো হাইড করুন।
এবার আমরা পুরো পেজ টিকে গ্রিড করবো। অর্থাৎ আমাদের প্রয়োজনীয় ইমেজ গুলোকে গ্রিড দিয়ে বর্ডার দিবো।
উপরের রুলার থেকে ড্রাগ করে করে প্রতিটা ইমেজ এর উপরে নিচে একদম সঠিক মাপে গ্রিড দিতে থাকুন। মাপের সুবিধার্থে আপনি পেজ টি জুম করে নিতে পারেন।
সবগুলো দেয়া হয়ে গেলে পেজ টি নিচের মত দেখাবে
এবার বাম পাশের রুলার থেকে ড্রাগ করে ইমেজ এর ডানে এবং বামে গ্রিড দিন
সবগুলো হয়ে গেলে পেজ টি নিচের মত দেখাবে। দেখতে খুবি ভয়ংকর লাগছে। খুব বেশি ঘাবড়ে যাবার দরকার নেই 😛
এবার স্লাইস এর কাজ শুরু। এখানেও কিছু ভয়ংকর লুক আছে 😛
বাম পাশের টুলবার থেকে ক্রপ বাটনটি ক্লিক করে ধরে রাখুন, তাহলে একটি নতুন বার ওপেন হবে। সেখান থেকে স্লাইস টুল সিলেক্ট করুন।
এবার উপরের Slice from guide বাটন টি ক্লিক করুন।
এরপর নিচের মত একটি অবস্থা পাবেন
এবার জুম করে করে প্রতিটি ইমেজ কে স্লাইস টুল এর সাহায্যে সিলেক্ট করুন
সবগুলো ইমেজ কে স্লাইস টুল এর সাহায্যে সিলেক্ট করা হলে Layer বক্স থেকে Background লেয়ার টি অফ করে দিন।
তাহলে আপনি নিচের মত একটি ইমেজ পাবেন।
Menu থেকে Save for web সিলেক্ট করুন।
নতুন উইন্ডো তে ইমেজ টি জুম আউট করে পুরো ইমেজ টিকে সিলেক্ট করে নিন।
এবার ডান পাশের বার থেকে প্রেসেট PNG 24 সিলেক্ট করুন।
বাকি অপশন ঠিক রেখে Save এ ক্লিক করুন। এবং একটি নতুন ফোল্ডার করে সেখানে প্রোজেক্ট টি সেভ দিন।
এবার ওই ফোল্ডার এ গেলে Images নামে আরেকটি ফোল্ডার দেখবেন সেটার ভিতরে আপনার স্লাইস করা ইমেজ গুলো সহ আরো অনেক ইমেজ পাবেন। আমরা শুধু প্রয়োজনীয় ইমেজ গুলো রেখে বাকি গুলো ডিলিট করে দিবো।
অপ্রয়োজনীয় ইমেজ গুলো ডিলিট করার পর নিচের ইমেজ গুলো থাকবে।
ব্যস! আমাদের ইমেজ স্লাইস করা শেষ। এবার পিএসডি টু এইচটিএমএল করার সময় আমরা এই ইমেজ গুলো ব্যবহার করবো। এখানে কিছু বিষয় হয়তো নাও বুঝতে পারেন বা কঠিন লাগতে পারেন। ভিডিও দেখলে বিষয় গুলো ক্লিয়ার হয়ে যাবেন আশা করি। তারপরও কোন সমস্যা থাকলে টিউমেন্ট এ জানাবেন।
১ম কোর্স এ আপনারা অনেকেই অনেক প্রশ্ন করেন, এর মদ্ধে অনেক প্রশ্নের উত্তরই টিউমেন্ট এ আমি দিয়েছি। কিন্তু একই প্রশ্নের উত্তর বার বার অথবা সবার প্রশ্নের উত্তর দেয়া হয়নি। তাই গত পর্বের টিউমেন্ট থেকে বাছাই করা কমন কিছু প্রশ্ন ও উত্তর এখানে দেয়া হল।
➡ PSD2HTML করতে হলে আমি ফটোশপ এর কোন ভার্সন ব্যবহার করবো?
আপনি ফটোশপ এ এক্সপার্ট হলে যেকোনো ভার্সন দিয়ে কাজ চালাতে পারবেন। আমি বলবো ফটোশপ CS6 বা CC ব্যবহার করতে।
➡ এইচটিএমএল - সিএসএস লিখতে আমি কোন টেক্সট এডিটর ব্যবহার করবো?
আপনি যেকোনো টেক্সট এডিটর ব্যবহার করতে পারেন। আমার পছন্দ হিসেবে সাজেশন হচ্ছে Notepad++ অথবা Sublime text। নতুন হিসেবে Notepad++ আপনার জন্য একদম সঠিক এবং এটি ফ্রী।
➡ http://notepad-plus-plus.org/
➡ Adobe Dreamweaver দিয়ে কাজ করতে পারবো?
হ্যা পারবেন! তবে আমি এক আমার ব্যক্তিগত এবং কাজের অভিজ্ঞতা থেকে বলছি ড্রিমওয়েভার ব্যবহার না করাই মঙ্গল! কারন হচ্ছে ড্রিমওয়ভার এর কিছু ফিচার রয়েছে যা নতুন হিসেবে আপনার খুব ভালো লাগবে কিন্তু এটি আপনাকে সারাজীবন নতুন ই রেখে দিবে। ড্রিমওয়েভার আপনি একটি কোড অর্ধেক লেখার আগেই সেটিকে পুরো করে দেয়। এতে করে আপনার ওই অর্ধেক লেখারই অভ্যাস হয়ে যাবে। আপনি কোড গুলো মনে রাখতে পারবেন না। তাই আবারো বলছি, ড্রিমওয়েভার থেকে দূরে থাকুন।
➡ আমি এইচটিএমএল পারি, সিএসএস পারি না। আমি কি পিএসডি টু এইচটিএমএল শিখতে পারবো?
না পারবেন না। প্রথমে এইচটিএমএল - সিএসএস ভালো করে শিখে নিন। তারপর পিএসডি টু এইচটিএমএল শেখার চেষ্টা করুন। আর এই টিউন ডিলিট হবে না। সারাজীবন থাকবে। আপনি ৫ বছর পরে চাইলেও এই টিউন গুলো থেকে শিখতে পারবেন। সুতরাং আগে সময় নিয়ে এইচটিএমএল - সিএসএস ভালো করে শিখে নিন।
আরো অনেক প্রশ্ন হয়েছে যেগুলো বেশকিছু অপ্রাসঙ্গিক যার উত্তর দেয়ার প্রয়োজন মনে করি না, বেশ কিছু প্রশ্নের উত্তর এই টিউনেই সমাধান হয়ে গেছে, আর কিছু প্রশ্ন আছে খুবি এডভান্স যেগুলো হয়তো আরো ৩-৪ টা টিউন পর আলোচনা করা হবে। এত ভবিষ্যৎ প্রশ্নের উত্তর এখন না, যখন সেই বিষয় নিয়ে আলোচনা হবে তখন উত্তর দিবো ইনশাল্লাহ।
২য় কোর্স এ পিএসডি ফাইল স্লাইস করা ও ফটোশপ এর বেসিক ও প্রয়োজনীয় কিছু ট্রিক্স নিয়ে আলোচনা করা হয়েছে। আশা করি সবাইকে বুঝাতে পেরেছি। যদি কারো কোন সমস্যা থাকে অবশ্যই টিউমেন্ট এ জানাবেন। আর দয়া করে এই টিউনে যেই বিষয় নিয়ে আলোচনা করা হয়েছে সেটি নিয়ে প্রশ্ন বা টিউমেন্ট করবেন। দূর ভবিষ্যৎ বা অপ্রাসঙ্গিক কোন টিউমেন্ট করবেন না।
আমাদের প্রতি পর্বের পরে একটি করে হোম টাস্ক দেয়া হবে। যেটি আপনারা বাড়িতে প্র্যাক্টিস করে টিউমেন্ট এর মাধ্যমে সাবমিট করবেন।
২য় কোর্স এ আপনাদের জন্য হোম টাস্ক হলোঃ
➡ পিএসডি ফাইলটি স্লাইস করে, স্লাইস করা ইমেজ গুলো একটি ফোল্ডার এ জিপ করুন। জিপ ফাইলটি মিডিয়াফায়ার বা ড্রপবক্স বা কপি তে আপলোড করে টিউমেন্ট এ লিঙ্ক দিন।
➡ কোর্স এ রিলেভেন্ট টিউমেন্ট করে আপনার উপস্থিতি নিশ্চিত করুন। প্রতিটি কোর্স এ আপনার টিউমেন্ট দেখে আপনার এক্টিভিটি বোঝা যাবে এবং এর উপরে ভিত্তি করে কোর্স শেষে সার্টিফিকেট দেয়া হবে। কোন প্রকার অফটপিক টিউমেন্ট কাউন্ট করা হবে না।
প্রশ্ন না করলে কখনোই শেখা যায় না। আজকে যেসব বিষয় টিউনে তুলে ধরা হয়েছে সেসব বিষয়ের উপর প্রাসঙ্গিক ও গঠনমূলক প্রশ্ন করুন। আমি সবার প্রশ্নের উত্তর দিবো ইনশাল্লাহ। যেকোনো বিষয়ে সামান্য খটকা লাগলে বা সমস্যা মনে হলে প্রশ্ন করুন। মনে করবেন না যে আপনার প্রশ্ন পড়ে অন্যরা হাসবে, বরংচ আপনার প্রশ্ন থেকে আপনার মত নতুন আরো দশ জন বিষয়টি শিখতে পারবে এবং বিষয়টি সম্পর্কে জানতে পারবে। খুটে খুটে সমস্যা বের করুন, প্রশ্ন করুন। যে জত বেশি প্রশ্ন করবে সে তত বেশি শিখতে পারবে এবং সফল হতে পারবে।
আগামী কোর্স এইচটিএমএল নিয়ে। প্রথমেই এইচটিএমএল নিয়ে কিছু বেসিক আলোচনা হবে। এরপর পিএসডি ফাইলটিকে এইচটিএমএল এ কভার্ট করা হবে। সবশেষে থাকবে পিএসডি ফাইল কে এইচটিএমএল এ রুপান্তর করার জন্য বিভিন্ন টিপস ও ট্রিক্স!
হাতে ধরে PSD2HTML পুর্নাঙ্গ চেইন কোর্স এ আপনি ভর্তি হয়েছেন তো? না হলে ভর্তি হয়ে যান বিশাল কমিউনিটির এই চেইন কোর্স এ এবং নিজেকে ঝালাই করে নিন PSD2HTML এ!
প্রায় ৩০০০ টিউজিটর ও টিউমেন্টর ভর্তি হয়েছেন বাংলাদেশের এই প্রথম ও সবচেয়ে বড় অনলাইন PSD2HTML পুর্নাঙ্গ কোর্স এ। আপনি বাদ থাকবেন কেন?
কোর্স এ ভর্তি হতে এই টিউনটি দেখুনঃ
➡ নিয়মিত আমার টিউনের আপডেট পেতে চাইলে সাবস্ক্রাইব করুনঃ টেকটিউনস » কম্পিউটার লাভার (ক্লিক করে আপনার ইমেইল দিন এবং ইমেইল থেকে ভেরিফাই করুন)
কম্পিউটার লাভার (রাকিবুল হাসান)
ফেসবুক ~ টুইটার ~ গুগল প্লাস
আমি কম্পিউটার লাভার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 9 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 101 টি টিউন ও 1258 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 20 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
Also known as "Raiku Saiko". React.js & Javascript Developer. Former Wordpress Developer, Front-end Designer. Technology Addicted.
@কম্পিউটার লাভার: ভাই এই কাজের জন্য কি Photoshop cc 12 লাগবে? না অন্য ভরসনে হবে? ধন্যবাদ।
ভাই এতো সুন্দর এবং সাবলীল টিউন করার জন্য আপনাকে অনেক ধন্যবান। আপনার টিউন দেখে আমি সেটা করার চেষ্টা করলাম। দেখে জানাবেন……….
https://www.dropbox.com/s/e83mube6ww2dyht/images.zip
@Rowsun Ahmed: খুবি ভালো হয়েছে। আপনি মনে হয় একটি স্টেপ মিস করেছেন। সাদা ব্যাকগ্রাউন্ড টি হাইড করেন নি, অথবা সেভ করার সময় পুরো ইমেজ টি সিলেক্ট করে প্রিজেট এ PNG 24 সিলেক্ট করেন নি। ভিডিও টি ভালো মত দেখে আবার চেষ্টা করুন।
ধন্যবাদ।
আমার link
https://drive.google.com/file/d/0B0HjsT2UIflXRWhaUUM2T2NsOUk/edit?usp=sharing
ভুল হলে জানাবেন please…..
@anisur: খুবি ভালো হয়েছে। আপনি মনে হয় একটি স্টেপ মিস করেছেন। সাদা ব্যাকগ্রাউন্ড টি হাইড করেন নি, অথবা সেভ করার সময় পুরো ইমেজ টি সিলেক্ট করে প্রিজেট এ PNG 24 সিলেক্ট করেন নি। ভিডিও টি ভালো মত দেখে আবার চেষ্টা করুন।
ধন্যবাদ।
ভাই ভিডিও টিউটোরিয়ালটি youtube এ দিয়ে দিলে খুব ভাল হত। এবং তার লিংক দিলে খুব ভাল হত কারন একবার নামিয়ে নিয়ে সেটা আস্তে আস্তে দেখতে পারতাম। আর আপনি যে বলছেন যে images এর মাপ ঠিক রাখতে হবে আপনি এই মাপ বলতে কি মাপ বুঝিয়েছেন আর একটু বিস্তারিত বললে ভাল হত।
টিউনে দেয়া আছে লিঙ্ক।
➡ Youtube Link: http://www.youtube.com/watch?v=2QKCzlZEIt0
amar jana mate photoshop cs5 babobohar korchi, ami ete marquee tool ta babohar kori sathe window > info tool
eki kaj kore. Jara amarmoto cs5 use korchen tader kaje lagbe.
@কম্পিউটার লাভার Apnakeo onek dhonobad. Apnar tune khub sundor hoche chalijan sathe achi, ami INDIA theke bhaia…
thank you.
আমার ফটোশপ ভার্সন টা মনে হই বদলাতে হবে,
এরপরেই হোম টাস্ক করে আপলোড করতেছি।
আর একটা কথা, মিডিয়াফায়ার বা ড্রপবক্স এই আপলোড করতে হবে? অন্য কোন ভাবে হবেনা…।
@sopnocharini: আপনি যেকোনো জায়গায় আপলোড করতে পারেন। তবে আমার যেন ডাউনলোড করতে সমস্যা না হয় 😛
ধন্যবাদ, শুভকামনা রইলো।
@কম্পিউটার লাভার:
করে ফেলেছি। দেখবেন একটু–
https://www.dropbox.com/s/czuc0nv5zu38gci/2nd%20Home%20Task%20%28Slice%20file%29.rar
যেই ব্যক্তিটি আমাদের সবার জন্য এত কষ্ট করে এই মহান উদ্যোগ নিয়েছেন, আল্লাহ তার সকল নেক আশা পূরণ করুন। (আমিন)……. অনেক অনেক ধন্যবাদ রাকিব ভাই।
আপনাকে অনেক অনেক “ধন্যবাদ” ২য় টিউনটি ভালোভাবে উপস্থাপন করার জন্য। আশা রাখি ভালোভাবে এই পর্বটি প্রাক্টিস করতে পারব, পুর্বের টিউনটা ভালভাবে প্রাক্টিস করেছি। আরেকবার ধন্যবাদ জানাচ্ছি।
Rakib Bhai, Really you are a genius. Another great tunes for new learners. Thanks for your kind co-operation.
অনেক কিছু শিখলাম @ এত সুন্দর করে লিখেছেন না শিখে কি থাকতে পারি ! পরবর্তী টিউনের আশা রইলাম। ধন্যবাদ
প্রতিটা পয়েন্ট খুব সুন্দর হয়েছে। এক্সপার্ট এক্সপার্ট এক্সপার্ট। সামনে এগিয়ে যাও ভাইয়া।
https://www.dropbox.com/s/m14it730z4vh9up/images.zip
vai dekhen to kajta thikmoto korte parlam kina @Computer Lover :p
https://www.dropbox.com/sh/iu5zr350zyttdpx/1hF_hh98gc
many many thanks !!!!!! for ur tune
Here is my uplink for slice images:
https://dl.dropboxusercontent.com/u/210136973/PSD2HTML-images.rar
আপনার টিউন অনেক সুন্দর হয়েছে।
image slice and image copy merge করার মধ্যে পাথক্য কি?
কোনটা বেশি ভালো? দুটো দিয়েই তো আমি image copy করতে পারি।
আমরা কি আমাদের কোন সহজ পিএসডি ফাইলে কাজ করতে পারব। নাকি আপনার ফাইলগুলো ব্যবহার করব। দয়া করেন জানাবেন। টিউটোরিয়াল ভাল হচ্ছে। ধন্যবাদ।
@suXon: এই কোর্স করার জন্য এটি দিয়েই করতে হবে। আপনি নিজে প্র্যাক্টিস এর জন্য যেকোনো পিএসডি ব্যবহার করতে পারেন।
প্রথম টিউনের মেইল নোটিফিকেশন পাই নাই তাই দেরি হয়ে গেলো মনে হয়। Photoshop CC কাল ডাউনলোড করবো। kindly যদি Sublime Text এর Torrent link টা দেন তবে উপকৃত হতাম। টিউন খুব ভালো হয়েছে সেজন্য ধন্যবাদ।
২য় টিঊন টা দেরিতে হলেও অবশেষে অধীর অপেক্ষার অবসান ঘটানোর জন্য ধন্যবাদ না দিয়ে পারলাম না। আপনার সাথে তিন আগেও ফেসবুকে চ্যাটের মাধ্যমে প্রশ্ন করেছিলাম ২য় টিউন টা কবে পাবো।আপনি বলেছিলেন আগামী কাল।সেই থেকে প্রতিদিন গড়ে ২০ বার খোজ নিতাম টেকটিউনে কখন ২য় টিউন টা আসবে।আমার ইচ্ছা ছিল প্রথম কমেন্ট টা আমি করবো।কিন্তু আমার কপাল খারাপ।যেদিন মাঠে গেলাম ধান উঠাতে সেদিনেই আপনি টিউন টা করলেন।সারা শরীরে খুব ব্যাথা,সেই সাথে জ্বর।তারপরেও পারলাম না কমেন্ট না করে থাকতে। একটা বিষয় বুঝতে পারলাম না, শুধুমাত্র স্লাইচ করে ইমেজ গুলো আপলোড করবো নাকি কিভাবে স্লাইচ করলাম এর PSD ফাইল টা আপলোড করবো? আর আমি অনেক আগেই HTML, CSS শিখেছি,PSD to HTML এর উপর ইংরেজি ই বুক ও পড়েছি। কিন্তু তেমন বুঝতে পারেনি।আপনি যেভাবে টিউটোরিয়াল গুলি দিচ্ছেন তাতে মনে হয়,এবার না শিখিয়ে আর ছাড়বেন না। তিন নম্বর টিউন টা তাড়াতাড়ি পাবো আশা রাখি।
@আজিজুল ইসলাম: দুঃখিত টিউন পাবলিশ করতে দেরি করে ফেলেছি বলে।
আপনার স্লাইস করা ইমেজ গুলো একটি ফোল্ডার এ জিপ করে সেটি আপলোড করবেন।
ইনশাল্লাহ শিখে ফেলবেন 🙂 শুভ কামনা রইলো, তৃতীয় টি খুব দ্রুতই পাবেন ইনশাল্লাহ…
@কম্পিউটার লাভার:
https://www.dropbox.com/s/spkvsumzcs1feqm/PSD%20to%20HTML%20Images%20part%202%20by%20Azizul%20Islam.rar
লিঙ্ক টা দিলাম, আশা করি আমার ভুল গুলি ধরিয়ে দিয়ে আমার কাজ কে আরও ভালোভাবে করার ব্যাবস্থা করে দিবেন।
আগামী টিউনে আবার কথা হবে ইনশাআল্লাহ।।
http://hugefiles.net/mc2m9pzq2p3h
লিন্ক দিলাম।
ফটোশপের রুলারে রাইট বাটন ক্লিক করে pixel/inch ইত্যাদি দ্রুত পরিবর্তন করা যায়।
আপনি বলেছেন পিএসডি২এইচটিএমএল শেখার আগে html & css ভাল করে জানতে হবে। আমি ফটোশপ পারি, এইচটিএমএল খুব কম পারি আর সিএসএস তো একদমই নয় 😛 কিন্তু তাই বলে কী আমি মজলিসে বসবোনা! হি হি হি। রাস্তায় না নামলে তো ট্র্যাফিক জ্যাম সম্বন্ধে অভিজ্ঞতা হবেনা। 😀
অসাধারণ হয়েছে…চালিয়ে যাও ভাই ….আমরা তোমার সাথে আছি..আমার মাঝপথে হারিয়ে যেও না।
@মোঃ তৌফিকুল ইসলাম: @মোঃ তৌফিকুল ইসলাম: ইনশাল্লাহ! আপনাদের এরকম সাপোর্ট থাকলে হারিয়ে যাবার প্রশ্নই উঠে না 🙂
রাকিব ভাই, অসাধারণ হয়েছে আপনাকে অনেক অনেক ধন্যবাদ। আমার লিংক টা দেখে জানাবেন কোন ভুল হলে।
https://www.dropbox.com/s/0krq3jywaqsy9n2/images.rar
আমি মোটামুটি html, css, psd to html জানি, প্রজেক্ট দিপ্তর টিউটোরিয়াল থেকে শিখেছি। আরো ভালো করে শিখতে চাই।
আমার কাজ টা দেখুন http://www.4shared.com/rar/4c_PkZr1/images.html
শেখার চেষ্টা চালাচ্ছি http://www.mediafire.com/download/5kndlz1kfdkbbk1/images.zip
একটু দেখবেন। কম্পিউটার লাভার আপনাকে অনেক ধন্যবাদ ।
@Shumon balok: হবে, তবে আপনি এভাবে কয়টি ইমেজ কতবার সেভ করবেন? এর চেয়ে স্লাইস ব্যবহার করা সুবিধাজনক।
ভাই আমি cs5 ব্যবহার করি, যখন কন্ট্রল ধরে কোন লেয়ারে ক্লিক করি লেখা আসে now pixel were selected এবং ঐ লেয়ার সিলেক্ট হয় না।
@basher43: @basher43: আপনি লেয়ার এ ক্লিক করবেন না। লেয়ার বক্স এ, লেয়ার এর নামের পাশে ছোট একটি বক্স আছে। সেখানে ক্লিক করবেন। কন্ট্রোল চেপে লেয়ার এ ক্লিক করলে এই এরর দেখাবেই।
Thanks a lot for part 2
Tutorial part 2 is very nice and excelent. Video part is also nice and clear to understand.
Assignment is here please check it.
https://www.dropbox.com/s/4lrf58v66a1eq3z/images.rar
I have problem to download video. It is not being downloading.
I can download only 236 kB. but nothing is shown here.
Thank u again
@mani1207: ইউটিউব থেকে এই সাইট এর সাহায্যে ভিডিও ডাউনলোড করুনঃ http://en.savefrom.net/
Thank you again for helping me to download video part.
I have downladed video at last.
Thanks
আমি আমার হোম টাস্ক লিঙ্ক: দিলাম- https://www.dropbox.com/s/slkmrsso0y5t8oi/images.7z অনুগ্রহ করে জানাবেন কেমন হল। উত্তরের অপেক্ষায় রইলাম। ধন্যবাদ
Thank You for your Tutorial, here is my HOME TASK-https://www.dropbox.com/s/ncanry5ew4ta9ps/images-Techtunes%20By%20Reza.zip
Waiting for your answer
রাকিব ভাই, আপনাকে অনেক অনেক ধন্যবাদ। এই আমার H.W. link
https://www.dropbox.com/s/5caomn4fa5chyjc/HW2.images.rar
Jotil vai dhakan to kamon hoyca?
https://www.dropbox.com/sh/d2qdya80wonapaf/_iADZKlg-9
I can’t measure a selected portions height and width by adobe photoshop CS5. What is the problem ? Please resolve it….
Thanks for nice tune, To study your tutorial and video, I think someone understood me his best try. Thanks again.
Here my home task link. wait for your response if any error in my home task.
https://www.dropbox.com/s/7e4v5r183n4gdf7/images.rar
আপনি যে ভিডিও রেকর্ডারটি ব্যবহার করেছেন সেটির নাম কি??? জানালে উপকৃত হোতাম… এটাতেকি ডিফল্ট ভাবে কিবোর্ড প্রেস করার সাথে সাথে ওইটা স্ক্রিনে ভেসে ওঠে??? আমার স্লাইস করা ইমেজের ড্রপবক্স লিঙ্কঃ https://dl.dropboxusercontent.com/u/221317826/images.zip
আপনাকে ধন্যবাদ। Images Slices করা ছাড়াও Image Trim করার মাধ্যমেও করা যেতে পারে। Slice করা ভুল হলে বলবেন। Dropbox লিংক:
https://www.dropbox.com/s/i18ell2lgt4quf6/Techtunes_PSD2HTMLCompleteCourse_by_ComputerLover.zip
please find herewith attached link:
https://dl.dropboxusercontent.com/u/237506592/Ali%20reza.zip
৪বার চেষ্টা করে স্লাইস করতে পারছি।
https://www.dropbox.com/s/ipbfpuurhtpi2sn/images.zip
প্রিয় কম্পিউটার লাভার ভাই, আমার ফটোশপ সিএস ৬ দ্বারা ইমেজ স্লাইস করতে Save for web আপশন থেকে সেভ করতে গেলে Adobe save for web error আসে। আর নিচে এই বার্তা আসে The optimized image could not be generated, likely because it is too big and there is insufficient memory. The image will not be displayed.
অনেক কষ্টে ইমেজ ক্রপিং মেথডে ইমেজগুলো জিপ করে পাঠালাম দেখুন-https://www.dropbox.com/s/mbgedbwdmq9fjht/goljar%20Slice%20images.zip?m=
ভাল লাগলে জানাবেন। আমার পদ্ধতিতে কি কোন ভুল ছিল? দয়া করে জানাবেন। আমরা যারা শহর থেকে দুরে বাস করি তাদের তো আর আপনাদের মতো দ্রুত গতির ইন্টার্নেট নেই। ইউটিউব ভিডিও ডাউন লোড লিংক সমুহ রিজিউম সাপোর্টেড হলে ভাল হত। ডাউনলোড করতে গেলে বার বার লাইন ডিসকানেক্ট হয়। তাহলে কোন সম্স্যা হলে বার বার আপনাদের বিরক্ত করতাম না। আমাদের বিয়টি মাথায় রেখে দয়া করে পরবতী টিউটোরিয়ালগুলি করবেন। এমনিতেই আপনার টিউনগুলো অত্যন্ত পরিচ্ছন্ন । বুঝতে কোন অসুবিধা হয়না।
কম্পিউটারে একটা সমস্যা দেখা দেয়ায় উপস্থিতি নিশ্চিত করতে দেরী হয়ে গেল। ইমেজগুলোর মিডিয়া ফায়ার লিঙ্ক:
http://www.mediafire.com/download/pm93d6o826ad5az/project_images.zip
ধন্যবাদ।
আমার হোম টাস্ক এর লিঙ্ক :
https://www.dropbox.com/s/0jb9oev9apx08n7/images.rar
ঠিকঠাক আছেতো? middle section অংশে ছোট ৪টা arrow আছে। এগুলো কি image না?……..আর হ্যা Sublime Text এর লিঙ্ক এর জন্য অনেক ধন্যবাদ।
সত্যি কথা বলতে অনেক আগেই স্লাইস করেছি কিন্তু আপনার টিউনটা গোটা পড়ি নাই, আজ যখন পরের লিসন টিউন খুজতে গেলাম তখন দেখতে পেলাম স্লাইস গুলো আপলোড করাতে হবে, তৎক্ষনাত আপলোড করলাম বস্, দেরী হওয়ার জন্য সরি, এরপর আর দেরী হবে না ইন্ শাল্লাহ্ । https://dl.dropboxusercontent.com/u/33313181/image.zip , পরের লিসনের অপেক্ষায় রইলাম। একটা কথা না বল্লেই নয়, যে ভাবে সুন্দর করে শেখানো হচ্ছে, ইন্ শাল্লাহ্ শিখতে পারবো।
প্রথম হোম টাস্কে কিছুটা সমস্যা ছিল বলে মনে হয় । তাই আবার দিলাম ।আমার নতুন হোম টাস্ক এর লিংক
https://www.dropbox.com/s/by96ht95v2ek7hs/images.zip
পুরোনো লিংক- https://www.dropbox.com/s/mbgedbwdmq9fjht/goljar%20Slice%20images.zip?m=
would you please give description about span tag. what it do and why i will use it ? Thanks for wonderful tutorial. Good luck.
i joined ur course but i can’t write bengoli so sorry but i really say nice tune.
im from india and im also complete BCA
so this is not hard for me but i check out myself
My home task…..Please check & comment.
https://drive.google.com/folderview?id=0B1br0i0oMS5DM3BRemlnNldMMk0&usp=sharing
Oppss…. Deri hoe galo… Home task upload korte….. Uploader Dropbox url niche dilam. 🙁
আমি সবসময় ব্যাকবেঞ্চের স্টুডেন্ট। তাই হোমওয়ার্ড সবার শেষে জমা দিলাম 😛
আসলে তোমার টিউন পিসিতে সেইভ করে রাখি । অনেক বড় টিউন, অনেক কিছু শিখার আছে তাই অনেক মনোযোগ দিয়ে সময় নিয়ে পড়ি। সেই সময়টা বের করতেই একটু দেড়ি হয়ে যায়।
আমার হোম টাস্কঃ http://www.datafilehost.com/d/6ff73b79
ঠিক মত করলাম কি না জানাও।
কিছু প্রশ্ন ছিলোঃ-
১. গ্রিড ছাড়াই খুব সুন্দর ভাবে, সহজ ভাবে শুধু স্লাইড টুল দিয়েই ইমেজ গুল সিলেক্ট করে সেইভ করা যায়। তাহলে কেনো গ্রিড ব্যাবহার করলাম? গ্রিড না ব্যাবহার করে যদি আমি শুধু স্লাইসটুল দিয়েই সিলেক্ট করতে চাই তাহলে কোনো সমস্যা আছে?
২. আমরা Jpeg এর বদলে PNG-24 সিলেক্ট করলাম কেনো?
৩. Save As Web ছাড়া অন্য কোনো ভাবে ইমেজগুল সেইভ করা যায়? কীভাবে? করলে সমস্যা আছে?
৪. ইমেজগুল আমরা কেনো সেইভ করলাম? এগুল মূল পেইজে ইমেজ হিসেবেই থাকবে?
৫. ক্লায়েন্ট সেকশনটায় কী ৬ টায় মিলে একটা ইমেজ? এগুলর আলাদা আলাদা লিঙ্ক হবে না?
একটা সমস্যা এবং একটু পরমর্শঃ
টিউনটা অনেক বড়। এই পেইজটা প্রায় ৮ মেগাবাইটের। কমেন্ট করার পর, কমেন্ট দেখতে হয়ে পেইজ আবার লোড করতে হয়। আমার মত লিমিটেড নেটওয়ালাদের জন্য এটা একটা সমস্যা। এটাকে একটু হাল্কা করা যায়?
কিছু কিছু ইমেজ একটু ক্রপ করে বারতি অংশ কেটে দিতে পারো যেগুলোর কোনো দরকার নেই। যেমন লেয়ারের বেশীরভাগ ইমেজে নিচে blank একটা বারতি অংশ আছে।
আবার কিছু কিছু ইমেজ খুবই ইমপর্টেন্ট। যেগুলো বড় রেজুলুশন ছাড়া সমস্যা হয়। সেগুলোর বড় ছবির একটা লিঙ্ক দিয়ে দিতে পারো। যেমন “সবগুলো দেয়া হয়ে গেলে পেজ টি নিচের মত দেখাবে” এই লাইনে পরের ইমেজটার রেজুলুশন কম। কিন্তু আমি গ্রিড ঠিকভাবে দিয়েছি কি না তা চেক করার জন্য এই ইমেজটার ভাল রেজুলুশন দরকার ছিলো।
ধন্যবাদ দিয়ে ছোটো করতে চাই না। তৃতীয় পর্ব পড়তে গেলাম 🙂
আপনার লেখাগুলো সহজ হওয়াতে পড়তে মন চায়। বুঝে বুঝে পড়া যায়। ধন্যবাদ আমাদের জন্য এত কষ্ট করার জন্য।
ভাই দেখেন ঠিকঠাক মত হইছে কি না??????????
https://www.dropbox.com/s/3rvkkvm6p0v92gq/Images.zip
https://www.dropbox.com/s/7mx093dng9wb6lv/Desktop.rar
vai dekhento tik ase kina?
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
Long tune but successfully published. Thanks for everything you did. Though painful but will be fruitful if minimum 100 students successfully complete this course. Hope to see success.