programing

아이폰 앱 아이콘 - 정확한 반지름?

bestprogram 2023. 4. 17. 22:33

아이폰 앱 아이콘 - 정확한 반지름?

아이폰 앱용 아이콘을 만들려고 하는데 아이폰 아이콘이 사용하는 정확한 반지름을 알 수 없습니다.튜토리얼이나 템플릿을 검색하고 검색했지만 찾을 수 없습니다.

제가 바보라는 것은 확실합니다만, 일러스트레이터나 포토샵의 아이콘과 같은 둥근 모서리를 정확하게 맞추려면 어떻게 해야 할까요?

편집:

레티나 아이패드의 반경이 어떻게 되나요?

512x512 이미지를 기반으로 할 필요는 없지만, 현재 앱에 대해 4개의 아이콘을 만들 수 있습니다.

  • 512x420 아이콘의 코너 반지름 = 80(iTunesArtwork)
  • 1024x420 아이콘의 코너 반지름 = 180(iTunesArtwork Retina)
  • 57x57 아이콘의 코너 반지름 = 9(iPhone/iPod Touch)
  • 114x139 아이콘의 코너 반지름 = 18(iPhone/iPod Touch Retina)
  • 72x72 아이콘의 코너 반지름 = 11(iPad)
  • 144x480 아이콘의 모서리 반지름 = 23(iPad Retina)

아이콘 는, 「」를 할 수 .UIPrerenderedIcon 그 더.info.plist true가 . 이 파일 아래에 검은색 배경이 배치되고 아이콘의 모서리 반지름이 더 클 경우 모서리 또는 모서리 둘레가 검은색으로 표시됩니다.

편집: @devin-g-rhode의 코멘트를 참조해 주세요.향후 아이콘 사이즈에 따라서는1:6.4아이콘 크기에 대한 코너 반지름 비율입니다.SDK에서 아이콘 모서리를 반올림하기 위해 사용되는 이미지 마스크 파일의 위치가 있는 https://stackoverflow.com/a/29550364/396005에서도 매우 좋은 답변이 있습니다.

레티나 호환 파일을 추가하려면 동일한 파일 이름을 사용하고 '@2x'를 추가합니다.따라서 72x72 아이콘용 파일이 있는 경우 프로젝트/타깃에 icon@2x.png이라는 114x72 PNG 파일을 추가하고 Xcode는 자동으로 그것을 레티나 디스플레이의 아이콘으로 사용합니다.올바르게 실행한 경우 응용 프로그램 대상의 요약 페이지에서 이 작업을 볼 수 있습니다.기동 이미지에도 같은 것이 적용됩니다.launch.png (320x190) 및 launch@2x.png (640x960)를 사용합니다.

이 투고에서 몇 가지 답변을 시도한 후 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은 적절한 컨텍스트에서 각 아이콘을 자동으로 마스킹합니다.

단, 앱 UI에서 마스크를 코드로 적용하거나 포토샵으로 사전 렌더링해야 하는 아이콘을 사용하려면 위의 사항을 알아야 합니다.웹사이트나 다른 홍보물을 위한 아트워크를 만들 때도 도움이 됩니다.

추가 판독치:

Neven Mrgan (아이콘 크기 추가 및 기타 설계 고려사항): ios아이콘 크기

Photoshop에서 라운드렉트를 작성하기 위한 다양한 옵션과 그것이 중요한 이유에 대해 Bjango의 Marc Edwards가 설명합니다.

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

업데이트:

Photoshop CS6에서 몇 가지 테스트를 해봤는데, 소수점 뒤의 3자리 숫자가 정확히 같은 벡터로 끝나기에 충분한 것 같습니다(최소한 Photoshop에서 3200% 줌으로 표시됨).반올림 도구에서는 입력값을 가장 가까운 정수로 반올림하는 경우도 있지만 90과 89.825 사이에 유의한 차이가 있음을 알 수 있습니다.Round Rectangle Tool은 여러 번 반올림하지 않고 소수점 뒤에 여러 자릿수를 표시했습니다.거기서 무슨 일이 일어나고 있는지는 모르지만, 확실히 입력된 보다 정확한 번호를 사용하여 저장하고 있습니다.

어쨌든, 저는 위의 리스트를 소수점 뒤에 3자리만 포함하도록 업데이트했습니다(13자리 전!).대부분의 경우 90px 반경에서 마스킹된 투명 512px 아이콘과 89.825에서 마스킹된 아이콘의 차이를 구별하기는 어려울 수 있지만 둥근 모서리의 안티앨리어싱은 확실히 약간 다르며 특히 1초라도 특정 상황에서 볼 수 있습니다.보다 정밀한 마스크는 Apple, 코드 또는 기타에 의해 적용됩니다.

많은 "px" 토론이 있지만, 아무도 당신이 계산하고자 하는 고정 수치인 퍼센티지를 말하지 않습니다.

22.37%가 핵심 비율입니다.위의 이미지 크기에 0.2237을 곱하면 해당 크기에 맞는 정확한 픽셀 반경이 나옵니다.

iOS 8 이전의 Apple은 반올림을 적게 사용하여 15.625%를 사용했습니다.

편집: iOS 8/9/10에 대한 코멘트를 해주신 @Chris Prince님 감사합니다.반경: 22.37%

