Я пытаюсь создать значок для своего приложения для iPhone, но не знаю, как получить точный радиус, который используют значки iPhone. Я искал учебник или шаблон, но не нашел.
Я уверен, что я просто придурок, но как сделать так, чтобы скругленные углы точно совпадали с иконкой из Illustrator или Photoshop?
Изменить:
Какой радиус у Retina iPad?
Вы можете сделать четыре значка (на сегодняшний день) для своего приложения, и все они могут иметь разный вид - не обязательно на основе изображения 512x512.
Если вы действительно создаете набор пользовательских значков, вы можете установить для параметра UIPrerenderedIcon значение true в вашем файле info.plist, и он не добавит эффекта блеска, но разместит черный фон под ним и по-прежнему закруглит углы изображения этим углом. Радиусы, поэтому, если радиус угла на любом из значков больше, он будет отображаться черным по краям / углам.
Изменить: См. комментарий от @ devin-g-rhode, и вы увидите, что любые будущие размеры значков должны иметь 1:6.4 отношение радиуса угла к размеру значка. Также есть очень хороший ответ от https://stackoverflow.com/a/29550364/396005, в котором указано местоположение файлы масок изображений, используемые в SDK для закругления углов значков
Чтобы добавить файл, совместимый с сетчаткой, используйте то же имя файла и добавьте «@ 2x». Итак, если бы у меня был файл для моего значка 72x72 с именем icon.png, я бы также добавил файл PNG 114x114 с именем [email protected] в проект / цель, и Xcode автоматически использовал бы его в качестве значка на дисплее Retina. Вы можете увидеть это в действии на странице «Сводка» целевого приложения, если вы все сделали правильно. То же самое работает с вашими стартовыми изображениями. Используйте файл launch.png с разрешением 320x480 и [email protected] с разрешением 640x960.
Попробовав некоторые ответы в этом посте, я проконсультировался с Луи Мантиа (бывший дизайнер Apple, Square и Iconfactory), и все ответы на данный момент в этом посте неверны (или, по крайней мере, неполны). Apple начинает со значка 57 пикселей и имеет радиус 10, а затем масштабируется вверх или вниз. Таким образом, вы можете рассчитать радиус для любого размера значка, используя 10/57 x new size (например, 10/57 x 114 дает 20, что является правильным радиусом для значка 114 пикселей). Вот список наиболее часто используемых значков, правильные соглашения об именах, размеры в пикселях и радиусы углов.
Кроме того, как упоминалось в других ответах, вы на самом деле не хотите обрезать какие-либо изображения, которые вы используете в двоичном файле или отправляете в Apple. Все они должны быть квадратными и непрозрачными. Apple автоматически замаскирует каждый значок в соответствующем контексте.
Однако знание вышеизложенного важно для использования значков в пользовательском интерфейсе приложения, где вам нужно применить маску в коде или предварительно обработать в фотошопе. Это также полезно при создании обложек для веб-сайтов и других рекламных материалов.
Дополнительное чтение:
Невен Мрган о дополнительных размерах значков и других аспектах дизайна: размеры значков приложений ios
Марк Эдвардс из Bjango о различных вариантах создания округлых фигур в Photoshop и о том, почему это важно: округлость
Официальные документы Apple по размеру значков и особенностям дизайна: Значки и Изображения
Обновление:
Я провел несколько тестов в Photoshop CS6, и мне кажется, что трех цифр после десятичной точки достаточно для получения одного и того же вектора (по крайней мере, как показано в Photoshop с увеличением 3200%). Инструмент Round Rect Tool иногда округляет ввод до ближайшего целого числа, но вы можете увидеть значительную разницу между 90 и 89,825. И несколько раз инструмент Round Rectangle Tool не округлял и фактически показывал несколько цифр после десятичной точки. Не уверен, что там происходит, но он определенно использует и сохраняет более точное число, которое было введено.
Во всяком случае, я обновил список выше, включив в него всего 3 цифры после десятичной точки (раньше их было 13!). В большинстве ситуаций, вероятно, будет трудно отличить прозрачный значок 512 пикселей, замаскированный с радиусом 90 пикселей, и значок с маской 89,825, но сглаживание закругленного угла определенно будет немного другим и, вероятно, будет видно при определенных обстоятельствах, особенно если вторая, более точная маска применяется Apple, в коде или иным образом.
Я вижу много дискуссий о пикселях, но никто не говорит о процентах, которые являются фиксированным числом, по которому вы хотите рассчитать.
22,37% - ключевой процент здесь. Умножьте любой из размеров изображения, упомянутых выше, на 0,2237, и вы получите правильный радиус в пикселях для этого размера.
До iOS 8 Apple использовала меньшее округление, используя 15,625%.
РЕДАКТИРОВАТЬ: спасибо @Chris Prince за комментарий с процентом радиуса iOS 8/9/10: 22,37%
В предстоящем выпуске 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:
Таким образом, вы можете добиться любого эффекта, просто нарисовав простой квадратный значок и заполнив его содержимым. Окончательный радиус угла будет примерно таким, как в других ответах здесь, но это никогда не будет гарантировано, поскольку эти числа не являются частью официальной документации 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 /).
Как отмечали другие, вы НЕ должны маскировать их самостоятельно, но вы можете использовать их, чтобы проверить, как ваши значки будут выглядеть после маскировки.
(кредиты за это открытие принадлежат Невену Мргану IIRC)
find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'
- person Bruno Bronosky; 10.04.2015
Угловой радиус значка 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
./[email protected]
./[email protected]
./DefaultIcon-29.png
./[email protected]
./[email protected]
./DefaultIcon-40.png
./[email protected]
./[email protected]
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./[email protected]
./DocumentBadgeMask-20.png
./[email protected]
./[email protected]
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./[email protected]
./[email protected]
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./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
./[email protected]
./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
./[email protected]
./NewsstandNewspaperSwitcherGradientLeft.png
./[email protected]
./NewsstandNewspaperSwitcherGradientRight.png
./[email protected]
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./[email protected]
./[email protected]
./SpotlightAppIconMask.png
./[email protected]
./[email protected]
./TableIconMask.png
./[email protected]
./[email protected]
./TableIconOutline.png
./[email protected]
./[email protected]
Как видите, разных масок очень много, но названия они довольно четко обозначены. Вот изображение 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. У вас получатся идеально закругленные углы.
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
Сохраняйте углы значка квадратными. Система применяет маску, которая автоматически скругляет углы значков.
Сделайте фон простым и избегайте прозрачности. Убедитесь, что ваш значок непрозрачный и не загромождает фон. Сделайте простой фон, чтобы он не перекрывал значки других приложений поблизости. Нет необходимости заполнять весь значок содержимым.
Iphone закругляет углы для вас, все, что вам нужно, это квадратный значок 57x57 png, и у вас должно быть хорошо
Есть два совершенно противоречивых ответа с большим количеством голосов: один - 160 пикселей @ 1024, другой - 180 пикселей @ 1024. Так ведьма одна?
Я провел несколько экспериментов и думаю, что это 180 пикселей при 1024, так что drbarnard правильный.
Я загрузил значок iTunes U из App Store, это 175x175 пикселей. Я увеличил его масштаб в Photoshop до 1024 пикселей и поместил на него две формы: одну с радиусом 160 пикселей и одну с 180 пикселей.
Как вы можете видеть ниже, фигура (тонкая серая линия) со 160 пикселями (первая) немного нечеткая, тогда как форма со 180 пикселями выглядит нормально.
Вот чем я сейчас занимаюсь в PhotoShop:
Я попробовал радиус 228 пикселей для 1024x1024, и это сработало :)
Вам не нужно применять угловой радиус к значку приложения, вы можете просто применить квадратные значки. Устройство автоматически применяет угловой радиус.
