iPhoneアプリのアイコンを作成しようとしていますが、iPhoneのアイコンが使用する正確な半径を取得する方法がわかりません。チュートリアルまたはテンプレートを検索して検索しましたが、見つかりません。

私は単なる独り言だと確信していますが、IllustratorやPhotoshopのアイコンを使用して、丸みを帯びた角を正確にどのようにして取得できますか？

編集：

Retina iPadの半径は？

アプリには4つのアイコン（現在のところ）を作成でき、それらはすべて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、info.plistファイルでオプションをtrueに設定すると、光沢効果は追加されませんが、その下に黒い背景が配置され、画像の角がこれらの角の丸みで丸められます。したがって、いずれかのアイコンの角の半径が大きい場合は、エッジ/角の周りが黒く表示されます。

編集： @ devin-g-rhodeからのコメントを参照してください。今後のアイコンサイズには1:6.4、角の半径とアイコンサイズの比率が必要です。https://stackoverflow.com/a/29550364/396005からの非常に良い回答もあります。これには、SDKでアイコンの角を丸めるために使用される画像マスクファイルの場所があります。

Retina互換ファイルを追加するには、同じファイル名を使用して「@ 2x」を追加します。したがって、72x72のアイコン用のicon.pngというファイルがある場合は、icon @ 2x.pngという114x114のPNGファイルもプロジェクト/ターゲットに追加し、XcodeはそれをRetinaディスプレイ上のアイコンとして自動的に使用します。これを正しく実行していれば、アプリケーションターゲットの[概要]ページでこの動作を確認できます。起動画像でも同じように機能します。320x480でlaunch.pngを使用し、640x960でlaunch@2x.pngを使用します。

この投稿のいくつかの回答を試した後、私はLouie Mantia（以前のApple、Square、Iconfactoryデザイナー）に相談したところ、この投稿に対するこれまでのすべての回答は間違っています（または少なくとも不完全です）。Appleは57pxのアイコンから始めて、半径が10で、そこから拡大または縮小します。したがって、任意のアイコンサイズの半径を計算できます10/57 x new size（たとえば10/57 x 114、114pxアイコンの適切な半径である20を指定します）。以下は、最も一般的に使用されるアイコン、適切な命名規則、ピクセル寸法、およびコーナー半径のリストです。

1. Icon1024.png-1024px-179.649
2. Icon512.png-512px-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-58px-10.175

また、他の回答で述べたように、実際にバイナリで使用する画像をトリミングしたり、Appleに送信したりする必要はありません。それらはすべて正方形であり、透明度があってはなりません。Appleは、適切なコンテキストで各アイコンを自動的にマスクします。

ただし、コードでマスクを適用するか、フォトショップで事前にレンダリングする必要があるアプリUI内でのアイコンの使用については、上記を理解することが重要です。また、ウェブサイトやその他の販促資料のアートワークを作成するときにも役立ちます。

追加の読み：

追加のアイコンサイズとその他の設計上の考慮事項についてNeven Mrgan：iOS アプリのアイコンサイズ

BjangoのMarc Edwardsが、PhotoshopでRoundrectsを作成するためのさまざまなオプションと、それが重要である理由について：Roundrect

アイコンのサイズとデザインの考慮事項に関するAppleの公式ドキュメント：アイコンと画像

更新：

私はPhotoshop CS6でいくつかのテストを行ったところ、小数点以下3桁で正確に同じベクトルを得るのに十分な精度があるようです（少なくともPhotoshopで3200％ズームで表示した場合）。Round Rect Toolは入力を最も近い整数に丸める場合がありますが、90と89.825の間には大きな違いがあることがわかります。また、四角形四角形の丸めツールが切り上げられず、実際には小数点の後に複数の桁が表示されました。何が起こっているのかはわかりませんが、入力されたより正確な数値を確実に使用および保存しています。

とにかく、上記のリストを更新して、小数点以下3桁（13になる前に！）を含めました。ほとんどの状況では、90px半径でマスクされた透明な512pxアイコンと89.825でマスクされた透明な512pxアイコンの違いを見分けるのはおそらく難しいでしょうが、丸みを帯びた角のアンチエイリアスは最終的にはわずかに異なり、特定の状況では特に表示される可能性があります。 2番目のより正確なマスクがAppleによって、コードで、またはその他の方法で適用された場合。

「px」についての議論はたくさんありますが、あなたが計算したい固定数であるパー​​センテージを話している人はいません。

ここでは22.37％が重要なパーセンテージです。上記の画像サイズのいずれかを0.2237で乗算すると、そのサイズの正しいピクセル半径が得られます。

iOS 8以前は、Appleは15.625％を使用して、より少ない丸めを使用していました。

編集：iOS 8/9/10の半径の割合でコメントしてくれた@Chris Princeに感謝：22.37％

重要：iOS 7のアイコン式

iOS 7の次のリリースでは、「標準」アイコンの半径が大きくなっていることに気づくでしょう。だから、アップルと私がこの答えで提案したことをやってみてください。

