আইফোন অ্যাপ্লিকেশন আইকন - সঠিক ব্যাসার্ধ?


313

আমি আমার আইফোন অ্যাপ্লিকেশনটির জন্য আইকনটি তৈরি করার চেষ্টা করছি, তবে আইফোনের আইকনগুলি যে সঠিক ব্যাসার্ধ ব্যবহার করবে তা কীভাবে পাবেন তা জানেন না। আমি টিউটোরিয়াল বা একটি টেম্পলেট অনুসন্ধান করেছি এবং সন্ধান করেছি কিন্তু একটি খুঁজে পাই না।

আমি নিশ্চিত যে আমি কেবল মরন, তবে আপনি কীভাবে ইলাস্ট্রেটর বা ফটোশপ থেকে আপনার আইকনটি দিয়ে ঠিক গোলাকার কোণগুলি পাবেন?

সম্পাদনা:

রেটিনা আইপ্যাডের ব্যাসার্ধ কী?


2
কেন আপনি বিশ্বাস করেন যে আপনার প্রয়োজন?
নিক Vees

@ নিকভিজ কতই না বুড়ো হোক না কেন, একটি উত্তরহীন প্রশ্ন আমাকে তাড়িত করে। এটি পোস্টারের উদ্দেশ্য কিনা তা নিশ্চিত নয়, তবে এটি জেলব্রেক অ্যাপের জন্য হতে পারে বা আইওএসের বাইরে আর্টওয়ার্কের জন্য।
tkbx

9
এবং তারপরে আইওএস 7 এসেছিল, "ডিফল্ট" আইকন ব্যাসার্ধ বাড়িয়ে দিয়েছিল এবং এই প্রশ্নটি তাত্ক্ষণিকভাবে পুরানো।
মার্জপাওয়ার


1
আপনার কেবল একটি 1024 * 1024 বর্গ আইকন প্রয়োজন, সমস্ত প্রয়োজনীয় আকার উত্পন্ন করতে Prepo এর মতো কিছু অ্যাপ্লিকেশন ব্যবহার করুন । ডিভাইসটি আপনার জন্য বিশ্রামটি করবে।
এনএসডেভোপার

উত্তর:


340

আপনি আপনার অ্যাপ্লিকেশনটির জন্য চারটি আইকন তৈরি করতে পারেন (আজকের মতো) এবং সেগুলির একটি আলাদা চেহারা থাকতে পারে - অগত্যা 512x512 চিত্রের ভিত্তিতে নয়।

  • 512x512 আইকন = 80 (আইটিউনস আর্টওয়ার্ক) এর জন্য কোণার ব্যাসার্ধ
  • 1024x1024 আইকন = 180 (আইটিউনস আর্টওয়ার্ক রেটিনা ) এর জন্য কোণার ব্যাসার্ধ
  • 57x57 আইকন = 9 (আইফোন / আইপড টাচ) এর জন্য কোণার ব্যাসার্ধ
  • 114x114 আইকন = 18 (আইফোন / আইপড টাচ রেটিনা ) এর জন্য কোণার ব্যাসার্ধ
  • 72x72 আইকন = 11 (আইপ্যাড) এর জন্য কোণার ব্যাসার্ধ
  • 144x144 আইকন = 23 (আইপ্যাড রেটিনা ) এর জন্য কোণার ব্যাসার্ধ

আপনি যদি কাস্টম আইকনগুলির একটি সেট তৈরি করেন, আপনি UIPrerenderedIconনিজের তথ্য.পলিট ফাইলটিতে বিকল্পটি সত্য হিসাবে সেট করতে পারেন এবং এটি গ্লস প্রভাবটি যুক্ত করবে না তবে এটি তার নীচে একটি কালো পটভূমি রাখবে এবং এই কোণার রেডির সাহায্যে চিত্রের কোণগুলিকে গোল করবে round সুতরাং যে কোনও আইকনের উপর কোণার ব্যাসার্ধ যদি বেশি হয় তবে এটি প্রান্তগুলি / কোণগুলির চারদিকে কালো দেখায়।

সম্পাদনা: @ ডিভাইন-জি-রোডের মন্তব্য দেখুন এবং আপনি দেখতে পাচ্ছেন যে কোনও ভবিষ্যতের আইকন আকারের আইকন আকারের 1:6.4কোণার ব্যাসার্ধের অনুপাত হওয়া উচিত । Https://stackoverflow.com/a/29550364/396005 থেকে খুব ভাল উত্তরও রয়েছে রয়েছে যা এসডিকে আইকন কোণে গোল করার জন্য ব্যবহৃত ইমেজ মাস্ক ফাইলগুলির অবস্থান রয়েছে

