অ্যাপ আইকন নিয়ম: আলফা চ্যানেল ও সাইজ, দুই স্টোরের জন্য

আপনার একটি লোগো আছে আর দুটি অ্যাপ স্টোর, আর Apple-কে সন্তুষ্ট করে এমন ফাইলটাই Google যা চায় তা নয়। এটা সবচেয়ে খারাপ মুহূর্তে সামনে আসে: বিল্ড তৈরি, আর আপলোড বারবার আলফা চ্যানেলের কারণে ব্যর্থ হচ্ছে।

Apple চায় স্কয়ার 1024x1024 আইকন, অস্বচ্ছ ব্যাকগ্রাউন্ডসহ। Play চায় 512x512 32-বিট PNG, যাতে টেকনিক্যালি আলফা সমর্থিত হলেও Google-এর নিজস্ব ডিজাইন স্পেক অনুযায়ী তা ব্যবহার করা উচিত নয়। আর কোনো স্টোরই একেবারে "ফিনিশড" দেখতে ফাইল চায় না — দুটোই আপলোডের পর নিজেদের কোণ আর ইফেক্ট বসিয়ে দেয়। প্রতিটা স্টোর আসলে কী চায়, আর একটি লোগো থেকে দুটো ফাইল কীভাবে বের করবেন — সেটাই এখানে।

Apple: 1024 পিক্সেল, বর্গাকার, কোনো স্বচ্ছতা নয়

Apple-এর Human Interface Guidelines-এ iOS, iPadOS ও macOS-এর জন্য অ্যাপ আইকনের লেআউট সাইজ বলা হয়েছে 1024x1024 px, বর্গাকার, sRGB-তে, Gray Gamma 2.2 অথবা Display P3-তে। Apple এখন Icon Composer পছন্দ করে, যেখানে আপনি ফোরগ্রাউন্ড লেয়ার ইমপোর্ট করে টুলের ভেতরেই ব্যাকগ্রাউন্ড ঠিক করেন, তবে ফ্ল্যাটেন করা একটি ছবিও এখনও গ্রহণযোগ্য: লেয়ার বেশি নিয়ন্ত্রণ দেয়, কিন্তু বাধ্যতামূলক নয়।

প্রথমবার সাবমিট করা ডেভেলপাররা ব্যাকগ্রাউন্ডের কারণে আটকে যান। ইমপোর্ট করা ব্যাকগ্রাউন্ড লেয়ারের জন্য Apple-এর নির্দেশ স্পষ্ট: এটাকে ফুল-ব্লিড ও অস্বচ্ছ রাখুন। স্বচ্ছ ব্যাকগ্রাউন্ডযুক্ত একটি 1024px PNG বৈধ App Store আইকন নয় — এমন একটি আপলোড করলে App Store Connect ফিরিয়ে দেয় ITMS-90717: App Store আইকন স্বচ্ছ হতে পারবে না বা আলফা চ্যানেল রাখতে পারবে না। ডার্ক অ্যাপিয়ারেন্স ভ্যারিয়েন্টই একমাত্র ব্যতিক্রম: Apple চায় সেটা স্বচ্ছ ব্যাকগ্রাউন্ড দিয়ে সরবরাহ করুন, যাতে সিস্টেমের দেওয়া ব্যাকগ্রাউন্ড ভেতর দিয়ে দেখা যায়। বাকি সব জায়গায়, আপনার চিহ্নের পেছনে কোন রং বসবে তা ঠিক করে সেটা ফাইলের মধ্যেই বেক করে দিন।

Apple-এর অন্যান্য প্ল্যাটফর্মে লেআউট সাইজ পাল্টে যায়: watchOS-এ 1088x1088 আর visionOS-এ 1024x1024, দুটোই বৃত্তাকারে মাস্ক করা, আর tvOS-এ ল্যান্ডস্কেপ 800x480। পদ্ধতিও পাল্টায়: tvOS ও visionOS-এর আইকন Icon Composer-এ নয়, বরং Xcode-এ লেয়ার্ড ইমেজ স্ট্যাক হিসেবে সাজানো হয়।

Google Play: 512 পিক্সেল, আলফা অনুমোদিত, তবু স্বচ্ছতা এখনও ভুল

