it-swarm.com.ru

значки приложений для iPhone - точный радиус?

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

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

Правка:

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

288
Frank Barson

Вы можете сделать четыре иконки (на сегодняшний день) для вашего приложения, и все они могут выглядеть по-разному - не обязательно в зависимости от изображения 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, и он не добавит эффект глянца, но поместит черный фон под ним и все еще закруглит углы изображения с помощью этих углов. радиусы, поэтому, если радиус угла на любом из значков больше, он будет отображаться черным по краям/углам.

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

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

327
Bron Davies

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

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

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

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

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

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

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

Обновление:

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

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

276
drbarnard

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

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

EDIT: Спасибо @Chris Prince за комментирование с процентом радиуса iOS 8/9/10: 22,37%

29
bitwit

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

28
marzapower

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

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

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

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

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

16
Agos

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

От этот блог :

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

 enter image description here

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

 enter image description here

9
Onur Yıldırım

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

7
willc2

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

AppIconMask@3x~iphone.png

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

6
Bruno Bronosky

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

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

5
Khomsan

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

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

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

5
Mark Whitaker

При разработке иконок приложений с помощью Photoshop я обнаружил, что ни один целочисленный радиус угла не соответствует маске устройства точно .

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

4
ryyst

Iphone закругляет углы для вас, все, что вам нужно, это квадратный значок 57x57 png, и вы должны быть хорошими

3
Daniel

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

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

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

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

shape with 160px radiusenter image description here

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

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

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

2
Ruby

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


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

Включает в себя:

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

а также 

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

0
agirault

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

0
Vinayak