একটি রেটিনা-সামঞ্জস্যপূর্ণ ফাইল যুক্ত করতে, একই ফাইলটির নাম ব্যবহার করুন এবং '@ 2x' যুক্ত করুন। আইকন.পিএনজি নামের আমার 72x72 আইকনটির জন্য যদি আমার কাছে একটি ফাইল থাকে তবে আমি প্রকল্প / লক্ষ্যটিতে একটি আইকন @ 2x.png নামে একটি 114x114 পিএনজি ফাইল যুক্ত করব এবং এক্সকোড স্বয়ংক্রিয়ভাবে একটি রেটিনা প্রদর্শনের আইকন হিসাবে ব্যবহার করবে। আপনি যদি এটি সঠিকভাবে করেন তবে আপনি অ্যাপ্লিকেশন টার্গেটের সংক্ষিপ্ত পৃষ্ঠায় ক্রিয়াতে এটি দেখতে পাচ্ছেন। আপনার লঞ্চ চিত্রগুলির জন্য একই কাজ করে। 320x480 এ লঞ্চ.পিএনজি এবং 640x960 এ লঞ্চ@2x.png ব্যবহার করুন।


9
নোট করুন যে আইফোন 4-এ আইকনটি 72x72 নয়, তবে 114x114 এর 18 ব্যাসার্ধের । ;)
পাসকাল

1
@ পাসল @ স্টিংবট্ট: স্থির এবং +1।
BoltClock

98
512/80 == 114/18 == 72/11 == 57/9 == 6.4 আপনি আপনার আইকনটির বর্গক্ষেত্র দৈর্ঘ্য নিতে পারেন এবং আপেলের মতো অনুপাত পেতে 6.4 দিয়ে ভাগ করতে পারেন। সুতরাং 19x19 আইকনটির জন্য, 19 / 6.4 ~ 3px সীমানা ব্যাসার্ধ
ডেভিন জি রোড

8
আইটিউনস আর্টওয়ার্কের জন্য 80px ব্যাসার্ধ অবশ্যই ভুল। আইটিউনস বান্ডেলে আইটিউনসে ব্যবহৃত মুখোশের চিত্রটি আপনি খুঁজে পেতে পারেন। এটি 90 পিক্সেল। ইদানীং এটি পরিবর্তন করা যেতে পারে?
zmippie

6
রেটিনা আইপ্যাড ব্যাসার্ধ (144x144 আইকন) 23 পিক্সেল, এফওয়াইআই। এবং 1024x1024 আইকনগুলির 160 পিক্সেল ব্যাসার্ধ থাকা উচিত । যদিও নিজেকে এগুলি গণনা করা খুব সহজ।
অ্যান্ড্রু আর।

283

এই পোস্টে কিছু উত্তর চেষ্টা করার পরে, আমি লুই মান্তিয়ার (প্রাক্তন অ্যাপল, স্কোয়ার এবং আইকনফ্যাক্টরি ডিজাইনার) সাথে পরামর্শ করেছি এবং এই পোস্টে এখন পর্যন্ত সমস্ত উত্তর ভুল (বা অন্তত অসম্পূর্ণ)। অ্যাপল 57px আইকন এবং 10 এর ব্যাসার্ধ দিয়ে শুরু হয় তারপর সেখান থেকে উপরে বা নীচে স্কেল করে। সুতরাং আপনি ব্যবহার করে যে কোনও আইকন আকারের জন্য ব্যাসার্ধ গণনা করতে পারেন 10/57 x new size(উদাহরণস্বরূপ 10/57 x 11420 দেয় যা 114px আইকনের জন্য উপযুক্ত ব্যাসার্ধ)। এখানে সর্বাধিক ব্যবহৃত আইকনগুলির তালিকা, সঠিক নামকরণের কনভেনশন, পিক্সেল মাত্রা এবং কোণার রেডিয়ি is

  1. আইকন 1024.png - 1024px - 179.649
  2. আইকন 512.png - 512px - 89.825
  3. আইকন.পিএনজি - 57 পিএক্স - 10
  4. আইকন@2x.png - 114px - 20
  5. আইকন-72.png - 72px - 12.632
  6. আইকন-72@2x.png - 144px - 25.263
  7. আইকন-ছোট.পিএনজি - 29px - 5.088
  8. আইকন-Small@2x.png - 58px - 10.175

এছাড়াও, অন্যান্য উত্তরে উল্লিখিত হিসাবে, আপনি আসলে বাইনারি ব্যবহার করেন এমন কোনও চিত্র কাটা বা অ্যাপলের কাছে জমা দিতে চান না। এগুলি সমস্ত বর্গক্ষেত্র হওয়া উচিত এবং কোনও স্বচ্ছতা না থাকা উচিত। অ্যাপল যথাযথ প্রসঙ্গে প্রতিটি আইকন স্বয়ংক্রিয়ভাবে মাস্ক করবে।

উপরের বিষয়গুলি জানা গুরুত্বপূর্ণ, তবে ইউপিআইআই-র আইকন ব্যবহারের জন্য যেখানে আপনাকে মাস্কে কোড প্রয়োগ করতে হবে বা ফটোশপে প্রাক-রেন্ডার করতে হবে। ওয়েবসাইট এবং অন্যান্য প্রচারমূলক সামগ্রীর জন্য আর্টওয়ার্ক তৈরি করার সময় এটি সহায়ক।

