← بلاگ
7 منٹ کا مطالعہ

ایپ آئیکن رولز: دونوں اسٹورز کے لیے الفا چینل اور سائز

ایپل کو غیر شفاف 1024x1024 چاہیے، پلے کو 512x512 PNG۔ اپ لوڈ روکنے والی ITMS-90717 الفا ایرر، اور ایک لوگو سے دونوں فائلیں بنانے کا طریقہ۔

  • app icon
  • App Store
  • Google Play
  • transparent png
  • logo
  • mobile app
  • icon design
ایپ آئیکن رولز: دونوں اسٹورز کے لیے الفا چینل اور سائز

آپ کے پاس ایک لوگو اور دو ایپ اسٹورز ہیں، اور جو فائل ایپل کو مطمئن کرتی ہے وہی فائل گوگل کو مطلوب نہیں ہوتی۔ یہ مسئلہ سب سے بُرے وقت پر سامنے آتا ہے: بلڈ مکمل ہو چکی ہوتی ہے اور اپ لوڈ الفا چینل کی وجہ سے بار بار ناکام ہو رہا ہوتا ہے۔

ایپل کو غیر شفاف بیک گراؤنڈ کے ساتھ ایک مربع 1024x1024 آئیکن چاہیے۔ پلے کو ایک 512x512 32-بٹ PNG چاہیے جو تکنیکی طور پر الفا کو سپورٹ تو کرتا ہے لیکن گوگل کی اپنی ڈیزائن اسپیک کے مطابق اسے استعمال نہیں کرنا چاہیے۔ اور کوئی بھی اسٹور مکمل تیار شدہ نظر آنے والی فائل نہیں چاہتا — دونوں اپ لوڈ کے بعد اپنے کونے اور ایفیکٹس خود لگاتے ہیں۔ آگے دیکھتے ہیں کہ ہر اسٹور کیا مانگتا ہے، اور ایک ہی لوگو سے دونوں فائلیں کیسے بنائی جائیں۔

ایپل: 1024 پکسل، مربع، کچھ بھی شفاف نہیں

ایپل کی Human Interface Guidelines میں iOS، iPadOS اور macOS کے لیے ایپ آئیکن کا لے آؤٹ سائز 1024x1024 px، مربع، sRGB میں، Gray Gamma 2.2 یا Display P3 کے طور پر درج ہے۔ ایپل کا پسندیدہ طریقہ اب Icon Composer ہے، جہاں آپ فور گراؤنڈ لیئرز امپورٹ کرتے ہیں اور بیک گراؤنڈ خود ٹول میں طے کرتے ہیں، مگر ایک فلیٹ شدہ تصویر بھی اب بھی قابلِ قبول ہے: لیئرز زیادہ کنٹرول دیتی ہیں، لیکن لازمی نہیں ہیں۔

آئی فون کی ہوم اسکرین کا کلوز اپ جو گرڈ میں ترتیب دیے گئے ایپ آئیکنز سے بھری ہوئی ہے، ہر آئیکن اپنی علامت کے پیچھے ٹھوس غیر شفاف بیک گراؤنڈ دکھا رہا ہے

پہلی بار سبمٹ کرنے والوں کو بیک گراؤنڈ ہی روک دیتا ہے۔ امپورٹ کی گئی بیک گراؤنڈ لیئر کے لیے ایپل کی ہدایت واضح ہے: اسے فل بلیڈ اور مکمل غیر شفاف بنائیں۔ شفاف بیک گراؤنڈ والا 1024px PNG درست App Store آئیکن نہیں ہے — ایسی فائل اپ لوڈ کریں تو App Store Connect ITMS-90717 ایرر واپس بھیجتا ہے: App Store آئیکن شفاف نہیں ہو سکتا اور نہ ہی اس میں الفا چینل ہو سکتا ہے۔ ڈارک اپیئرنس ورژن اس کی واحد استثنا ہے: ایپل چاہتا ہے کہ آپ اسے شفاف بیک گراؤنڈ کے ساتھ فراہم کریں تاکہ سسٹم کا فراہم کردہ بیک گراؤنڈ نظر آئے۔ باقی ہر جگہ، طے کریں کہ آپ کی مارک کے پیچھے کون سا رنگ ہوگا اور اسے فائل میں شامل کر دیں۔

