Я намагаюся створити піктограму для свого додатка iPhone, але не знаю, як отримати точний радіус використання іконок iPhone. Я шукав підручник чи шаблон, але не можу його знайти.

Я впевнений, що я просто дебіл, але як же правильно підібрати закруглені кути зі своєю іконою від Illustrator або Photoshop?

Редагувати:

Який радіус для Retina iPad?

Ви можете зробити чотири піктограми (станом на сьогодні) для свого додатка, і всі вони можуть мати різний вигляд - не обов’язково грунтуючись на зображенні 512x512.

• кутовий радіус для піктограми 512x512 = 80 (iTunesArtwork)
• кутовий радіус для піктограми 1024x1024 = 180 (iTunesArtwork Retina )
• кутовий радіус для піктограми 57x57 = 9 (iPhone / iPod Touch)
• кутовий радіус для піктограми 114x114 = 18 (iPhone / iPod Touch Retina )
• кутовий радіус для значка 72x72 = 11 (iPad)
• кутовий радіус для значка 144x144 = 23 (iPad Retina )

Якщо ви створюєте набір спеціальних піктограм, ви можете встановити UIPrerenderedIconпараметр true у вашому файлі info.plist, і він не додасть ефекту глянцю, але він розмістить під ним чорний фон і все ще обведе кути зображення з цими кутовими радіусами тож якщо радіус кута на будь-якій із значків більший, то він буде показувати чорний колір по краях / кутах.

Редагувати: Дивіться коментар від @ devin-g-rhode, і ви можете побачити, що будь-який майбутній розмір піктограм повинен мати a1:6.4 співвідношення радіуса кута до розміру значка. Є також дуже хороша відповідь від https://stackoverflow.com/a/29550364/396005, в якій розміщені файли маски зображень, які використовуються в SDK для округлення кутів значків

Щоб додати сумісний із сітківкою файл, використовуйте те саме ім'я файлу та додайте "@ 2x". Отже, якби у мене був файл для моєї піктограми 72x72 з назвою icon.png, я також додав би файл PNG 114x114 під назвою icon@2x.png до проекту / цілі, і Xcode автоматично використовуватиме його як значок на дисплеї сітківки. Це можна побачити в дії на сторінці підсумків цілі програми, якщо ви зробили це правильно. Те саме працює і для ваших запуску зображень. Використовуйте запуск.png у форматі 320x480 та start@2x.png у розділі 640x960.

Спробувавши деякі відповіді в цій публікації, я порадився з Луї Мантією (колишнім дизайнером Apple, Square і Iconfactory), і всі відповіді на цій посаді є помилковими (або принаймні неповними). Apple починається з піктограми 57px і радіусом 10, а потім масштабується звідти вгору або вниз. Таким чином, ви можете обчислити радіус для будь-якого розміру значка, використовуючи 10/57 x new size(наприклад, 10/57 x 114дає 20, що є правильним радіусом для піктограми 114 пікселів). Ось перелік найбільш часто використовуваних піктограм, правильні умови іменування, розміри пікселів та радіуси кута.

1. Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. Icon@2x.png - 114px - 20
5. Ікона-72.png - 72px - 12.632
6. Icon-72@2x.png - 144px - 25.263
7. Icon-Small.png - 29 пікселів - 5,088
8. Icon-Small@2x.png - 58px - 10.175

Крім того, як згадується в інших відповідях, ви насправді не хочете обрізати жодне із зображень, які ви використовуєте у бінарному файлі або надсилати Apple. Усі вони повинні бути квадратними та не мати прозорості. Apple автоматично маскує кожен значок у відповідному контексті.

Знаючи вищезазначене, важливо, однак, для використання значків у інтерфейсі програми, де потрібно застосувати маску в коді або попередньо відредагований у фотошопі. Це також корисно при створенні ілюстрацій для веб-сайтів та інших рекламних матеріалів.

Додаткове читання:

Невен Мрган про додаткові розміри значків та інші міркування щодо дизайну: розміри піктограм програми ios

Марк Едвардс Bjango про різні варіанти створення круглих прямих в Photoshop і чому це важливо: roundrect

Офіційні документи Apple щодо розміру значків та міркувань щодо дизайну: піктограми та зображення

Оновлення:

