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

<p>я пытаюсь создать значок для своего приложения для iphone, но не знаю, как получить точный радиус, который используют значки iphone. я искал учебник или шаблон, но не смог его найти.</p><p>я уверен, что я просто придурок, но как вы получите правильные закругленные углы с иконкой из illustrator или photoshop?</p><p><strong> правка: </strong></p><p>какой радиус у retina ipad?</p>

<p>вы можете сделать четыре иконки (на сегодняшний день) для вашего приложения, и все они могут выглядеть по-разному - не обязательно в зависимости от изображения 512x512.</p><ul> <li>радиус угла для значка 512x512 = <strong>80</strong> (itunesartwork)</li> <li>радиус угла для значка 1024x1024 = <strong>180</strong> (itunesartwork <strong>retina</strong>)</li> <li>угловой радиус для значка 57x57 = <strong>9</strong> (iphone/ipod touch)</li> <li>угловой радиус для значка 114x114 = <strong>18</strong> (iphone/ipod touch <strong>retina</strong>)</li> <li>радиус угла для значка 72x72 = <strong>11</strong> (ipad)</li> <li>радиус угла для значка 144x144 = <strong>23</strong> (ipad <strong>retina</strong>)</li> </ul><p>если вы создадите набор пользовательских значков, вы можете установить для параметра <code>uiprerenderedicon</code> значение true в файле info.plist, и он не добавит эффект глянца, но поместит черный фон под ним и все еще закруглит углы изображения с помощью этих углов. радиусы, поэтому, если радиус угла на любом из значков больше, он будет отображаться черным по краям/углам.</p><p><strong>edit:</strong> посмотрите комментарий от @ devin-g-rhode, и вы увидите, что любые будущие размеры значков должны иметь отношение <code>1:6.4</code> радиуса угла к размеру значка. существует также очень хороший ответ от <a href="https://stackoverflow.com/a/29550364/396005">https://stackoverflow.com/a/29550364/396005</a> в котором находятся файлы маски изображений, используемые в sdk для округления углов значков</p><p>чтобы добавить retina-совместимый файл, используйте то же имя и добавьте '@ 2x'. поэтому, если бы у меня был файл для моего значка 72x72 с именем icon.png, я бы также добавил png-файл размером 114x114 с именем icon@2x.png в проект/цель, и xcode автоматически использовал бы его в качестве значка на дисплее сетчатки. вы можете увидеть это в действии на странице сводка цели приложения, если вы все сделали правильно. то же самое работает для ваших изображений запуска. используйте launch.png в 320x480 и launch@2x.png в 640x960. </p>

