Tôi đang cố gắng tạo biểu tượng cho ứng dụng iPhone của mình, nhưng không biết làm thế nào để có được bán kính chính xác mà các biểu tượng của iPhone sử dụng. Tôi đã tìm kiếm và tìm kiếm một hướng dẫn hoặc một mẫu nhưng không thể tìm thấy một hướng dẫn.

Tôi chắc chắn rằng tôi chỉ là một kẻ ngốc, nhưng làm thế nào để bạn có được các góc tròn chính xác với biểu tượng của bạn từ Illustrator hoặc Photoshop?

Biên tập:

Bán kính cho iPad Retina là bao nhiêu?

Bạn có thể tạo bốn biểu tượng (tính đến ngày hôm nay) cho ứng dụng của mình và tất cả chúng có thể có giao diện khác - không nhất thiết phải dựa trên hình ảnh 512x512.

• bán kính góc cho biểu tượng 512x512 = 80 (iTunesArtwork)
• bán kính góc cho biểu tượng 1024x1024 = 180 (iTunesArtwork Retina )
• bán kính góc cho biểu tượng 57x57 = 9 (iPhone / iPod Touch)
• bán kính góc cho biểu tượng 114x114 = 18 ( Retina iPhone / iPod Touch )
• bán kính góc cho biểu tượng 72x72 = 11 (iPad)
• bán kính góc cho biểu tượng 144x144 = 23 (iPad Retina )

Nếu bạn tạo một tập hợp các biểu tượng tùy chỉnh, bạn có thể đặt UIPrerenderedIcontùy chọn thành true trong tệp info.plist của mình và nó sẽ không thêm hiệu ứng bóng nhưng nó sẽ đặt một nền đen bên dưới nó và vẫn làm tròn các góc hình ảnh với các góc bán kính này vì vậy nếu bán kính góc trên bất kỳ biểu tượng nào lớn hơn thì nó sẽ hiển thị màu đen xung quanh các cạnh / góc.

Chỉnh sửa: Xem nhận xét từ @ devin-g-rhode và bạn có thể thấy rằng bất kỳ kích thước biểu tượng nào trong tương lai nên có 1:6.4tỷ lệ bán kính góc so với kích thước biểu tượng. Ngoài ra còn có một câu trả lời rất hay từ https://stackoverflow.com/a/29550364/396005 có vị trí của các tệp mặt nạ hình ảnh được sử dụng trong SDK để làm tròn các góc biểu tượng

Để thêm tệp tương thích võng mạc, hãy sử dụng cùng tên tệp và thêm '@ 2x'. Vì vậy, nếu tôi có một tệp cho biểu tượng 72x72 của mình có tên icon.png, tôi cũng sẽ thêm tệp PNG 114x114 có tên icon@2x.png vào dự án / đích và Xcode sẽ tự động sử dụng làm biểu tượng trên màn hình retina. Bạn có thể thấy điều này trên thực tế trên trang Tóm tắt của mục tiêu ứng dụng nếu bạn đã thực hiện đúng. Các công việc tương tự cho hình ảnh khởi động của bạn. Sử dụng launch.png tại 320x480 và launch@2x.png tại 640x960.

Sau khi thử một số câu trả lời trong bài đăng này, tôi đã tham khảo ý kiến ​​của Louie Mantia (cựu nhà thiết kế Apple, Square và Iconfactory) và tất cả các câu trả lời cho đến nay trên bài đăng này đều sai (hoặc ít nhất là không đầy đủ). Apple bắt đầu với biểu tượng 57px và bán kính 10 rồi tăng hoặc giảm từ đó. Do đó, bạn có thể tính bán kính cho bất kỳ kích thước biểu tượng nào bằng cách sử dụng 10/57 x new size(ví dụ: 10/57 x 11420, là bán kính phù hợp cho biểu tượng 114px). Dưới đây là danh sách các biểu tượng được sử dụng phổ biến nhất, quy ước đặt tên thích hợp, kích thước pixel và bán kính góc.

1. Biểu tượng1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. Icon@2x.png - 114px - 20
5. Biểu tượng-72.png - 72px - 12.632
6. Biểu tượng-72@2x.png - 144px - 25.263
7. Biểu tượng-Small.png - 29px - 5.088
8. Biểu tượng-Small@2x.png - 58px - 10.175