Я робив кілька тестів у Photoshop CS6, і, здається, що 3 цифри після десяткової крапки є достатньою точністю, щоб у кінцевому підсумку з таким самим вектором (принаймні, як показано Photoshop при 3200% -м масштабі). Інструмент «Кругла ректа» іноді округляє вхід до найближчого цілого числа, але ви можете бачити значну різницю між 90 і 89,825. І кілька разів інструмент «круглий прямокутник» не округлювався і фактично показував кілька цифр після десяткової крапки. Не впевнений, що там відбувається, але він точно використовує та зберігає більш точне число, яке було введено.

Так чи інакше, я оновив перелік вище, щоб включити лише три цифри після десяткової крапки (раніше їх було 13!). У більшості ситуацій, мабуть, важко буде визначити різницю між прозорим значком 512 пікселя, замаскованим у радіусі 90 пікселів, та маскованим у 89,825, але антиаліація закругленого кута, безумовно, закінчиться дещо іншим і, ймовірно, буде видно в певних обставинах, особливо якщо друга, більш точна маска нанесе Apple, у коді чи іншим способом.

Я бачу багато "px" дискусій, але ніхто не говорить про відсотки, що є фіксованим числом, яке ви хочете обчислити.

22,37% тут є ключовим відсотком. Помножте будь-який із зазначених вище розмірів зображення на 0,2237, і ви отримаєте правильний радіус пікселя для цього розміру.

До iOS 8 Apple використовувала менше округлення, використовуючи 15,625%.

EDIT : Дякуємо @Chris Prince за коментар із відсотком радіусу iOS 8/9/10: 22,37%

Важливо: рівняння значків iOS 7

З майбутнім випуском iOS 7 ви помітите, що «стандартний» радіус значка збільшений. Тому спробуйте зробити те, що я та Apple запропонували з цією відповіддю.

Здається, що для піктограми 120 пікселів формулою, яка найкраще відображає її форму в iOS 7, є наступний суперреліпс:

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

Очевидно, ви можете змінити 120 номер на потрібний розмір значка, щоб отримати відповідну функцію.

Оригінал

Ви повинні надати зображення, яке має кути 90 ° (важливо уникати обрізання кутів піктограми - iOS робить це для вас, коли застосовує маску для закруглення кута) ( Документація Apple )

Найкращий підхід - це взагалі не округлення кутів ваших іконок. Якщо ви встановите свою піктограму як квадратну піктограму, iOS автоматично накладе її на попередньо визначену маску, яка встановить відповідні закруглені кути.

Якщо ви вручну встановите закруглені кути для своїх значків, вони, ймовірно, будуть виглядати ламаними в тому чи іншому пристрої, оскільки маска округлення може дещо змінитися з версії iOS на іншу. Іноді ваші іконки будуть трохи більшими, іноді (зітхаючи) трохи меншими. Використання квадратної піктограми позбавить вас від цього тягаря, і ви обов'язково будете мати завжди сучасний і гарний значок для свого додатка.

Цей підхід справедливий для кожного розміру піктограм (iPhone / iPod / iPad / retina), а також для ілюстрацій iTunes. Я кілька разів дотримувався цього підходу, і якщо ви хочете, я можу надіслати вам посилання на додаток, який використовує набірні квадратні піктограми.

Редагувати

Щоб краще зрозуміти цю відповідь, зверніться до офіційної документації Apple щодо піктограм iOS . На цій сторінці чітко зазначено, що піктограма квадрата автоматично отримає ці речі, коли відображатиметься на пристрої iOS:

1. Закруглені кути
2. Тінь
3. Відбиваючий блиск (якщо ви не запобігаєте ефекту блиску)

Отже, ви можете досягти будь-якого ефекту, який хочете, просто намалювавши звичайний квадратний значок і заповнивши його вмістом. Кінцевий радіус кута буде чимось подібним до того, що говорять інші відповіді, але це ніколи не буде гарантовано, оскільки ці цифри не є частиною офіційної документації Apple на iOS. Вони просять намалювати квадратні іконки, так ... чому б і ні?

Люди сперечаються про те, що радіус кута трохи збільшився, але насправді це не так.

З цього блогу :

«Секрет» фізичних продуктів Apple полягає в тому, що вони уникають напруженості (коли радіус зустрічається з лінією в одній точці) і обробляють їх поверхні з тим, що називається безперервністю кривизни .

