প্রায়ই নানা ব্লগার টেম্পলেটের ওয়েবসাইটে ঘোরার সময় আমার ইউজারদের ফিডব্যাক বা কমেন্ট সেকশনে চখ পড়ে। সেখানে অনেকের প্রশ্নের একটা বড় অংশ হল, টেম্পলেটের নিচের ফুটার রিমুভ করলে নাকি ডেভেলপার পেইজে রিডাইরেক্ট হয়ে যায়। এটা সত্য যে ডেভেলপারদের ক্রেডিট মোছা উচিত নয়। কিন্তু অনেকেই ব্লগের সৌন্দর্যের(!) কথা চিন্তা করে এটা রিমুভ করার চেস্টা করি। আবার অনেকে লিঙ্ক বা নাম বদলে দেই, এতেও রিডাইরেক্ট হতে থাকে।
আসলে, যারা নতুন ব্লগার, ব্লগিং লাইনে বেশিদিন নেই, তারা ফ্রি টেম্পলেটের স্থলে প্রিমিয়াম টেম্পলেট ইউজ করতে যায়। এবং অনেকে কোনো কারন ছাড়াই ফুটার ক্রেডিট রিমুভ করে দেয়। এটা অনৈতিক। কিন্তু ব্লগের ভেতরে কমেন্টে ডেভেলপারের নাম রেখে ফুটার রিমুভ করা যেতে পারে।
কিভাবে রিমুভ করবেন?
আসলে, এই লিঙ্কগুলো জাভাস্ক্রিপ্ট দিয়ে প্রোগ্রাম করা থাকে। জাভাস্ক্রিপ্ট চেক করে দেখে তার কাছে দেওয়া ভেরিয়েবল নেইম এবং ইউআরএল এর সাথে ফুটার ক্রেডিটের মিল আছে নাকি। না থাকলে সে রিডাইরেক্ট করে দেয়।
জাভাস্ক্রিপ্টাকে খুজে বের করে রিমুভ করা কষ্টসাধ্য এবং সময় সাপেক্ষ কাজ এবং অনেক ক্ষেত্রে অসম্ভব। কারন হয়তো জাভাস্ক্রিপ্টগুলো এনকোড করা থাকে, এতে খুজেই পাওয়া যায় না।
কিন্তু আমরা একটা সিএসএস এপ্লাই করে ২ মিনিটেই এটা রিমুভ করতে পারি।
প্রথমে ব্লগার ডট কমে যান।
ব্লগার প্রোফাইলে গিয়ে কাঙ্ক্ষিত ব্লগে যান।
এবার Dashboard > Template > Edit HTML.এ যান।
এবার credit/footer link খুজে বের করুন। আপনি Copyright, credit or designed এজাতীয় লেখা খুজে পেতে পারেন। (নিচে নমুনা)
কেমন আছেন? আমি ফটোশপে ওস্তাদ নই। তবুও যা পারি, টিউটোরিয়াল আকারে শেয়ার করি।
এছাড়া ফটোশপে আমি নিজে নিজে বেশ কিছু জিনিশ এবং ইফেক্ট তৈরি করার চেষ্টা করেছি এবং সফল হয়েছি। আমি ধিরে ধিরে সেগুলো আপনাদের সামনে আনব।
আজ আমার নিজের মতো করে কিভাবে ২০ মিনিটেই একটা সফটওয়্যারের এনিমেশন করা সিডি কাভার তৈরি করা যায় তা দেখাব। এজন্যে আমি ডিজিটাল রিজিওনাল ডিকশনারির কাভার তৈরি করবো। এর কভার মুলত এর আগে আমিই ডিজাইন করে দিয়েছিলাম।
এখানে আমি সম্পূর্ণ নিজের পদ্ধতিতে কাজ করবো। পুরোটা দেখার পর কাজের ধারনা এসে গেলে প্রত্যেকের নিজের পদ্ধতি তৈরি হয়ে যাবে আমার বিশ্বাস।
এখানে আমাদের একটা ফাইলেই সব কাজ হবে না। একেক ফাইলে একেক কাজ হবে।
এখানে আমি ৪টি ফাইলে (পিএসডি) তে কাজ করবো,
Mainbody.psd
Sidebody.psd
CD.psd
MainFile.psd
প্রথমে আমাদের কাজই শুরু হবে Mainbody.psd দিয়ে।
এখানে আমরা কভারের সামনের বড় অংশ বানাবো।
এখন 744x1080 সাইজে ৩০০ রেজুলেশনে ব্যাকগ্রাউন্ড ট্রান্সপারেন্ট করে একটা ইমেজ তৈরি করতে হবে।
এবার আমরা ইমেজের মধ্যে ডিজাইন করবো।
প্রথমে ব্যাকগ্রাউন্ড গ্র্যাডিয়েন্ট করে দেই।
এবার হেডার এবং ফুটার তৈরি করি। এজন্যে আমাদের আরেকটা ইমেজ করা লাগবে। এটা হবে 20x20. এবার এই ছোট স্কয়ার সাইজ ইমেজে ফুটার কালার বা কোনো স্টাইল দিয়ে .png ফরম্যাট দিয়ে সেইভ করি।
এবার ঐ .png ফাইলকে আমাদের Mainbody.psd এর ভেতরে ড্রাগ অ্যান্ড ড্রপ করে নিয়ে আসি এবং ফুটার অথবা হেডারে রেখে রিসাইজ করে বসিয়ে দেই।
এবার মাঝে লোগো, টেক্সট ইত্যাদি ডিজাইন করে বসিয়ে দেই।
এবার এটাকে একটা .png ফাইলে সেইভ করি। যেমন Mainbody.png
এবার সাইডের কাজ করতে sidebody.psd ফাইল তৈরি করি।
সেখানে 300x1080 সাইজের 300 রেজুলেশনের একটা ইমেজ তৈরি করি।
সেখানেও ইচ্ছেমত ডিজাইন করি।
mainbody এবং sidebody এর হেডার এবং ফুটারে মিল রাখতে আমাদের এখানেও স্কয়ার ইমেজটা আনতে হবে এবং হেডার - ফুটার এর উচ্চতা 20px এর মাঝে রাখতে হবে ঐ স্কয়ার ইমেজটার মাধ্যমে।
এবার ডিজাইন করি, ডিজাইনের পর পিএনজি ফরম্যাটে সেইভ করি।sidebody.png
এবার cd.psd এর কাজ করবো। মানে সিডি তৈরি করবো।
1000x1000 সাইজে 300 রেজুলেশনে ব্যাকগ্রাউন্ড ট্রান্সপারেন্ট রাখতে হবে।
এবার সিডি ডিজাইন করি,
প্রথমে কাস্টম শেইপ টুল সিলেক্ট করি।
তারপর রাউন্ড থিন ফ্রেইম সিলেক্ট করে নিই।
এবার পুরো স্কয়ার ইমেজ ফুল করে একটা রাউন্ড ফিগার আঁকি।
এবার এই লেয়ার সিলেক্ট করে Ctrl + J চাপ দেই, এতে এর ডুপ্লিকেট লেয়ার তৈরি হবে। এই ডুপ্লিকেট লেয়ার আমরা সিডি এর মাঝের স্ট্যাকিং রিং আর প্লাস্টিক হাব তৈরি করবো। মানে সিডির মাঝের ছিদ্রটা। ডুপ্লিকেট করার পর Alt + Left Shift চেপে ধরে লেয়ারের নিচের দিকের কোনের রিসাইজার লেফট ক্লিক দিয়ে চেপে ভেতরের দিকে নিয়ে যাই, এতে লেয়ারের সাইজ সব্দিক থেকে ছোট হবে।
এবার লেয়ার দুটি মারজ করে নিই। Ctrl চেপে লেয়ার দুটি সিলেক্ট করে রাইট ক্লিক করে "মারজ লেয়ারস"এ ক্লিক করে দিতে হবে।
এবার ইমেজে কালার ফিল দিতে হবে বা কোনো স্টাইল এপ্লাই করতে হবে।অথবা কালার এপ্লাই এবং ডিজাইন শেষ করার পর কোন ফিল্টার দিয়ে দেওয়া যেতে পারে। এবার এটাকে cd.png ফাইলে সেইভ করে নিতে হবে।
এবার শুরু হবে ফাইনাল কাজ।
এবার mainFile.psd তৈরি করে নিই।
সেখানে ইমেজ সাইজ হবে 900x768
(এই রেশিও ভালো, তার মানে এই নয় এইটিই ব্যাবহার করতে হবে। ইচ্ছেমত ব্যাবহার করা যেতে পারে।)
এখানে প্রথমে mainbody.png ড্র্যাগ অ্যান্ড ড্রপ করে আনতে হবে। এবং Move Tool সিলেক্ট করে Show Transform Control দিয়ে পাশের রিসাইজার গুলো দিয়ে ছবি ঠিক মাপে আনতে হবে।
একই ভাবে sidebody.png কে এনে রিসাইজ করে ঠিক ঠাক করে বসাতে হবে। বসাতে অসুবিধা হলে নিচে এর জিপ ফাইল ডাউনলোড লিঙ্ক আছে, সেখান থেকে ইমেজ রিপ্লেস করে নিজের ইমেজ বসিয়ে নিলেই কাজ হবে।
এবার সিডিটা বসাই।আগের মত করে রিসাইজ করে নিই।
ব্যাস! কাজ শেষ! আরও স্টাইল যোগ করা যেতে পারে।
তবে আমি আর দেখাব না। কেবল সিডি কাভারের কাজ সেশে অন্য ইমেজে কিভাবে ফ্লোর রিফ্লেকশন দেওয়া যায় সেটা দেখিয়ে আজকের পোস্ট শেষ করবো।
এবার নতুন একটা ইমেজ তৈরি করতে হবে। এইচডি হলে (৭২০পি) হলে ভালো হয়। সেখানে ব্যাকগ্রাউন্ড সাদা করে এই সিডি কাভারের ইমেজ রাখতে হবে।
এবার CD Cover এর লেয়ার এর উপর সিলেকশন রেখে Ctrl + J চাপো। এতে ডুপ্লিকেট লেয়ার তৈরি হবে। এবার ডুপ্লিকেট লেয়ার সিলেক্ট করে Ctrl + T চাপো। এতে Free Transform করা যাবে। এবার Ctrl + T চাপার পর ইমেজের উপর রাইট ক্লিক করে Flip Vertical ক্লিক করো।
এবার লেয়ারের অপাসিটি কমিয়ে দাও (13%) বা ঝাপসা করে দাও এবং ফ্রি ট্রাস্ফরম ইউজ করে ইমেজের সাথে রিফ্লেকশন বানিয়ে নাও।
ব্যাস! আজ এই পর্যন্ত! সমস্যা হলে বোলো।
এর এই ধরনের ডিজাইন করিয়ে নিতে চাইলে আমাদের পেইজে কন্টাক্ট করতে পার।*চার্জ প্রযোজ্য
এটাই হয়ত আমার পক্ষ থেকে পিএইচপি ইমেজ ওয়াটারমার্কিং এর শেষ পর্ব। তবে জিআর+ থেকে নয়। এরপরেও হয়তো আরও ভালো স্ক্রিপ্ট আসবে এই সম্পর্কে।
এবার আসব আমার চার নাম্বার স্ক্রিপ্টে।
এখানে আমরা ফাইল আপলোড করে ওয়াটার মার্ক বানাতে পারবো। এখানে ওয়াটার মার্ক ইমেজ আগে থেকে ঠিক করা থাকবে। কিন্তু মেইন ইমেজ ফাইল আমরা আপলোড করে নিব।
এখানে ফাইল এরে ব্যাবহার করে ইমেজ আপলোড করবো।
পিএইচপি প্রোগ্রাম রান করাতে হলে অবশ্যই ওয়েব সার্ভার লাগবে। কিন্তু ওয়েব সার্ভার থাকতে হলে লাগবে টাকা। টাকা যদি থাকে বা ওয়েবসারভার কেনা থাকলে এটা রান করা কোনো ব্যাপার না, ফাইল আপলোড করে ব্রাউজার দিয়ে খুললেই হবে।
আমাদের জন্য আমরা একটা অফলাইনে অ্যাপাচি সার্ভার সিমিউলেট করতে হবে। এর নাম xampp.
এবার ঐ ফোল্ডারে index.php ফাইল তৈরি কর কোন টেক্সট ফাইল এডিটর দিয়ে।
এবার ঐ ডিরেক্টরিতে index.php তৈরি করে নিচের কোড লিখে সেভ কর,
<?php
if(isset($_FILES['image_file']))
{ $max_size = 800; //max image size in Pixels $destination_folder = 'watermark'; $watermark_png_file = 'watermark.png'; //watermark png file $image_name = $_FILES['image_file']['name']; //file name $image_size = $_FILES['image_file']['size']; //file size $image_temp = $_FILES['image_file']['tmp_name']; //file temp $image_type = $_FILES['image_file']['type']; //file type switch(strtolower($image_type)){ //determine uploaded image type //Create new image from file case 'image/png': $image_resource = imagecreatefrompng($image_temp); break; case 'image/gif': $image_resource = imagecreatefromgif($image_temp); break; case 'image/jpeg': case 'image/pjpeg': $image_resource = imagecreatefromjpeg($image_temp); break; default: $image_resource = false; } if($image_resource){ //Copy and resize part of an image with resampling list($img_width, $img_height) = getimagesize($image_temp); //Construct a proportional size of new image $image_scale = min($max_size / $img_width, $max_size / $img_height); $new_image_width = ceil($image_scale * $img_width); $new_image_height = ceil($image_scale * $img_height); $new_canvas = imagecreatetruecolor($new_image_width , $new_image_height); if(imagecopyresampled($new_canvas, $image_resource , 0, 0, 0, 0, $new_image_width, $new_image_height, $img_width, $img_height)) { if(!is_dir($destination_folder)){ mkdir($destination_folder);//create dir if it doesn't exist } //center watermark $watermark_left = ($new_image_width/2)-(300/2); //watermark left $watermark_bottom = ($new_image_height/2)-(100/2); //watermark bottom $watermark = imagecreatefrompng($watermark_png_file); //watermark image imagecopy($new_canvas, $watermark, $watermark_left, $watermark_bottom, 0, 0, 300, 100); //merge image //output image direcly on the browser. header('Content-Type: image/jpeg'); imagejpeg($new_canvas, NULL , 90); //Or Save image to the folder //imagejpeg($new_canvas, $destination_folder.'/'.$image_name , 90); //free up memory imagedestroy($new_canvas); imagedestroy($image_resource); die(); } }
}
?>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#upload-form { padding: 20px; background: #F7F7F7; border: 1px solid #CCC; margin-left: auto; margin-right: auto; width: 400px;
}
#upload-form input[type=file] { border: 1px solid #ddd; padding: 4px;
}
#upload-form input[type=submit] { height: 30px;
}
</style>
</head>
<body>
<form action="" id="upload-form" method="post" enctype="multipart/form-data">
<input type="file" name="image_file" />
<input type="submit" value="Send Image" />
</form>
</body>
</html>
হলুদ হাইলাইট করা অংশে ফাইলের সাইজ, ওয়াটার মার্ক ফাইল ঠিক করা হয়েছে।
কমলা হাইলাইট করা অংশে ইমেজের টেম্পরারি ফাইল বানান হয়েছে এবং ইমেজ সাইজ, ইমেজের এক্সটেনশন এবং ইমেজের নাম বের করা হয়েছে।
আকাশি হাইলাট অংশে ফাইলের এক্সটেনশন অনুযায়ী হেডার ফাইল সুইচ করা হয়েছে।
প্রতিটি অংশের পাশে কমেন্ট লেখা আছে, যাতে কোন অংশের কাজ কি বোঝা যায়। সেটা দেখলেই হবে। আমি আর তেমন কিছু লিখব না।
এবার index.php এর সাথে একই ডিরেক্টরিতে watermark নামের ফোল্ডার বানাই ($destination_folder = 'watermark'; এর জন্য) এবং watermark.png রেখে দিয়ে ব্রাউজার দিয়ে চালু করি এভাবে।
![পিএইচপি দিয়ে সহজে বানাও ওয়াটারমার্ক - ৪ [FILES array দিয়ে ফাইল আপলোড করে ওয়াটারমার্ক করা]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCw9q1P5gToZGias-S0i0TDPboMPqqondwSKEukhBCyQtDrmeAxyCpoMQl8F2CxIW5TRR7X6jZrXc3xn9jH7qLlIYlcjtt31xjNek1vAxJyAQwy5QfrJzwwrZG3yBu7Va-lkqGQLooGU-/s640/sdgjh.png "পিএইচপি দিয়ে সহজে বানাও ওয়াটারমার্ক - ৪ [FILES array দিয়ে ফাইল আপলোড করে ওয়াটারমার্ক করা]")