Ngoài ra, như đã đề cập trong các câu trả lời khác, bạn thực sự không muốn cắt bất kỳ hình ảnh nào bạn sử dụng trong tệp nhị phân hoặc gửi cho Apple. Những cái đó nên vuông và không có bất kỳ sự minh bạch. Apple sẽ tự động che dấu từng biểu tượng trong ngữ cảnh phù hợp.

Tuy nhiên, việc biết những điều trên rất quan trọng đối với việc sử dụng biểu tượng trong giao diện người dùng ứng dụng nơi bạn phải áp dụng mặt nạ trong mã hoặc được kết xuất trước trong photoshop. Nó cũng hữu ích khi tạo tác phẩm nghệ thuật cho các trang web và tài liệu quảng cáo khác.

Đọc thêm:

Neven Mrgan về các kích thước biểu tượng bổ sung và các cân nhắc thiết kế khác: kích thước biểu tượng ứng dụng ios

Marc Edwards của Bjango về các tùy chọn khác nhau để tạo các đường tròn trong Photoshop và tại sao nó lại quan trọng: roundrect

Tài liệu chính thức của Apple về kích thước biểu tượng và cân nhắc thiết kế: Biểu tượng và hình ảnh

Cập nhật:

Tôi đã thực hiện một số thử nghiệm trong Photoshop CS6 và dường như 3 chữ số sau dấu thập phân là đủ chính xác để kết thúc với cùng một vectơ (ít nhất là được hiển thị bởi Photoshop ở mức phóng to 3200%). Công cụ Round Rect đôi khi làm tròn đầu vào thành số nguyên gần nhất, nhưng bạn có thể thấy sự khác biệt đáng kể giữa 90 và 89.825. Và nhiều lần Công cụ Hình chữ nhật Tròn không làm tròn và thực sự hiển thị nhiều chữ số sau dấu thập phân. Không chắc chắn những gì đang xảy ra ở đó, nhưng nó chắc chắn đang sử dụng và lưu trữ số chính xác hơn đã được nhập.

Nhưng dù sao, tôi đã cập nhật danh sách trên chỉ bao gồm 3 chữ số sau dấu thập phân (trước khi có 13!). Trong hầu hết các tình huống, có lẽ khó có thể phân biệt được sự khác biệt giữa biểu tượng 512px trong suốt được che ở bán kính 90px và một mặt nạ ở 89.825, nhưng khử răng cưa của góc tròn chắc chắn sẽ hơi khác biệt và có thể sẽ hiển thị trong một số trường hợp nhất định nếu mặt nạ thứ hai, chính xác hơn được Apple áp dụng, bằng mã hoặc nếu không.

Tôi thấy rất nhiều cuộc thảo luận "px" nhưng không ai nói về tỷ lệ phần trăm cố định mà bạn muốn tính toán.

22,37% là tỷ lệ chính ở đây. Nhân bất kỳ kích thước hình ảnh nào được đề cập ở trên với 0,2237 và bạn sẽ có được bán kính pixel chính xác cho kích thước đó.

Trước iOS 8, Apple đã sử dụng tính năng làm tròn ít hơn, sử dụng 15,625%.

EDIT : Cảm ơn @Chris Prince đã bình luận với phần trăm bán kính iOS 8/9/10: 22,37%

Quan trọng: Phương trình biểu tượng iOS 7

Với phiên bản iOS 7 sắp phát hành, bạn sẽ nhận thấy bán kính biểu tượng "tiêu chuẩn" đã được tăng lên. Vì vậy, hãy cố gắng làm những gì Apple và tôi đề nghị với câu trả lời này.

Dường như đối với biểu tượng 120px, công thức thể hiện tốt nhất hình dạng của nó trên iOS 7 là siêu hình sau:

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

Rõ ràng bạn có thể thay đổi 120số với kích thước biểu tượng mong muốn để có được chức năng tương ứng.

Nguyên

Bạn nên cung cấp hình ảnh có các góc 90 ° (điều quan trọng là tránh cắt xén các góc của biểu tượng của bạn. IOS iOS thực hiện điều đó cho bạn khi áp dụng mặt nạ làm tròn góc) ( Tài liệu Apple )

Cách tiếp cận tốt nhất là không làm tròn các góc của biểu tượng của bạn. Nếu bạn đặt biểu tượng của mình làm biểu tượng hình vuông, iOS sẽ tự động phủ biểu tượng bằng mặt nạ được xác định trước sẽ đặt các góc tròn thích hợp.

