Ekspor Ukuran Ikon iOS di Affinity Designer

Meskipun Affinity Designer memiliki ekspor @ 1x, @ 2x dan @ 3x yang sangat berguna, saya ingin tahu apakah ada cara untuk mengekspor dalam berbagai ukuran yang diperlukan untuk ikon iOS?

Saya menemukan kotak ringkas ukuran yang diperlukan di sini , yang saya akan mereproduksi dalam format daftar:

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

Itu 11 ukuran ikon yang berbeda!

Saya memang menemukan seluruh Persona Ekspor dengan konsep konfigurasi slice menjadi sangat baik, terutama karena Anda dapat menerapkan irisan untuk lapisan individu (katakanlah, untuk versi normal dan menekan tombol). Apakah ada cara untuk menggunakan alat yang sama ini, mungkin, untuk melakukan ukuran ekspor tertentu?

Karena persyaratan berubah dari waktu ke waktu, selalu merupakan ide bagus untuk merujuk pada pedoman Apple. Ada templat Desainer Affinity di situs web saya yang saya kembangkan yang mengekspor 18 ukuran yang saat ini diperlukan untuk aplikasi universal.

Ini terlihat seperti daftar yang sangat besar dan kompleks, tetapi sebenarnya hanya ada 5 ukuran yang perlu Anda bangun:

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

Empat ukuran pertama (tercantum dalam poin) membutuhkan versi 1 ×, 2 × dan 3 × (jika Anda menjadi bukti di masa depan, serta mencakup iPhone 6 Plus).

Beberapa ukuran yang akan Anda lihat tercantum di internet dan di situs Apple adalah untuk iOS 6 dan di bawahnya (57 × 57 dll). Mereka tidak diperlukan jika Anda menargetkan iOS 7 ke atas.

Inilah template Photoshop yang saya buat:

Saya memiliki irisan yang diatur untuk mengekspor setiap ikon dan tindakan untuk mengubah ukuran dan mengekspor kembali, jadi saya berakhir dengan:

• 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

Belum semua ukuran itu dibutuhkan, tetapi kemungkinan akan ada di masa depan. Dimulai dengan 4 ukuran dasar membuat membangun ikon jauh lebih mudah.

Saya menggunakan Irisan di Photoshop untuk mengekspor berbagai wilayah yang diperlukan untuk setiap ikon. Harap dicatat bahwa ikon yang Anda berikan tidak boleh memiliki area transparan - warna harus memanjang hingga ke sudut-sudut. iOS akan menutupi ikon tersebut, jadi Anda tidak perlu khawatir.

Anda dapat melakukan hal yang sama, menggunakan fitur slice Affinity?

Pembaruan: Saya membuat beberapa templat ikon aplikasi sumber terbuka untuk Affinity Designer, Sketch, Photoshop dan Illustrator . Mereka mungkin layak dipertimbangkan.

Anda dapat melakukannya di Affinity Designer, irisan dapat mengukur outputnya, menggunakan sufiks, di sini adalah ikon iOS yang mengekspor menggunakan sufiks 'w':

Saya baru saja menemukan cara yang baik untuk melakukan ini di Affinity Designer. Ini tidak sepenuhnya otomatis. Saya akan menjelaskan cara mendapatkan tiga ukuran ikon yang saat ini dibutuhkan untuk iPhone (29pt, 40pt, 60pt), masing-masing dengan resolusi 2x dan 3x:

1. Buat Dokumen baru, atur unit ke "Poin", ukuran halaman menjadi 29x29 dan centang "Buat Artboard" di dialog
2. Tempel dan posisikan karya seni Anda di artboard
3. Ganti nama artboard menjadi "29pt" di panel Layers (opsional)
4. Klik kanan artboard dan pilih "Gandakan"
5. Seret artboard baru (sehingga Anda dapat melihat keduanya berdampingan) lalu ganti namanya menjadi "40pt" (sekali lagi, langkah ini opsional)
6. Ubah ukuran layer baru menjadi 40x40pt menggunakan panel Transform - karya seni Anda akan secara otomatis ditingkatkan
7. Ulangi langkah 4-6 untuk membuat artboard 60pt juga (ditambah 76pt dan 83.5pt untuk iPad, jika perlu)
8. Buka Persona Ekspor, alihkan ke panel Irisan dan pilih resolusi 2x dan 3x (plus 1x untuk iPad)
9. Pilih semua lapisan artboard dalam daftar ("29pt", "40pt" dll.) Dan klik "Ekspor yang dipilih" di bagian bawah panel.

Affinity akan membuat semua ukuran ikon di setiap resolusi yang dipilih, sehingga Anda mungkin mendapatkan lebih banyak ikon daripada yang sebenarnya Anda butuhkan. Tetapi mereka dengan rapi dinamai "29pt@2x.png" dll, jadi sangat mudah untuk menempatkannya di Katalog Aset Xcode Anda.

Satu peringatan: Ketika Anda pergi ke Persona Ekspor, Affinity secara otomatis membuat irisan ekspor untuk setiap artboard (itulah bingkai biru dengan label ukuran di atasnya). Saya menemukan bahwa kadang-kadang ukuran irisan ini mati beberapa piksel. Sepertinya ada bug di AD. Anda dapat dengan mudah memperbaikinya dengan menyeret sudut irisan.

Marc Edwards memiliki jawaban yang bagus dalam hal ukuran ikon apa yang perlu dibuat, penggunaan irisan untuk melakukannya, dan tautan yang baik ke sumber daya Photoshop untuk melakukan ini. Namun, saya masih mencari solusi untuk cara mengekspor dengan berbagai ukuran di Affinity Designer secara khusus.

Saya menyadari, pada akhirnya, bahwa ini akan mungkin menggunakan alat Place Image. Buat ikon Anda di satu file, dan kemudian di file "templat" lain, Anda bisa menggunakan alat Place Image untuk membuat beberapa lapisan yang menarik di file ikon Anda. Masing-masing lapisan tersebut dapat diubah menjadi irisan bernama.

Kerugiannya di sini adalah bahwa setiap lapisan perlu dibuat dan diarahkan ke file ikon Anda, sehingga sepertinya akan membosankan. Namun, begitu sudah ada, setelah diedit ke file dasar Anda, Anda dapat dengan mudah mengekspor kembali semuanya.