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 )

사용자 정의 아이콘 세트를 작성하는 경우 UIPrerenderedIconinfo.plist 파일에서 옵션을 true로 설정하면 광택 효과가 추가되지 않지만 그 아래에 검은 색 배경이 배치되고이 모서리 반경이있는 이미지 모서리가 여전히 둥글게됩니다 따라서 아이콘 중 하나의 모서리 반경이 크면 모서리 / 모퉁이 주위에 검은 색으로 표시됩니다.

편집 : @ devin-g-rhode의 의견을 참조하십시오. 향후 아이콘 크기는 1:6.4모서리 반경 대 아이콘 크기 의 비율을 가져야합니다 . https://stackoverflow.com/a/29550364/396005의 훌륭한 답변이 있습니다 .이 아이콘에는 아이콘 모서리를 반올림하기 위해 SDK에서 사용되는 이미지 마스크 파일의 위치가 있습니다.

레티 나 호환 파일을 추가하려면 동일한 파일 이름을 사용하고 '@ 2x'를 추가하십시오. 따라서 icon.png라는 72x72 아이콘 파일이 있으면 프로젝트 / 대상에 icon@2x.png라는 114x114 PNG 파일을 추가하면 Xcode는 자동으로 망막 디스플레이의 아이콘으로 사용합니다. 올바르게 수행 한 경우 응용 프로그램 대상의 요약 페이지에서이를 확인할 수 있습니다. 시작 이미지에서도 동일하게 작동합니다. 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은 적절한 상황에서 각 아이콘을 자동으로 마스킹합니다.

그러나 코드를 적용하거나 Photoshop에서 미리 렌더링해야하는 앱 UI 내에서 아이콘을 사용하려면 위의 내용을 아는 것이 중요합니다. 웹 사이트 및 기타 홍보 자료를위한 아트 워크를 만들 때도 유용합니다.

추가 자료 :

추가 아이콘 크기 및 기타 디자인 고려 사항에 대한 Neven Mrgan : iOS 앱 아이콘 크기

Photoshop에서 roundrects를 만들고이 왜 중요한지에 대한 다른 옵션에 대한 Bjango의 마크 에드워즈 : roundrect

아이콘 크기 및 디자인 고려 사항에 대한 Apple의 공식 문서 : 아이콘 및 이미지

최신 정보:

Photoshop CS6에서 몇 가지 테스트를했는데 소수점 이하 3 자리가 정확히 동일한 벡터로 끝나기에 충분한 정밀도 인 것처럼 보입니다 (적어도 Photoshop에서 3200 % 줌으로 표시). 둥근 사각형 도구는 때때로 입력을 가장 가까운 정수로 반올림하지만 90과 89.825 사이의 큰 차이를 볼 수 있습니다. 둥근 사각형 도구가 여러 번 반올림되지 않고 실제로 소수점 뒤에 여러 자리가 표시되었습니다. 무슨 일이 일어나고 있는지 확실하지 않지만 입력 된보다 정확한 숫자를 사용하고 저장하고 있습니다.

어쨌든 소수점 이하 3 자리 만 포함하도록 위 목록을 업데이트했습니다 (13 이전)! 대부분의 경우 90px 반경으로 마스킹 된 투명 512px 아이콘과 89.825로 마스킹 된 투명 512px 아이콘의 차이를 구분하기 어려울 수 있지만 둥근 모서리의 앤티 앨리어싱은 약간 다르게 나타나며 특정 상황에서는 특히 눈에 likely 수 있습니다. 두 번째로 더 정확한 마스크가 Apple에 의해, 코드 또는 기타 방식으로 적용됩니다.

"px"토론이 많이 있지만 아무도 계산 비율을 말하는 비율을 말하는 사람이 없습니다.

여기서 핵심 비율은 22.37 % 입니다. 위에서 언급 한 이미지 크기에 0.2237을 곱하면 해당 크기에 맞는 픽셀 반경을 얻게됩니다.

iOS 8 이전에는 Apple이 15.625 %를 사용하여 반올림이 적었습니다.

편집 : 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 / retina) 및 iTunes 아트 워크에 유효합니다. 나는이 접근법을 몇 번 따랐으며, 원한다면 기본 사각형 아이콘을 사용하는 앱에 대한 링크를 게시 할 수 있습니다.

편집하다

이 답변을 더 잘 이해하려면 iOS 아이콘에 관한 공식 Apple 설명서 를 참조하십시오 . 이 페이지에서 사각형 장치 아이콘은 iOS 장치에 표시 될 때 자동으로 다음과 같은 것들을 얻습니다.

1. 둥근 모서리
2. 그림자
3. 반사 광택 (광택 효과를 방지하지 않는 한)

따라서 일반 사각형 아이콘을 그려서 내용을 채우면 원하는 효과를 얻을 수 있습니다. 마지막 코너 반경은 다른 답변의 말과 비슷하지만 iOS의 공식 Apple 문서의 일부가 아니기 때문에 이것이 보장되지는 않습니다. 그들은 당신에게 사각형 아이콘을 그리도록 요청합니다.

코너 반경이 약간 증가한다고 주장하는 사람들이 실제로는 그렇지 않습니다.

에서 이 블로그 :

Apple의 물리적 제품의 '비밀'은 탄젠트를 피하고 (반지름이 단일 지점에서 선과 만나는 지점) 곡률 연속성 이라고하는 표면을 만듭니다.

당신은 필요가 없습니다 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에서 사용할 수 있습니다. 이렇게하면 모서리가 완벽하게 둥글게됩니다.

아이폰은 당신을 위해 모서리를 돌면, 필요한 것은 사각형 57x57 png 아이콘이며 U는 좋을 것입니다

있다 이 개 완전히 충돌 답변 하나가 160 픽셀 인 투표의 많은 수는 @ 1,024 다른 1024 @ 180px입니다. 마녀 하나?

나는 몇 가지 실험을 실행했으며 그것이 180px @ 1024이므로 drbarnard가 정확하다고 생각합니다.

App Store에서 iTunes U 아이콘을 175x175px로 다운로드했습니다. 포토샵에서 1024px로 업 스케일 한 다음 두 가지 모양 (160px 반경과 180px)을 두었습니다.

아래에서 볼 수 있듯이 160px (첫 번째 것)가있는 모양 (가는 회색 선)은 약간 떨어져있는 반면 180px가있는 모양은 잘 보입니다.

이것이 제가 PhotoShop에서 지금하는 일입니다.

1. 기본 디자인 Smart Object 용 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/

아이콘 모서리를 정사각형으로 유지하십시오 . 시스템은 아이콘 모서리를 자동으로 반올림하는 마스크를 적용합니다.

배경을 단순하게 유지하고 투명성을 피하십시오 . 아이콘이 불투명하고 배경을 어지럽히 지 않도록하십시오. 주변의 다른 앱 아이콘을 압도하지 않도록 간단한 배경을 제공하십시오. 전체 아이콘을 내용으로 채울 필요는 없습니다.

앱 아이콘에 모서리 반경을 적용 할 필요는 없으며 사각형 아이콘 만 적용하면됩니다. 장치가 자동으로 코너 반경을 적용합니다.