Значки приложений для iPhone - точный радиус? - PullRequest
293 голосов
/ 21 января 2010

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

Я уверен, что я просто придурок, но как сделать так, чтобы закругленные углы точно совпали с иконкой из Illustrator или Photoshop?

Edit:

Какой радиус у Retina iPad?

Ответы [ 16 ]

329 голосов
/ 28 сентября 2010

Вы можете сделать четыре иконки (на сегодняшний день) для вашего приложения, и все они могут выглядеть по-разному - не обязательно в зависимости от изображения 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, и вы можете видеть, что любые будущие размеры значков должны иметь отношение 1:6.4 углового радиуса к размеру значков. Существует также очень хороший ответ от https://stackoverflow.com/a/29550364/396005, в котором указано расположение файлов маски изображений, используемых в SDK для округления углов значков

Чтобы добавить совместимый с сетчаткой файл, используйте то же имя файла и добавьте '@ 2x'. Поэтому, если бы у меня был файл для моего значка 72x72 с именем icon.png, я бы также добавил PNG-файл размером 114x114 с именем icon@2x.png в проект / цель, и Xcode автоматически использовал бы его в качестве значка на дисплее сетчатки. Это можно увидеть в действии на странице «Сводка» цели приложения, если вы все сделали правильно. То же самое работает для ваших изображений запуска. Используйте launch.png в 320x480 и launch@2x.png в 640x960.

278 голосов
/ 20 апреля 2012

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

  1. Icon1024.png - 1024px - 179,649
  2. Icon512.png - 512 пикселей - 89,825
  3. Icon.png - 57px - 10
  4. Icon@2x.png - 114px - 20
  5. Icon-72.png - 72px - 12.632
  6. Icon-Small.png - 29 пикселей - 5,088
  7. Icon-Small@2x.png - 58px - 10,175

Кроме того, как уже упоминалось в других ответах, вы на самом деле не хотите обрезать изображения, которые вы используете в двоичном файле, или отправлять их в Apple. Все они должны быть квадратными и не иметь никакой прозрачности. Apple автоматически маскирует каждый значок в соответствующем контексте.

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

Дополнительное чтение:

Невен Мрган о дополнительных размерах значков и других соображениях дизайна: размеры значков приложения ios

Марк Эдвардс из Bjango о различных вариантах создания скруглений в Photoshop и почему это важно: roundrect

Официальные документы Apple по размеру значков и соображениям дизайна: Значки и изображения

Обновление:

Я провел несколько тестов в Photoshop CS6, и кажется, что 3 цифры после десятичной точки достаточно точны, чтобы получить точно такой же вектор (по крайней мере, как показано в Photoshop при увеличении 3200%). Инструмент Round Rect иногда округляет ввод до ближайшего целого числа, но вы можете увидеть значительную разницу между 90 и 89.825. И несколько раз инструмент Round Rectangle Tool не округлялся и фактически показывал несколько цифр после десятичной точки. Не уверен, что там происходит, но он определенно использует и хранит более точное число, которое было введено.

Во всяком случае, я обновил список выше, включив в него всего 3 цифры после десятичной точки (раньше их было 13!). В большинстве ситуаций, вероятно, было бы трудно определить разницу между прозрачным значком 512px, замаскированным под радиусом 90px, и значком 89.825, но сглаживание закругленного угла определенно получилось бы немного другим и, вероятно, было бы заметно в определенных обстоятельствах, особенно если вторая, более точная маска применяется Apple, в коде или иным образом.

29 голосов
/ 17 июля 2012

Я вижу много обсуждений "px", но никто не говорит о процентах, которые являются фиксированным числом, которое вы хотите вычислить по

15.625% - это ключевой процент здесь. Умножьте любой размер изображения, упомянутый выше, на 0,15625, и вы получите правильный радиус пикселя для этого размера.

РЕДАКТИРОВАТЬ : Спасибо @Chris Prince за комментирование с процентом радиуса iOS 8/9/10: 22,37%

28 голосов
/ 10 мая 2011

Важно: уравнение для иконки 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. Они просят вас нарисовать квадратные значки, так что ... почему бы и нет?

16 голосов
/ 20 апреля 2012

Ответ от dbarnard имеет формулу для вычисления правильного радиуса, но, поскольку вы искали шаблоны, все маски и наложения можно найти в этом каталоге:

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

(путь для последних версий XCode. Для более старой версии он, вероятно, будет внутри /Developer/).

Как уже отмечали другие, вы НЕ должны маскировать их самостоятельно, но вы можете использовать их, чтобы проверить, как ваши значки будут выглядеть после маскировки.

(кредиты за этот вывод поступают в Neven Mrgan IIRC)

11 голосов
/ 17 ноября 2017

Люди спорят о том, что радиус угла немного увеличен, но на самом деле это не так.

Из этого блога :

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

enter image description here

Вам не нужно , чтобы применить угловой радиус к значкам для iOS. Просто предоставьте квадратные значки. Но если вы все еще хотите знать, как, фактическая форма называется Squircle , а ниже приведена формула:

enter image description here

7 голосов
/ 22 января 2010

Угловой радиус значка 57 x 57 пикселей составляет 9 пикселей.

6 голосов
/ 10 апреля 2015

Как уже говорили другие, вы не хотите закруглять углы. Вы хотите отправить плоскую (без слоев или альфа) квадратную графику. 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:

AppIconMask@3x~iphone.png

Вы можете использовать это, чтобы проверить вашу иконку , чтобы увидеть, будет ли она выглядеть хорошо после маскировки Но, не закругляйте свои углы . Если вы это сделаете, когда Apple снова изменит эти маски, у вас будут артефакты.

5 голосов
/ 05 мая 2015

Все предыдущие ответы на этот вопрос устарели. По крайней мере, с мая 2015 года Apple требует, чтобы вы предоставляли квадратные значки без округления:

Держите углы значков квадратными. Система применяет маску, которая автоматически округляет углы значков.

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

5 голосов
/ 21 декабря 2010

Если не учитывать ход, точный радиус на самом деле составляет 10 пикселей для значка 57x57.

Я получаю эту информацию от iconreference .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...