120pxアイコンの場合、iOS 7でその形状を最もよく表す数式は次の超楕円であるようです：

|x/120|^5 + |y/120|^5 = 1

当然のこと120ながら、目的のアイコンサイズの数値を変更して、対応する関数を取得できます。

元の

角が90度の画像を提供する必要があります（アイコンの角が切り取られないようにすることが重要です。iOSは角を丸めるマスクを適用するときにそれを行います）（Appleドキュメント）

最善の方法は、アイコンの角を丸くしないことです。アイコンを正方形のアイコンとして設定すると、iOSは、適切な角の丸みを設定する定義済みのマスクでアイコンを自動的にオーバーレイします。

丸みを帯びた角をアイコンに手動で設定した場合、丸めマスクがiOSバージョンから別のバージョンにわずかに変更されるため、このデバイスまたはそのデバイスでは角が壊れているように見える可能性があります。アイコンが少し大きくなることもあれば、（ため息）少し小さくなることもあります。正方形のアイコンを使用すると、この負担から解放され、アプリのアイコンが常に最新で見栄えがよくなります。

このアプローチは、各アイコンサイズ（iPhone / iPod / iPad / retina）とiTunesアートワークに有効です。このアプローチを2、3回実行しました。必要に応じて、ネイティブの正方形アイコンを使用するアプリへのリンクを投稿できます。

編集する

この回答をよりよく理解するには、iOSアイコンに関するAppleの公式ドキュメントを参照してください。このページでは、四角いアイコンがiOSデバイスに表示されたときに自動的に次のものを取得することが明記されています。

1. 丸い角
2. 影を落とす
3. 反射輝き（輝き効果を妨げない限り）

したがって、単純な四角形のアイコンを描画してコンテンツを埋めるだけで、どんな効果でも実現できます。最終的な角の半径は、ここでの他の答えが言っているものと同様になりますが、これらの数値はiOSの公式のAppleドキュメントの一部ではないため、保証されることはありません。彼らはあなたに正方形のアイコンを描くように頼みます、それで...なぜですか？

コーナーの半径がわずかに大きくなると主張する人々が、実際にはそうではありません。

このブログから：

Appleの物理的な製品の「秘密」は、正接（半径が1点で線と交わる場所）を回避し、曲率連続性と呼ばれるもので表面を作ることです。

あなたは必要としない 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年5月以降、Appleでは丸みのない正方形のアイコンを提供する必要があります。

アイコンの角を正方形に保ちます。システムは、アイコンの角を自動的に丸めるマスクを適用します。

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

ストロークを考慮しない場合、正確な半径は実際には57x57のアイコンで10pxです。

この情報はiconreferenceから取得します。

Photoshopでアプリのアイコンをデザインしたところ、デバイスのマスクにぴったり合う整数の角の半径がないことがわかりました。

次に、Xcodeを使用して空のプロジェクトを作成し、完全に白いPNGファイルをアイコンとして設定し、プリセットのベベルと光沢をオフにします。次に、アプリを実行して、ホーム画面のスクリーンショットを撮ります。これで、その画像から簡単にマスクを作成でき、Photoshopで使用できます。これにより、角が完全に丸くなります。

iPhoneはあなたのために角を丸くします、あなたが必要とするのは正方形の57x57 pngアイコンであり、uは良いはずです

投票数が多く、完全に相反する2つの回答があり、1つは160px @ 1024、もう1つは180px @ 1024です。だから魔女ですか？

私はいくつかの実験を実行しましたが、それは180px @ 1024なので、drbarnardは正しいと思います。

iTunes UアイコンをApp Storeからダウンロードしました。175x175pxです。フォトショップで1024pxに拡大し、半径160pxと180pxの2つのシェイプを配置しました。

下にあるように、160px（最初の1つ）の形状（細い灰色の線）は少しずれていますが、180pxの形状は問題ありません。

これは私がPhotoShopで今やっていることです：

1. メインデザインのスマートオブジェクト用に、180pxマスクで1026x1026pxのサイズのキャンバスを作成します。
2. メインのスマートオブジェクトを5回複製し、1024px、144px、114px、72px、57pxにサイズ変更します。
3. 各スマートオブジェクトに「新しいレイヤーベースのスライス」を配置し、サイズに応じてスライスの名前を変更します（例：icon-72px）。
4. アートワークを保存するときに、「すべてのユーザースライス」とBANGを選択します。アプリに必要なすべてのアイコンがあります。

私は1024x1024で228pxの半径を試しましたが、うまくいきました:)

アプリアイコン要件の更新（2018年1月現在）：

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

アイコンの角を正方形のままにします。システムは、アイコンの角を自動的に丸めるマスクを適用します。

背景をシンプルに保ち、透明度を避けます。アイコンが不透明で、背景が乱雑にならないようにしてください。近くにある他のアプリのアイコンを圧倒しないように、背景をシンプルにします。アイコン全体をコンテンツで埋める必要はありません。

アプリのアイコンにコーナー半径を適用する必要はありません。正方形のアイコンを適用するだけでかまいません。デバイスは自動的にコーナー半径を適用しています。