iPhone 앱의 아이콘을 만들려고하는데 iPhone 아이콘이 사용하는 정확한 반경을 얻는 방법을 모르겠습니다. 튜토리얼 또는 템플릿을 검색하고 검색했지만 찾을 수 없습니다.
나는 단지 바보라고 확신하지만 Illustrator 또는 Photoshop의 아이콘으로 둥근 모서리를 정확히 어떻게 얻습니까?
편집하다:
Retina iPad의 반경은 얼마입니까?
답변
앱에 대해 4 개의 아이콘 (오늘 현재)을 만들 수 있으며 512×512 이미지를 기반으로하지 않아도 서로 다른 모양을 가질 수 있습니다.
- 512×512 아이콘의 코너 반경 = 80 (iTunesArtwork)
- 1024×1024 아이콘의 모서리 반경 = 180 (iTunesArtwork Retina )
- 57×57 아이콘의 모서리 반경 = 9 (iPhone / iPod Touch)
- 114×114 아이콘의 코너 반경 = 18 (iPhone / iPod Touch Retina )
- 72×72 아이콘의 모서리 반경 = 11 (iPad)
- 144×144 아이콘의 코너 반경 = 23 (iPad Retina )
사용자 정의 아이콘 세트를 작성하는 경우 UIPrerenderedIconinfo.plist 파일에서 옵션을 true로 설정하면 광택 효과가 추가되지 않지만 그 아래에 검은 색 배경이 배치되고이 모서리 반경이있는 이미지 모서리가 여전히 둥글게됩니다 따라서 아이콘 중 하나의 모서리 반경이 크면 모서리 / 모퉁이 주위에 검은 색으로 표시됩니다.
편집 : @ devin-g-rhode의 의견을 참조하십시오. 향후 아이콘 크기는 1:6.4모서리 반경 대 아이콘 크기 의 비율을 가져야합니다 . https://stackoverflow.com/a/29550364/396005의 훌륭한 답변이 있습니다 .이 아이콘에는 아이콘 모서리를 반올림하기 위해 SDK에서 사용되는 이미지 마스크 파일의 위치가 있습니다.
레티 나 호환 파일을 추가하려면 동일한 파일 이름을 사용하고 ‘@ 2x’를 추가하십시오. 따라서 icon.png라는 72×72 아이콘 파일이 있으면 프로젝트 / 대상에 icon@2x.png라는 114×114 PNG 파일을 추가하면 Xcode는 자동으로 망막 디스플레이의 아이콘으로 사용합니다. 올바르게 수행 한 경우 응용 프로그램 대상의 요약 페이지에서이를 확인할 수 있습니다. 시작 이미지에서도 동일하게 작동합니다. 320×480에서는 launch.png를, 640×960에서는 launch@2x.png를 사용하십시오.
답변
이 게시물의 답변 중 일부를 시도한 후 Louie Mantia (이전 Apple, Square 및 Iconfactory 디자이너)와 상담 했으며이 게시물의 지금까지의 모든 답변이 잘못되었거나 적어도 불완전합니다. Apple은 57px 아이콘으로 시작하고 반지름은 10이며, 여기에서 확장 또는 축소됩니다. 따라서 다음을 사용하여 모든 아이콘 크기의 반지름을 계산할 수 있습니다 10/57 x new size(예 10/57 x 114: 114px 아이콘의 올바른 반지름 인 20). 다음은 가장 일반적으로 사용되는 아이콘, 적절한 명명 규칙, 픽셀 크기 및 모서리 반경의 목록입니다.
- Icon1024.png-1024px-179.649
- Icon512.png-512px-89.825
- Icon.png-57px-10
- Icon@2x.png-114px-20
- Icon-72.png-72px-12.632
- Icon-72@2x.png-144px-25.263
- Icon-Small.png-29px-5.088
- 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 장치에 표시 될 때 자동으로 다음과 같은 것들을 얻습니다.
- 둥근 모서리
- 그림자
- 반사 광택 (광택 효과를 방지하지 않는 한)
따라서 일반 사각형 아이콘을 그려서 내용을 채우면 원하는 효과를 얻을 수 있습니다. 마지막 코너 반경은 다른 답변의 말과 비슷하지만 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 픽셀입니다.
