Ekspor Ukuran Ikon iOS di Affinity Designer

10

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?

Matt Mc
sumber

Jawaban:

8

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.

Pratinjau Template Ikon Aplikasi iOS

Steven Westmoreland
sumber
Lihat pedoman Apple untuk aplikasi universal
Steven Westmoreland
Terima kasih atas templat yang sangat bagus dan mudah digunakan ini, kerja hebat!
Langit
Luar biasa! Terima kasih! Apakah Anda punya satu untuk Android juga?
Uniphonic
4

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:

Templat ikon iOS

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

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.

Marc Edwards
sumber
Wow, informasi bagus, terima kasih! Meskipun saya tidak yakin bagaimana saya bisa melakukan itu di Affinity. Apakah Anda tahu cara membuat template seperti itu di Affinity?
Matt Mc
Saya menggunakan irisan di Photoshop untuk memotong dan mengekspor daerah yang dibutuhkan. Saya percaya Affinity memiliki fitur serupa dengan nama yang sama. (Saya sudah mengedit jawaban saya untuk memberikan lebih banyak info.)
Marc Edwards
Hm, ya, itu memang memiliki fitur slice, yang sangat bagus. Apakah ada sesuatu di template photoshop Anda yang menyalin dan mengubah ukuran gambar secara otomatis? Seperti pada, Anda membuat gambar 76pt dan sisanya dibuat secara otomatis? Atau Anda harus membuat setiap versi, dan kemudian menggunakan irisan untuk mengekspor?
Matt Mc
Yap, saya menggunakan beberapa tindakan dan skrip untuk mengubah ukuran. Alur kerja lengkap saya didokumentasikan di sini: bjango.com/articles/appdesignworkflow Templat yang saya pasang tangkapan layar tersedia di sini: bjango.com/articles/actions
Marc Edwards
3

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

masukkan deskripsi gambar di sini

Afanasii Kurakin
sumber
2

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 "[email protected]" 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.

Dorian Roy
sumber
1

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.

Matt Mc
sumber
1
Saya belum melakukan pengujian, tapi hati-hati metode ini tidak berakhir dengan aset skala bitmap dari ukuran yang lebih besar. Jika ya, kualitasnya akan lebih buruk daripada penskalaan sebagai efek vektor / lapisan. Anda tidak bisa hanya menggunakan irisan di Affinity Designer? Jika saya punya waktu, saya akan mengaturnya untuk menguji.
Marc Edwards
1
@MarcEdwards Memang benar, saya belum memeriksa untuk melihat apakah hasilnya diskalakan sebagai vektor atau bitmap. Irisan pada Desainer Afinitas menentukan area tertentu untuk ekspor; mereka tidak dapat mengukur output mereka dari apa yang dapat saya katakan. Saya memang melakukan pengujian metode Place Image, jika Anda ingin memeriksa: pixelapse.com/s/RGCQYVQR7DHTYC6KC
Matt Mc