iPhoneアプリのアイコン - 正確な半径？
私は自分のiPhoneアプリのアイコンを作成しようとしていますが、iPhoneのアイコンが使用する正確な半径を取得する方法がわかりません。チュートリアルやテンプレートを探して検索しましたが見つかりません。
私は単なるバカだと確信していますが、どのようにしてIllustratorまたはPhotoshopのアイコンを使用して丸みを帯びた角を正確に作成するのですか。
編集：
Retina iPadの半径はいくらですか？
あなたはあなたのアプリのために（今日の時点で）4つのアイコンを作ることができます、そしてそれらはすべて異なる外観を持つことができます - 必ずしも512x512の画像に基づいていない。
- 512 x 512のアイコンの角の半径=80（iTunesArtwork）
- 1024×1024のアイコンのコーナー半径=180（iTunesArtworkRetina）
- 57x57のアイコンの角半径=9（iPhone/iPod Touch）
- 114x114アイコンの角半径=18（iPhone/iPod TouchRetina ）
- 72x72のアイコンのコーナー半径=11（iPad）
- 144×144のアイコンの角の半径=23（iPadRetina）
カスタムアイコンのセットを作成する場合は、info.plistファイルでUIPrerenderedIconオプションをtrueに設定すると、光沢効果は追加されませんが、その下に黒い背景が配置され、それでも画像の角が丸くなりますそのため、いずれかのアイコンの角の半径が大きい場合は、エッジ/角の周囲に黒く表示されます。
編集：@ devin-g-rhodeのコメントを見ると、将来のアイコンサイズはアイコンサイズに対する隅の半径の比率が1:6.4になるはずです。アイコンの角を丸めるためにSDKで使用されているイメージマスクファイルの場所が記載されている https://stackoverflow.com/a/29550364/396005 からも非常に良い答えがあります。
網膜互換ファイルを追加するには、同じファイル名を使用して「@ 2x」を追加します。そのため、icon.pngという名前の72 x 72アイコン用のファイルがある場合は、icon @ 2 x.pngという名前の114 x 114 PNGファイルもプロジェクト/ターゲットに追加すると、Xcodeはそれを網膜ディスプレイのアイコンとして自動的に使用します。これが正しく行われていれば、アプリケーションターゲットの[サマリ]ページでこの動作を確認できます。あなたの打ち上げ画像についても同じことが言えます。 launch.pngを320x480、[email protected]を640x960で使用してください。
この記事でいくつかの答えを試した後、私はLouie Mantia（以前のApple、Square、およびIconfactoryの設計者）に相談しましたが、これまでのところこの投稿に関するすべての答えは間違っています（または少なくとも不完全です）。 Appleは57pxのアイコンから始め、10の半径はそこから拡大縮小します。したがって、10/57 x new sizeを使用して任意のアイコンサイズの半径を計算できます（たとえば、10/57 x 114は20を示します。これは114ピクセルのアイコンの場合の適切な半径です）。これは、最も一般的に使用されるアイコン、適切な命名規則、ピクセル寸法、およびコーナー半径のリストです。
- Icon1024.png - 1024ピクセル - 179.649
- Icon512.png - 512ピクセル - 89.825
- Icon.png - 57ピクセル - 10
- [email protected] - 114ピクセル - 20
- アイコン72.png - 72px - 12.632
- [email protected] - 144ピクセル - 25.263
- Icon-Small.png - 29px - 5.088
- [email protected] - 58px - 10.175
また、他の回答で述べたように、バイナリで使用したり、Appleに送信した画像を実際には使用したくありません。それらはすべて正方形で、透明性を持たないようにする必要があります。アップルは適切なコンテキストで各アイコンを自動的にマスクします。
ただし、上記のことを知っていることは、マスクをコードに適用したり、フォトショップで事前にレンダリングしたりする必要があるアプリUI内でのアイコンの使用には重要です。ウェブサイトやその他の宣伝用の資料のアートワークを作成するときにも役立ちます。
追加の読書：
追加のアイコンサイズおよびその他のデザイン上の考慮事項に関するNeven Mrgan： iosアプリのアイコンサイズ
Photoshopでラウンドレクトを作成するためのさまざまなオプションと、それが重要な理由についてのBjangoのMarc Edwards氏： roundrect
アイコンのサイズとデザインの考慮事項に関するAppleの公式文書： アイコンとイメージ
更新：
私はPhotoshop CS6でいくつかのテストをしました、そしてそれは小数点の後の3桁が（少なくとも3200％のズームでPhotoshopによって表示されるように）全く同じベクトルを得るのに十分な精度のように思えます。 Round Rectツールは入力を最も近い整数に丸めることがありますが、90と89.825の間には大きな違いがあります。そして何度か四角形を丸くするツールは四捨五入せず、実際には小数点の後に複数の数字を示していました。何が起こっているのかわからないが、それは間違いなく入力されたより正確な数を使って保存している。
とにかく、私は上記のリストを更新して、小数点の後に（13がある前に）3桁だけ含めるようにしました。たいていの場合、半径90pxでマスクされた透明な512pxアイコンと89.825でマスクされたアイコンとの違いを見分けるのは難しいでしょうが、丸みを帯びた角のアンチエイリアシングは明らかにわずかに異なり、特定の状況では特に見える第2の、より正確なマスクがアップルによって、コードで、またはその他の方法で適用される場合。
私は多くの "px"の議論を見ますが、誰もあなたが計算したい固定数であるパーセンテージを話していません。
15.625％がここでの重要な割合です。上記の画像サイズのいずれかに0.15625を掛けると、そのサイズの正しいピクセル半径が得られます。
EDIT：iOS 8/9/10の半径の割合でコメントしてくれてありがとう@Chris Prince：22.37％
重要：iOS 7のアイコン式
IOS 7の次期リリースでは、「標準」アイコンの半径が大きくなったことに気付くでしょう。だから、Appleと私がこの答えで提案したことをやろう。
120pxのアイコンの場合、iOS 7でその形状を最もよく表す公式は次のような超楕円形になります。
|x/120|^5 + |y/120|^5 = 1
明らかに、対応する関数を取得するために120番号を希望のアイコンサイズに変更することができます。
オリジナル
角が90°の画像を用意する必要があります（アイコンの角をトリミングしないようにすることが重要です。IOSが角丸マスクを適用する場合は、そのようにしてください）（ Apple Documentation ）。
最善の方法は、アイコンの角を丸くしないことです。アイコンを四角形のアイコンとして設定すると、iOSは自動的にアイコンを事前定義されたマスクでオーバーレイして、適切な丸みのある角を設定します。
あなたが手動であなたのアイコンのために丸みを帯びた角を設定するならば、丸み付けマスクがiOSバージョンから他のものにわずかに変わるために起こるので、それらはおそらくこのかその装置で壊れて見えるでしょう。時にはあなたのアイコンは少し大きくなり、時々（ため息）少し小さくなります。四角形のアイコンを使用すると、この負担から解放されます。また、アプリには常に最新かつ見栄えの良いアイコンを使用するようにしてください。
この方法は、各アイコンサイズ（iPhone/iPod/iPad /網膜）、およびiTunesアートワークにも有効です。私はこのアプローチに数回従いました、そしてあなたが望むなら私はあなたにネイティブの正方形のアイコンを使うアプリへのリンクを投稿することができます。
編集
この答えをよりよく理解するために、公式の iOSアイコンに関するAppleのドキュメント を参照してください。このページでは、iOSデバイスに表示されたときに正方形のアイコンが自動的にこれらのものを取得することが明確に述べられています。
- 丸い角
- 影を落とす
- 反射輝き（輝き効果を妨げない限り）
だから、あなたはただあなたが望む単純な四角のアイコンを描いてそれに内容を満たすことができるどんな効果でも達成することができます。最後のコーナー半径は、ここで他の答えが言っているのと似たようなものになりますが、これらの数字はiOSの公式Appleドキュメントには含まれていないため、これは保証されません。彼らはあなたに四角いアイコンを描くように頼みます。
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
./[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がそれらのマスクをもう一度変更すると、アーティファクトが発生します。
ストロークを考慮しない場合、正確な半径は57×57のアイコンでは実際には10ピクセルです。
私は iconreference からこの情報を得ます。
この質問に対する以前のすべての回答は古くなっています。少なくとも2015年5月以降、Appleは四角いアイコンを四捨五入なしで提供するように要求しています。
アイコンの角を四角に保つシステムは、アイコンの角を自動的に丸めるマスクを適用します。
https://developer.Apple.com/ios/human-interface-guidelines/graphics/app-icon/
Photoshopで私のアプリのアイコンをデザインするとき、私は整数のコーナー半径がデバイスのマスクに合わないことを発見しました正確に。
私が今していることは、Xcodeで空のプロジェクトを作成し、アイコンとして完全に白いPNGファイルを設定し、そしてプリセットのベベルと光沢をオフにすることです。その後、アプリを実行してホーム画面のスクリーンショットを撮ります。これで、その画像から簡単にマスクを作成できます。これをPhotoshopで使用できます。これはあなたに完全に丸みを帯びたコーナーを取得します.
Iphoneはあなたのために角を丸めます、あなたが必要とするすべては正方形57x57 pngアイコンであり、uは良いはずです
投票数の多い2つの完全に矛盾する回答があり、一方は160px @ 1024、もう一方は180px @ 1024です。それで魔女？
私はいくつか実験をしましたが、それは180px @ 1024なのでdrbarnardが正しいと思います。
私はApp StoreからiTunes Uのアイコンをダウンロードした。それは175x175pxだ。私はそれをphotoshopで1024pxにアップスケールし、その上に2つの形を入れた。1つは半径160px、もう1つは180pxだ。
あなたが見ることができるように160px（最初のもの）の形（細い灰色の線）は少しずれていますが、180pxのものはちょうどよく見えます。
これは私がPhotoShopで今やっていることです：
- メインデザインスマートオブジェクト用に、1026x1026pxと180pxのサイズのキャンバスを作成します。
- メインのスマートオブジェクトを5回複製し、1024px、144px、114px、72px、57pxにサイズ変更します。
- それぞれのスマートオブジェクトに「新しい階層ベースのスライス」を付け、スライスのサイズに応じてスライスの名前を変更します（たとえば、icon-72px）。
- アートワークを保存するときは、「All User Slices」とBANGを選択します。アプリに必要なすべてのアイコンがあります。
私は1024x1024のために228pxの半径を試みました、そして、それは働きました:)
アプリアイコンの要件を更新しました（2018年1月現在）。
https://developer.Apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
アイコンの角を正方形にします。システムは、アイコンの角を自動的に丸めるマスクを適用します。
背景をシンプルにし、透明度を避けます。アイコンが不透明であることを確認し、背景を乱雑にしないでください。単純な背景を与えて、近くの他のアプリアイコンを圧倒しないようにします。アイコン全体をコンテンツで埋める必要はありません。
あなたはあなたのアプリのアイコンにコーナーの半径を適用する必要はありません、あなたはただ正方形のアイコンを適用することができます。デバイスは自動的にコーナー半径を適用します。