অতিরিক্ত পড়া:

অতিরিক্ত আইকন মাপ এবং অন্যান্য ডিজাইন বিবেচনায় নেভেন মরগান: আইওএস অ্যাপ্লিকেশন আইকন আকার

ফটোশপের রাউন্ড্রেট তৈরির জন্য এবং কেন এটি গুরুত্বপূর্ণ: বিভাঙ্গোর মার্ক অ্যাডওয়ার্ডস বিভিন্ন বিকল্পের বিষয়ে

আইকন আকার এবং ডিজাইনের বিবেচনায় অ্যাপলের অফিসিয়াল ডক্স: আইকন এবং চিত্র

হালনাগাদ:

আমি ফটোশপ সিএস 6 এ কিছু পরীক্ষা করেছি এবং দেখে মনে হচ্ছে যে দশমিক পয়েন্টের পরে 3 অঙ্কগুলি ঠিক একই ভেক্টর (কমপক্ষে 3200% জুমে ফটোশপের প্রদর্শিত হিসাবে) শেষ করতে যথেষ্ট যথার্থ হয়। রাউন্ড রেক্ট টুলটি কখনও কখনও ইনপুটটিকে নিকটতম পুরো সংখ্যার সাথে গোল করে, তবে আপনি 90 এবং 89.825 এর মধ্যে একটি উল্লেখযোগ্য পার্থক্য দেখতে পাবেন। এবং বেশ কয়েকবার বৃত্তাকার আয়তক্ষেত্রের সরঞ্জামটি গোল হয়ে যায় নি এবং প্রকৃতপক্ষে দশমিক পয়েন্টের পরে একাধিক সংখ্যা দেখায়। সেখানে কী চলছে তা নিশ্চিত নয়, তবে এটি অবশ্যই প্রবেশ করানো আরও সুনির্দিষ্ট নম্বরটি ব্যবহার এবং সংরক্ষণ করছে।

যাইহোক, আমি দশমিক পয়েন্টের পরে মাত্র 3 অঙ্ক অন্তর্ভুক্ত করতে উপরের তালিকাটি আপডেট করেছি (আগে 13 ছিল!) বেশিরভাগ পরিস্থিতিতে 90px ব্যাসার্ধে স্বর্ণযুক্ত 512px আইকনটির মধ্যে পার্থক্যটি বলা শক্ত হবে এবং 89.825 তে একটি মুখোশযুক্ত, তবে বৃত্তাকার কোণার অ্যান্টিঅ্যালিয়াসিং অবশ্যই কিছুটা আলাদা হবে এবং নির্দিষ্ট পরিস্থিতিতে সম্ভবত দৃশ্যমান হবে যদি একটি সেকেন্ড হয়, আরও সুনির্দিষ্ট মুখোশ অ্যাপল দ্বারা কোডে বা অন্যথায় প্রয়োগ করা হয়।


দুর্দান্ত উত্তর। আমি ব্যক্তিগতভাবে সর্বদা সূচনা পয়েন্ট হিসাবে 90px ব্যাসার্ধ সহ 512px ব্যবহার করি এবং তারপরে প্রয়োজন অনুযায়ী স্কেল করি। নিখুঁত কাজ করে।
আলেকসন্দর ভ্যাসি

1
আলেকজান্দার, যদিও এটি বেশিরভাগ পরিস্থিতিতে দেখতে সুন্দর দেখা যায়, 90 দিয়ে শুরু করা সমস্ত পরিস্থিতিতে নিখুঁতভাবে কাজ করে না । উপরে আমার আপডেট দেখুন।
ড্রবনার্ড

2
প্রচুর বিশদ সহ দুর্দান্ত পোস্ট। খুব খুশী আপনি একটি সঠিক উত্তরের জন্য লুইকে বাগড করেছেন। আমার সবগুলি 57px এর উপর ভিত্তি করে তৈরি করা হয়েছে তারপরে ছোট করে তোলা হয়েছে, তবে এটি ছিল একটি ফলক। অ্যাপল যা করে তা নিশ্চিতকরণ পেয়ে দুর্দান্ত।
মার্ক এডওয়ার্ডস

এর অর্থ কি যদি অ্যাপ্লিকেশন আইকনটি বর্গক্ষেত্র না হয় তবে আমাদের আইকনটি আঁকার জন্য ইলাস্ট্রেটার ব্যবহার করা উচিত? কারণ ফটোশপ দশমিক বিন্দু দিয়ে ব্যাসার্ধকে সমর্থন করে না .....
ফ্লাইপগ