Nếu bạn đặt thủ công các góc được làm tròn cho các biểu tượng của mình, chúng có thể sẽ bị hỏng trong thiết bị này hoặc thiết bị đó, vì mặt nạ làm tròn sẽ thay đổi một chút từ phiên bản iOS sang phiên bản khác. Đôi khi các biểu tượng của bạn sẽ lớn hơn một chút, đôi khi (thở dài) nhỏ hơn một chút. Sử dụng biểu tượng hình vuông sẽ giải phóng bạn khỏi gánh nặng này và bạn chắc chắn sẽ có một biểu tượng luôn cập nhật và đẹp mắt cho ứng dụng của mình.

Cách tiếp cận này hợp lệ cho từng kích thước biểu tượng (iPhone / iPod / iPad / võng mạc) và cho tác phẩm nghệ thuật iTunes. Tôi đã làm theo cách tiếp cận này một vài lần và nếu bạn muốn tôi có thể gửi cho bạn một liên kết đến một ứng dụng sử dụng các biểu tượng vuông gốc.

Biên tập

Để hiểu rõ hơn câu trả lời này, vui lòng tham khảo tài liệu chính thức của Apple về các biểu tượng iOS . Trong trang này có ghi rõ rằng biểu tượng hình vuông sẽ tự động nhận được những thứ này khi được hiển thị trên thiết bị iOS:

1. Góc tròn
2. Thả bóng
3. Phản chiếu bóng (trừ khi bạn ngăn chặn hiệu ứng tỏa sáng)

Vì vậy, bạn có thể đạt được bất kỳ hiệu ứng nào bạn muốn chỉ cần vẽ một biểu tượng hình vuông đơn giản và điền nội dung vào đó. Bán kính góc cuối cùng sẽ tương tự như những gì các câu trả lời khác ở đây đang nói, nhưng điều này sẽ không bao giờ được đảm bảo, vì những con số đó không phải là một phần của tài liệu chính thức của Apple trên iOS. Họ yêu cầu bạn vẽ biểu tượng hình vuông, vậy ... tại sao không?

Mọi người tranh cãi về bán kính góc được tăng lên một chút nhưng thực tế không phải vậy.

Từ blog này :

Một 'bí mật' của các sản phẩm vật lý của Apple là chúng tránh tiếp tuyến (trong đó bán kính gặp một đường thẳng tại một điểm) và tạo ra các bề mặt của chúng với cái gọi là tính liên tục cong .

Bạn không cần phải áp dụng bán kính góc cho các biểu tượng cho iOS. Chỉ cần cung cấp các biểu tượng vuông. Nhưng nếu bạn vẫn muốn biết làm thế nào, hình dạng thực tế được gọi là Squircle và dưới đây là công thức:

Câu trả lời từ dbarnard có công thức tính bán kính chính xác, nhưng vì bạn đang tìm kiếm các mẫu, nên tất cả các mặt nạ và lớp phủ có thể được tìm thấy trong thư mục này:

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

(đường dẫn dành cho các phiên bản gần đây của XCode. Đối với phiên bản cũ hơn, nó có thể sẽ nằm trong / Nhà phát triển /).

Như những người khác đã lưu ý, bạn KHÔNG nên tự che dấu chúng, nhưng bạn có thể sử dụng những thứ này để kiểm tra xem các biểu tượng của bạn sẽ trông như thế nào khi bị che.

(các khoản tín dụng cho phát hiện này được chuyển đến Neven Mrgan IIRC)

Bán kính góc của biểu tượng 57 x 57 pixel là 9 pixel.

Như những người khác đã nói, bạn không muốn làm tròn các góc của mình. Bạn muốn gửi đồ họa vuông phẳng (không có lớp hoặc alpha). Apple đã thay đổi mặt nạ họ sử dụng để làm tròn các góc của bạn trong iOS7 và sau đó một lần nữa trong iOS8. Bạn có thể tìm thấy những mặt nạ này trong gói ứng dụng Xcode của mình. Đường dẫn thay đổi với mỗi phiên bản SDK mới mà họ phát hành. Vì vậy, tôi sẽ chỉ cho bạn cách bạn luôn có thể tìm thấy nó.

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

Tại thời điểm này, con đường được tìm thấy bởi lệnh đó là /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.frameworknhưng không tin tưởng điều đó. Sử dụng lệnh để tự tìm nó.