<p>перепробовав некоторые ответы в этом посте, я проконсультировался с луи мантия (бывший дизайнер apple, square и iconfactory), и все ответы на этот пост пока неправильные (или, по крайней мере, неполные). apple начинается с иконки 57px и радиусом 10, а затем масштабируется вверх или вниз оттуда. таким образом, вы можете вычислить радиус для любого размера иконки, используя <code>10/57 x new size</code> (например, <code>10/57 x 114</code> дает 20, что является правильным радиусом для иконки 114px). вот список наиболее часто используемых значков, правильные соглашения об именах, размеры в пикселях и радиусы углов.</p><ol> <li>icon1024.png - 1024px - 179,649</li> <li>icon512.png - 512 пикселей - 89,825</li> <li>icon.png - 57px - 10</li> <li>icon@2x.png - 114px - 20</li> <li>icon-72.png - 72px - 12.632</li> <li>icon-72@2x.png - 144px - 25.263</li> <li>icon-small.png - 29px - 5.088</li> <li>icon-small@2x.png - 58 пикселей - 10,175</li> </ol><p>кроме того, как уже упоминалось в других ответах, вы на самом деле не хотите обрезать какие-либо изображения, которые вы используете в двоичном файле, или передавать в apple. все они должны быть квадратными и не иметь никакой прозрачности. apple автоматически замаскирует каждый значок в соответствующем контексте.</p><p>знание вышесказанного важно, однако, для использования значков в пользовательском интерфейсе приложения, где необходимо применить маску в коде или предварительно визуализировать в фотошопе. это также полезно при создании иллюстраций для веб-сайтов и других рекламных материалов.</p><p><b>дополнительное чтение:</b></p><p>neven mrgan о дополнительных размерах иконок и других соображениях дизайна: <a href="http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes">размеры иконок приложений ios</a> </p><p>марк эдвардс из bjango о различных вариантах создания циклов в photoshop и почему это важно: <a href="http://bjango.com/articles/roundrect/">roundrect</a> </p><p>официальные документы apple по размеру иконок и соображениям дизайна: <a href="http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/iconsimages/iconsimages.html">iconsimages</a> </p><p><b>обновление:</b></p><p>я провел несколько тестов в photoshop cs6, и кажется, что 3 цифры после десятичной точки достаточно точны, чтобы получить точно такой же вектор (по крайней мере, как показано в photoshop при увеличении 3200%). инструмент round rect иногда округляет ввод до целого числа, но вы можете увидеть значительную разницу между 90 и 89.825. и несколько раз инструмент round rectangle tool не округлялся и фактически показывал несколько цифр после десятичной точки. не уверен, что там происходит, но он определенно использует и хранит более точное число, которое было введено.</p><p>во всяком случае, я обновил список выше, чтобы включить только 3 цифры после десятичной точки (до того, как их было 13!). в большинстве ситуаций, вероятно, было бы трудно определить разницу между прозрачным значком 512px, замаскированным под радиусом 90px, и значком 89.825, но сглаживание закругленного угла определенно получилось бы немного другим и, вероятно, было бы заметно в определенных обстоятельствах, особенно если вторая, более точная маска применяется apple, в коде или иным образом.</p>

<p>я вижу много обсуждений "px", но никто не говорит о процентах, которые являются фиксированным числом, по которому вы хотите рассчитать</p><p><strong> 15,625% </strong>это ключевой процент здесь. умножьте любой размер изображения, упомянутый выше, на 0,15625, и вы получите правильный радиус пикселя для этого размера.</p><p><strong>edit</strong>: спасибо @chris prince за комментирование с процентом радиуса ios 8/9/10:<strong> 22,37% </strong></p>

<h2>важно: уравнение для ios 7</h2><p>в следующем выпуске ios 7 вы заметите, что «стандартный» радиус значков был увеличен. поэтому попробуйте сделать то, что предложили apple и я с этим ответом.</p><p>похоже, что для значка размером 120 пикселей формула, которая лучше всего представляет ее форму на ios 7, представляет собой следующий суперэллипс:</p><pre><code>|x/120|^5 + |y/120|^5 = 1 </code></pre><p>очевидно, что вы можете изменить номер <code>120</code> на нужный размер значка, чтобы получить соответствующую функцию.</p><p><strong>оригинал</strong></p><blockquote> <p>вы должны предоставить изображение с углами 90 ° (важно избегать обрезки углов вашего значка - ios делает это для вас, когда применяет маску округления углов) ( <a href="http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/iconsimages/iconsimages.html">документация apple</a> )</p> </blockquote><p>лучший подход - не закруглять углы ваших иконок вообще. если вы установите свой значок в виде квадратного значка, ios автоматически наложит значок на предопределенную маску, которая установит соответствующие закругленные углы.</p><p>если вы вручную установите закругленные углы для своих значков, они, вероятно, будут выглядеть испорченными на том или ином устройстве, потому что маска округления может немного измениться с версии ios на другую. иногда ваши иконки будут немного больше, иногда (вздыхают) немного меньше. использование квадратного значка избавит вас от этого бремени, и у вас всегда будет актуальный и красивый значок для вашего приложения.</p><p>этот подход действителен для каждого размера значка (iphone/ipod/ipad/retina), а также для обложки itunes. я следовал этому подходу пару раз, и если вы хотите, я могу опубликовать вам ссылку на приложение, которое использует значки в виде квадратных квадратов.</p><p><strong>правка</strong></p><p>чтобы лучше понять этот ответ, пожалуйста, обратитесь к официальной <a href="http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/iconsimages/iconsimages.html">документации apple по иконкам ios</a> . на этой странице четко указано, что квадратный значок автоматически получит эти вещи при отображении на устройстве ios:</p><ol> <li>закругленные углы</li> <li>тень</li> <li>светоотражающий блеск (если вы не предотвратите эффект блеска)</li> </ol><p>таким образом, вы можете добиться любого эффекта, просто нарисовав квадратный значок и заполнив его содержимым. окончательный угловой радиус будет примерно таким же, как говорят другие ответы, но это никогда не будет гарантировано, так как эти цифры не являются частью официальной документации apple по ios. они просят вас нарисовать квадратные значки, так что ... почему бы и нет?</p>