Play-এর স্টোর লিস্টিং আইকন হলো আলফাসহ 32-বিট PNG, 512x512 px, sRGB, সর্বোচ্চ 1024KB। শুধু এটুকু পড়লে মনে হবে আপনার কাছে যে স্বচ্ছ কাটআউট আগে থেকেই আছে সেটাই চলবে।

Google-এর আইকন ডিজাইন স্পেক সেই দরজা বন্ধ করে দেয়: স্বচ্ছ অ্যাসেটে Google Play UI-এর ব্যাকগ্রাউন্ড রং দেখা যায়। ফলে আপনার চিহ্ন Play যে সারফেসেই রেন্ডার করুক না কেন তার উপর ভাসতে থাকে, আর একটি গাঢ় লোগো ডার্ক মোডে মিলিয়ে যায়। Google-এর পরামর্শ: আপনার ব্র্যান্ডের সাথে মানানসই একটি ব্যাকগ্রাউন্ড রং বেছে নিন।

Play-এর আরও দুটি নিয়ম: র‍্যাঙ্কিং, দাম বা Play ক্যাটাগরি বোঝায় এমন কোনো ব্যাজ বা লেখা রাখা যাবে না, আর স্টোর লিস্টিং আইকন ডিভাইসের লঞ্চার আইকন থেকে আলাদা। সেই অ্যাডাপটিভ আইকন 108x108 dp লেয়ার ব্যবহার করে, যেখানে শুধু ভেতরের 66x66 dp অংশটুকুর ব্যাপারে নিশ্চয়তা দেওয়া হয় যে সেটা কোনো OEM মাস্কে কখনও কাটা পড়বে না।

একটি লোগো থেকে দুটি ফাইল তৈরি করা

দুটি ফাইলই একই জায়গা থেকে শুরু হয়: আপনার চিহ্নটি, যেটার উপর সেটা বসে ছিল তা থেকে পরিষ্কারভাবে আলাদা করা। যদি আপনার লোগো শুধু কোনো সাপ্লায়ারের দেওয়া JPEG হিসেবে বা ছাপা স্টেশনারির ছবি হিসেবে থাকে, তাহলে প্রথমে সেটার ব্যাকগ্রাউন্ড সরিয়ে নিন যাতে আকৃতিটা আসল আলফা চ্যানেলসহ আলাদা হয়ে যায়। remover.bg চিহ্নটিকে তার ব্যাকগ্রাউন্ড থেকে তুলে নিয়ে এডিটরে একটি নিরেট বা কাস্টম ব্র্যান্ড রঙের উপর বসানোর সুযোগ দেয় — এটাই সেই ফ্ল্যাটেনিং ধাপ যা Apple দাবি করে।

যে ক্রমে কাজ করলে ফল মেলে:

1. ব্যাকগ্রাউন্ড সরিয়ে নিন যাতে লোগোটা একাই দাঁড়িয়ে থাকে। প্রান্তগুলো সাদার বদলে গাঢ় রঙের বিপরীতে যাচাই করুন — পাতলা স্ট্রোক ও সেরিফের ত্রুটি সাদা প্রিভিউতে লুকিয়ে থাকে।
2. ব্যাকগ্রাউন্ড আপনার ব্র্যান্ড রঙে সেট করে একটি PNG এক্সপোর্ট করুন। প্রেস কিট আর ফেভিকনের জন্য স্বচ্ছ সংস্করণটাও রেখে দিন।
3. আপনার নিজের ডিজাইন টুলে সেই PNG-টাকে একটি বর্গাকার ক্যানভাসে বসান এবং Apple-এর জন্য 1024x1024 আর Play-এর জন্য 512x512 সাইজে এক্সপোর্ট করুন। সাইজিংয়ের কাজ এখানেই হওয়া উচিত, ব্যাকগ্রাউন্ড রিমুভারে নয়।

স্ক্যান করা বা ছবি তোলা লোগোর ক্ষেত্রে, লোগো থেকে ব্যাকগ্রাউন্ড সরানো নিবন্ধে ব্যতিক্রমী পরিস্থিতিগুলো কভার করা হয়েছে, আর স্বচ্ছ PNG গাইড ব্যাখ্যা করে কেন সেই মাস্টার ফাইলটা রেখে দেওয়া দরকার।