দয়া করে এই উত্তরটি ভোট দিয়েছেন কারণ শীর্ষ 1 উত্তরটি এখন আর সঠিক নয়। আমি দেখতে পেয়েছি যে 160 টি ব্যাসার্ধ সহ আমার 1024px আইকনটি উপযুক্ত নয় বলে মনে হচ্ছে। তাই আবার পড়ার পর, এই পোস্টে আরো সঠিক, 1024px আইকনের জন্য ব্যাসার্ধ 180. হতে হবে
, Quan গুয়েন

34

আমি প্রচুর "পিক্স" আলোচনা দেখতে পাচ্ছি তবে কেউ শতাংশের সাথে কথা বলছে না যা আপনি দ্বারা নির্ধারিত স্থির সংখ্যাটি নির্দিষ্ট নম্বর।

22.37% এখানে মূল শতাংশ। 0.2237 দ্বারা উল্লিখিত চিত্রের আকারগুলির যে কোনওটি গুণ করুন এবং আপনি সেই আকারের জন্য সঠিক পিক্সেল ব্যাসার্ধ পাবেন।

আইওএস 8 এর আগে, অ্যাপল 15.625% ব্যবহার করে কম বৃত্তাকার ব্যবহার করেছিল।

সম্পাদনা : আইওএস 8/9/10 ব্যাসার্ধের শতাংশের সাথে মন্তব্য করার জন্য @ ক্রিস প্রিন্সকে ধন্যবাদ: 22.37%


1024x1024 আইকনের জন্য (আমি কিছু প্রেস কিট গ্রাফিক্স তৈরি করছি), এটি 160 এর কোণার ব্যাসার্ধ দেয় যা আমার চোখের অনুসারে খুব ছোট।
ক্রিস প্রিন্স

3
আমার চোখের জন্য, আবার কোনও প্রেস অ্যাপ্লিকেশন জমা দেওয়ার জন্য নয়, প্রেস কিট গ্রাফিক্সের জন্য, 22.37% আইওএস 8 রাউন্ডিংয়ের চেয়ে আরও সুন্দর দেখায়। উদাহরণস্বরূপ, 1024x1024 এর জন্য ফটোশপে 229 পিক্সের ব্যাসার্ধ।
ক্রিস প্রিন্স

@ ক্রিস প্রিন্স এই উত্তরটির অবশ্যই আইওএস 8-এর আপডেট হওয়া দরকার,
ইনপুটটির

আসলে, শতাংশ 22.5%।
সাগরঝা

28

গুরুত্বপূর্ণ: আইওএস 7 আইকন সমীকরণ

আইওএস 7 এর আসন্ন প্রকাশের সাথে আপনি লক্ষ্য করবেন যে "স্ট্যান্ডার্ড" আইকন ব্যাসার্ধ বাড়ানো হয়েছে। সুতরাং অ্যাপল এবং আমি এই উত্তরটি দিয়ে যা পরামর্শ দিয়েছি তা করার চেষ্টা করুন।

এটি প্রদর্শিত হয় যে 120px আইকনটির জন্য সূত্রটি আইওএস 7-তে তার আকৃতিটি সর্বোত্তমভাবে উপস্থাপন করে তা হল নিম্নোক্ত উপপরিচালনা:

|x/120|^5 + |y/120|^5 = 1

স্পষ্টতই আপনি 120সংশ্লিষ্ট ফাংশনটি পেতে পছন্দসই আইকন আকারের সাথে নম্বরটি পরিবর্তন করতে পারেন ।

মূল

আপনার 90 ° কোণযুক্ত একটি চিত্র সরবরাহ করা উচিত (আপনার আইকনের কোণগুলি কাটা এড়ানো গুরুত্বপূর্ণ — আইওএস কোণার-গোলাকার মুখোশটি প্রয়োগ করার সময় এটি আপনার জন্য করে) ( অ্যাপল ডকুমেন্টেশন )

সর্বোত্তম পন্থাটি আপনার আইকনের কোণগুলিকে মোটেও গোল করে না। আপনি যদি আপনার আইকনটিকে বর্গাকার আইকন হিসাবে সেট করেন, আইওএস স্বয়ংক্রিয়ভাবে আইকনটিকে পূর্বনির্ধারিত মুখোশ দিয়ে ওভারলে করবে যা উপযুক্ত বৃত্তাকার কোণগুলি সেট করবে।

যদি আপনি ম্যানুয়ালি আপনার আইকনগুলির জন্য বৃত্তাকার কোণগুলি সেট করেন, তবে তারা সম্ভবত এই বা সেই ডিভাইসে বিভক্ত দেখাবে কারণ গোলাকার মুখোশটি কোনও আইওএস সংস্করণ থেকে অন্যটিতে পরিবর্তিত হতে পারে। কখনও কখনও আপনার আইকন কিছুটা বড় হবে, কখনও কখনও (দীর্ঘশ্বাস) কিছুটা ছোট হবে। স্কোয়ার আইকন ব্যবহার করা আপনাকে এই বোঝা থেকে মুক্তি দেবে এবং আপনার অ্যাপ্লিকেশনটির জন্য সর্বদা আপ-টু-ডেট এবং সুদর্শন আইকন থাকবে তা নিশ্চিত।

