“একটি ছবির ওপর আরেকটি ছবি বসানো” কথাটিই সহজ ভাষায় ছবি ওভারলে বোঝায়। একটি ছবি ক্যানভাস তৈরি করে, আর দ্বিতীয়টি তার ওপরে সরানো যায় এমন স্তর হয়। ওপরের স্তরটি পুরো ক্যানভাস ঢাকার মতো বড়, লোগোর মতো ছোট, অথবা আংশিক স্বচ্ছ রাখা যায়—যাতে দুটি ছবিই দেখা যায়।
একই কাজকে মানুষ আরও নানাভাবে বলেন: ছবির মধ্যে ছবি যোগ করা, আরেকটি ছবির ওপর ফটো বসানো, ছবি সুপারইম্পোজ করা, একটি ছবির ভেতর আরেকটি ঢোকানো, কিংবা ছবির মধ্যে ছোট ছবি তৈরি করা। যে ভাষাতেই বলুন, প্রয়োজনীয় নিয়ন্ত্রণ একই—স্তরের ক্রম, অবস্থান, মাপ, অস্বচ্ছতা এবং এক্সপোর্ট ফরম্যাট।
সবচেয়ে দ্রুত উপায় হলো OverlayImage.app খোলা, মূল ছবি আপলোড করা, দ্বিতীয় ছবি যোগ করা এবং ক্যানভাসেই জায়গামতো সাজানো। নিচে সেই পদ্ধতি ও সাধারণ ফলাফলের উপযোগী সেটিং দেখানো হলো।
“ওপরে” ও “পাশে” রাখার পার্থক্য
শুরু করার আগে ঠিক করুন, ছবি দুটি একই জায়গা ভাগ করবে কি না।
একটি ছবি আরেকটির ওপরে থাকলে তাদের ক্যানভাসের অংশ পরস্পরকে ছুঁয়ে যায়। ওপরের ছবি নিচের কিছু অংশ ঢাকতে পারে, অথবা স্বচ্ছতার কারণে দুটিই দেখা যেতে পারে। লোগো, ওয়াটারমার্ক, টেক্সচার, স্টিকার, ভেতরে ছোট ছবি বা ডাবল এক্সপোজারের জন্য এই গঠন ঠিক।
দুটি ছবি পাশাপাশি থাকলে কোনোটিই অন্যটিকে ঢাকে না। বড় একটি ক্যানভাসে উভয়ের সম্পূর্ণ প্রস্থ বা উচ্চতা থাকে। এটি ওভারলে নয়, জোড়া লাগানো; আগে-পরে তুলনা, পণ্যের ভিন্ন রূপ, নির্দেশনা ও অগ্রগতির ছবি দেখাতে ভালো।
OverlayImage.app-এ দুটোই আছে। একটি ছবির ওপর আরেকটি বসাতে ওভারলে নিন। প্রতিটি মূল ছবি পুরো দেখা দরকার হলে পাশাপাশি, ওপর ও নিচে বা গ্রিড কোলাজ বেছে নিন।
একটি ছবির ওপর আরেকটি ছবি বসানোর ধাপ
ধাপ ১: যে ছবিটি ক্যানভাস ঠিক করবে সেটি নিন
যে ছবির মাপ ও কম্পোজিশন সবচেয়ে গুরুত্বপূর্ণ সেটি আপলোড করুন। পণ্যের ছবিতে লোগো বসালে পণ্যের ছবিই মূল ছবি হবে। সাজানো ফ্রেমের ভেতর পোর্ট্রেট বসালে কোন মাপটি রাখতে চান তার ওপর নির্ভর করে ফ্রেম বা পটভূমিকে মূল ছবি নিতে পারেন।
মূল ছবিটিকে কাগজের পাতার মতো ভাবুন। বাকি সব ছবি এর কিনারা অনুযায়ী বসবে।
ধাপ ২: যে ছবিটি ওপরে থাকবে সেটি যোগ করুন
ওভারলে ছবি যোগ করুন চাপুন এবং দ্বিতীয় ফাইলটি খুলুন। এটি নির্বাচিত স্তর হিসেবে দেখা যাবে। স্বচ্ছ PNG ও WebP বিশেষ সুবিধাজনক, কারণ বিষয়ের চারপাশের অদৃশ্য অংশ নিচের ছবি ঢাকে না।
ওপরের ছবির সঙ্গে অনাকাঙ্ক্ষিত সাদা বা রঙিন বাক্স দেখা গেলে সেটি আসলে ফাইলেরই অংশ। অস্বচ্ছতা কমালে পুরো বাক্সটি হালকা হবে, কিন্তু মুছে যাবে না। পরিষ্কার লোগো বা কাটআউটের জন্য শুরুতেই স্বচ্ছ পটভূমিসহ ফাইল নিন।
ধাপ ৩: ওপরের ছবি সরান ও রিসাইজ করুন
নির্বাচিত স্তরটি টেনে নির্দিষ্ট জায়গায় নিন। অনুপাত না বদলে রিসাইজ করতে কোণার হ্যান্ডেল টানুন। ছবিটি ঠিক মাঝখানে দরকার হলে center alignment ব্যবহার করুন।
ভেতরের ছোট ছবির চারপাশে পরিকল্পিত ফাঁক রাখুন। কিনারা প্রায় ছুঁয়ে থাকা ছবিকে অনেক সময় ভুল করে বসানো মনে হয়। লোগো বা স্বাক্ষর তুলনামূলক কম খুঁটিনাটি থাকা জায়গায় রাখুন, যাতে পড়া যায়। পুরো ফ্রেম ঢাকার ওভারলে হলে উৎস যথেষ্ট বড় থাকলে ক্যানভাসের কিনারা পর্যন্ত বাড়ান। না পৌঁছালে এডিটরের ৩০০% মাপসীমা ছাড়ানোর বদলে বড় উৎসের ছবি ব্যবহার করুন।
একই মাপের অনেক কম্পোজিশনে একই অবস্থান চাইলে নির্দিষ্ট X ও Y ঘর কাজে লাগে। প্রথম ছবির স্থানাঙ্ক ও মাপ লিখে রাখুন; পরের সমান মাপের ছবিতে একই মান বসান।
ধাপ ৪: কোন ছবি কতটা দেখা যাবে ঠিক করুন
স্বাভাবিক মোডে ১০০ শতাংশ অস্বচ্ছতা রাখলে ওপরের ছবির প্রতিটি অস্বচ্ছ পিক্সেল নিচের স্তরের ওপর পুরোপুরি আঁকা হয়। উৎসের স্বচ্ছ পিক্সেল স্বচ্ছই থাকে। অস্বচ্ছতা কমালে রঙ মেশানোর নিয়ম না বদলেই নিচের ছবি বেশি দেখা যায়।
সাধারণ ওয়াটারমার্কের জন্য স্বাভাবিক মোড ও কম অস্বচ্ছতা যথেষ্ট। শৈল্পিক ছবির ওপর ছবির ফলাফলে মাল্টিপ্লাই, স্ক্রিন, ওভারলে বা সফট লাইট চেষ্টা করতে পারেন। সবসময় স্বাভাবিক মোডের সঙ্গে তুলনা করুন; অতিনাটকীয় ব্লেন্ডিং রঙের ভুল লুকিয়ে ফেলতে বা লেখা পড়া কঠিন করতে পারে।
নির্বাচিত স্তরের উজ্জ্বলতা, কনট্রাস্ট, রঙের ঘনত্ব ও ব্লারও বদলানো যায়। এগুলো ভেতরের ছোট ছবিকে আশপাশের দৃশ্যের সঙ্গে মেলাতে বা টেক্সচারকে নিচের ছবি ঢেকে না দিয়ে সহায়ক করতে কাজে লাগে।
ধাপ ৫: একটি তৈরি ফাইল ডাউনলোড করুন
PNG, JPEG বা WebP বেছে নিয়ে ফলাফল ডাউনলোড করুন। দুটি উৎস মিলে একটি output ফাইল হবে। মূল ফাইল আলাদা ও অপরিবর্তিত থাকবে।
চূড়ান্ত ক্যানভাসে স্বচ্ছতা বা পরিষ্কার graphic edge থাকলে PNG নিন। অস্বচ্ছ ব্যাকগ্রাউন্ডের চূড়ান্ত ফটোর জন্য JPEG ভালো। আধুনিক ব্রাউজারে ব্যবহারের উপযোগী ছোট web ছবি চাইলে WebP নিন।
ছবির মধ্যে ছবি বসানোর চারটি পরিচিত বিন্যাস
কোণায় ছোট লোগো
লোগো ছোট রাখুন, চারপাশে পরিষ্কার ফাঁকা রাখুন এবং স্বাভাবিক মোড ব্যবহার করুন। মূল ছবির কনট্রাস্ট বেশি হলে অস্বচ্ছতা সামান্য কমান; অতিরিক্ত স্বচ্ছ করলে ছোট পর্দায় চিহ্ন হারিয়ে যেতে পারে।
মাঝখানে ওয়াটারমার্ক
বড় ও মাঝখানে রাখা ওয়াটারমার্ক প্রুফ রক্ষা করতে পারে, তবে মূল বিষয় যেন তবুও বোঝা যায়। অস্বচ্ছতার মাঝামাঝি মান দিয়ে শুরু করে ছবির হালকা ও গাঢ়—দুই অংশেই দেখুন। আকাশে পড়া যায় এমন ওয়াটারমার্ক গাঢ় পোশাকের ওপর হারিয়ে যেতে পারে।
ভেতরে ছোট ছবি
Inset picture হলো বড় দৃশ্যের ভেতর রাখা ছোট আয়তাকার ছবি। reaction ছবি, detail view, map inset, নির্দেশনা ও তুলনায় এটি ভালো কাজ করে। সমান margin রাখুন এবং আপলোডের আগেই border লাগবে কি না ভাবুন। বর্তমান এডিটর ছবি বসাতে পারে, নিজে থেকে decorative frame বানায় না।
পুরো frame-জুড়ে দুটি ছবি blend করা
উৎসের মাপ অনুমতি দিলে ওপরের ছবি প্রায় বা পুরো ক্যানভাস ঢাকার মতো করুন; না হলে বড় উৎস নিন। অস্বচ্ছতা কমান বা ব্লেন্ড মোড বাছুন। দুই ছবির বিষয়, দিগন্ত, উজ্জ্বল অংশ ও চোখ চালনার রেখাগুলোর সম্পর্ক দেখুন। ওভারলে সামান্য সরালেও কোন খুঁটিনাটি দেখা যাবে তা সম্পূর্ণ বদলে যেতে পারে।
তিন বা তার বেশি ছবিতে স্তরের ক্রম যেভাবে কাজ করে
প্রতিটি নতুন overlay একটি stack-এ যোগ হয়। মূল ছবি একেবারে নিচে থাকে; overlay স্তরগুলোকে পরস্পরের তুলনায় সামনে বা পেছনে নেওয়া যায়। সামনের স্তর নিচের সব স্তর ঢাকতে পারে। পেছনে নেওয়া স্তর ওপরের স্তরের স্বচ্ছ অংশ দিয়েই শুধু দেখা যেতে পারে।
ধরা যাক, একটি social graphic-এ থাকবে:
- মূল স্তরে পণ্যের ছবি।
- ছবির ওপরে হালকা রঙের wash।
- wash-এর ওপরে দামের badge।
- সবার সামনে logo।
অবস্থান বা চেহারা বদলানোর আগে সংশ্লিষ্ট স্তরের thumbnail নির্বাচন করুন। অন্য ছবি ঢেকে রাখায় ক্যানভাসে কোনো স্তরে click করা কঠিন হলে thumbnail বেছে forward নিয়ন্ত্রণ ব্যবহার করুন।
কখন merge layout বেছে নেবেন
দুই উৎসের ছবি সম্পূর্ণ দেখা দরকার হলে পাশাপাশি বা ওপর ও নিচে নিন; তিন বা তার বেশি পূর্ণ ছবির জন্য গ্রিড কোলাজ ব্যবহার করুন। এসব বিন্যাসে এডিটর ছবি রেন্ডার করে, কিন্তু শুধু ওভারলের অবস্থান, অস্বচ্ছতা, ব্লেন্ড বা ফিল্টার সেটিং প্রয়োগ করে না। বিন্যাস বদলালেও ফাইলগুলো থেকে যায়।
যেসব ভুল এড়াবেন
ওপরের ছবি এত ছোট করা যে বোঝাই যায় না
ছোট মানেই সূক্ষ্ম নয়। অতি ছোট লোগোর চিকন লেখা এক্সপোর্ট বা social-media compression-এর পর অস্পষ্ট দাগ হয়ে যেতে পারে। সাধারণ দেখার মাপে পরীক্ষা করুন।
ভুল করে মূল বিষয় ঢেকে ফেলা
ইচ্ছা করে না ঢাকলে মুখ, পণ্যের নাম, নির্দেশনা ও গুরুত্বপূর্ণ কিনারা থেকে ওভারলে সরিয়ে রাখুন। ভুল অবস্থানের একমাত্র সমাধান হিসেবে অস্বচ্ছতা ব্যবহার করবেন না; এটি কেবল শেষের সূক্ষ্ম সমন্বয়।
খুব তাড়াতাড়ি স্তর এক করে ফেলা
কম্পোজিশন শেষ না হওয়া পর্যন্ত ওভারলে আলাদা রাখুন। একবার অনেক উপাদান সমতল করে একটি উৎস ফাইল বানালে শুধু একটি অংশ বদলানো কঠিন হয়। ব্রাউজার এডিটর ডাউনলোড পর্যন্ত আপলোড করা স্তরগুলো আলাদা রাখে এবং সর্বোচ্চ পাঁচটি ওভারলে ফাইল নেয়।
JPEG থেকে স্বচ্ছতা আশা করা
JPEG স্বচ্ছ পিক্সেল সমর্থন করে না। চারপাশ অদৃশ্য এমন ওপরের ছবির জন্য PNG, স্বচ্ছ WebP বা SVG ব্যবহার করুন।
সচরাচর জিজ্ঞাসা
একটি ছবির ওপর আরেকটি ছবি বসানোকে কী বলে?
সাধারণত ছবি ওভারলে, ফটো ওভারলে, সুপারইম্পোজিশন বা ছবির মধ্যে ছবি কম্পোজিশন বলা হয়। “ছবি জোড়া লাগানো” কথাটিও শোনা যায়, যদিও সেটি সাধারণত ওভারল্যাপ ছাড়া সম্পূর্ণ ছবি জোড়া বোঝায়।
Photoshop ছাড়া কি এক ছবির ওপর আরেকটি বসানো যায়?
হ্যাঁ। ব্রাউজারভিত্তিক স্তর এডিটরে ডেস্কটপ ডিজাইন অ্যাপ ইনস্টল না করেই স্থির ছবি ওভারলের অবস্থান, মাপ, অস্বচ্ছতা, ব্লেন্ড ও এক্সপোর্ট নিয়ন্ত্রণ করা যায়।
ওপরের ছবিটি কি স্বচ্ছ করা যাবে?
হ্যাঁ। PNG, WebP বা SVG-এর মতো স্বচ্ছতাসহ উৎস ফাইল ব্যবহার করুন। যেকোনো নির্বাচিত ওভারলে স্তরের অস্বচ্ছতাও কমানো যায়।
ছবিটিকে আরেকটি overlay-এর পেছনে নেব কীভাবে?
তার thumbnail নির্বাচন করে backward স্তর নিয়ন্ত্রণ ব্যবহার করুন। মূল ছবি ক্যানভাস পটভূমি-ই থাকবে; যোগ করা overlay-গুলোকে নিজেদের মধ্যে সাজানো যায়।
ছবি একসঙ্গে করলে কি অনলাইনে আপলোড হয়?
OverlayImage.app বর্তমান ব্রাউজারেই কাজের ফাইল প্রক্রিয়া করে। ছবিগুলো ছবি প্রক্রিয়াকরণ সার্ভারে পাঠানো বা ক্লাউড প্রকল্পে রাখা হয় না।
পদ্ধতিটি এখনই ব্যবহার করতে একটি ছবির ওপর আরেকটি ছবি বসান। ফরম্যাট ও ব্লেন্ড মোড আরও বিস্তারিত বুঝতে সম্পূর্ণ ছবি ওভারলে নির্দেশিকাটি পড়ুন।