331

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

私はただのバカだと確信していますが、Illustrator や Photoshop のアイコンで角を丸くする方法を教えてください。

編集：

Retina iPad の半径は?

4

16 に答える 16

353

アプリ用に (現在のところ) 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」を追加します。したがって、icon.png という名前の 72x72 アイコンのファイルがある場合、icon@2x.png という名前の 114x114 PNG ファイルもプロジェクト/ターゲットに追加すると、Xcode はそれを Retina ディスプレイのアイコンとして自動的に使用します。正しく実行した場合は、アプリケーション ターゲットの [概要] ページでこれを実際に確認できます。起動イメージについても同じことが言えます。320x480 の launch.png と 640x960 の launch@2x.png を使用します。

于 2010-09-28T14:46:01.913 に答える
44

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

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

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

編集：iOS 8/9/10の半径パーセンテージについてコメントしてくれた@Chris Princeに感謝します：22.37％

于 2012-07-17T17:36:58.873 に答える
30

重要: 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 アートワークにも有効です。私はこのアプローチを数回実行しました。必要に応じて、ネイティブの正方形のアイコンを使用するアプリへのリンクを投稿できます。

編集

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

  1. 丸い角
  2. 影を落とす
  3. 反射する輝き (輝きの効果を妨げない限り)

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

于 2011-05-10T08:22:07.827 に答える
16

dbarnard からの回答には、正しい半径を計算する式がありますが、テンプレートを探していたので、すべてのマスクとオーバーレイはこのディレクトリにあります。

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

(パスは XCode の最近のバージョン用です。古いバージョンの場合、おそらく /Developer/ 内にあります)。

他の人が指摘しているように、自分でマスクするべきではありませんが、これらを使用して、マスクされたアイコンがどのように見えるかを確認できます.

(この発見の功績は Neven Mrgan IIRC に帰属します)

于 2012-04-20T08:01:41.657 に答える
8

57x57ピクセルのアイコンの角の半径は9ピクセルです。

于 2010-01-22T02:09:36.210 に答える
5

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

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

于 2010-12-21T09:49:18.027 に答える
4

Photoshop でアプリのアイコンをデザインしているときに、デバイスのマスクに正確に適合する整数の角の半径がないことがわかりました。

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

于 2011-09-22T16:50:26.463 に答える
4

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

于 2010-01-20T21:54:28.053 に答える
2

1024x1024 に対して 228px の半径を試してみましたが、うまくいきました :)

于 2014-03-25T05:17:01.967 に答える