এই পদ্ধতির প্রতিটি আইকন আকার (আইফোন / আইপড / আইপ্যাড / রেটিনা), এবং আইটিউনস শিল্পকর্মের জন্য বৈধ। আমি কয়েকবার এই পদ্ধতির অনুসরণ করেছি এবং আপনি যদি চান তবে আমি আপনাকে একটি অ্যাপ্লিকেশানের লিঙ্ক পোস্ট করতে পারি যা দেশীয় বর্গ আইকন ব্যবহার করে।

সম্পাদন করা

এই উত্তরটি আরও ভালভাবে বুঝতে, আইওএস আইকনগুলি সম্পর্কে অ্যাপল অফিশিয়াল ডকুমেন্টেশন দেখুন । এই পৃষ্ঠায় স্পষ্টভাবে বলা হয়েছে যে কোনও আইওএস ডিভাইসে প্রদর্শিত হলে বর্গাকার আইকনটি স্বয়ংক্রিয়ভাবে এই জিনিসগুলি পেয়ে যাবে:

  1. বৃত্তাকার কোণ
  2. ছায়া ড্রপ
  3. প্রতিফলনশীল চকমক (যদি আপনি চকচকে প্রভাব প্রতিরোধ না করেন)

সুতরাং, আপনি কেবল প্লেইন স্কোয়ার আইকন আঁকতে এবং এতে সামগ্রীতে ভরাট করতে পারেন এমন কোনও প্রভাব আপনি অর্জন করতে পারেন। চূড়ান্ত কোণার ব্যাসার্ধটি এখানে অন্যান্য উত্তরগুলি যা বলছে তার অনুরূপ কিছু হবে তবে এটি কখনই গ্যারান্টিযুক্ত হবে না, কারণ এই সংখ্যাগুলি আইওএস-তে অ্যাপল নথিভুক্তির অংশ নয়। তারা আপনাকে বর্গাকার আইকনগুলি আঁকতে বলে, তাই ... কেন নয়?


হ্যাঁ, ঠিক এখন ঠিক এই সিদ্ধান্তে আমি পৌঁছেছি; যতক্ষণ না কারও কাছে প্রতিটি ডিভাইসের জন্য স্বতন্ত্রভাবে প্রতিটি আইকন আকার তৈরি এবং পরীক্ষা করার জন্য ডিজাইনারের অর্থ প্রদানের সময় থাকে।
ডগওয়েদার

আপনার আইকনগুলি ডাউনস্কেল করা হলে খুব খারাপ লাগবে।
রায়েস্ট

এগুলি ডাউনচেরা নয়। আপনাকে প্রতিটি ডিভাইসের জন্য সঠিক আইকন আকার নির্ধারণ করতে হবে, তবে কোণগুলি আঁকার পরিবর্তে, আপনি কেবল আইকনগুলি একটি সরল বর্গক্ষেত্রে রেখে যান। অ্যাপল বাকি কাজগুলি আপনার জন্য করবে। কোনও স্কেলিংয়ের দরকার নেই। শুধু চেষ্টা করুন এবং আমাকে জানান!
মার্জপাওয়ার

মার্জপাওয়ার, আপনি ঠিক বলেছেন, যতক্ষণ আপনি অ্যাপলের আলো প্রভাব নিয়ে খুশি হন। আপনি প্রি-রেন্ডার না করা ছাড়া অন্য একজন ছাড়া আপনার থাকতে পারে না
গর্ডন ডভ

বৃত্তাকার কোণগুলির সাথে অ্যাপলের আলো প্রভাবের কোনও সম্পর্ক নেই। উপায় দ্বারা আপনি বর্গক্ষেত্র আইকন ব্যবহার করে আপনার আইকনগুলিতে ওভারলে প্রভাবটি পরিবর্তন করতে পারেন এবং সবকিছু ঠিকঠাক কাজ করবে।
মার্জপাওয়ার

20

কোণার ব্যাসার্ধটি কিছুটা বাড়ানো নিয়ে তর্ক করছেন লোকেরা কিন্তু বাস্তবে তা নয়।

এই ব্লগ থেকে :

অ্যাপলের শারীরিক পণ্য একটি 'গোপন' যে, তারা tangency এড়াতে (যেখানে ব্যাসার্ধ একটি একক সময়ে একটি লাইন পূরণ করে) এবং বলা হচ্ছে তাদের পৃষ্ঠতল নৈপুণ্য হয় বক্রতা ধারাবাহিকতা

এখানে চিত্র বর্ণনা লিখুন

আপনি প্রয়োজন হবে না iOS এর জন্য আইকন কোণার ব্যাসার্ধ প্রযোজ্য হবে। কেবল স্কোয়ার আইকন সরবরাহ করুন। তবে আপনি যদি এখনও জানতে চান তবে আসল আকৃতিটিকে স্কোয়ার্কল বলা হয় এবং নীচে সূত্রটি বলা হয়:

