iphone - icon - xcode launch screen




iPhone應用程序圖標-準確的半徑? (11)

重要提示:iOS 7圖標公式

隨著即將發布的iOS 7的發布,您會注意到“標準”圖標半徑增加了。 所以試著去做蘋果和我在這個答案中提出的建議。

看起來對於120像素的圖標來說,最能代表它在iOS 7上的形狀的公式如下superellipse:

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

顯然,您可以用所需的圖標大小更改120號碼以獲得相應的功能。

原版的

您應該提供一個具有90°角的圖像(避免裁剪圖標的角落非常重要 - iOS在為角落應用角落圓角蒙版時會這樣做)( IconsImages

最好的方法不是四捨五入你的圖標的角落。 如果您將圖標設置為方形圖標,iOS會自動覆蓋圖標並使用預定義的蒙版設置相應的圓角。

如果您為圖標手動設置圓角,則它們可能會在此設備或該設備中看起來破損,因為捨入蒙版恰巧會從iOS版本稍微更改為另一個。 有時候你的圖標會稍大一些,有時候會稍微變小一點。 使用方形圖標可以讓您免除這種負擔,並且您將確保為您的應用程序提供始終最新且美觀的圖標。

此方法適用於每個圖標大小(iPhone / iPod / iPad /視網膜)以及iTunes藝術作品。 我遵循這種方法幾次,如果你想我可以發布一個鏈接到一個使用本地方形圖標的應用程序。

編輯

為了更好地理解這個答案,請參閱IconsImages的官方IconsImages 。 在這個頁面中明確指出,在iOS設備上顯示時,方形圖標會自動獲取這些內容:

  1. 圓角
  2. 投下陰影
  3. 反光閃耀(除非你防止閃耀效果)

因此,只需繪製一個普通的方形圖標並填充其中的內容即可達到所需效果。 最終的圓角半徑與其他答案相似,但這是永遠不會得到保證的,因為這些數字不是iOS官方Apple文檔的一部分。 他們要求你畫正方形的圖標,所以......為什麼不呢?

我正在嘗試為我的iPhone應用程序創建圖標,但不知道如何獲取iPhone圖標使用的確切半徑。 我搜索並蒐索了一個教程或一個模板,但找不到一個。

我敢肯定,我只是一個白痴,但你如何使用來自Illustrator或Photoshop的圖標恰到好處地處理圓角?

編輯:

Retina iPad的半徑是多少?


57 x 57像素圖標的圓角半徑為9像素。


iphone為你轉角,你需要的只是一個方形的57x57 png圖標,你應該很好


人們爭論的角落半徑略有增加,但實際情況並非如此。

這個博客

蘋果物理產品的一個“秘密”是它們避免相切(半徑在單點處與一條線相遇),並利用所謂的曲率連續性來製作它們的表面。

不需要為iOS的圖標應用角落半徑。 只需提供方形圖標。 但如果你仍然想知道如何,實際的形狀稱為Squircle ,下面是公式:


你可以為你的應用製作四個圖標(截至今天),它們都可以有不同的外觀 - 不一定基於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

如果您創建了一組自定義圖標,則可以在您的info.plist文件中將UIPrerenderedIcon選項設置為true,並且不會添加光澤效果,但會在其下方放置黑色背景,並且仍然圍繞具有這些角的圖像邊角半徑,因此如果任何圖標上的拐角半徑大於邊緣/拐角周圍的黑角。

編輯:查看來自@ devin-g-rhode的評論,你可以看到任何未來的圖標尺寸都應該有1:6.4的角半徑與圖標大小的比率。 從https://.com/a/29550364/396005還有一個非常好的答案,它具有SDK中用於舍入圖標角的圖像掩碼文件的位置

要添加視網膜兼容文件,請使用相同的文件名並添加“@ 2x”。 因此,如果我有一個名為icon.png的72x72圖標的文件,我還會在項目/目標中添加一個名為[email protected]的114x114 PNG文件,並且Xcode會自動將它用作視網膜顯示屏上的圖標。 如果您做得對,您可以在應用程序目標的“摘要”頁面上看到此操作。 為您的啟動圖像相同的作品。 使用320x480的launch.png和640x960的[email protected]


使用Photoshop設計我的應用程序圖標時,我發現沒有整數圓角半徑恰好適合設備的蒙版。

我現在所做的是用Xcode創建一個空項目,將一個完全白色的PNG文件設置為圖標,然後關閉預設的斜角和光澤度。 然後,我運行該應用並截取主屏幕。 現在,您可以輕鬆地從該圖像創建一個遮罩,您可以在Photoshop中使用該遮罩。 這會讓你完美的圓角。


在本文中嘗試了一些答案之後,我諮詢了Louie Mantia(前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 - 512px - 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] - 58px - 10.175

另外,正如其他答案中提到的,您實際上並不想裁剪您在二進製文件中使用的任何圖像或提交給Apple。 這些都應該是正方形的,沒有任何透明度。 Apple會自動在適當的上下文中掩蓋每個圖標。

但是,了解上述內容對於應用程序用戶界面中的圖標使用非常重要,因為您必須在代碼中應用遮罩或在Photoshop中預先渲染。 創建網站和其他宣傳材料的圖稿也很有幫助。

補充閱讀:

Neven Mrgan提供額外的圖標大小和其他設計注意事項: iOS應用程序圖標大小

Bjango的Marc Edwards提供了在Photoshop中創建圓角的不同選項以及它的重要性: roundrect

Apple圖標大小和設計注意事項的官方文檔: IconsImages

更新:

我在Photoshop CS6中做了一些測試,看起來就好像小數點後面的3位數字足夠精確,以至於完全相同的矢量(至少在Photoshop中以3200%的縮放比例顯示)。 圓形矩形工具有時將輸入四捨五入到最接近的整數,但您可以看到90和89.825之間的顯著差異。 圓形矩形工具並沒有四捨五入,實際上在小數點後顯示多個數字。 不知道那裡發生了什麼,但它絕對使用和存儲輸入的更精確的數字。

無論如何,我已經更新了上面的列表,在小數點後面只包含3位數字(在13位之前!)。 在大多數情況下,可能很難區分一個透明的512像素半徑圖標和90度半徑的半透明圖像,但圓角的抗鋸齒結果肯定會稍微有點不同,並且在某些情況下可能會很明顯如果蘋果公司以代碼或其他方式應用第二種更精確的蒙版。


如果不考慮中風,57x57圖標的確切半徑實際上是10px。

我從iconreference獲取這些信息。


我嘗試了228px的半徑,並且它工作:)


我看到很多“px”討論,但沒有人談論百分比,這是您想要計算的固定數量

這裡的關鍵比例是15.625% 。 將上面提到的任何圖像大小乘以0.15625,您將得到該大小的正確像素半徑。

編輯 :謝謝@Chris Prince評論iOS 8/9/10半徑百分比: 22.37%


正如其他人所說,你不想繞過你的角落。 你想發運平面(沒有圖層或阿爾法)方形圖形。 蘋果改變了他們用於在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]3x.png
./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
./[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圖片:

你可以使用它來測試你的圖標 ,看看它在被屏蔽後是否看起來沒問題。 但是, 不要繞過你的角落 。 如果你這樣做,當蘋果再次改變這些口罩時,你會產生文物。





icons