Đường dẫn đó trỏ đến một thư mục chứa các tệp này (một lần nữa, tại thời điểm của bài đăng này)

./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

Như bạn có thể thấy, có rất nhiều mặt nạ khác nhau, nhưng chúng được đặt tên khá rõ ràng. Đây là AppIconMask@3x~iphone.pnghình ảnh:

Bạn có thể sử dụng nó để kiểm tra biểu tượng của mình để xem nó có ổn không sau khi nó bị che. Nhưng, đừng làm tròn các góc của bạn . Nếu bạn làm như vậy, khi Apple thay đổi các mặt nạ đó một lần nữa, bạn sẽ có các tạo tác.

Tất cả các câu trả lời trước cho câu hỏi này hiện đã lỗi thời. Kể từ ít nhất là tháng 5 năm 2015, Apple yêu cầu bạn cung cấp các biểu tượng hình vuông không làm tròn:

Giữ biểu tượng góc vuông. Hệ thống áp dụng mặt nạ làm tròn các góc biểu tượng tự động.

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

Nếu không xem xét đột quỵ, bán kính chính xác thực sự là 10px cho biểu tượng 57x57.

Tôi nhận được thông tin này từ iconreference .

Khi thiết kế các biểu tượng ứng dụng của tôi bằng Photoshop, tôi đã thấy rằng không có bán kính góc nguyên nào khớp chính xác với mặt nạ của thiết bị .

Những gì tôi làm bây giờ là tạo một dự án trống với Xcode, đặt tệp PNG hoàn toàn trắng làm biểu tượng và tắt góc xiên & bóng đặt sẵn. Sau đó, tôi chạy ứng dụng và chụp ảnh màn hình của màn hình chính. Bây giờ, bạn có thể dễ dàng tạo một mặt nạ từ hình ảnh đó, mà bạn có thể sử dụng trong Photoshop. Điều này sẽ giúp bạn có được góc tròn hoàn hảo.

Các góc iphone cho bạn, tất cả những gì bạn cần là một biểu tượng hình vuông 57x57 png và bạn nên làm tốt

Có hai câu trả lời hoàn toàn mâu thuẫn với số lượng lớn phiếu bầu là 160px @ 1024, còn lại là 180px @ 1024. Vì vậy, phù thủy một?

Tôi đã chạy một số thử nghiệm và tôi nghĩ rằng đó là 180px @ 1024 vì vậy drbarnard là chính xác.

Tôi đã tải xuống biểu tượng iTunes U từ App Store, nó có kích thước 175x175px.

Như bạn có thể thấy bên dưới hình dạng (đường màu xám mỏng) với 160px (cái đầu tiên) là một chút trong khi cái có 180px trông vẫn ổn.

Đây là những gì tôi làm bây giờ trong PhotoShop:

1. Tôi tạo một khung vải có kích thước 1026x1026px với mặt nạ 180px cho thiết kế chính Smart Object .
2. Tôi nhân đôi Smart Object chính 5 lần và thay đổi kích thước chúng thành 1024px, 144px, 114px, 72px và 57px.
3. Tôi đặt "Lát dựa trên lớp mới" trên mỗi Đối tượng thông minh và tôi đổi tên các lát theo kích thước của chúng (ví dụ: icon-72px).
4. Khi tôi lưu tác phẩm nghệ thuật, tôi chọn "Tất cả các lát cắt của người dùng" và BANG! Tôi có tất cả các biểu tượng cần thiết cho ứng dụng của mình.

Tôi đã thử bán kính 228px cho 1024x1024 và nó đã hoạt động :)

Cập nhật (kể từ tháng 1 năm 2018) cho các yêu cầu Biểu tượng ứng dụng:

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

Giữ góc biểu tượng vuông . Hệ thống áp dụng mặt nạ làm tròn các góc biểu tượng tự động.

Giữ nền đơn giản và tránh sự minh bạch . Đảm bảo biểu tượng của bạn mờ đục và không làm lộn xộn nền. Cung cấp cho nó một nền tảng đơn giản để nó không áp đảo các biểu tượng ứng dụng khác gần đó. Bạn không cần phải điền toàn bộ biểu tượng với nội dung.

Bạn không cần phải áp dụng bán kính góc cho biểu tượng ứng dụng của mình, bạn chỉ có thể áp dụng các biểu tượng hình vuông. Thiết bị được tự động áp dụng bán kính góc.