এখানে চিত্র বর্ণনা লিখুন


2
আইফোনের আইকনগুলি আইওএস since. এর পরে গোলাকার কোণগুলির সাথে আর স্কোয়ার নয় This এটি গ্রহণযোগ্য উত্তর হওয়া উচিত (এমনকি সূত্রটি বাঁকা কোণগুলির আকারের একটি সুস্পষ্ট উত্তর না হলেও)
ক্রেজিরামস

1
@ ক্রেজিরাম ধন্যবাদ তবে বেক দেওয়ার মতো কোনও ব্যাসার্ধের আকার নেই। কোনও নির্দিষ্ট "সূত্র" সহ বর্গাকার আকার অনুযায়ী কোণগুলি বাঁকানো (বৃত্তাকার নয়) হয়।
ওনুর ইল্ডারিয়াম

16

ডারবার্ডের উত্তরের সঠিক ব্যাসার্ধ গণনা করার সূত্র রয়েছে তবে আপনি যেহেতু টেমপ্লেটগুলি সন্ধান করছিলেন তাই সমস্ত মুখোশ এবং ওভারলেগুলি এই ডিরেক্টরিতে পাওয়া যাবে:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(পাথটি এক্সকোডের সাম্প্রতিক সংস্করণের জন্য older পুরানো সংস্করণের জন্য এটি সম্ভবত / বিকাশকারী / এর অভ্যন্তরে থাকবে)।

অন্যরা যেমন উল্লেখ করেছে, আপনার সেগুলি নিজেই মুখোশ করা উচিত নয়, তবে আপনার আইকনগুলি একবার মুখোশযুক্ত কেমন হবে তা পরীক্ষা করতে আপনি এগুলি ব্যবহার করতে পারেন।

(এই সন্ধানের ক্রেডিট নেভেন মরগান আইআইআরসি-তে যায়)


1
এই পথটি এসডিকে প্রতিটি সংস্করণের সাথে পরিবর্তিত হয়। আপনি এই আদেশটি দিয়ে বর্তমান পথটি সনাক্ত করতে পারেনfind /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'
ব্রুনো ব্রোনোস্কি

8

57 x 57 পিক্সেল আইকনের কোণার ব্যাসার্ধ 9 পিক্সেল।


2
উইল 2, আপনি সঠিক - তবে ফ্র্যাঙ্ক যদি আইফোন আইকনগুলি সঠিকভাবে ডিজাইন করে থাকেন তবে তিনি 512x512 চিত্রের সাথে কাজ করতে চাইবেন এবং সেই স্তরের সীমানা ব্যাসার্ধটি 80 পিক্সেল যা 9 পিক্সের সাথে ঘুরবে যখন আপনি এটি 57x57 এ স্কেল করবেন।
জেসেডেস্ক

6

অন্যরা যেমন বলেছে, আপনি আপনার কোণগুলি গোল করতে চান না। আপনি ফ্ল্যাট (কোনও স্তর বা আলফা নেই) বর্গ গ্রাফিকগুলি শিপ করতে চান। অ্যাপল iOS7 এ আপনার কোণগুলি গোল করার জন্য তারা যে মুখোশটি ব্যবহার করেছে তা পরিবর্তন করেছে এবং তারপরে আবার iOS8 এ in আপনি আপনার Xcode অ্যাপ্লিকেশন বান্ডেলের ভিতরে এই মুখোশগুলি খুঁজে পেতে পারেন। তারা প্রকাশিত প্রতিটি নতুন এসডিকে সংস্করণ দিয়ে পথ পরিবর্তন করে। সুতরাং, আমি আপনাকে দেখাব যে আপনি কীভাবে সর্বদা এটি খুঁজে পেতে পারেন।

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

এই মুহুর্তে, সেই আদেশটি যে পথ খুঁজে পেয়েছে /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.frameworkতা কিন্তু এটিতে বিশ্বাস করবেন না। এটি নিজেকে খুঁজে পেতে কমান্ডটি ব্যবহার করুন।

এই পাথটি এই ফাইলগুলির সাথে একটি ডিরেক্টরিতে নির্দেশ করে (আবার, এই পোস্টের সময়ে)

