선호도 디자이너에서 iOS 아이콘 크기 내보내기

Affinity Designer에는 매우 유용한 @ 1x, @ 2x 및 @ 3x 내보내기가 있지만 iOS 아이콘에 필요한 다양한 크기로 내보내는 방법이 있는지 궁금합니다.

필요한 크기의 간결한 그리드를 여기 에서 찾았 으며 목록 형식으로 재현합니다.

• 1024x1024
• 180x180
• 152x152
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29x29

11 가지 아이콘 크기입니다!

슬라이스 구성 개념이있는 Export Persona 전체가 훌륭하다는 것을 알았습니다. 특히 슬라이스를 개별 레이어에 적용 할 수 있기 때문에 (예 : 버튼의 일반 및 프레스 버전). 이 같은 도구를 사용하여 특정 크기의 내보내기를 수행 할 수있는 방법이 있습니까?

요구 사항은 수시로 변경되므로 항상 Apple의 지침을 참조하는 것이 좋습니다. 필자가 개발 한 Affinity Designer 템플릿 이 현재 범용 응용 프로그램에 필요한 18 개 크기를 내보내도록 개발했습니다.

거대하고 복잡한 목록처럼 보이지만 실제로 빌드 해야하는 크기는 5 가지뿐입니다.

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

처음 네 가지 크기 (포인트로 표시)는 1x, 2x 및 3x 버전이 필요합니다 (iPhone 6 Plus를 커버 할뿐만 아니라 향후 증거가되는 경우).

인터넷과 Apple 사이트에 표시되는 크기 중 일부는 iOS 6 이하 (57 × 57 등) 용입니다. iOS 7 이상을 대상으로하는 경우 필요하지 않습니다.

내가 만든 Photoshop 템플릿은 다음과 같습니다.

각 아이콘을 내보내도록 슬라이스를 설정하고 크기를 조정하고 다시 내보내는 작업을 수행했습니다.

• icon-29.png
• icon-29@2x.png
• icon-29@3x.png
• icon-40.png
• icon-40@2x.png
• icon-40@3x.png
• icon-60.png
• icon-60@2x.png
• icon-60@3x.png
• icon-76.png
• icon-76@2x.png
• icon-76@3x.png

이러한 크기가 모두 필요한 것은 아니지만 앞으로 나올 것입니다. 4 가지 기본 크기로 시작하면 아이콘을 훨씬 쉽게 만들 수 있습니다.

Photoshop에서 슬라이스를 사용하여 각 아이콘에 필요한 다른 영역을 내보내고 있습니다. 제공하는 아이콘에는 투명한 영역이 없어야합니다. 색상은 모서리까지 쭉 뻗어 야합니다. iOS는 아이콘을 가리므로 걱정할 필요가 없습니다.

Affinity의 슬라이스 기능을 사용하여 동일한 작업을 수행 할 수 있습니까?

업데이트 : Affinity Designer, Sketch, Photoshop 및 Illustrator 용 오픈 소스 앱 아이콘 템플릿을 만들었습니다 . 그들은 고려할 가치가 있습니다.

Affinity Designer에서 할 수 있습니다. 슬라이스는 접미사를 사용하여 출력을 확장 할 수 있습니다 .'w '접미사를 사용하여 iOS 아이콘을 내 보냅니다.

Affinity Designer 에서이 작업을 수행하는 좋은 방법을 찾았습니다. 완전히 자동화되지는 않았습니다. iPhone에 현재 필요한 세 가지 아이콘 크기 (29pt, 40pt, 60pt)를 각각 2x 및 3x 해상도로 얻는 방법에 대해 설명합니다.

1. 새 문서를 만들고 단위를 "포인트"로 설정하고 페이지 크기를 29x29로 설정 한 다음 대화 상자에서 "대지 만들기"를 확인하십시오.
2. 아트 보드에 아트웍 붙여 넣기 및 배치
3. 레이어 패널에서 대지를 이름을 "29pt"로 변경 (선택 사항)
4. 대지를 마우스 오른쪽 단추로 클릭하고 "중복"을 선택하십시오.
5. 새 대지를 드래그하여 (나란히 볼 수 있도록) "40pt"로 이름을 바꿉니다 (다시이 단계는 선택 사항 임)
6. 변형 패널을 사용하여 새 레이어의 크기를 40x40pt로 조정하면 아트웍이 자동으로 확대됩니다
7. 4-6 단계를 반복하여 60pt 대지를 생성합니다 (필요한 경우 iPad의 경우 76pt 및 83.5pt)
8. Export Persona로 이동하여 Slices 패널로 전환하여 2x 및 3x 해상도 (iPad의 경우 1x)를 선택하십시오.
9. 목록에서 모든 대지 레이어 ( "29pt", "40pt"등)를 선택하고 패널 하단에서 "내보내기 선택"을 클릭하십시오.

선호도는 선택한 모든 해상도에서 모든 아이콘 크기를 생성하므로 실제로 필요한 것보다 많은 아이콘을 얻을 수 있습니다. 그러나 이름은 "29pt@2x.png"등으로 깔끔하게 지정되어 있으므로 Xcode Asset Catalog에 쉽게 할당 할 수 있습니다.

한 가지주의 사항 : 내보내기 페르소나로 이동하면 Affinity가 각 대지 (크기 레이블이있는 파란색 프레임)에 대해 내보내기 슬라이스를 자동으로 만듭니다. 때때로 이러한 슬라이스의 크기가 몇 픽셀만큼 줄어드는 것을 발견했습니다. AD의 버그 인 것 같습니다. 그래도 조각의 모서리를 드래그하여 쉽게 수정할 수 있습니다.

Marc Edwards는 어떤 크기의 아이콘을 만들어야하는지, 슬라이스를 사용하여이를 수행하는 데 필요한 Photoshop 리소스에 대한 좋은 링크 측면에서 큰 대답을했습니다. 그러나 여전히 Affinity Designer 에서 여러 크기로 내보내는 방법에 대한 솔루션을 찾고 있습니다.

결국 이미지 배치 도구를 사용하면 이것이 가능하다는 것을 깨달았습니다. 한 파일에서 아이콘을 만든 다음 다른 "템플릿"파일에서 아이콘 배치 도구를 사용하여 아이콘 파일을 끌어 오는 여러 레이어를 만들 수 있습니다. 이러한 각 레이어는 명명 된 슬라이스로 전환 할 수 있습니다.

여기서 단점은 각 레이어를 생성하고 아이콘 파일을 가리켜 야하므로 지루한 것처럼 보입니다. 기본 파일을 편집 한 후에는 모든 파일을 쉽게 다시 내보낼 수 있습니다.