<p>ответ от dbarnard имеет формулу для вычисления правильного радиуса, но поскольку вы искали шаблоны, все маски и наложения можно найти в этом каталоге:</p><pre><code>/applications/xcode.app/contents/developer/platforms/iphonesimulator.platform/developer/sdks/iphonesimulator5.1.sdk/system/library/privateframeworks/mobileicons.framework </code></pre><p>(путь для последних версий xcode. для более старой версии он, вероятно, будет внутри/developer /).</p><p>как уже отмечали другие, вы не должны маскировать их самостоятельно, но вы можете использовать их, чтобы проверить, как ваши значки будут выглядеть после маскировки.</p><p>(кредиты за этот вывод идут в neven mrgan iirc)</p>

<p>люди спорят о том, что радиус угла немного увеличен, но на самом деле это не так.</p><p>от <a href="https://hackernoon.com/apples-icons-have-that-shape-for-a-very-good-reason-720d4e7c8a14">этот блог</a> :</p><blockquote> <p>«секрет» физических продуктов apple заключается в том, что они избегают касания (когда радиус встречается с линией в одной точке) и обрабатывают свои поверхности так называемой непрерывностью <strong>кривизны</strong>.</p> </blockquote><p> <a href="https://i.stack.imgur.com/pegdh.png"> <img src="https://i.stack.imgur.com/pegdh.png" alt="enter image description here"> </a> </p><p>вам <a href="https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/"><strong>не нужно</strong></a> чтобы применить угловой радиус к иконкам для ios. просто предоставьте квадратные значки. но если вы все еще хотите знать, как, фактическая форма называется <a href="https://www.cocoanetics.com/2013/06/ios-7-icon-squircle/"><strong>squircle</strong></a> , а ниже приведена формула:</p><p> <a href="https://i.stack.imgur.com/wrxn1.png"> <img src="https://i.stack.imgur.com/wrxn1.png" alt="enter image description here"> </a> </p>

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

<p>как уже говорили другие, вы не хотите закруглять углы. вы хотите отправить плоскую (без слоев или альфа) квадратную графику. apple изменила маску, которую они используют для скругления углов в ios7, а затем снова в ios8. вы можете найти эти маски в комплекте приложений xcode. путь меняется с каждой новой версией sdk, которую они выпускают. итак, я покажу вам, как вы всегда можете его найти.</p><pre><code>find /applications/xcode.app/contents/developer/platforms/iphonesimulator.platform/developer/sdks -name 'mobileicons.framework' </code></pre><p>в этот самый момент путь, найденный этой командой, <code>/applications/xcode.app/contents/developer/platforms/iphonesimulator.platform/developer/sdks/iphonesimulator.sdk/system/library/privateframeworks/mobileicons.framework</code>, но не доверяйте этому. используйте команду, чтобы найти ее самостоятельно.</p><p>этот путь указывает на каталог с этими файлами (опять же, на момент публикации)</p><pre><code>./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 </code></pre><p>как видите, существует множество разных масок, но они названы довольно четко. вот изображение <code>appiconmask@3x~iphone.png</code>:</p><p><img src="https://i.stack.imgur.com/vm1qr.png" alt="appiconmask@3x~iphone.png"></p><p>вы можете использовать это, чтобы<strong> проверить ваш значок </strong>, чтобы увидеть, будет ли он выглядеть хорошо после того, как он будет замаскирован. но,<strong> не закругляйте углы </strong>. если вы это сделаете, когда apple снова изменит эти маски, у вас будут артефакты.</p>

