সবাইকে স্বাগতম জানাচ্ছি হাতে ধরে PSD2HTML পূর্ণাঙ্গ চেইন কোর্স এর প্রথম পর্বে। অবশেষে আপনার সকলের অপেক্ষার বাঁধ ভেঙ্গে শুরু হলো চেইন টিউনের ১ম পর্ব এবং ইনশাল্লাহ পর্যায়ক্রমে কোর্স চলতে থাকবে।
বিশ্বের সবচেয়ে বড় বাংলা সৌশাল নেটওয়ার্ক - টেকটিউনস এর মাধ্যমে দেশের সর্বপ্রথম অনলাইন ভিত্তিক পূর্ণাঙ্গ কোর্স - "PSD2HTML পূর্ণাঙ্গ চেইন কোর্স"। PSD2HTML পূর্ণাঙ্গ চেইন কোর্সএর প্রথম ঘোষণায় আপনাদের এত বেশি সাড়া পাবো তা কখনো কল্পনা করিনি। অবাক করা হলেও সত্যি এ পর্যন্ত এই কোর্স এ ২৫০০+ মানুষ ভর্তি হয়েছেন! এমনকি এই চেইন কোর্সের ঘোষণা করে যে টিউনটি করা হয় সেটিতে টেকটিউনস এর ইতিহাসে সবচেয়ে বেশি টিউমেন্ট হয়। এর জন্য ধন্যবাদ টা আপনাদেরই দিতে হবে। আপনাদের সহযোগিতার কারনেই এই চেইন কোর্সটি সফল ভাবে শুরু করতে পারছি এবং শেষ ও করতে পারবো ইনশাল্লাহ!
আপনাদের এতো বেশি সাড়া ও সহযোগিতা আমাকে দিয়েছে অনেক বেশি অনুপ্রেরণা ও শক্তি। সেই শক্তি নিয়েই আজ লিখতে বসেছি "হাতে ধরে PSD2HTML পূর্ণাঙ্গ চেইন কোর্স" এর প্রথম পর্ব।
ইতিমধ্যেই অনেকে জানতে চেয়েছেন কি কি সফটওয়্যার লাগবে, বা কি কি জানা থাকতে হবে ইত্যাদি। আমি এসব বিষয় এই পর্বে আলোচনা করবো।
➡ পিএসডি টু এইচটিএমএল পরিচিতি
যেখানে আপনি শিখবেন PSD to HTML (পিএসডি টু এইচটিএমএল) কি?, PSD to HTML (পিএসডি টু এইচটিএমএল) করতে কি জানা থাকতে হয়? PSD to HTML (পিএসডি টু এইচটিএমএল) কিভাবে করতে হয়?, PSD to HTML (পিএসডি টু এইচটিএমএল) করতে কি কি প্রয়োজন?
➡ পিএসডি টু এইচটিএমএল কোর্সের প্রজেক্ট ফাইল
এখানে আমার আমাদের কোর্সের জন্য প্রয়োজনীয় প্রজেক্ট ফাইল ডাউনলোড করব
➡ পিএসডি মোকাপ পরিচিতি
এখানে আমরা আমাদের মোকাপ PSD ফাইলে কী কী অংশ আছে তা পর্যবেক্ষণ করবো যাতে আমরা সম্পূর্ণ ভাবে পূর্ব পরিকল্পনা করে ফেলতে পারি যে আমরা কীভাবে আমাদের PSD ফাইলকে HTML এ রুপান্ত করতে পারবো।
পিএসডি টু এইচটিএমএল হচ্ছে একটি পিএসডি বা ফটোশপ ওয়েব টেমপ্লেট থেকে এইচটিএমএল ওয়েব এ রুপান্তর করা। অর্থাৎ, ফটোশপ এ একটি ওয়েবসাইট এর অবয়ব তৈরি করা থাকবে, সেটিকে সম্পূর্ণ এইচটিএমএল - সিএসএস ওয়েবসাইট এ রুপান্তর করতে হবে। পিএসডি ফাইল টি শুধু একটি ছবির মত। এটিতে ওয়েবসাইট এর কোন ফিচার থাকে না। অর্থাৎ এটি একটি ওয়েবসাইট এর মত কাজ করে না। সেটিকে এইচটিএমএল - সিএসএস এ রুপান্তর করলে সেটি একটু পরিপূর্ণ ওয়েবসাইট হিসেবে কাজ করে এবং ওয়েবসাইট এর সকল ফিচার থাকে। এখানে পিএসডি ফাইল টি দেখে দেখে সম্পূর্ণ পিএসডি ফাইল এর মত দেখতে ওয়েবসাইট তৈরি করতে হয়।
পিএসডি টু এইচটিএমএল করার জন্য সাধারণ কিছু বিষয় সম্পর্কে ধারনা থাকতে হয়। বিষয়গুলো নিম্নরুপঃ
এ কয়টি বিষয় সমন্ধে ধারনা থাকলেই চলবে। আর আমি এই টিউটোরিয়াল একদম বেসিক থেকে ছোট ছোট বিষয় গুলো সহ সুন্দর করে বুঝিয়ে দেয়ার চেষ্টা করবো। তাই আশা করছি কোন সমস্যা হবে না। আর হলেও আমি আছি সবসময়.
পিএসডি টু এইচটিএমএল করতে হলে কয়েকটি ধাপ পালন করতে হয়। নিচে সেগুলো বুলেট পয়েন্ট আকারে লিখলামঃ
পিএসডি টু এইচটিএমএল করতে একটি টেক্সট এডিটর, ফটোশপ এর লেটেস্ট একটি ভার্সন, একটি ওয়েব ব্রাউজার এবং ইন্টারনেট কানেকশন থাকলেই যথেষ্ট 😀 টেক্সট এডিটর বলতে বোঝানো হয়ে এমন একটি সফটওয়্যার যা দিয়ে সাধারণ টেক্সট এডিট করা যায়। যেমন উইন্ডোজ এর সাথে ডিফল্ট ভাবে যেটা থাকে "Notepad" যদি অতিরিক্তি কিছু ফিচার চান তাহলে "Notepad+" ব্যবহার করতে পারেন। এতে এইচটিএমএল, সিএসএস এর জন্য সিন্টেক্স হাইলাইটার সহ আরো সুন্দর কিছু ফিচার আছে। অথবা আপনি আপনার পছন্দের যেকোনো টেক্সট এডিটর ব্যবহার করতে পারেন। যেমন আমি ব্যবহার করি "Sublime Text 3"। ফটোশপ এর লেটেস্ট ভার্সন বলতে বোঝানো হয়েছে মোটামোটি লেটেস্ট। একদম লেটেস্ট হতে হবে এমন কোন কথা নেই! এই টিউটোরিয়াল এ আমি অবশ্যি Adobe Photoshop CC ব্যবহার করবো। তবে আপনি CS5 বা CS6 দিয়ে ও কাজ চালাতে পারবেন। ওয়েব ব্রাউজার হচ্ছে মোজিলা ফায়ারফক্স, গুগল ক্রোম, ইন্টারনেট এক্সপ্লোরার ইত্যাদি। এর যেকোনো একটি থাকলেই চলবে। তবে ইন্টারনেট এক্সপ্লোরার থেকে দূরে থাকাই স্বাস্থের জন্য উপকারি। আপনি মোজিলা বা ক্রোম এর সর্বশেষ ভার্সন ব্যবহার করতে পারেন। আর ইন্টারনেট কানেকশন? তেমন একটা প্রয়োজন পরবে না, তবে টুকটাক কাজে হুটহাট দরকার পরতে পারে 😀
হাতে ধরে PSD2HTML পূর্ণাঙ্গ কোর্সে আমরা নিজের PSD ফাইলকে একটি ভ্যালিড HTML ফাইলে রুপান্তর করব। নিচের এই PSD ফাইলটি হচ্ছে আমাদের কোর্সের প্রোজেক্ট ফাইল।
প্রথম পর্ব তো, তাই পরিচয় টরিচয় দিয়েই কাটিয়ে দেই;) আমি যেই পিএসডি ফাইল টি নিয়ে কাজ করবো সেটির সাথে আপনাদের পরিচয় করিয়ে দিবো 😀 এর আগে প্রথমে পিএসডি টেমপ্লেট টি ডাউনলোড করে নিনঃ
ডাউনলোড করলে একটি জিপ ফাইল পাবেন। এর ভেতর তিনটি ফাইল আছে। একটি পিএসডি ফাইল, যেটি নিয়ে আমরা মুলত কাজ করবো। আরেকটি জিপ ফাইল, যেটির ভেতরে প্রয়োজনীয় কিছু ফন্ট আছে। এই জিপ টা এক্সট্রাক্ট করে ফন্ট গুলো C:\Windows\Fonts এ কপি করুন। আরেকটি প্রিভিউ ইমেজ। এই প্রিভিউ ইমেজ টি ভাল করে দেখে নিন।
আপনার কোর্স শিখার সুবিধার জন্য আপনি একটি নির্দিষ্ট ফোল্ডার তৈরি করুন যেখানে আপনি এই কোর্সের সকল ফাইল রেখে কাজ করবেন। ফোল্ডারের নাম দিন Techtunes_PSD2HTMLCompleteCourse_by_ComputerLover এর ভিতরে আরও একটি ফোল্ডার তৈরি করুন নাম দিন Project Files ডাউনলোড করা প্রজেক্ট ফাইল গুলো সেখানে রাখুন।
এখন আমরা আমাদের মোকাপ PSD ফাইলে কী কী অংশ আছে তা পর্যবেক্ষণ করবো যাতে আমরা সম্পূর্ণ ভাবে পূর্ব পরিকল্পনা করে ফেলতে পারি যে আমরা কীভাবে আমাদের PSD ফাইলকে HTML এ রুপান্ত করতে পারবো।
উপরের ছবিটি ভাল করে লক্ষ করুন। এর বৈশিষ্ট্য গুলো লক্ষ করুন। দেখুন, এটি মুলত ৫ টি অংশে বিভক্ত। প্রথমে হেডার অংশ, এরপর স্লাইডার অংশ, সার্ভিস অংশ, কন্টেন্ট অংশ, ফুটার অংশ। কন্টেন্ট অংশ টি আবার চার ভাগে বিভক্ত। সর্বশেষ কাজ, টেস্টিমনিয়াল, ক্লায়েন্টস, ডাউনলোড বক্স। সম্পূর্ণ পেজ টির ব্যাকগ্রাউন্ড সাদা। হেডার অংশের ব্যাকগ্রাউন্ড ধূসর রঙ। স্লাইডার এর ব্যাকগ্রাউন্ড টি হালকা নিল বা একুয়া (Aqua)। সার্ভিস এবং ফুটার এর ব্যাকগ্রাউন্ড ও ধূসর রঙ। এর ফিচার সমন্ধে ধারণা করা যাচ্ছে এটি ড্রপডাউন নেভিগেশন মেনু হবে। একটি স্লাইডার হবে, যেটিতে ৫ টি ইমেজ স্লাইড করবে। আর তেমন কোন স্পেশাল ফিচার নেই।
ডাউনলোড করা জিপ ফাইল টি এক্সট্রাক্ট করে যে পিএসডি ফাইল পাবেন, সেটি ফটোশপ এ ওপেন করুন। ওপেন করে ফাইল টি ভাল মত দেখুন।
কিছু একুয়া রঙের লাইন দেখতে পারছেন, এগুলো হচ্ছে গ্রিড। এগুলো দিয়ে পরিমাপ ঠিক করা হয়। বলতে পারেন এগুলো পিএসডি ফাইল টির বর্ডার। পিএসডি ফাইল টি স্লাইস করার সময় এগুলো কাজে লাগে। স্লাইস করার সময় যেন সাইজ ছোট বড় না হয়, তখন এগুলো সাহায্য করে।
লেয়ার গুলো দেখলে দেখবেন কতগুলো ফোল্ডার এর মত আছে। এগুলো আসলে প্রতিটা অংশকে আলাদা ফোল্ডার করে রাখা আছে। যেন স্লাইস করতে বা কাজের সময় সুবিধা হয়। ফোল্ডার গুলো এক্সপেন্ড করলে দেখবেন প্রতিটা লেয়ার আলাদা করে দেখে যাচ্ছে। নিচের স্ক্রিন শট টি দেখুনঃ
প্রতিটা আইকন, লোগো, টেক্সট, ভেক্টর, ব্যাক্রগ্রাউন্ড আলাদা লেয়ার এ বিভক্ত। এবং প্রতিটি অংশের লেয়ার কে আলাদা ফোল্ডার করে ভাগ করে রাখা হয়েছে।
হেডার এর বাম পাশে রয়েছে লোগো। ডান পাশে নেভিগেশন মেনু। নেভিগেশন মেনু টি হবে ড্রপডাউন। Services ও Portfolio এই দুইটি মেনু তে ড্রপডাউন মেনু থাকবে। এই দুইটি মেনুর উপরে মাউস নিলেই আরেকটি মেনু আসবে। যেমনটি নিচের স্ক্রীন শট এ দেখা যাচ্ছে। Web Design, WordPress Design etc.
ইমেজ স্লাইডার টিতে ৫ টি ইমেজ থাকবে। এবং ইমেজ গুলো একটি নির্দিস্ট সেকেন্ড পরপর বিভিন্ন ইফেক্ট এ পরিবর্তন হবে।
এখানে সার্ভিস গুলো থাকবে। প্রতিটা সার্ভিস এর একটা টাইটেল, টাইলের এর আগে একটা আইকন থাকবে। নিচে কিছু টেক্সট এবং একটি আইকন সহ রিড মোর লিঙ্ক থাকবে।
ওয়েব পেজ এর কন্টেন্ট থাকবে। এটি ৪ টি ভাবে বিভক্ত। প্রথমে Latest Works. যেখানে সম্প্রতি কিছু কাজের থাম্বনেইল থাকবে। টেস্টিমোনিয়াল অংশে একটি টেস্টিমোনিয়াল থাকবে। ক্লায়েন্টস অংশে কয়েকটি ক্লায়েন্ট কোম্পানির লোগো থাকবে। এবং নিচে একটি ডাউনলোড বক্স, যেখানে একটি বড় ডাউনলোড বাটন থাকবে।
এখানে ফুটার কন্টেন্ট থাকবে। প্রথমে ওয়েবসাইট সম্পর্কে কিছু তথ্য About Us সেকশন এ থাকবে, Explore এ কিছু প্রয়োজনীয় লিঙ্ক। Browse এ ও কিছু লিঙ্ক। Contact Us এ যোগাযোগ ঠিকানা। Connect with Us এ সোসিয়াল প্রোফাইল গুলো আইকন এ লিঙ্ক থাকবে। নিচে বাম পাশে কপিরাইট টেক্সট ও ডান পাশে লোগো।
আপনাদের অনেক টিউমেন্ট এ ভিডিও টিউটোরিয়াল এর জন্য আবদার করা হয়। তখন আমি ভেবে চিন্তা প্রতি টিউনের সাথে ভিডিও টিউটোরিয়াল দেয়ার কথা চিন্তা করি। এই জন্যই দ্বিতীয় পর্ব প্রকাশ হতে দেরি হচ্ছে। ইনশাল্লাহ খুব দ্রুত ভিডিও টিউটোরিয়াল সহ দ্বিতীয় পর্ব ও চলে আসবে।
➡ Youtube Link: http://www.youtube.com/watch?v=_mUVVEWayDs
প্রথম পর্বের ভিডিও টিউটোরিয়াল টি কেমন হয়েছে টা দেখে টিউমেন্ট এ জানাবেন। তাহলে পরবর্তিতে আরো ভাল করার চেষ্টা করা হবে।
প্রথম পর্বে আমি মোটামোটি কোর্স টির পরিচিতি ও পিএসডি ফাইল টি সম্পর্কে বিস্তারিত বলার চেষ্টা করেছি। আশা করছি এ পর্বে যা যা বলা হয়ে তা বুঝতে সমস্যা হয় নি। যেকোনো সমস্যা হলে অবশ্যই টিউমেন্ট করে জানাবেন। আমি সমাধান করার চেষ্টা করবো। আগামী পর্বে পিএসডি ফাইল টি কিভাবে স্লাইস করবেন তা দেখাবো। আজ তাহলে এ পর্জন্তই। আশা করছি সবাই সাথে থাকবেন এবং টিউন কেমন হলো জানাতে ভুলবেন না। কারো কোন অভিযোগ বা পরামর্শ থাকলে নির্দিধায় জানাবেন।
আমাদের প্রতি পর্বের পরে একটি করে হোম টাস্ক দেয়া হবে। যেটি আপনারা বাড়িতে প্র্যাক্টিস করে টিউমেন্ট এর মাধ্যমে সাবমিট করবেন। যেহেতু এটি প্রথম পর্ব, তাই তেমন কোন হোম টাস্ক দিচ্ছি না। পুরো পিএসডি ফাইল টি ভাল করে দেখে আপনি কি বুঝলেন, কি বুঝলেন না এবং ২-১ টি প্রশ্ন টিউমেন্ট করে জানান। এটি কোর্স এ আপনার উপস্থিতি প্রমাণ করবে।
➡ কোর্স এ রিলেভেন্ট টিউমেন্ট করে আপনার উপস্থিতি নিশ্চিত করুন। প্রতিটি কোর্স এ আপনার টিউমেন্ট দেখে আপনার এক্টিভিটি বোঝা যাবে এবং এর উপরে ভিত্তি করে কোর্স শেষে সার্টিফিকেট দেয়া হবে। কোন প্রকার অফটপিক টিউমেন্ট কাউন্ট করা হবে না।
প্রশ্ন না করলে কখনোই শেখা যায় না। আজকে যেসব বিষয় টিউনে তুলে ধরা হয়েছে সেসব বিষয়ের উপর প্রাসঙ্গিক ও গঠনমূলক প্রশ্ন করুন। আমি সবার প্রশ্নের উত্তর দিবো ইনশাল্লাহ। যেকোনো বিষয়ে সামান্য খটকা লাগলে বা সমস্যা মনে হলে প্রশ্ন করুন। মনে করবেন না যে আপনার প্রশ্ন পড়ে অন্যরা হাসবে, বরংচ আপনার প্রশ্ন থেকে আপনার মত নতুন আরো দশ জন বিষয়টি শিখতে পারবে এবং বিষয়টি সম্পর্কে জানতে পারবে। খুটে খুটে সমস্যা বের করুন, প্রশ্ন করুন। যে জত বেশি প্রশ্ন করবে সে তত বেশি শিখতে পারবে এবং সফল হতে পারবে।
আগামী কোর্স পিএসডি স্লাইস নিয়ে। আগামী পর্বে পিএসডি ফাইল স্লাইস করা শেখানো হবে। ফটোশপ এ একটি পিএসডি ফাইল কে কিভাবে স্লাইস করতে হয়, পিএসডি ফাইল থেকে কিভাবে প্রয়োজনীয় ইমেজ, আইকন, লোগো নিতে হয়, কিভাবে পিএসডি ফাইল এর একটি অংশের নির্ভুল পরিমাপ নেয়া যায় ইত্যাদি। অর্থাৎ আগামী পর্ব পুরোটাই হচ্ছে ফটোশপ এর উপর। যারা ফটোশপ ভালো পারেন তাদের কোন সমস্যা হবার কথা না, যারা মোটামোটি জানেন তাদের ও সমস্যা হবে না আশা করি। কারন আমি খুবি বেসিক থেকে সহজ ও সুন্দর ভাবে বুঝিয়ে দিবো। যারা একদমই ফটোশপ এর কিছু জানেন না, তাদের একটু কষ্ট হতে পারে, তবে আশা করছি কাজ চালিয়ে নিতে পারবেন।
সে পর্যন্ত ভালো থাকবেন। 🙂
হাতে ধরে 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.
ভাই ইমেজ স্লাইডারটি করতে কি জাভা স্কিপ্ট ব্যবহার করতে হবে ?
আর আমার ফটোশপ নিয়ে একটি সমস্য –
ফটোশপে যে গ্রিট ব্যবহার করা হয়েছে , তার পরিমাপটি আমি ঠিকমত বুঝতে পারছিনা ।
এই গ্রিটটি কি px দ্বারা প্রকাশ করা হয় না কি in না কি mm কোনটি । আর এটির মাপ কি সিএসএস এর মত px দ্বারা চেন্জ করা যাবে বা গ্রিটটির মাপে আমি কিভাবে সিএসএস এর মাপ নির্নয় করব ??
দয়া করে একটু বিস্তারিত বলবেন ।।।
@bditblog.com: ইমেজ স্লাইডার টি করতে আমরা একটি রেডিমেড প্লাগিন ব্যবহার করবো। জাভাস্ক্রিপ্ট বা জেকুয়েরি জানার প্রয়োজন নেই।
পিএসডি ফাইলের গ্রিড টি পিক্সেল হিসেবে করা হয়েছে। এটির পরিমাপ সংক্রান্ত বিষয় গুলো আগামী পর্বে তুলে ধরা হবে। আশা করি তখন আপনার সমস্যার সমাধান হবে।
ধন্যবাদ।
very nice … it would be better if youpls upload video of each tutorials …. Thanks …
@a.r.rupom: আপনার প্রস্তাব টা মাথায় রাখলাম। সবকিছু ঠিক থাকলে চেষ্টা করবো।
ধন্যবাদ।
যেহেতু পরের পর্ব ফটোশপের উপর তাই আমার প্রশ্ন ফটোশপে গ্রিড আয়াত্ত করার জন্য এর উপর কি ভাল কোন ওয়েব সাইট বা টিঊটোরিয়াল পাওয়া যাবে এবং পিএসডি মোকাপ নিজে তৈরি করার ক্ষেএে বিভিন্ন রকম ওয়েব সাইটের SIZE কিভাবে পাওয়া সম্ভব?
@আশিকুর রহমান: ফটোশপ এর গ্রিড নিয়ে এই পোস্ট টি দেখলে ক্লিয়ার হবেন আশা করিঃ
http://www.smashingmagazine.com/2011/11/09/establishing-your-grid-in-photoshop/
ওয়েবসাইট এর একটি স্টান্ডার্ড সাইজ আছে। 965px এছাড়া এটি আপন 1000px এর আশেপাশে রাখতে পারেন। যেহেতু এটি রেসপন্সিভ ডিজাইন এর ট্র্যান্ড তাই এখন অনেক ওয়েবসাইট ফুল উইথ হয়, অথবা উইথ অনেক বেশি হয়। ছোট ডিভাইস এর ক্ষেত্রে সেটি রেস্পন্সিভ হয়ে যায়।
ধন্যবাদ আপনাকে।
@ধীমান সরকার বাপ্পী: ঠিক এরকম কোন স্লাইডার নেই, এটি কাস্টোম বানাতে হয়। তবে আমি এই কোর্স এ নিভো স্লাইডার কে কাস্টমাজ করে কিছুটা এরকম দেখতে করবো। আপনি “Nivo Slider” ব্যবহার করতে পারেন।
এত গুছিয়ে লেখকরাও লিখতে পারেন কিনা আমার সন্দেহ….
খুবই ভাল লাগলো।
আমরা Sublime Text 3 ব্যবহার করবো, নাকি Notepad++ ব্যবহার করবো?
আর পরবর্তি লেকচার কবে হবে????
@DFahad: অবশ্যই পারে 🙂 ধন্যবাদ আপনাকে প্রশংসার জন্য!
আপনি যেটা ব্যবহারে অভ্যস্ত অথবা আপনার কাছে ব্যক্তিগত ভাবে যেটা ভালো লাগে, সেটাই ব্যবহার করুন। আগামী পর্ব ৪-৫ দিন পর প্রকাশ করা হবে। প্রতি পর্বই ৪-৫ দিন অন্তর অন্তর প্রকাশ করা হবে।
@রংগন: আমার এই টিউনটি ফলো করে দেখতে পারেন। এখানে সম্পুর্ন গাইডলাইন দেয়া আছে।
https://www.techtunes.io/web-design/tune-id/205764
ধন্যবাদ।
খুবই ভাল লাগলো।আর পরবর্তি লেকচার কবে হবে????ভাই ইমেজ স্লাইডারটি করতে animation ব্যবহার করতে parbo ki? Pani amader jonno onek korcen But vaiya apnar kace ekta requist. Jani bola ta thek hobe na, Tar por o nabele thakte parlam na. Vaiya apni jodi apnar next tutorial ta video banaten tahole onek valo hoto. Plese Don’t mind and Think about us…..
amra kisu lok ache je amra valo kore photoshop bujbona and also HTML,CSS jodi video hoy tahole amader jonno khub upokar hoy.Amar mone hoy je amar jathe onek-e ek moth hoben.
Thank You
NiR Khan
[email protected]
@Nir Khan: ৪-৫ দিন অন্তর অন্তর নতুন পর্ব প্রকাশিত হবে।
হ্যা, ইমেজ স্লাইডার এ এনিমেশন থাকবে।
আমি চেষ্টা করছি ভিডিও করতে। আপনার প্রস্তাব মাথায় রইলো।
ধন্যবাদ।
Thank you, I have read this post and very helpfull for me. I am waiting for next post.
Computer lover, is a great inspiration for us. Thanks brother, I wanna learn template design from you.
আমার একটা প্রশ্ন , টিউন ই যখন করলেন , পূর্বে ইমেইল নিয়া কি করলেন জানতে পারি ?
@মোঃ নাজমুস সাকিব: ইমেইল প্রয়োজনেই নেয়া হয়েছে। প্রতিটি পর্ব প্রকাশ হবার পর আপনার ইমেইল এ নোটিফিকেশন চলে যাবে। কোর্স শেষে আপনার ইমেইল এ একটি পিএসডি ফাইল দেয়া হবে। যেটিকে এইচটিএমএল-সিএসএস এ কনভার্ট করে জমা দিলে আপনি সার্টিফিকেট পাবেন। আর সার্টিফিকেট টিও ইমেইলেই দেয়া হবে।
আর আপনার ইমেইল ও কোন প্রকার স্প্যামিং করা হবে না বা হ্যাক ও হবে না। নিশ্চিন্তে থাকতে পারেন।
ধন্যবাদ।
ধন্যবাদ দিয়ে আপনাকে ছোট করতে চাই না। এক কথায় ফাটাফাটি “BOSS” ।
আমার একটা প্রশ্ন ছিল “আমি photoshop 7 ব্যব্হার করি তো এটা দিয়ে কি আমি করতে পারব? নাকি CS5 install করতে হবে জানাবেন। আগামি পর্ব কবে পাবো?
অপেক্ষায় রইলাম।
@samir01: ফটোশপ ৭ টা অনেক পুরোন হয়ে যায়। যদি আপনি ফটোশপ ভালো পারেন তাহলে সমস্যা হবে না। যদি মোটামোটি জানেন তাহলে CS6 বা CS5 টা ইন্সটল করে নিন, তাহলে আমাকে ফলো করতে পারবেন।
আগামী পর্ব ৪-৫ দিন পর প্রকাশ হবে। ধন্যবাদ।
আপনার পুরো লিখাটি মুখস্ত করলাম। খুব ভাল লাগল।
** দয়া করে ”ফটোসপ সিসি” এর লিংক টা দিবেন।
প্রশ্ন হচ্ছে : ১। ইমেজ স্লাইড কিসের মাধ্যমে দিতে হয়? এইচটিএমএল, সিএসএস দ্রারা কি ইমেজ স্লাইডার দেওয়া যায়?
২। ফটোশপের গ্রিড এর মাপ কিভাবে নিতে হয়?
@SHAHIDUL_GAZIPUR: এখান থেকে টরেন্ট দিয়ে ডাউনলোড করুনঃ
ইমেজ স্লাইডার একটি জাভাস্ক্রিপ্ট – জেকুয়েরি প্লাগিন এর মাধ্যমে দিবো। এইচটিএমএল – সিএসএস দিয়ে ইমেজ স্লাইডার দেয়া যায় তবে সেটি স্লাইডার হিসেবে কাজ করবে না। শুধু মাত্র স্লাইডার এর যায়গা টি পুরন করবে। আর এটিকে কাজ করানোর জন্যই প্লাগিন ব্যবহার করবো।
ফটোশপ এর গ্রিড এর মাপ নেয়া আগামী পর্বে দেখানো হবে।
অসাধারণ । ইনশাল্লাহ শেষ অবদি আছি। আর ভাই, একটা request, পর্ব গুলো যদি আরও দ্রুত দিতেন।
@ফয়সাল রিমন: আমি ৪-৫ দিন পর পর দেয়ার চেষ্টা করবো। যদি আরো আগে চান তাহলে টিউনের মান ভালো থাকবে না। আমার ব্যক্তিগত জীবন সামাল দিয়েই টিউন লিখতে হয়। সুতরাং বুঝতেই পারছেন…
ধন্যবাদ।
@Mhtonoy: জিপ ফাইল টি Winrar সফটওয়্যার এর সাহায্যে এক্সট্রাক্ট করে নিন। পিএসডি ফাইল টি ডাবল ক্লিক করলে এটি ফটোশপ এ ওপেন হবে। ফন্ট গুলো কপি করে C/windows/fonts ফোল্ডার এ পেস্ট করুন।
ধন্যবাদ।
যাক অবশেষে অপেক্ষার অবসান ঘটালেন। অসংখ্য ধন্যবাদ।
হেডারে আইকন এবং নেভিগেশন বার আলাদ বা উপরে-নীচে হলে কী কোন সমস্যা আছে? বা নেভিগেশন বার আইকনের নীচে
দেয়া যাবে কি না?
@Razu: হ্যা, আপনি একজন ডিজাইনার তাই আপনি চাইলেই যেকোনো কিছু যেকোনো ভাবে দিতে পারবেন। এটি আপনার স্বাধীনতা।
কিন্তু যেহেতু এটি একটি পিএসডি ফাইল, এবং আমরা এই পিএসডি ফাইল টি ফলো করবো পুরো টেমপ্লেট টি ডিজাইন করতে তাই আমরা এখান থেকে কিছু পরিবর্তন করবো না। একজন ক্লায়েন্ট আপনাকে যদি পিএসডি টু এইচটিএমএল করতে দেয়, আপনাকে হুবহু করতে হবে। আমরাও এখানে হুবহু করবো।
ধন্যবাদ।
fvj n‡q‡Q| Z‡e KZ w`b ci ci cieZx© wUDbwU cv‡e BOSS | A‡bK fvj | ab¨ev` Avgvi ‡kÖv‡`q wkÿK|
@awaladbd: Sorry boss. I could not no why is past in this way. I typed bangla in MS word then past in comment box. very nice boss. when will you next tune past my boss ? very nice. i appreciate to your tech. thanks boss.
@awaladbd: আপনি সম্ভবত বিজয় দিয়ে লিখেছেন এবং আন্সি লেয়াউট ব্যবহার করেছেন, তাই লেখা গুলো এমন হয়ে গেছে। অনলাইনে বাংলা লিখার জন্য অভ্র সবচেয়ে সুবিধা জনক। আর বিজয় ব্যবহার করলে ইউনিকোড লেয়াউট ব্যবহার করবেন।
আগামী পর্ব ৪-৫ দিন পর প্রকাশিত হবে।
ধন্যবাদ সাথে থাকার জন্য।
খুব সুন্দর টিউন হয়েছে। শুরু থেকেই মনে একটু সংশয় ছিল – কারণ নিজে জানা একটা বিষয় এবং শিখানোর দক্ষতা আলাদা বিষয়। কিন্তু আপনার সাবলীল উপস্থাপনা মনে এ বিশ্বাস সৃষ্টি করেছে যে, আমরা আনন্দের সাথে এই কোর্স সম্পন্ন করতে পারবো।
**কম্পিউটার লাভার ভাই, আপনি @bditblog.com কে বলেছেন, “ইমেজ স্লাইডার টি করতে আমরা একটি রেডিমেড প্লাগিন ব্যবহার করবো।” এই রেডিমেড প্লাগইন সম্পর্কে কিছু বলুন। এটি কি আমরা টেক্সট এডিটরে ব্যবহার করব না ফটোশপে??
**PSD2HTML এ ফন্টগুলো কি PSD ফাইলের সাথে সবসময় দেয়া থাকে না আলাদাভাবে ডাউনলোড করতে হয়। কিভাবে ফন্টগুলো চেনা যাবে??
**বেসিক HTML এবং CSS জানা থাকলে হবে, না এডভান্সড লেভেলের প্রয়োজন হবে PSD2HTML এর জন্য?আমি w3school থেকে HTML এবং CSS টিউটোরিয়ালগুলো complete করেছি। Is it enough??
**ফটোশপের লেয়ারগুলো বুঝতে পারছি না, এ সম্পর্কে বিস্তারিত থাকলে ভাল হত।
**প্রত্যেকটি টিউনের একটি ভিডিও টিউটোরিয়াল থাকলে ভাল হত। প্রজেক্ট ফাইলগুলো mediafire বা putlocker এ দিলে ভাল হত। ফ্রী নেট থেকে ডাউনলোড হয় না (Don’t mind,plz)
Thanx to techtunes and Computer lover for this tutorial. I think it’s great.
@Afsan: প্লাগিন টি টেক্সট এডিটর এ ব্যবহার করবো। এটি একটি জেকুয়েরি প্লাগিন। ওয়েব পেজ এর ব্যবহারের জন্য।
সব পিএসডি ফাইলের সাথে দেয়া থাকে না। ফটোশপ এ পিএসডি ফাইল টি ওপেন করলে যেকোনো একটি টেক্সট সিলেক্ট করলে ফন্ট এর নাম টি দেখা যায়। তখন সেটি গুগল থেকে সার্চ করে ডাউনলোড করে নিতে হয়।
বেসিক জানা থাকলে চলবে, এডভান্স জানলে ভালো কাজ করতে পারবেন। w3school ভালো মত শেষ করলে আর সমস্যা হবার কথা না।
আপনাকে অনেক ধন্যবাদ। আমাদের এমন একটি বিষয় শিখিয়ে দেবার জন্য। আমি আশা করি এই বিষয় টা আমাদের অনেক কাজে আশবে।
আমি আশা করি আমরা সবাই ভালো করে শিখতে পারব। চালিয়ে যান।
অসাধারন উদ্যমী একজন মানুষের খপ্পরে পরেছি,শিখতে ইচ্ছা না করলেও এবার শিখতে হবে……। ধন্যবাদ অসাধারন এই টিউন এর জন্য…………।
@রিয়াজ: মেনুবার সিএসএস ৩ এর সাহায্যে করবো। স্লাইডার টি জেকুয়েরি দিয়ে হবে, তবে সরাসরি জেকুয়েরি ব্যবহার করবো না। স্লাইডার এর প্লাগিন ব্যবহার করবো।
@কম্পিউটার লাভার: ar ekta que template te ki responsive korben? korle mone hoi valo hobe.(it is my personal opinion)
পোষ্টটা একটা Awesome পোষ্ট এতে কোন সন্দেহ নেই। রাকিব ভাই আমি ফোটোশপে মোটামুটি অনেক কিছুই জানি। কিন্তু এইচ.টি.এম.এল (HTML) ও সি.এস.এস (CSS) সম্পরকে খুভ কম জানি। আপনি কি এই দুটি বিষয় শিখার জন্য ভালো কোণ টিউটোরিয়াল এর ব্যবস্থা করে দিতে পারবেন?
@আসিফ আজাদ: https://www.techtunes.io/web-design/tune-id/205764
আমার এই টিউনটি ফলো করুন, এখানে ভালো কিছু রিসোর্স দেয়া আছে শেখার জন্য।
ধন্যবাদ।
@Jagobandhu: আমি এখানে সিএসএস শেখাবো না। সিএসএস এর ব্যবহার শেখাবো। অর্থাৎ, সিএসএস ব্যবহার করে একটি পিএসডি ফাইল কে ওয়েবসাইট এ রুপান্তর করা শেখাবো।
ধন্যবাদ।
আমর দেখা এযাবত কালের সবচেয়ে সুন্দর ও গোছানো টিউন। আমরা আসলেই আপনার কাছ থেকে অনেক কিছু শিখতে পারবো। এবার নিশ্চই আমার ওয়েব ডিজাইনার হওয়ার শখ টা পূরোন হবে। অসংখ্য ধন্যবাদ ভাই আপনাকে।
@kjmreza: ধন্যবাদ আপনাকেও। চেষ্টা করবো অনেক কিছু এবং ভালো কিছু শেখানোর। সাথে থাকবেন…
প্রথমেই ধন্যবাদ দিচ্ছি এমন একটি উদ্যোগ নেওয়ার জন্য। কারণ আমার মত অনেকেই আছে যারা সবকিছু জানার পরেও সঠিক গাইডনেছ এর আভাবে বেশীদুর এগুতে পারেনা।আচ্ছা ব্রাদার HTML ও CSS শিখতে কতদিন সময় লাগতে পারে? আমার ফটোশপে কোন প্রবলেম নেই, 13 বছর আছি এর সাথে। HTML সম্পর্কে কিছুটা ধারনা আছে।
@ওয়াহিদ: HTML – CSS শিখতে ১ মাসের বেশি লাগার কথা না। আপনি ১৫ – ২০ দিনেও শেষ করতে পারেন।
ধন্যবাদ।
অপেক্ষায় ছিলাম প্রথম পোষ্টের, অনেক ভালো লাগলো…..অপেক্ষায় থাকলাম পরবর্তী পোষ্টের। আশা করছি অবশ্যই সফল ভারব কোর্সটি সম্পন্ন করতে পারবো।
ধন্যবাদ…..
ভাই ভাল হয়েছে । আচ্ছা
ফ্রিল্যান্সিং এ এটার ডিমান্ড এবং রেট কী রকম ? আর এই কোর্স শেশ হতে আনুমানিক কত দিন লাগতে পারে?
@নাজমুল: ডিমান্ড এবং রেট দুটোই মোটামোটি। অধিকাংশ ওয়েবসাইট ই পিএসডি থেকে এইচটিএমএল করা হয়। আর সেগুলোর সিংহভাগ ফ্রীল্যান্সার দের দিয়েই করানো হয়।
কোর্স টি শেষ করতে প্রায় ১ মাস লাগবে।
রাকিব ভাই, আপনার এই মহান উদ্যোগের জন্য স্বাগত জানাই।
আমার একটি প্রশ্ন ছিল…
আচ্ছা, এই যে আপনি যে প্রোজেক্ট ফাইলটি দিয়েছেন (PSD) সেটা আমি দেখলাম। সবগুলো লেয়ারই Hide / Unhide করে দেখলাম। এখানে Orange ব্যাকগ্রাউন্ড এর উপর থেকে আমি যদি একটি লেয়ার move করি। তাহলে দেখা যায় যে orange ব্যাকগ্রাউন্ডের বাইরে গেলে ঐ লেয়ার টি দেখা যায় না। প্রশ্ন হলো.. শুধু নির্দিষ্ট এরিয়াতে লেয়ার show করে, এই কাজটা কিভাবে করে?
…..ধন্যবাদ।
@rosesamiul: ভাই আপনি যে কোন code edittor use করতে পারেন । শুধু file extention টা .html এ হইলেই হবে ।
@rosesamiul: হুম পারবেন, তবে আমি ব্যক্তিগত ভাবে আপনাকে ড্রিমওয়েভার ব্যবহার করতে নিষেধ করবো। এতে হাত নষ্ট হয়। আপনি শিখতে পারবেন না।
হাসান ভাই প্রথমে আপনাকে ধন্যবাদ। অনেক অশা নিয়ে এই কোর্সে ভর্তি হলাম কিন্তু HTML ও CSS তেমন ভাল পারি না । কি করলে এই কোর্সের সাথে থাকতে পারর।
@masudqm: এইচটিএমএল সিএসএস একটু ভালো করে শিখে নিন। তাহলে সুবিধা হবে।
ধন্যবাদ।
Bhaiya, i was so angry j apni course ta suru korte deri korsen tai. Ekhon khusi, moha khusi 🙂 . Assa bhaiya, j kono site r PSD file pele ki ei vhabe slice kre nite hobe age? Apni silece gulo different folder e rekhesen. Bhaiya, vedio tutorial dile vhalo hoto. Tahole vhalo kre sikhte partam R shathe original class r experience hoto. Hope apni vedio akare aamder sobai k training diben in future. Thanks.
@mamunkbr: পিএসডি ফাইল গুলো কিছু কিছু এরকম ফোল্ডার করা থাকে, কিছু অন্যভাবে থাকে। আমরা যেভাবে পাবো, সেভাবেই কাজ করবো। আমরা পিএসডি তে কোন এডিট করবো না।
nice 1st class. but dropdown menu ar dynamic er jonno to javascript ar php dorkar hoi. amader ei course e ki egula janar dorkar hobe ki?
@fahim_ferdous: ড্রপডাউন মেনু করতে এগুলো কিছুই দরকার হয় না। শুধু এইচটিএমএল – সিএসএস এর সাহায্যেই করা সম্ভব।
ধন্যবাদ।
ভাই খুব সুন্দর পোস্ট হইসে । আমি already download করে কাজ শুরু করে দিয়েছি । তবে ভাই typography অর্থাৎ font গুলা কিভাবে বেবহার করব সেইটাই বুজতে পারতেসিনা । আশা করি পরের পোস্ট এ এগুলুর solution থাকবে । ধন্যবাদ ।
@Asif Khan: জিপ ফাইল এ যে ফন্ট গুলো আছে সেগুলো C://Windows/fonts/ ফোল্ডার এ কপি করে দিন। আর কিছু করা লাগবে না। বাকি কিছু পরবর্তী পোস্ট এ দেখানো হবে।
ভাই পোস্ট টা গুছেয়া লিখছেন, তাই বু্ঝতে ওসুবিধা হচ্ছে না। আ্মি html, css, photoshop মোটামুতি পারি। পরবরতি পোস্ট এর অপেকাই রইলাম।
প্রথমে ধন্যবাদ দিচ্ছি সুন্দর করে গুছিয়ে টিউন করবার জন্য। 🙂
আমি যখন ফটোশপে মুল ডিজাইনটি শুরু করতে যাবো তখন আমি Width/Height কেমন দিয়ে শুরু করবো, মানে সাইজটি কেমন হবে?
@এলিন: উইথ ৯৮০ পিক্সেল দিবেন। হাইট নির্দিস্ট নয়, কন্টেন্ট এর উপর নির্ভর করে হাইট হয়।
ধন্যবাদ।
সহজ সুন্দর উপস্থাপনা। থ্যাঙ্ক ইউ।
প্রস্ন ছিল স্লাইডারের, সেটা জানলাম অন্য কমেন্ট থেকে।
Thanks bro. But amar email e post tir link pelam na.
video tutorial korle valo hoi. try your best.
Prothom porber motamuti shob bujhte perechi. Temon kono proshno nei. Poroborti tune-er ashay roilam.
ভাই, আপনাকে ধন্যবাদ। আমি প্রথম পর্বে ছিলাম না। আমার ইমেইলটা হল- [email protected]
অনেক ভাল লাগল আপনার পোষ্ট পড়ে। আমার প্রশ্ন হল ফন্ট কেন ইন্সটল করব? অাপনাকে অসংখ্যক ধন্যবাদ।
@শান্তনু: কারন পিএসডি টেমপ্লেট এ যে ফন্ট টি আছে সেটি যদি আপনি ওয়েবসাইট এ ব্যবহার করতে চান তাহলে আপনার পিসি তে সেই ফন্ট টি থাকতে হবে। একারনে ফন্ট ইন্সটল করতে হবে।
Ami ektu voy e silam. photoshop, css ei subject gula tune kore bujano khub tough. Ajke apnar tune dekhe mone holo apni next tune gulao eto sundor vabe amader jonno tune korte parben. Feeling Happy. 🙂
@farhadjoy: ধন্যবাদ। আমি সবসময়ই সহজ করে বোঝানোর চেষ্টা করি। আপনারা বুঝতে পারেন, এতেই আমার সাফল্য 🙂
Thanks brother….. akta question cilo… content e ki font use kora hoyeche seta kivabe bujbo?
@anikvm30: টাইপ টুল দিয়ে কন্টেন্ট এ ক্লিক করলেই ফন্ট এর নাম দেখতে পারবেন। সেই নাম দিয়ে গুগল এ সার্চ করে ফন্ট ডাউনলোড করে নিবেন।
ভাই টিউনটি ভাল হয়েছে। তাবে আমি জানতে চাই, আমি Photoshop CS Use করি। আমার পিসি এর কনফিগারেশন হলো ডুয়েল কোর, 2জিপি র্যাম আমি photoshop এর কোন ভার্সন পর্যন্ত ব্যবহার করতে পারবো।
ধন্যবাদ টিউন করার জন্য।
@Mehedi Hasan: amar pc duel core 1gb ram ami cs6 use kori kono osubida hoy na. Tobe jodi windows xp use koren to service pack 3 use korben karon service pack 1 ba 2 use korle problem hobe.
শুরুটা ভালো হয়েছে। ধন্যবাদ।
তবে প্রতিটি টিউনের জন্য নির্দিষ্ট একটা তারিখ হলে ভালো হয়। তাহলে আমরা সময়মত কাজটা করতে পারবো।
@ডাঃ রায়হানুল এহসান: তারিখ আছে। ৪ দিন পর পর টিউন পাবলিশ হবে। তবে ২য় পর্ব করতে একটু সময় লেগে গেছে, কারন ভিডিও রেডি করতে হয়েছে এবং আরো কিছু সমস্যা ছিলো। যাই হোক, এখন থেকে ৪ দিন পর পর টিউন পাবলিশ করা হবে।
শুরুটা দারুণ হয়েছে, বস। যদি সম্ভব হয় তাহলে একটু ফটোসপ লেয়ার সর্ম্পকে বেসিক ধারণা দিবেন।
সাধারণ + সাবলিল + পরিস্কার = অসাধারণ ।
অসংখ্য ধন্যবাদ গুরু । ভালো থাকবেন । শুভ কামনায় পরবর্তী টিউনের অপেক্ষায় রইলাম ।
Thanks for nice training tutorial.As there is no more complex topic in your 1st tutorial, I have no more words to say or no more thinks to know.anyways eagerly waiting for your tutorial.One request before posting 2nd tutorial——-Please Clear everything about photoshop when need as I am so week in that area.
অসংখ্য ধন্যবাদ। আমার তো html এবং css জানা নাই। আমি কিভাবে psd to html শিখতে পারবো? দয়া করে ক্লাস থেকে বের করে দেবেন না। আপনার পাঠের পাশাপাশি html এবং css জানার সহজ পদ্ধতি দেখিয়ে দিবেন।
@easyzahangir: আপনাকে অবশ্যই এইচটিএমএল – সিএসএস জানতে হবে। আগে এইচটিএমএল সিএসএস শিখে নিন, পরে এই কোর্স শুরু করুন। সমস্যা নেই… আমার এই টিউনটি ফলো করে এইচটিএমএল – সিএসএস শিখতে পারেনঃ
https://www.techtunes.io/web-design/tune-id/205764
অনেক দিন ধরে অপেক্ষায় ছিলাম। প্রথম টিউনটা খুবই ভালো লাগলো। আমি যদি Notepad ব্যবহার করি তাহলে কি খুব সমস্যা হবে? Photoshop এর পুরানো version দিয়ে কি Template edit করা যাবে? পরের টিউনের অপেক্ষায় থাকলাম। ভালো থাকবেন।
@bdcisco: নোটপেড দিয়ে সমস্যা হবে না। তবে সময় বেশি লাগবে। আপনি নোটপেড ++ ব্যবহার করতে পারেন। ফটোশপ এর পুরাতন ভার্সন যদি আপনি ব্যবহার করতে পারেন তবে সমস্যা হবে না।
ভাই খুব সুন্দর হয়েছে। আপনার টিউন করার ষ্টাইল দেখে খুব মুগ্ধ হয়েছি। আশা করছি এবার আমি PSD 2 HTML করার পদ্ধতি শিখে যাব। আপনাকে অসংখ্য ধন্যবাদ। পরের টিউনের অপেক্ষায় সময় গুনছি। একটি কথা, আমি ড্রপ ডাউন মেনু করতে পারি না। কোন সমস্যা হবে কি?
একেবারে বেসিক থেকে শুরু করার জন্য ধন্যবাদ। এ ধারাবাহিকতা বজায় রাখার জন্য অনুরোধ করছি।
খুব সুন্দর ভাবে গুছিয়ে লিখেছেন। আমার দিষ্টিতে কার কোন বুজতে অসবিদা হবে না। আমি বলব আমি বুঝতে পেরেছি।
very nice article.When will published 2nd lesson? It will be more wise if you give the publishing date.
ভাই শুরুতেই ফাটিয়ে দিলেন বাকি গুলো যে কি করবেন আল্লাই ই জানে এতো ভাল শিখান আপনি, অসাধারণ, আগে কোথায় ছিলেন?আমার কিন্তু খুশি খুশি লাগতেছে।চালিয়ে যান ভাই সাথে আছি বুঝতে সমস্যা নাই।
ভাই আমি ।কেটা বানানোর চেষ্টা করেছিলাম দেখেন তো এই রকম হলে চলবে কি না । ১ম পর্বের টিউনের জন্য ধন্যবাদ । ২য় পর্বের জন্য Waiting
Download: http://www.mediafire.com/download/q9928dbeibji0ki/Templete_1.psd
Thanks a lot for ur Great Tunes. I hope that ur next tutorial will help us greatly. But I as well as some others who are using Linux based OS such as Ubuntu will get extra instructions about tools used in ur tutorial. As example true alternative to Photoshop, Font installing, Notepad++ etc. We will be grateful if u instruct us about those issues.
পোস্টটা বিকালে পড়েছিলাম পিসি থেকে অফলাইনে। কমেন্ট করছি হাজিরা খাতায় যাতে নামটা থাকে 😛
আমি সি এস এস শিখছি ( ১২০জিবি টিউটসেয়ারের টিউট থেকে) পাশা পাশি পিএসডি টু এইচটিএমএল কোর্সেও ভর্তি হয়েছি। পোস্ট এক কথা অসাধারন হয়েছে। ২ বার পড়েও কোনো প্রশ্ন খুজে পাইনি। তবে
PSD2HTML কি তা সম্বন্ধে একটা পরিস্কার ধারনা পেয়েছি।
আগে মনে করতাম PSD কে কোনো একটা মেসিনে ঢুকিয়ে দিলেই তা HTML এ পরিনত হতে থাকে। আমাকে শুধু মেশিন টা অপারেট করতে হবে। কিন্তু এখন বুঝলাম PSD টা শুধু একটা ব্লু প্রিন্টের মত। সেটা দেখে দেখে আইডিয়া নিয়ে তা কোডে রুপান্তর করতে হবে।
ফটোশপ মোটামটি পারি। কোর্সের জন্য ড্রিমউইভার নামাচ্ছি। আগামি পোস্ট তারাতারি দেন। 😀
@mamunedusmart: @আ জ ব: ধন্যবাদ 🙂 ড্রিময়েভার ব্যবহার করবেন না। অন্য কোন টেক্সট এডিটর ব্যবহার করুন।
Thanks u very much.
I have read part-01. I thing It will ge a great tune. I am waiting for next Tune.
Be well
ভাই অসংখ্য ধন্যবাদ আপনাকে প্রথম পর্বের জন্য। খুব সহজ করে লিখেছেন। আশা করি পরবর্তী পর্বগুলোও একইরকম সহজবোধ্য হবে। আমার এইচটিএমএল সম্পর্কে বেসিক আইডিয়া আছে। তবে সিএসএস আর ফটোশপ সম্পর্কে তেমন জ্ঞান নেই। ফটোশপ তাও কয়েকবার ব্যবহার করেছি। কিন্তু সিএসএস এর ফুল ফরম ছাড়া আর কিছুই জানি না। আমি কি কোর্স শেষ করতে পারব?
আশায় বুক বেধে রইলাম পরবতী প র্বের জন্য।আমার সিএসএস ও এইচটিএমল সমপর্ক ভাল ধারনা আছে। আপনার সাহায্য পেলে ফটোশপটা্ও শিখে ফেলতে পারব ইনশা-আল্লাহ। ধন্যবাদ
Now it is my turn to learn something. Thanks a lot. Service section and client – ai gula ke 1 ta slide a hobe or different o hote pare?
@rakibnano: আপনি যদি ফটোশপ ভালো জানেন তবে কাজ করতে পারবেন। তবে আমার মতে ফটোশপ CS6 টা ব্যবহার করা ভালো হবে।
@amin88: না, এখানে ফিক্সড কন্টেন্ট হবে। তবে এখানে কন্টেন্ট স্লাইডার চাইলে ব্যবহার করা যায়।
bhai ami kokhono PSd to HTML er kaj korinai tai ei kajta valo hoinai . ami jani onek bhul hoise tarporeo asha kori bhulgulu dhorie diben . goto porber PSd theke HTMl page banalam .ektu dekhun . temon bhalo kore korte parinai . onek kisui bad pore gese . Tai apnader help chaitesi.
https://dl.dropboxusercontent.com/u/231971744/PSD%20to%20HTML/index.html
প্রথম পর্বেই অনেকে অ্যাডভান্সড্ প্রশ্ন করছেন যা নতুনরা বিভ্রান্ত হবে। আমার মনে হয় অতীত এবং চলতি পর্বের মধ্যে প্রশ্নোত্তর দেয়া ভাল।
অনেক অনেক শুভেচ্ছা।
ভাই, পরবর্তী টিউন কি আদৌ আসবে? ঘুম আসার উপক্রম হলো………। টিউনগুলো দু-এক দিন পরপর হলে ভালো হয়। নতুবা
ধৈর্যে বিচ্যুতি ঘটতে পারে। ধন্যবাদ।
ভাই এই রকম শিক্ষা মূলক টিউন করার জন্য আপনাকে অনেক অনেক ধন্যবাদ। তার মাধ্যমে আজ অনেক কিছু শিখতে পারলাম।
আমি ফটোশপ সিএস৬ ব্যবহার করছি। পিএসডি ফাইলটি যখন অপেন করলাম তখন লেয়ার রাখবো কিনা জানতে চাইলে লেয়ার রাখলাম এরপর এই মেসেজ এলো `The document was created with a different text engine option, please open preference>type, switch the text engine, restart photoshop and reopen the document. এটার নিচে OK তে ক্লিক করার পর psd file খুলেছে। আমি এর আগে সকল ফন্ট এক্সট্রাক্ট করে windows>font folder এ paste করেছি। psd file ভালভাবেই খুলেছে, লেয়ারে কোন কোয়েশ্চন মার্ক আসেনি। আমার প্রশ্ন হচ্ছে এই মেসেজটা কোন কারনে আসে? ধন্যবাদ।
@Shakil Ahmed: খুব সম্ভবত আপনি ফটোশপ এর কোন সেটিং চেঞ্জ করেছেন, অথবা কোন ভাবে ফন্ট গুলো ডিলিট হয়ে গেছে। ফন্ট গুলো আবার ইন্সটল করুন। আর পিএসডি ফাইল টি পুনরায় জিপ ফাইল থেকে আনজিপ করে সেটি ব্যবহার করুন।
Photoshop er grid,slice asob khutinati bepar gulo jodi aktu details bolen tahole jara photoshop aktu kom pare tader jonno subidha hobe bujhte.
@REGAN: ২য় পর্বে বিস্তারিত বলার চেষ্টা করেছি। আশা করি বুঝতে পারবেন। আর সমস্যা করলে টিউমেন্ট করে জানাবেন। ধন্যবাদ।
অকারণে অযাচিত স্থানে ইমেজ ব্যবহার করা যাবে না। সবসময় চেষ্টা করতে হবে কম ইমেজ ব্যবহার করে এইচটিএমএল – সিএসএস এর সাহায্যে ওয়েবপেজ টি তৈরি করা।
তার মানে অতিরিক্ত ইমেজ ব্যবহার করলে কি আমার সাইট এর মান খারাপ হয়ে যাবে ? @ কম্পিউটার লাভার
@sirat199: বলতে পারেন হ্যা! কারন বেশি ইমেজ ব্যবহার করলে আপনার সাইট লোড হতে বেশি সময় নিবে। আর এটি আপনার ওয়েবসাইট এর মান খারাপ ও করবে নিশ্চই?
এই মুহুর্তে আমার কমপিউটার না থাকায় আমি আপনার কোর্সগুলো প্র্যাকটিস করতে পারছি না । আশা করি এক মাস পর থেকে শুরু করতে পারব ।আমার ইমেল সাবস্ক্রাইব করা আছে । কোর্স শেষ করতে দেরি হলে কি সার্টিফিকেট পাব । মোবাইল দিয়ে কমেন্ট করলাম ।
রাকিবুল নাম টা শুনলেই কত স্মৃতি মনে উঠে কেননা আমার ভাইএর ছেলের নামও রাকিবুল হাসান। ভিডিও টা খুব সুন্দর হয়েছে। দ্বিতীয় পাঠ টার জন্য অপেক্ষায় থাকলাম।আর আপনার টেকটিউনস এ দেওয়া ছবির চেয়ে তো বাস্তবে আপনি দেখতে আরো ভালো। ভিডিও টা দেখে তো তাই মনে হলো।
ভাই হেল্প প্লিজ ! আমি একটি htm কোড খুজছি। দোকানের মেমো ছাপার জন্য। কাজটা হবে
আমি শুধু কাষ্টমারের নাম,গ্রাম,পণ্য, ফোননম্বর,দাম, পুরন করবো আর প্রিন্ট হবে আমার র্নিদ্ধারিত টেমপ্লেেট। এটি কি সম্ভব? reply me with: [email protected]
ভাই ফটোশপে ড্রপডাউন মেনুর লাইন লেয়ার গুলো কিভাবে তৈরী করব ???? প্লিজ জানান ….
ভিডিও টিউটোরিয়াল অসাধারন হইছে । অনেক অনেক ধন্যবাদ আপনাকে । পরবর্তী টিউনের অপেক্ষায় থাকলাম ।
thanks for a good tutorial, html css shikte agrohi. vai ami ps cs6 motamoti jani, kintu slice korte janina, i wait for your tutorial.
@computer lover ধন্যবাদ ভিডিও দেয়ার জন্য। কিছু মনে করেন না আমি ভিডিও ডাউনলোডে দিলাম মাসে 1GB তো। আপনি বোলেছেন slider এর জন্য একটি plagin ব্যবহার করবেন কোড এডিটরে আমি নোটপ্যড++ ব্যবহার করি কিভাবে slider টি install করবো জানাবেন দয়াকরে ?
ভিডিও টিউটোরিয়াল যুক্ত করার জন্য আপনাকে অনেক অনেক ধন্যবাদ। খুব ভাল হয়েছে। দ্বিতীয় টিউটোরিয়াল এর জন্য অপেক্ষা করছি।
অনেক ভাল লেগেছে, ড্রিমওয়েভার দিয়ে কি কাজ করা যাবে, পরবর্তী টিউনের অপেক্ষায় রইলাম। ধন্যবাদ
@কম্পিউটার লাভার ami aktu try korlam ai psd ta theke html korar jonno, jani onek vul truti ase tobuo shahosh kore baniye fellam, dropdown menu ami dite pari na tai dropdown menu sarai banalam apnar ta dekhe aro valo vabe banabar try korbo.
Dropbox link: https://dl.dropboxusercontent.com/u/221317826/PSD%20to%20HTML/TT%20PSD%20to%20HTML/index.html
My Server Link: http://techajkal.com/tt/
@shopner_shoshi: সুন্দর হয়েছে, ইনশাল্লাহ কোর্স টি ফলো করলে আরো অনেক ভালো করতে পারবেন 🙂 শুভকামনা রইলো।
Boss onek valo hoyca pothome aktu jamela mone hoscilo but video ta paya onek easy mone hosca nice tune
vai video cai ……….please video upload kore diben
vai onek shondor tune hoise ar vai amar photoshop CS5 net conection thaka obosthay buy now bole and ami chalate pari na exit chay. many many thank you !!!!!!!!! for your tune
amar photoshop8 ase oita dia kaj kora jabe na ?
@Tarek26: ড্রিময়েভার ব্যবহার করলে কোড গুলো মনে রাখতে পারবেন না। এবং ড্রিময়েভার ছাড়া অন্য কোন এডিটর এ কাজ ও করতে পারবেন না।
যে কোন টিউনের থেকে তথ্যবহুলভাবে ব্যাখ্যা করা মনে হচ্ছে আমার কাছে কারণ অনেকদিন ধরে খুজছিলাম । সাথে থাকবো। ধন্য+++ টিউনের জন্য।দোয়া রইল আপনার জন্য।
খুবই জানতে ইচ্ছে করছিল, কিভাবে PSD2HTML করতে হয়; এখন সেই জানার ইচ্ছে পূরন হতে যাচ্ছে। ধন্যবাদ আপনাকে।
আমার একটা প্রশ্ন হলো, এই PSD টেমপ্লেট পাবো কোথায়? এগুলো কি ফটোশপে বানিয়ে নিতে হবে?
গ্রিড করার কাজটি দারূণ। সেকেন্ড টিউনে গ্রীড ধরে কাজ করতে গিয়ে মজা পেয়েছি। থ্যাংকস রাকিবুল ভাই 😀
ভাই আপনার লেখাটা অসাধারণ। এত সুন্দর করে এবং ভেঙ্গে ভেঙ্গে কেউ কখনো বলেনি বা কোন বইতেও পাইনি। খুবই ভাল লাগলো আপনার টিউন।
পুরো টিউনটি খুব সুন্দর করে আজই পড়লাম। পুরোটাই বুঝতে পেরেছি। এখন পর্ব-২ পড়ার জন্য প্রস্তুতি নিচ্ছি। সঙ্গে থাকবেন। আপনাকে অসংখ্য ধন্যবাদ। আল্লাহ সবার মঙ্গল করুক।
আপনি যখন ঘোষণা দিয়েছিলেন ভর্তি হওয়ার জন্য তখনই আমি আপনার কোর্সে ভর্তি হয়ে ছিলাম। কিন্তু ব্যস্ততার কারণে আমি যোগ দিতে পারি নাই। এতদিন পরে হলেও আমি আপনার কোর্সটি সম্পন্ন করতে এসেছি। আশা করি আপনার কাছ থেকে কিছু শিখতে পারবো।
তবে একটাই সমস্যা হবে। আমি গিম্পে কাজ করি। তাই ফটোশপ দিয়ে আমার হবে না। সেগুলো গিম্পে বের করতে একটু ঝামেলা পোহাতে হবে। তবে আশা করি সেগুলো বের করে ফেলতে পারবো।
প্রিয় টিউনার ,
আমি টেকটিউনস কমিউনিটি ম্যানেজার, শোয়াইব, টেকটিউনস থেকে আপনার সাথে অফিসিয়ালি যোগাযোগ করতে চাচ্ছি।
টেকটিউনস থেকে আপনার সাথে অফিসিয়ালি যোগাযোগ করার জন্য http://techtun.es/2obSQxE লিংকটিতে ক্লিক করে আপনার সাথে যোগাযোগের প্রয়োজনীয় তথ্য সাবমিট করে আমাদের সাহায্য করবেন আশা করছি।
সাবমিট করার পর আমাদের এই ম্যাসেজের রিপ্লাই আপনার কাছ থেকে আশা করছি।
ধন্যবাদ আপনাকে।
আসসালাম আলাইকুম
আজকেই প্রথম নজরে আসলো এবং আমি সাথে সাথেই ভর্তি হয়ে গেলাম। নিয়মিত পুরো পর্বগুলো শেষ করবো, ইনশাআল্লাহ্।
![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 মেথড জানবো ও ব্যবহার করে দেখব")
পরবর্তী টিউনের অপেক্ষায় রইলাম। খুব সুন্দর হচ্ছে।