./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./AppIconMask@2x~ipad.png
./AppIconMask@2x~iphone.png
./AppIconMask@3x~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./DefaultIcon-20@2x.png
./DefaultIcon-20@3x.png
./DefaultIcon-29.png
./DefaultIcon-29@2x.png
./DefaultIcon-29@3x.png
./DefaultIcon-40.png
./DefaultIcon-40@2x.png
./DefaultIcon-40@3x.png
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./DocumentBadgeMask-145@2x.png
./DocumentBadgeMask-20.png
./DocumentBadgeMask-20@2x.png
./DocumentBadgeMask-20@3x.png
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./DocumentBase-48@2x.png
./DocumentBase-48@3x.png
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./DocumentMask-48@2x.png
./DocumentMask-48@3x.png
./NanoDefaultIcon-24.0@2x.png
./NanoDefaultIcon-27.5@2x.png
./NanoDefaultIcon-40.0@2x.png
./NanoDefaultIcon-44.0@2x.png
./NanoDefaultIcon-86.0@2x.png
./NanoDefaultIcon-98.0@2x.png
./NanoIconMaskChiclet-24.0@2x.png
./NanoIconMaskChiclet-27.5@2x.png
./NanoIconMaskChiclet-40.0@2x.png
./NanoIconMaskChiclet-44.0@2x.png
./NanoIconMaskChiclet-86.0@2x.png
./NanoIconMaskChiclet-98.0@2x.png
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./NewsstandMagazineGradientLeft@2x~ipad.png
./NewsstandMagazineGradientLeft@2x~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./NewsstandMagazineGradientRight@2x~ipad.png
./NewsstandMagazineGradientRight@2x~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./NewsstandMagazineSwitcherGradientLeft@2x.png
./NewsstandNewspaperGradientBottom@2x~ipad.png
./NewsstandNewspaperGradientBottom@2x~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./NewsstandNewspaperGradientLeft@2x~ipad.png
./NewsstandNewspaperGradientLeft@2x~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./NewsstandNewspaperGradientRight@2x~ipad.png
./NewsstandNewspaperGradientRight@2x~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./NewsstandNewspaperSwitcherGradientBottom@2x.png
./NewsstandNewspaperSwitcherGradientLeft.png
./NewsstandNewspaperSwitcherGradientLeft@2x.png
./NewsstandNewspaperSwitcherGradientRight.png
./NewsstandNewspaperSwitcherGradientRight@2x.png
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./NotificationAppIconMask@2x.png
./NotificationAppIconMask@3x.png
./SpotlightAppIconMask.png
./SpotlightAppIconMask@2x.png
./SpotlightAppIconMask@3x.png
./TableIconMask.png
./TableIconMask@2x.png
./TableIconMask@3x.png
./TableIconOutline.png
./TableIconOutline@2x.png
./TableIconOutline@3x.png

আপনি দেখতে পাচ্ছেন যে এখানে অনেকগুলি বিভিন্ন মুখোশ রয়েছে তবে তাদের নাম দেওয়া হয়েছে বেশ পরিষ্কারভাবে। AppIconMask@3x~iphone.pngচিত্রটি এখানে :

AppIconMask@3x~iphone.png

আপনার আইকনটি মাস্ক করার পরে এটি ঠিক আছে কিনা তা পরীক্ষা করতে আপনি এটি ব্যবহার করতে পারেন । তবে, আপনার কোণটি গোল করবেন না । যদি আপনি এটি করেন, যখন অ্যাপল আবার সেই মুখোশগুলি পরিবর্তন করবে, আপনার কাছে নিদর্শন রয়েছে।


6

এই প্রশ্নের পূর্ববর্তী সমস্ত উত্তর এখন পুরানো। কমপক্ষে মে ২০১৫ সাল থেকে, অ্যাপলকে আপনাকে কোনও বৃত্তাকার ছাড়াই স্কোয়ার আইকন সরবরাহ করতে হবে:

আইকন কোণে বর্গাকার রাখুন। সিস্টেমটি এমন একটি মুখোশ প্রয়োগ করে যা স্বয়ংক্রিয়ভাবে আইকন কোণগুলিকে গোল করে।

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/


1
এই উত্তরে লিঙ্কটি আপডেট করা উচিত: বিকাশকারী
অ্যাপ্লিকেশন / আইওএস /

5

স্ট্রোক বিবেচনা না করে, সঠিক ব্যাসার্ধটি আসলে 57x57 আইকনের জন্য 10px।

আইকন রেফারেন্স থেকে আমি এই তথ্যটি পেয়েছি


1
আমি এটার সাথে একমত. আপনি যদি সেটিংস অ্যাপ্লিকেশনটির মতো প্রভাব পেতে কোনও অভ্যন্তরীণ স্ট্রোকের সাথে আপনার অ্যাপ্লিকেশন আইকনটি তৈরি করেন তবে 9 পিএক্স ব্যাসার্ধটি ব্যবহার করা বেশ ঠিক দেখাচ্ছে না। 57x57px আইকনটির জন্য 10px এবং @ 2x আইকনটির জন্য 20px আমার কাছে আরও ভাল দেখাচ্ছে।
অ্যালেক্স রবিনসন

4

ফটোশপের সাথে আমার অ্যাপ্লিকেশন আইকনগুলি ডিজাইন করার সময়, আমি দেখতে পেয়েছি যে কোনও পূর্ণসংখ্যার কোণার ব্যাসার্ধ ডিভাইসের মুখোশটি ঠিক ফিট করে না

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


@ অ্যাগোসের উত্তর দেখুন, তিনি উল্লিখিত ফোল্ডারে পিএনজি-মাস্ক ব্যবহার করুন।
গুস্তাভ

3