중요: iOS 7 아이콘 방정식

곧 출시될 iOS 7에서는 "표준" 아이콘의 반지름이 증가했습니다.애플과 제가 이 답변으로 제시한 것을 실행해 보세요.

120px 아이콘의 경우 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 문서의 일부가 아니기 때문에 이것은 결코 보장되지 않을 것입니다.네모난 아이콘을 그리라고 해서...왜 안 되나요?

사람들은 모서리 반경이 약간 늘어난다고 주장하지만 사실은 그렇지 않다.

블로그에서 :

애플 물리 제품의 '비밀'은 접선(반경이 한 지점에서 선과 만나는 부분)을 피하고 곡률 연속성이라고 불리는 곡률로 표면을 만든다는 것이다.

여기에 이미지 설명 입력

iOS용 아이콘에는 모서리 반경을 적용할 필요가 없습니다.네모난 아이콘만 제공하세요.그래도 방법을 알고 싶다면 실제 모양은 꼬부기라고 불리며 아래 공식은 다음과 같습니다.

여기에 이미지 설명 입력

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'

이 로 찾을 수 있는 는 이시시음음 음음음음 음음음음 음음음음 at at at at at at at at at at at at at 。/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이미지:

AppIconMask@3x~iphone.png

이를 사용하여 아이콘이 마스크된 후 정상으로 표시되는지 테스트할 수 있습니다.하지만 모퉁이를 돌지 마세요.그러면 Apple이 마스크를 다시 바꾸면 아티팩트가 생깁니다.

이 질문에 대한 이전의 답변은 모두 최신이 아닙니다.적어도 2015년 5월부터, Apple에서는 반올림 없이 정사각형 아이콘을 제공해야 합니다.

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

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

스트로크를 고려하지 않을 경우 57x57 아이콘의 정확한 반지름은 실제로 10px입니다.

아이콘 레퍼런스에서 이 정보를 얻었어요.

App Icon 요구 사항에 대한 업데이트(2018년 1월 기준):


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

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

배경을 단순하게 유지하고 투명성을 피하십시오.아이콘이 불투명한지 확인하고 배경을 흐트러뜨리지 마십시오.근처에 있는 다른 앱 아이콘을 압도하지 않도록 간단한 배경을 제공합니다.아이콘 전체를 콘텐츠로 채울 필요는 없습니다.

아이폰의 모서리가 둥글게 되어 있습니다.필요한 것은 네모난 57x57 png 아이콘뿐입니다.좋습니다.

Photoshop으로 앱 아이콘을 디자인할 때 정수 모서리 반경이 기기 마스크에 정확히 맞지 않는다는 것을 알게 되었습니다.

이제 Xcode를 사용하여 빈 프로젝트를 만들고 완전히 흰색 PNG 파일을 아이콘으로 설정하고 사전 설정된 베벨과 광택을 해제합니다.그리고 나서 앱을 실행해서 홈 스크린 스크린샷을 찍습니다.포토샵에서 사용할 수 있는 이 이미지에서 마스크를 쉽게 만들 수 있습니다.이렇게 하면 모서리가 완전히 둥글게 됩니다.

가지 완전히 상반된 답변이 있는데, 많은 표를 얻으면 160px@1024이고 180px@1024입니다.마녀 1호?

몇 가지 실험을 해보니 180px@1024인 것 같아서 drbarnard가 맞습니다.

앱스토어에서 iTunes U 아이콘을 다운받았는데 175x175px로 포토샵을 1024px로 확대해서 두 가지 모양을 넣었습니다.하나는 반지름 160px, 다른 하나는 180px입니다.

아래 형태(얇은 회색 선)에서 볼 수 있듯이 160px(첫 번째 선)는 약간 어긋나 있는데 반해 180px는 괜찮아 보입니다.

반지름이 160px인 형상여기에 이미지 설명 입력

포토샵에서 지금 하고 있는 일은 다음과 같습니다.

  1. 메인 디자인 스마트 오브젝트용 180px 마스크로 캔버스 사이즈 1026x1026px를 만듭니다.
  2. 메인 Smart Object를 5회 복제하여 1024px, 144px, 114px, 72px, 57px로 크기를 조정합니다.
  3. 각 스마트 개체에 "New layered based slice"를 배치하고 크기에 따라 슬라이스의 이름을 변경합니다(예: icon-72px).
  4. 아트워크를 저장할 때 "All User Slices"를 선택하고 BANG! 앱에 필요한 아이콘을 모두 가지고 있습니다.

1024x1024에 대해 228px의 radius를 시험해 보니 동작했습니다.

앱 아이콘에 모서리 반경을 적용할 필요는 없고, 사각 아이콘만 적용하면 됩니다.디바이스는 자동으로 코너 반경을 적용합니다.

WWDC 2022는 좋은 소식을 가져왔다!

는 단일 아이콘 pix(Xcode 14는 1024x1024 pix)를 합니다.Single Size접근법이 [ ], [ ]를 All Sizes를 선택합니다.

따라서 이제 알아야 할 것은 입력 아이콘의 반지름 180px입니다.

여기에 이미지 설명 입력

언급URL : https://stackoverflow.com/questions/2105289/iphone-app-icons-exact-radius