دیگر ایپل پلیٹ فارمز پر لے آؤٹ سائز بدل جاتا ہے: watchOS پر 1088x1088 اور visionOS پر 1024x1024، دونوں سرکلر ماسک شدہ، جبکہ tvOS پر لینڈ اسکیپ 800x480۔ طریقہ بھی بدل جاتا ہے: tvOS اور visionOS کے آئیکنز Icon Composer کے بجائے Xcode میں لیئرڈ امیج اسٹیکس کے طور پر بنائے جاتے ہیں۔

گوگل پلے: 512 پکسل، الفا کی اجازت ہے، مگر شفافیت پھر بھی غلطی ہے

پلے کا اسٹور لسٹنگ آئیکن الفا کے ساتھ 32-بٹ PNG، 512x512 px، sRGB، زیادہ سے زیادہ 1024KB ہونا چاہیے۔ اگر صرف یہی پڑھیں تو لگتا ہے کہ آپ کا موجودہ شفاف کٹ آؤٹ بالکل ٹھیک ہے۔

ٹیبلٹ اسکرین کا کلوز اپ جس پر گوگل پلے اسٹور کا ایپ لسٹنگ انٹرفیس ایپ آئیکنز اور انسٹال بٹنز کے ساتھ دکھایا گیا ہے

گوگل کی آئیکن ڈیزائن اسپیک یہ راستہ بند کر دیتی ہے: شفاف اثاثے گوگل پلے UI کا بیک گراؤنڈ رنگ ہی دکھاتے ہیں۔ اس کے بعد آپ کی مارک جس بھی سطح پر پلے رینڈر کرے اسی پر تیرتی نظر آتی ہے، اور ڈارک موڈ میں گہرے رنگ کا لوگو غائب ہو جاتا ہے۔ گوگل کا مشورہ: اپنے برانڈ کے مطابق ایک بیک گراؤنڈ رنگ منتخب کریں۔

پلے کے مزید دو قواعد: ایسے بیجز یا متن نہ ہوں جو رینکنگ، قیمت یا پلے کیٹیگریز کا اشارہ دیں، اور اسٹور لسٹنگ آئیکن ڈیوائس لانچر آئیکن سے الگ ہوتا ہے۔ وہ ایڈاپٹیو آئیکن 108x108 dp لیئرز استعمال کرتا ہے، جہاں صرف اندرونی 66x66 dp کی ضمانت دی جاتی ہے کہ کسی OEM ماسک سے کبھی کٹے گی نہیں۔

ایک ہی لوگو سے دونوں فائلیں بنانا

دونوں فائلیں ایک ہی چیز سے شروع ہوتی ہیں: آپ کی مارک، جو کسی بھی چیز سے صاف طور پر الگ کی گئی ہو جس پر وہ پہلے موجود تھی۔ اگر آپ کا لوگو صرف کسی سپلائر کی بھیجی JPEG یا پرنٹ شدہ اسٹیشنری کی تصویر کی صورت میں موجود ہے، تو پہلے اسے کاٹ کر الگ کریں تاکہ شکل ایک حقیقی الفا چینل کے ساتھ الگ ہو جائے۔ remover.bg مارک کو اس کے بیک گراؤنڈ سے الگ کرتا ہے اور ایڈیٹر میں آپ کو اسے ٹھوس یا کسٹم برانڈ رنگ پر رکھنے دیتا ہے — یہی وہ فلیٹننگ اسٹیپ ہے جو ایپل کو درکار ہوتا ہے۔

عینک پہنے ایک گرافک ڈیزائنر جدید آفس میں ڈیسک ٹاپ کمپیوٹر پر بیٹھا مانیٹر پر دکھائے گئے ویژول آرٹ ورک پر کام کر رہا ہے

یہ ترتیب کام کرتی ہے:

  1. بیک گراؤنڈ ہٹا دیں تاکہ لوگو تنہا نظر آئے۔ کناروں کو سفید کے بجائے گہرے رنگ کے پس منظر پر چیک کریں — باریک لائنیں اور سیرف سفید پری ویو پر اپنی خامیاں چھپا لیتے ہیں۔
  2. بیک گراؤنڈ کو اپنے برانڈ کے رنگ پر سیٹ کریں اور PNG ایکسپورٹ کریں۔ پریس کٹس اور فیوی آئیکنز کے لیے شفاف ورژن بھی محفوظ رکھیں۔
  3. اپنے ڈیزائن ٹول میں، اس PNG کو ایک مربع کینوس پر رکھیں اور ایپل کے لیے 1024x1024 اور پلے کے لیے 512x512 پر ایکسپورٹ کریں۔ سائزنگ کا کام وہاں ہونا چاہیے، بیک گراؤنڈ ہٹانے والے ٹول میں نہیں۔