আপনার জন্য আইফোনটি কোণে ঘুরিয়ে দেয়, আপনার কেবলমাত্র একটি বর্গ 57x57 পিএনজি আইকন এবং আপনার ভাল হওয়া উচিত


4
অফিসিয়াল অ্যাপ্লিকেশনগুলির জন্য, এটি সত্য (ভাল, ধরণের 57 57x57 অবশ্যই আপনার আর কোনও আকারের প্রয়োজন নয়)। তবে, জেলব্রেক অ্যাপগুলির জন্য, এই গোলটি আপনার জন্য করা হয় না। আপনার নিজের পিএনজি গ্রাফিক্সে রাউন্ডিং করতে হবে। সুতরাং, এটি খুব ভাল ব্যাপার হতে পারে।
Nate

3

আছে দুই সম্পূর্ণভাবে পরস্পরবিরোধী উত্তর ভোট এক 160px হয় সংখ্যক সঙ্গে @ 1024 অন্যান্য 180px @ 1024 হয়। এত ডাইনী?

আমি কিছু পরীক্ষা চালিয়েছি এবং আমি মনে করি এটি 180px @ 1024 তাই ড্রবার্নার্ড সঠিক।

আমি এটি 175x175px অ্যাপ স্টোর থেকে আইটিউনস ইউ আইকনটি ডাউনলোড করেছি আমি ফটোশপে এটি 1024px এ upsciled করেছি এবং এর উপরে দুটি আকার রেখেছি, একটিতে 160px ব্যাসার্ধ এবং একটিতে 180px।

আপনি 160px (প্রথম এক) এর সাথে আকৃতির নীচে (পাতলা ধূসর রেখা) দেখতে পাচ্ছেন কিছুটা দূরে যেখানে ১৮০ পিক্সের একটিটি দেখতে বেশ সূক্ষ্ম দেখাচ্ছে।

160px ব্যাসার্ধ দিয়ে আকৃতিএখানে চিত্র বর্ণনা লিখুন

ফটোশপে আমি এখন এটি করি:

  1. আমি মূল ডিজাইনের স্মার্ট অবজেক্টের জন্য 180px মাস্ক সহ একটি ক্যানভাস আকার 1026x1026px তৈরি করি ।
  2. আমি মূল স্মার্ট অবজেক্টটি 5 বার নকল করে এগুলিকে 1024px, 144px, 114px, 72px এবং 57px এ আকার দিন।
  3. আমি প্রতিটি স্মার্ট অবজেক্টে একটি "নতুন স্তরযুক্ত ভিত্তিক স্লাইস" রেখেছি এবং আমি তাদের আকার অনুসারে স্লাইসগুলির নতুন নামকরণ করেছি (যেমন আইকন -২২ পিএক্স)।
  4. আমি যখন আর্টওয়ার্কটি সংরক্ষণ করি তখন আমি "সমস্ত ব্যবহারকারী স্লাইস" এবং ব্যাং নির্বাচন করি! আমার অ্যাপ্লিকেশনটির জন্য আমার সমস্ত আইকন প্রয়োজনীয়।

আপনি যদি চিত্রটির আকার পরিবর্তন করেন তবে পাতলা ধূসর লাইনটি একই রাখেন? উত্তর: এটি ধূসর লাইনের সাথে মিলবে। সুতরাং এটি সীমানার ব্যাসার্ধটি ভুল নয়, তবে সেই সীমানা ব্যাসার্ধের জন্য আইকন আকার ...
মরালকোড

2

আমি 1024x1024 এর জন্য 228px ব্যাসার্ধ চেষ্টা করেছি এবং এটি কাজ করেছে :)


y আমাদের রেডিওগুলি প্রয়োগ করা উচিত ?, রেডিও ছাড়া স্কোয়ার আইকনগুলি পুরোপুরি কার্যকর হবে।
বিনয়াক

2

অ্যাপ্লিকেশন আইকন প্রয়োজনীয়তার জন্য আপডেট (জানুয়ারি 2018 পর্যন্ত):


https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

আইকন কোণে বর্গাকার রাখুন । সিস্টেমটি এমন একটি মুখোশ প্রয়োগ করে যা স্বয়ংক্রিয়ভাবে আইকন কোণগুলিকে গোল করে।

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


হ্যাঁ, আমি বৃত্তাকার কোণগুলি ছাড়াই এবং "আইকন সেট তৈরি করুন" (অ্যাপ স্টোরে) সহ সমস্ত আইকন স্বয়ংক্রিয়ভাবে উত্পন্ন করেছি a
জে ফেদেজ

1

আপনার অ্যাপ্লিকেশন আইকনে আপনাকে কোণার ব্যাসার্ধ প্রয়োগ করার দরকার নেই, আপনি কেবল স্কোয়ার আইকন প্রয়োগ করতে পারেন। ডিভাইসটি স্বয়ংক্রিয়ভাবে কোণার ব্যাসার্ধ প্রয়োগ করছে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.