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

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

Попробовав некоторые ответы в этом посте, я проконсультировался с Луи Мантия (бывший дизайнер 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-72@2x.png - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. Icon-Small@2x.png - 58 пикселей - 10,175

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

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

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

Невен Мрган (Neven Mrgan) о дополнительных размерах иконок и других соображениях дизайна: размеры иконок приложений 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, в коде или иным образом.

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

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

До iOS 8 Apple использовала меньше округлений, используя 15,625%.

РЕДАКТИРОВАТЬ : Спасибо @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 заключается в том, что они избегают касания (когда радиус встречается с линией в одной точке) и создают свои поверхности с так называемой непрерывностью кривизны .

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

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

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

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

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

(кредиты за этот вывод идут в Neven Mrgan 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, и вы должны быть хорошими

Есть два полностью противоречивых ответа с большим количеством голосов: один 160px @ 1024, другой 180px @ 1024. Так ведьма одна?

Я провел несколько экспериментов и думаю, что это 180px @ 1024, так что drbarnard - это правильно.

Я загрузил значок iTunes U из App Store, его размер 175x175px. Я увеличил его в фотошопе до 1024px и наложил на него две фигуры: одну с радиусом 160px и одну с 180px.

Как вы можете видеть ниже, форма (тонкая серая линия) с 160px (1-й) немного не в порядке, тогда как форма с 180px выглядит просто отлично.

Вот что я делаю сейчас в PhotoShop:

1. Я создаю холст размером 1026x1026px с маской 180px для основного дизайна Smart Object .
2. Я дублирую основной смарт-объект 5 раз и изменяю его размеры до 1024px, 144px, 114px, 72px и 57px.
3. Я помещаю «Новый многослойный основанный фрагмент» на каждый смарт-объект и переименовываю фрагменты в соответствии с их размером (например, icon-72px).
4. Когда я сохраняю иллюстрацию, я выбираю «Все пользовательские фрагменты» и BANG! У меня есть все значки, необходимые для моего приложения.

Я пробовал радиус 228px для 1024x1024, и это сработало :)

Обновление (по состоянию на январь 2018 г.) требований к значкам приложений:

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

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

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

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