Я пытаюсь создать значок для своего iPhone-приложения, но не знаю, как получить точный радиус, который используют иконы iPhone. Я искал и искал учебник или шаблон, но не могу найти его.
Я уверен, что я просто придурок, но как вы получите закругленные углы точно с вашим значком из Illustrator или Photoshop?
Edit:
Какой радиус для iPad Retina?
Вы можете сделать четыре значка (по состоянию на сегодняшний день) для своего приложения, и все они могут выглядеть по-другому - не обязательно на основе изображения 512x512.
Если вы создаете набор пользовательских значков, вы можете установить для параметра UIPrerenderedIcon значение true в вашем файле info.plist, и он не будет добавлять эффект блеска, но он поместит на него черный фон и все еще будет углы изображения с этими угловыми радиусами, поэтому, если радиус угла на любом из значков больше, то он будет показывать черный вокруг краев/углов.
Изменить: См. комментарий от @devin-g-rhode, и вы можете видеть, что любые будущие размеры значков должны иметь отношение 1:6.4 от радиуса угла до размера значка. Существует также очень хороший ответ от fooobar.com/questions/25548/..., в котором указаны файлы маски изображений, используемые в SDK для округления углов значков
Чтобы добавить файл, совместимый с сетчаткой, используйте то же имя файла и добавьте '@2x'. Поэтому, если бы у меня был файл для значка 72x72 с именем icon.png, я бы также добавил файл PNG размером 114x114 с именем [email protected] для проекта/цели, и Xcode автоматически использовал его как значок на экране сетчатки. Вы можете увидеть это в действии на странице "Сводка" целевого приложения, если вы сделали это правильно. То же самое работает для ваших изображений запуска. Используйте launch.png на 320x480 и [email protected] на 640x960.
Попробовав некоторые ответы в этом посте, я проконсультировался с Луи Мантия (бывший дизайнер Apple, Square и Iconfactory), и все ответы на этот пост до сих пор неправильные (или, по крайней мере, неполные). Apple начинается с иконки 57px и радиусом 10, а затем масштабируется вверх или вниз. Таким образом, вы можете рассчитать радиус для любого размера значка, используя 10/57 x new size (например, 10/57 x 114 дает 20, что является правильным радиусом для значка 114px). Вот список наиболее часто используемых значков, правильные соглашения об именах, размеры в пикселях и радиусы углов.
Кроме того, как уже упоминалось в других ответах, вы на самом деле не хотите обрезать какие-либо изображения, которые вы используете в двоичном файле, или отправлять их в Apple. Все они должны быть квадратными и не иметь никакой прозрачности. Apple автоматически маскирует каждый значок в соответствующем контексте.
Знание вышесказанного важно, однако, для использования значков в пользовательском интерфейсе приложения, где необходимо применить маску в коде или предварительно визуализировать в фотошопе. Это также полезно при создании иллюстраций для веб-сайтов и других рекламных материалов.
Дополнительное чтение:
Невен Мрган (Neven Mrgan) о дополнительных размерах иконок и других соображениях дизайна: размеры иконок приложений ios
Бьянго Марк Эдвардс о различных вариантах создания циклических переходов в 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 вы заметите, что "стандартный" радиус значка увеличен. Поэтому постарайтесь сделать то, что Apple и я предложили с этим ответом.
Похоже, что для пиктограммы 120px формула, которая наилучшим образом представляет свою форму на iOS 7, представляет собой следующий суперэллипс:
|x/120|^5 + |y/120|^5 = 1
Очевидно, вы можете изменить номер 120 с нужным размером значка, чтобы получить соответствующую функцию.
Оригинал
Вы должны предоставить изображение с углами 90 ° (это важно для избегайте обрезки углов вашего значка - iOS делает это для вас, когда он применяет угловую маску) (Документация для Apple)
Лучший подход - это не закругление углов ваших значков. Если вы установите значок в виде квадратного значка, iOS автоматически наложит значок с предопределенной маской, которая установит соответствующие закругленные углы.
Если вы вручную установите закругленные углы для своих значков, они, вероятно, будут выглядеть сломанными в том или ином устройстве, потому что маска округления немного изменится с версии iOS на другую. Иногда ваши иконки будут немного больше, иногда (вздох) немного меньше. Использование квадратного значка освободит вас от этой нагрузки, и вы обязательно будете иметь всегда актуальную и красивую иконку для своего приложения.
Этот подход действителен для каждого размера значка (iPhone/iPod/iPad/сетчатка), а также для оформления iTunes. Я несколько раз выполнял этот подход, и, если хотите, я могу отправить вам ссылку на приложение, в котором используются значки с квадратным квадратом.
Edit
Чтобы лучше понять этот ответ, обратитесь к официальной документации Apple о знаках iOS. На этой странице четко указано, что квадратный значок автоматически получит эти вещи при отображении на устройстве iOS:
Итак, вы можете достичь любого эффекта, который вы хотите, просто нарисовав значок квадратного квадрата и заполнив его содержимым. Конечный радиус угла будет чем-то подобным тому, что говорят другие ответы, но это никогда не будет гарантировано, так как эти цифры не являются частью официальной документации Apple на iOS. Они просят вас рисовать квадратные значки, поэтому... почему бы и нет?
Ответ от dbarnard имеет формулу для вычисления правильного радиуса, но поскольку вы искали шаблоны, все маски и наложения можно найти в этом каталоге:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework
(путь для последних версий XCode. Для более старой версии он, вероятно, будет внутри /Developer/ ).
Как отмечали другие, вы НЕ должны маскировать их самостоятельно, но вы можете использовать их, чтобы проверить, как ваши значки будут выглядеть в масках.
(кредиты для этого находка идут к Neven Mrgan IIRC)
Люди спорят о том, что угол поворота немного увеличен, но на самом деле это не так.
Из этого блога:
Секрет физических продуктов Apple состоит в том, что они избегают касания (когда радиус встречается с линией в одной точке) и обрабатывают свои поверхности так называемой непрерывностью кривизны.
Вам не нужно применять угловой радиус для иконок для iOS. Просто предоставьте квадратные значки. Но если вы все еще хотите знать как, фактическая форма называется Squircle, а ниже приведена формула:
Радиус угла значка 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
./[email protected]~ipad.png
./[email protected]~iphone.png
./[email protected]~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]
./[email protected]~iphone.png
./[email protected]~iphone.png
./[email protected]~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./[email protected]
./DocumentBadgeMask-20.png
./[email protected]
./[email protected]
./[email protected]~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./[email protected]
./[email protected]
./[email protected]~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
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./[email protected]
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./[email protected]
./NewsstandNewspaperSwitcherGradientLeft.png
./[email protected]
./NewsstandNewspaperSwitcherGradientRight.png
./[email protected]
./[email protected]~ipad.png
./[email protected]~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]
Как вы можете видеть, существует много разных масок, но они называются довольно четко. Вот изображение [email protected]~iphone.png:
Вы можете использовать это для проверить свой значок, чтобы убедиться, что он будет выглядеть нормально после его маскировки. Но не округлите свои углы. Если вы это сделаете, когда Apple снова изменит эти маски, у вас появятся артефакты.
Если не считать инсульта, точный радиус фактически равен 10px для значка 57x57.
Я получаю эту информацию от iconreference.
Все предыдущие ответы на этот вопрос теперь устарели. Поскольку, по крайней мере, с мая 2015 года, Apple требует, чтобы вы предоставили квадратные значки без округления:
Сохранять квадраты значков. Система применяет маску, которая автоматически округляет углы значков.
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
При разработке значков моих приложений с помощью Photoshop я обнаружил, что ни один целочисленный угловой радиус не подходит для маски устройства.
Теперь я создаю пустой проект с Xcode, устанавливаю полностью белый PNG файл в качестве значка и отключая предустановленный скос и блеск. Затем я запустил приложение и сделаю снимок экрана на главном экране. Теперь вы можете легко создать маску из этого изображения, которую вы можете использовать в Photoshop. Это даст вам совершенно закругленные углы.
Для вас нужны углы для iphone, все, что вам нужно, это квадратный значок размером 57x57 и u должен быть хорошим.
Есть два полностью противоречивых ответа с большим количеством голосов - 160px @1024, а другой - 180px @1024. Итак, ведьма?
Я провел несколько экспериментов, и я думаю, что это 180px @1024, поэтому drbarnard верен.
Я загрузил значок iTunes U из App Store 175x175px. Я увеличил его в Photoshop до 1024px и наложил на него две фигуры: один с радиусом 160px и один с 180px.
Как вы можете видеть ниже, форма (тонкая серая линия) с 160px (1-й) немного разряжена, тогда как одна с 180px выглядит просто отлично.
Вот что я делаю сейчас в PhotoShop:
Я пробовал радиус 228px для 1024x1024, и он работал:)
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
Держите значок углы квадрата. Система применяет маску, которая автоматически закругляет углы значков.
Сохраняйте фон простым и избегайте прозрачности. Убедитесь, что ваш значок непрозрачный, и не загромождайте фон. Дайте ему простой фон, чтобы он не перекрывал другие значки приложений поблизости. Вам не нужно заполнять весь значок с содержанием.
Вам не нужно применять радиус угла к значку приложения, вы можете просто применить квадратные значки. Устройство автоматически применяет угловой радиус.