اسکین شدہ یا تصویر کھینچے گئے لوگو کے لیے، لوگو سے بیک گراؤنڈ ہٹانا مشکل صورتحال کا احاطہ کرتا ہے، اور شفاف PNG گائیڈ یہ سمجھاتا ہے کہ یہ ماسٹر فائل کیوں محفوظ رکھنے کے قابل ہے۔

کونوں اور سائے کا کام اسٹورز پر چھوڑ دیں

پلے اس بارے میں واضح ہے: وہ خود آئیکن سائز کے 30% رداس پر کونے گول کرتا ہے، اپ لوڈ کے بعد اپنا ڈراپ شیڈو خود شامل کرتا ہے، اور آپ سے دونوں چیزیں شامل نہ کرنے کو کہتا ہے۔ ایپل آپ کے مربع کو سسٹم کے گول کنارے والے مستطیل میں ماسک کرتا ہے اور اپنی ہائی لائٹس، انعطاف اور شفافیت خود لگاتا ہے، اور خبردار کرتا ہے کہ پہلے سے ماسک کی گئی لیئرز ان ایفیکٹس کو خراب کر دیتی ہیں اور کنارے کھردرے دکھاتی ہیں۔

لہٰذا: پہلے سے گول کیے گئے کونے نہیں، ڈراپ شیڈو نہیں، بیول نہیں، گلو نہیں۔ یہ احتیاط صرف آئیکنز کے لیے مخصوص ہے — پروڈکٹ فوٹو میں، ایک حقیقت پسندانہ کانٹیکٹ شیڈو ہی وہ چیز ہے جو چیز کو چپکائے ہوئے نظر آنے سے روکتی ہے۔

چونکہ دونوں اسٹورز ماسک لگاتے ہیں، اس لیے مارک کا اہم حصہ درمیان میں رکھیں۔ ایپل کی ہدایت یہ ہے کہ بنیادی مواد کو درمیان میں رکھیں تاکہ ماسکنگ اسے کاٹ نہ سکے۔ پلے کی کی لائن گرڈ لوگوں کے عام تصور سے مختلف طریقے سے کام کرتی ہے: یہ ایک پوزیشننگ گائیڈ ہے، حد بندی نہیں۔ گوگل کی ہدایت یہ ہے کہ جب ممکن ہو پورے اثاثے کو آرٹ ورک سے بھر دیں، اور کی لائنز کا سہارا صرف تب لیں جب لوگو کے گرد موجود شکل برانڈ کے لیے ضروری ہو۔ احتیاطاً مربع میں پیڈنگ چھوڑ دیں تو آپ کا آئیکن ساتھ والی ہر لسٹنگ سے واضح طور پر چھوٹا نظر آئے گا۔

30% رداس دراصل کونوں کو ہی کھا جاتا ہے، اس لیے اگر کوئی ورڈ مارک انہی کونوں میں دھکیل دیا جائے تو اس کے سرے کٹ جاتے ہیں۔ سرکلر watchOS اور visionOS ماسکس پر، کنارے سے کنارے تک پھیلا ہوا ورڈ مارک اپنے پہلے اور آخری حروف مکمل طور پر کھو دیتا ہے۔

اپ لوڈ کرنے سے پہلے

  • ایپل: 1024x1024 PNG، مربع، مکمل طور پر غیر شفاف، کونے تیز (بغیر گول کیے) رکھیں۔
  • پلے: 512x512 32-بٹ PNG، زیادہ سے زیادہ 1024KB، شفافیت کے بجائے برانڈ کے رنگ کا بیک گراؤنڈ، کونے تیز (بغیر گول کیے) رکھیں۔
  • دونوں اسٹورز میں ایک جیسا آرٹ ورک اور رنگ رکھیں: صارفین کو ایک ہی ایپ پہچاننی چاہیے، دو نہیں۔
  • دونوں کو تھمب نیل سائز میں دیکھ لیں۔ جو تفصیل 1024 پر واضح نظر آتی ہے وہ 40 پکسل پر غائب ہو جاتی ہے۔

آئیکن کو ایک بار درست کر لیں تو یہ اس کے بعد آنے والی ہر ریلیز کے لیے درست رہتا ہے۔

مزید پڑھیں