কোণ আর ছায়া আঁকার কাজটা স্টোরকেই করতে দিন

Play এ ব্যাপারে সুনির্দিষ্ট: এটা নিজেই আইকন সাইজের 30% রেডিয়াসে কোণ গোল করে দেয়, আপলোডের পর নিজস্ব ড্রপ শ্যাডো যোগ করে, আর চায় আপনি দুটোই বাদ দিন। Apple আপনার বর্গাকার ছবিকে সিস্টেমের রাউন্ডেড রেক্টাঙ্গেলে মাস্ক করে এবং নিজস্ব হাইলাইট, রিফ্র্যাকশন ও ট্রান্সলুসেন্সি প্রয়োগ করে, আর সতর্ক করে যে আগে থেকে মাস্ক করা লেয়ার এই ইফেক্টগুলো নষ্ট করে দেয় ও প্রান্ত এবড়োখেবড়ো দেখায়।

তাহলে: আগে থেকে গোল করা কোণ নয়, ড্রপ শ্যাডো নয়, বেভেল নয়, গ্লো নয়। এই সংযমটা শুধু আইকনের ক্ষেত্রে প্রযোজ্য — একটা প্রোডাক্ট ফটোতে, একটা বাস্তবসম্মত কনট্যাক্ট শ্যাডো না থাকলে জিনিসটাকে পেস্ট করে বসানো মনে হয়।

দুই স্টোরই যেহেতু মাস্ক করে, তাই চিহ্নের গুরুত্বপূর্ণ অংশটা কেন্দ্রে রাখুন। Apple-এর নির্দেশনা হলো মূল কনটেন্ট কেন্দ্রে রাখা, যাতে মাস্কিং সেটা কেটে না ফেলে। Play-এর কিলাইন গ্রিড মানুষ যেভাবে ধরে নেয় তার থেকে ভিন্নভাবে কাজ করে: এটা একটা পজিশনিং গাইড, কোনো সীমারেখা নয়। Google-এর নির্দেশ হলো যতটা সম্ভব পুরো অ্যাসেটটা আর্টওয়ার্ক দিয়ে ভরিয়ে দিন, আর কিলাইনে ফিরে যান শুধু তখনই যখন লোগোর চারপাশের আকৃতিটা ব্র্যান্ডের জন্য অপরিহার্য। সতর্কতাবশত বর্গের চারপাশে প্যাডিং রাখলে আপনার আইকন পাশের প্রতিটা লিস্টিংয়ের চেয়ে দৃশ্যত ছোট দেখাবে।

30% রেডিয়াস আসলে যেটা গ্রাস করে সেটা হলো কোণগুলো, তাই কোণে ঠেলে দেওয়া কোনো ওয়ার্ডমার্কের প্রান্তগুলো হারিয়ে যায়। বৃত্তাকার watchOS আর visionOS মাস্কে, প্রান্ত-থেকে-প্রান্ত বিস্তৃত একটা ওয়ার্ডমার্কের প্রথম আর শেষ অক্ষর সরাসরি হারিয়ে যায়।

আপলোড করার আগে

• Apple: 1024x1024 PNG, বর্গাকার, সম্পূর্ণ অস্বচ্ছ, কোণ ধারালোই থাকবে।
• Play: 512x512 32-বিট PNG, সর্বোচ্চ 1024KB, স্বচ্ছতার বদলে ব্র্যান্ড-রঙের ব্যাকগ্রাউন্ড, কোণ ধারালোই থাকবে।
• দুই স্টোরেই একই আর্টওয়ার্ক আর রং: ব্যবহারকারী যেন একটাই অ্যাপ চিনতে পারেন, দুটো নয়।
• দুটোই থাম্বনেইল সাইজে প্রিভিউ করে দেখুন। 1024-এ যে ডিটেইল স্পষ্ট বোঝা যায় তা 40 পিক্সেলে হারিয়ে যায়।

আইকনটা একবার ঠিক করে নিলে এরপরের প্রতিটা রিলিজেই সেটা ঠিক থেকে যাবে।