আমরা যারা ইন্টারনেট এ ফ্রীলাঞ্চিং করি তারা নিশ্চয় জানি যে ফ্রীলাঞ্চিং
এর যে সাইট গুলো রয়েছে সেখানে PSD to HTML এর অনেক গুলো কাজ রয়েছে । এবং
প্রতিদিন শত শত PSD to HTML এর কাজ জমা হচ্ছে । এবং এগুলোর মূল্য ও কম না ।
আপনি যদি ১ তা PSD to HTML করেন তাহলে আপনাকে তারা কমপক্ষে ২০ ডলার থেকে
৫০ ডলার পর্যন্ত দিবে । যেটা করতে আপনার ২ থেকে ৩ ঘণ্টার বেশি লাগবে না ।
এরকম কাজ যদি আপনি প্রতিদিন ১
টি করেও করেন অর্থাৎ মাসে ৩০ টি তাহলে আপনার মাসে আয় কমপক্ষে ৩০*২০==৬০০ ডলার যা বাংলাদেশি টাকায় প্রায় ৪২০০০ টাকার সমান । এই একটি কাজ করেই আপনি মাসে এত টাকা কামাতে পারছেন । অন্য কাজ তো আছেই । তাই আর দেরি নয় আজই ভাল করে শিখে নিন কিভাবে PSD to HTML করতে হয় ।
PSD to HTML কিঃ
PSD to HTML বলতে যা বুঝায় তা হল একটা ওয়েবসাইট এর ডিজাইন ওরা আপনাকে ফটোশপ এ দিয়ে দিবে যেটা আপনাকে এইচটিএমএল ফাইল এ অর্থাৎ কোডিং করে দিতে হবে এইচটিএমএল এবং সিএসএস দিয়ে । আপনি তো আগেই এইচটিএমএল এবং সিএসএস শিখে ফেলেছেন তাহলে আর দেরি কেন ।
আমরা এখন যেটি তৈরি করব তা হল নিচের টা ।
এবার দেখুন কিভাবে এটি বানানো যায় । প্রথমেই ফটোশপ ওপেন করুন । এরপর এই ফাইল টি ওপেন করুন আর সাথে Macromedia Dreamweaver 8 সফটওয়্যার টি ওপেন করুন । নতুন একটি HTML ফাইল ওপেন করুন ।
এবার ফটোশপ ফাইল এ দেখুন এর ডিজাইন টি অনেক গুলো লেয়ার এ ভাগ করা আছে । আপনাকে যে কাজ টা করতে হবে টা হল লেয়ার ধরে ধীরে এগুলোকে কেটে আলাদা করা । এটি কঠিন কোন কাজ না । প্রথমেই ফটোশপ উপরে Auto Select অপশন টি টিক দিয়ে দিন । এবার ডিজাইন টির যেখানে ক্লিক করবেন সেটা ডান দিকে লেয়ার প্লেট এ দেখাবে । তো আমি এ অধ্যায়ে আপনাদের যেটা সিখাব টা হল Crop Tool দিয়ে কিভাবে কাটতে হয় ।
প্রথম এ আপনাকে header কাটতে হবে । তাই বাম পাশ থেকে Crop Tool নিয়ে header অংশ আলাদা করুন । এভাবে কাটুন ।
এবার সিলেক্ট করে Enter দিন । দেখবেন যে এটি আলাদা হয়ে গেছে । এবার CTRL+ S দিয়ে Save করে ফেলুন । একই ভাবে footer sidebar photo সবগুলোই কেটে ফেলুন । সব কাটা হয়ে গেলে এবার কোড করার জন্য Dreamweaver এ এইচটিএমএল ফাইল নিয়ে প্রথমেই <title>PSD To HTML</title> এই টাইটেল টি লিখে দিন ।এবার <body> </body> ট্যাগ এর মধ্যে লিখা শুরু করুন ।
প্রথমেই <div id=”wrapper”></div> এই div নিয়ে নিন কারন এটিই হল আসল div যার ভিতরে সবগুলোই থাকবে ।
এর সিএসএস এভাবে লিখুন
#wrapper{
width:1024px;
margin:0 auto;
}
এখানে width:1024px; দিয়েছি কারন হল ফটোশপ এ পুরা ডিজাইন টার ইমেজ সাইজ এত তাই এটা দিয়েছি ।
এবার আমরা header এর জন্য কোড লিখব ।নিচের কোড টি লিখুন <div id=”wrapper”></div> এর মধ্যে ।
<div id=”header”></div>
এবার header এর সিএসএস লিখুন ।
#header{
width:1024px;
height:322px;
background:url(images/header.jpg);
}
দেখুন যে এখানে height:322px; দিয়েছি কারন হল এই header.jpg ইমেজ টির সাইজ হল ১০২৪/৩২২ । আর background হিসেবে এই ইমেজ টি দিয়েছি ।
এবার রান করলে আপনি শুধু header টা দেখতে পাবেন । এবার আসুন কিভাবে Contents এর জন্য কোড লিখতে হয় ।
<div id=”header”></div> এর নিচে <div id=”contents”></div> টি লিখুন । এবার এটিকে ২ ভাগে ভাগ করুন ।
<div id=”contents”>
<div id=”left”></div>
<div id=”right”></div>
</div>
এবার এদের সিএসএস লিখুন ।
#contents{
width:1024px;
height:1010px;
}
#left{
width:732px;
height:1010px;
float:left;
}
#right{
width:292px;
height:1010px;
float:right;
background:url(images/sidebar.jpg);
}
এবার আসুন footer তৈরি করি ।
এর জন্য নিচের কোড টি লিখুন ।
<div id=”footer”></div>
এর জন্য সিএসএস লিখুন ।
#footer{
width:1024px;
height:168px;
background:url(images/footer.jpg);
}
এবার রান করুন । এখন আসুন লেফট কনটেন্ট এ ২ টি ইমেজ বসান ছিল । আমরা সেটি কিভাবে বসাব ।
<div id=”left”></div> এর মধ্যে <img src=”images/photo-1.jpg” /> কোড টি লিখে দিন ।
<div id=”left”><img src=”images/photo-1.jpg” /></div> এবার দ্বিতীয় ইমেজ টির জন্য এই কোড টি লিখুন ।
<img src=”images/photo-2.jpg” />
<div id=”left”>
<img src=”images/photo-1.jpg” />
<img src=”images/photo-2.jpg” />
</div>
এবার রান করলে পুরা ওয়েব পেজ টি দেখতে পাবেন ।
আশা করি বুঝতে পারেছেন ।এবার ইমেজ গুলো উপরে নিচে সরানর জন্য margin , padding ব্যবহার করুন ।
যেমন
<img id=”photo2″ src=”images/photo-2.jpg” />
<div id=”left”>
<img src=”images/photo-1.jpg” />
<img id=”photo2″ src=”images/photo-2.jpg” />
</div>
এর সিএসএস হল
#photo2{
margin-top:20px;
}
এবার রান করলে দেখতে পাবেন যে দ্বিতীয় ইমেজ টি ২০ পিক্সেল নিচে নেমে গেছে ।
এভাবে আপনি ইচ্ছা মত সাজাতে পারেন । ধন্যবাদ ।
আপনাদের সুবিধার জন্য আমি সম্পূর্ণ কোড টি দিয়ে দিলাম ।
Download
টি করেও করেন অর্থাৎ মাসে ৩০ টি তাহলে আপনার মাসে আয় কমপক্ষে ৩০*২০==৬০০ ডলার যা বাংলাদেশি টাকায় প্রায় ৪২০০০ টাকার সমান । এই একটি কাজ করেই আপনি মাসে এত টাকা কামাতে পারছেন । অন্য কাজ তো আছেই । তাই আর দেরি নয় আজই ভাল করে শিখে নিন কিভাবে PSD to HTML করতে হয় ।
PSD to HTML কিঃ
PSD to HTML বলতে যা বুঝায় তা হল একটা ওয়েবসাইট এর ডিজাইন ওরা আপনাকে ফটোশপ এ দিয়ে দিবে যেটা আপনাকে এইচটিএমএল ফাইল এ অর্থাৎ কোডিং করে দিতে হবে এইচটিএমএল এবং সিএসএস দিয়ে । আপনি তো আগেই এইচটিএমএল এবং সিএসএস শিখে ফেলেছেন তাহলে আর দেরি কেন ।
আমরা এখন যেটি তৈরি করব তা হল নিচের টা ।
এবার দেখুন কিভাবে এটি বানানো যায় । প্রথমেই ফটোশপ ওপেন করুন । এরপর এই ফাইল টি ওপেন করুন আর সাথে Macromedia Dreamweaver 8 সফটওয়্যার টি ওপেন করুন । নতুন একটি HTML ফাইল ওপেন করুন ।
এবার ফটোশপ ফাইল এ দেখুন এর ডিজাইন টি অনেক গুলো লেয়ার এ ভাগ করা আছে । আপনাকে যে কাজ টা করতে হবে টা হল লেয়ার ধরে ধীরে এগুলোকে কেটে আলাদা করা । এটি কঠিন কোন কাজ না । প্রথমেই ফটোশপ উপরে Auto Select অপশন টি টিক দিয়ে দিন । এবার ডিজাইন টির যেখানে ক্লিক করবেন সেটা ডান দিকে লেয়ার প্লেট এ দেখাবে । তো আমি এ অধ্যায়ে আপনাদের যেটা সিখাব টা হল Crop Tool দিয়ে কিভাবে কাটতে হয় ।
প্রথম এ আপনাকে header কাটতে হবে । তাই বাম পাশ থেকে Crop Tool নিয়ে header অংশ আলাদা করুন । এভাবে কাটুন ।
এবার সিলেক্ট করে Enter দিন । দেখবেন যে এটি আলাদা হয়ে গেছে । এবার CTRL+ S দিয়ে Save করে ফেলুন । একই ভাবে footer sidebar photo সবগুলোই কেটে ফেলুন । সব কাটা হয়ে গেলে এবার কোড করার জন্য Dreamweaver এ এইচটিএমএল ফাইল নিয়ে প্রথমেই <title>PSD To HTML</title> এই টাইটেল টি লিখে দিন ।এবার <body> </body> ট্যাগ এর মধ্যে লিখা শুরু করুন ।
প্রথমেই <div id=”wrapper”></div> এই div নিয়ে নিন কারন এটিই হল আসল div যার ভিতরে সবগুলোই থাকবে ।
এর সিএসএস এভাবে লিখুন
#wrapper{
width:1024px;
margin:0 auto;
}
এখানে width:1024px; দিয়েছি কারন হল ফটোশপ এ পুরা ডিজাইন টার ইমেজ সাইজ এত তাই এটা দিয়েছি ।
এবার আমরা header এর জন্য কোড লিখব ।নিচের কোড টি লিখুন <div id=”wrapper”></div> এর মধ্যে ।
<div id=”header”></div>
এবার header এর সিএসএস লিখুন ।
#header{
width:1024px;
height:322px;
background:url(images/header.jpg);
}
দেখুন যে এখানে height:322px; দিয়েছি কারন হল এই header.jpg ইমেজ টির সাইজ হল ১০২৪/৩২২ । আর background হিসেবে এই ইমেজ টি দিয়েছি ।
এবার রান করলে আপনি শুধু header টা দেখতে পাবেন । এবার আসুন কিভাবে Contents এর জন্য কোড লিখতে হয় ।
<div id=”header”></div> এর নিচে <div id=”contents”></div> টি লিখুন । এবার এটিকে ২ ভাগে ভাগ করুন ।
<div id=”contents”>
<div id=”left”></div>
<div id=”right”></div>
</div>
এবার এদের সিএসএস লিখুন ।
#contents{
width:1024px;
height:1010px;
}
#left{
width:732px;
height:1010px;
float:left;
}
#right{
width:292px;
height:1010px;
float:right;
background:url(images/sidebar.jpg);
}
এবার আসুন footer তৈরি করি ।
এর জন্য নিচের কোড টি লিখুন ।
<div id=”footer”></div>
এর জন্য সিএসএস লিখুন ।
#footer{
width:1024px;
height:168px;
background:url(images/footer.jpg);
}
এবার রান করুন । এখন আসুন লেফট কনটেন্ট এ ২ টি ইমেজ বসান ছিল । আমরা সেটি কিভাবে বসাব ।
<div id=”left”></div> এর মধ্যে <img src=”images/photo-1.jpg” /> কোড টি লিখে দিন ।
<div id=”left”><img src=”images/photo-1.jpg” /></div> এবার দ্বিতীয় ইমেজ টির জন্য এই কোড টি লিখুন ।
<img src=”images/photo-2.jpg” />
<div id=”left”>
<img src=”images/photo-1.jpg” />
<img src=”images/photo-2.jpg” />
</div>
এবার রান করলে পুরা ওয়েব পেজ টি দেখতে পাবেন ।
আশা করি বুঝতে পারেছেন ।এবার ইমেজ গুলো উপরে নিচে সরানর জন্য margin , padding ব্যবহার করুন ।
যেমন
<img id=”photo2″ src=”images/photo-2.jpg” />
<div id=”left”>
<img src=”images/photo-1.jpg” />
<img id=”photo2″ src=”images/photo-2.jpg” />
</div>
এর সিএসএস হল
#photo2{
margin-top:20px;
}
এবার রান করলে দেখতে পাবেন যে দ্বিতীয় ইমেজ টি ২০ পিক্সেল নিচে নেমে গেছে ।
এভাবে আপনি ইচ্ছা মত সাজাতে পারেন । ধন্যবাদ ।
আপনাদের সুবিধার জন্য আমি সম্পূর্ণ কোড টি দিয়ে দিলাম ।
Download
No comments:
Post a Comment