Вам не потрібно застосовувати радіус кута іконки для прошивки. Просто надайте квадратні значки. Але якщо ви все ще хочете знати, як, фактична форма називається Білка, а нижче - формула:

Відповідь від dbarnard має формулу для обчислення правильного радіуса, але оскільки ви шукали шаблони, усі маски та накладки можна знайти в цьому каталозі:

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

(шлях призначений для останніх версій XCode. Для старшої версії він, можливо, буде всередині / Developer /).

Як зазначали інші, НЕ слід маскувати їх самостійно, але ви можете використовувати їх, щоб перевірити, як будуть виглядати ваші піктограми в масці.

(кредити для цієї знахідки належать Невена Мргану IIRC)

Радіус кута піктограми 57 x 57 пікселів - 9 пікселів.

Як говорили інші, ви не хочете закруглювати свої кути. Ви хочете відправити плоску (без шарів і альфа) квадратну графіку. Apple змінила маску, яку вони використовують для округлення ваших кутів в iOS7, а потім знову в iOS8. Ви можете знайти ці маски всередині вашого пакета додатків Xcode. Шлях змінюється з кожною новою версією SDK, яку вони випускають. Отже, я покажу вам, як ви завжди можете його знайти.

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зображення:

Ви можете використовувати це для тестування свого значка, щоб побачити, чи буде він виглядати нормально після його маскування. Але, не кружте свої кути . Якщо ви зробите це, коли Apple знову змінить ці маски, у вас з’являться артефакти.

Усі попередні відповіді на це питання застаріли. Принаймні з травня 2015 року Apple вимагає від вас надати квадратні значки без округлення:

Тримайте кути піктограми квадратними. Система застосовує маску, яка автоматично закріплює кути значків.

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

Якщо не враховувати обведення, точний радіус насправді становить 10 пікселів для піктограми 57x57.

Я отримую цю інформацію з iconreference .

Створюючи піктограму мого додатка за допомогою Photoshop, я виявив, що жоден цілий радіус кута точно не відповідає масці пристрою .

Що я зараз роблю, це створити порожній проект із Xcode, встановити абсолютно білий файл PNG як піктограму та вимкнути попередньо скошений та блиск. Потім запускаю додаток і роблю скріншот головного екрану. Тепер ви можете легко створити маску з цього зображення, яку ви можете використовувати в Photoshop. Це дозволить отримати ідеально закруглені кути.

Iphone закруглює куточки для вас, все, що вам потрібно, - це квадратний значок 57x57 png, і вам має бути добре

Є два абсолютно суперечливі відповіді з великою кількістю голосів, один - 160 пікселів @ 1024, а другий - 180 пікселів @ 1024. Так відьма одна?

Я провів кілька експериментів і думаю, що це 180px @ 1024, тому drbarnard правильний.

Я завантажив піктограму iTunes U з App Store, це 175x175px. Я підняв її в Photoshop до 1024px і наділив на неї дві форми, одну з радіусом 160px та другу 180px.

Як видно нижче, форма (тонка сіра лінія) з 160 пікселями (перша) трохи відхилена, тоді як форма з 180 пікселів виглядає просто чудово.

Це те, що я зараз роблю в PhotoShop:

1. Я створюю полотно розміром 1026x1026px з маскою 180px для головного дизайну Smart Object .
2. Я дублюю основні Smart Object 5 разів і змінюю їх розмір до 1024px, 144px, 114px, 72px та 57px.
3. Я кладу "Новий шаруватий фрагмент" на кожен розумний об'єкт і перейменую фрагменти відповідно до їх розміру (наприклад, icon-72px).
4. Коли я зберігаю твір, вибираю "Усі фрагменти користувача" та BANG! У мене є всі значки, необхідні для мого додатка.

Я спробував радіус 228px для 1024x1024 і він спрацював :)

Оновлення (станом на січень 2018 р.) Для вимог Icon Icon:

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

Тримайте кути піктограми квадратними . Система застосовує маску, яка автоматично закріплює кути значків.

Зберігайте фон простим і уникайте прозорості . Переконайтеся, що ваш значок непрозорий, і не захаращуйте фон. Надайте йому простий фон, щоб він не переповнював інші значки додатків поблизу. Вам не потрібно заповнювати всю іконку вмістом.

Вам не потрібно застосовувати радіус кута до піктограми додатка, ви можете просто застосувати квадратні значки. Пристрій автоматично застосовує кутовий радіус.