<p>если не учитывать ход, точный радиус на самом деле составляет 10 пикселей для значка 57x57.</p><p>я получаю эту информацию от <a href="http://hicksdesign.co.uk/iconreference/">iconreference</a> .</p>

<p>все предыдущие ответы на этот вопрос устарели. по крайней мере, с мая 2015 года apple требует, чтобы вы предоставляли квадратные значки без округления:</p><blockquote> <p><strong>сохраняйте квадраты значков.</strong> система применяет маску, которая автоматически закругляет углы значков.</p> </blockquote><p> <a href="https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/">https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/</a> </p>

<p>при разработке иконок приложений с помощью photoshop я обнаружил, что ни один целочисленный радиус угла не соответствует маске устройства<em> точно </em>.</p><p>теперь я создаю пустой проект с xcode, устанавливаю в качестве значка полностью белый файл png и отключаю предустановленные скос и глянец. затем я запускаю приложение и делаю скриншот домашнего экрана. теперь вы можете легко создать маску из этого изображения, которую вы можете использовать в photoshop. это даст вам идеально закругленные углы.</p>

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

<p>есть<strong> два совершенно противоречивых ответа </strong>с большим количеством голосов один - 160px @ 1024, другой - 180px @ 1024. так ведьма одна?</p><p>я провел несколько экспериментов и думаю, что это 180px при 1024, так что drbarnard верен. </p><p>я загрузил значок itunes u из app store, его размер 175x175px. я увеличил его в фотошопе до 1024px и наложил на него две фигуры: одну с радиусом 160px и одну с 180px.</p><p>как вы можете видеть ниже, форма (тонкая серая линия) с 160px (1-й) немного не в порядке, тогда как форма с 180px выглядит просто отлично. </p><p><img src="https://i.stack.imgur.com/vgi6h.png" alt="shape with 160px radius"><img src="https://i.stack.imgur.com/xazmu.png" alt="enter image description here"></p><p>вот что я делаю сейчас в photoshop:</p><ol> <li>я создаю холст размером<strong> 1026x1026px с 180px </strong>mask для main design<strong> smart object </strong>. </li> <li>я дублирую основные смарт-объекты 5 раз и изменяю их размеры до 1024px, 144px, 114px, 72px и 57px. </li> <li>я помещаю «новый многослойный основанный фрагмент» на каждый смарт-объект и переименовываю фрагменты в соответствии с их размером (например, icon-72px).</li> <li>когда я сохраняю иллюстрацию, я выбираю «все пользовательские фрагменты» и bang! у меня есть все значки, необходимые для моего приложения.</li> </ol>

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

<h1>обновление (по состоянию на январь 2018 г.) требований к значкам приложений:</h1><hr><p> <a href="https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/">https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/</a> </p><p>включает в себя:</p><blockquote> <p><strong>сохраняйте квадраты значков</strong>. система применяет маску, которая автоматически закругляет углы значков.</p> </blockquote><p>а также </p><blockquote> <p><strong>сохраняйте фон простым и избегайте прозрачности</strong>. убедитесь, что ваш значок непрозрачный, и не загромождайте фон. дайте ему простой фон, чтобы он не перекрывал другие значки приложений поблизости. вам не нужно заполнять весь значок содержимым.</p> </blockquote>

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