Saya mencoba membuat ikon untuk aplikasi iPhone saya, tetapi tidak tahu cara mendapatkan jari-jari persis seperti yang digunakan ikon iPhone. Saya telah mencari dan mencari tutorial atau template tetapi tidak dapat menemukannya.

Saya yakin saya hanya orang bodoh, tetapi bagaimana Anda mendapatkan sudut-sudut yang bulat tepat dengan ikon Anda dari Illustrator atau Photoshop?

Edit:

Berapa radius untuk Retina iPad?

Anda dapat membuat empat ikon (mulai hari ini) untuk aplikasi Anda dan semuanya dapat memiliki tampilan yang berbeda - belum tentu berdasarkan gambar 512x512.

• radius sudut untuk ikon 512x512 = 80 (iTunesArtwork)
• radius sudut untuk ikon 1024x1024 = 180 (iTunesArtwork Retina )
• radius sudut untuk ikon 57x57 = 9 (iPhone / iPod Touch)
• radius sudut untuk ikon 114x114 = 18 ( Retina iPhone / iPod Touch )
• radius sudut untuk ikon 72x72 = 11 (iPad)
• radius sudut untuk ikon 144x144 = 23 (iPad Retina )

Jika Anda membuat satu set ikon khusus, Anda dapat mengatur UIPrerenderedIconopsi ke true dalam file info.plist Anda dan itu tidak akan menambahkan efek gloss tetapi akan menempatkan latar belakang hitam di bawahnya dan masih membulatkan sudut-sudut gambar dengan jari-jari sudut ini. jadi jika jari-jari sudut pada salah satu ikon lebih besar maka akan terlihat hitam di sekitar tepi / sudut.

Sunting: Lihat komentar dari @ devin-g-rhode dan Anda dapat melihat bahwa setiap ukuran ikon di masa mendatang harus memiliki 1:6.4rasio radius sudut ke ukuran ikon. Ada juga jawaban yang sangat bagus dari https://stackoverflow.com/a/29550364/396005 yang memiliki lokasi file mask gambar yang digunakan dalam SDK untuk membulatkan sudut ikon

Untuk menambahkan file yang kompatibel dengan retina, gunakan nama file yang sama dan tambahkan '@ 2x'. Jadi jika saya memiliki file untuk ikon 72x72 saya bernama icon.png, saya juga akan menambahkan file PNG 114x114 bernama icon@2x.png ke proyek / target dan Xcode akan secara otomatis menggunakannya sebagai ikon pada tampilan retina. Anda dapat melihat ini beraksi di halaman Ringkasan target aplikasi jika Anda melakukannya dengan benar. Hal yang sama berlaku untuk gambar peluncuran Anda. Gunakan launch.png di 320x480 dan launch@2x.png di 640x960.

Setelah mencoba beberapa jawaban di posting ini, saya berkonsultasi dengan Louie Mantia (mantan Apple, Square, dan desainer Iconfactory) dan semua jawaban sejauh ini pada posting ini salah (atau setidaknya tidak lengkap). Apple mulai dengan ikon 57px dan radius 10 kemudian naik turun dari sana. Dengan demikian Anda dapat menghitung jari-jari untuk ukuran ikon apa pun menggunakan 10/57 x new size(misalnya 10/57 x 114memberi 20, yang merupakan jari-jari yang tepat untuk ikon 114px). Berikut adalah daftar ikon yang paling umum digunakan, konvensi penamaan yang tepat, dimensi piksel, dan radius sudut.

1. Ikon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. Icon@2x.png - 114px - 20
5. Ikon-72.png - 72px - 12.632
6. Ikon-72@2x.png - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. Ikon-Small@2x.png - 58px - 10.175

Juga, seperti yang disebutkan dalam jawaban lain, Anda sebenarnya tidak ingin memotong gambar yang Anda gunakan dalam biner atau mengirim ke Apple. Itu semua harus persegi dan tidak memiliki transparansi. Apple akan secara otomatis menutupi setiap ikon dalam konteks yang sesuai.

Mengetahui hal di atas adalah penting, namun, untuk penggunaan ikon di UI aplikasi tempat Anda harus menerapkan kode mask, atau dirender sebelumnya di photoshop. Ini juga membantu ketika membuat karya seni untuk situs web dan materi promosi lainnya.

Bacaan tambahan:

Neven Mrgan pada ukuran ikon tambahan dan pertimbangan desain lainnya: ukuran ikon aplikasi ios

Bjango Marc Edwards pada opsi yang berbeda untuk membuat roundrects di Photoshop dan mengapa itu penting: roundrect

Dokumen resmi Apple tentang ukuran ikon dan pertimbangan desain: Ikon dan Gambar

Memperbarui:

Saya melakukan beberapa tes di Photoshop CS6 dan tampaknya seolah-olah 3 digit setelah titik desimal cukup presisi untuk berakhir dengan vektor yang sama persis (setidaknya seperti yang ditunjukkan oleh Photoshop pada zoom 3200%). Round Round Tool terkadang membulatkan input ke bilangan bulat terdekat, tetapi Anda dapat melihat perbedaan yang signifikan antara 90 dan 89,825. Dan beberapa kali Alat Kotak Persegi Panjang tidak bulat dan benar-benar menunjukkan beberapa digit setelah titik desimal. Tidak yakin apa yang terjadi di sana, tetapi pasti menggunakan dan menyimpan nomor yang lebih tepat yang dimasukkan.

Bagaimanapun, saya telah memperbarui daftar di atas untuk memasukkan hanya 3 digit setelah titik desimal (sebelum ada 13!). Dalam kebanyakan situasi mungkin akan sulit untuk membedakan antara ikon 512px transparan yang disamarkan pada radius 90px dan satu yang disamarkan pada 89,825, tetapi antialiasing sudut bulat pasti akan berakhir sedikit berbeda dan kemungkinan akan terlihat dalam keadaan tertentu khususnya jika topeng kedua, yang lebih tepat diterapkan oleh Apple, dalam kode, atau sebaliknya.

Saya melihat banyak diskusi "px" tetapi tidak ada yang berbicara persentase yang merupakan angka tetap yang ingin Anda hitung.

22,37% adalah persentase kunci di sini. Lipat gandakan ukuran gambar yang disebutkan di atas dengan 0.2237 dan Anda akan mendapatkan jari-jari piksel yang benar untuk ukuran itu.

Sebelum iOS 8, Apple menggunakan pembulatan lebih sedikit, menggunakan 15,625%.

EDIT : Terima kasih @Chris Prince untuk mengomentari dengan persentase radius iOS 8/9/10: 22,37%

Penting: Persamaan ikon iOS 7

Dengan peluncuran iOS 7 yang akan datang, Anda akan melihat bahwa radius ikon "standar" telah meningkat. Jadi cobalah lakukan apa yang disarankan Apple dan saya dengan jawaban ini.

Tampaknya untuk ikon 120px rumus yang paling mewakili bentuknya di iOS 7 adalah superellipse berikut:

|x/120|^5 + |y/120|^5 = 1

Jelas Anda dapat mengubah 120nomor dengan ukuran ikon yang diinginkan untuk mendapatkan fungsi yang sesuai.

Asli

Anda harus memberikan gambar yang memiliki sudut 90 ° (penting untuk menghindari memotong sudut ikon Anda — iOS melakukannya untuk Anda saat menerapkan masker sudut-pembulatan) ( Apple Documentation )

Pendekatan terbaik adalah tidak membulatkan sudut ikon Anda sama sekali. Jika Anda mengatur ikon Anda sebagai ikon persegi, iOS akan secara otomatis menaburkan ikon dengan topeng yang telah ditentukan yang akan mengatur sudut bulat yang sesuai.

Jika Anda secara manual mengatur sudut bulat untuk ikon Anda, mereka mungkin akan terlihat rusak di perangkat ini atau itu, karena topeng pembulatan sedikit berubah dari versi iOS ke yang lain. Terkadang ikon Anda akan sedikit lebih besar, kadang-kadang (menghela napas) sedikit lebih kecil. Menggunakan ikon kuadrat akan membebaskan Anda dari beban ini, dan Anda pasti akan memiliki ikon yang selalu terkini dan terlihat bagus untuk aplikasi Anda.

Pendekatan ini berlaku untuk setiap ukuran ikon (iPhone / iPod / iPad / retina), dan juga untuk karya seni iTunes. Saya mengikuti pendekatan ini beberapa kali, dan jika Anda mau, saya bisa memposting Anda tautan ke aplikasi yang menggunakan ikon kotak asli.

Edit

Untuk lebih memahami jawaban ini, silakan merujuk ke dokumentasi resmi Apple tentang ikon iOS . Di halaman ini dinyatakan dengan jelas bahwa ikon kotak akan secara otomatis mendapatkan hal-hal ini ketika ditampilkan pada perangkat iOS:

1. Sudut membulat
2. Drop shadow
3. Shine reflektif (kecuali Anda mencegah efek kilau)

Jadi, Anda dapat mencapai efek apa pun yang Anda inginkan hanya menggambar ikon kotak polos dan mengisi konten di dalamnya. Jari-jari sudut terakhir akan menjadi sesuatu yang mirip dengan apa yang dikatakan jawaban lain di sini, tetapi ini tidak akan pernah dijamin, karena angka-angka itu bukan bagian dari dokumentasi resmi Apple tentang iOS. Mereka meminta Anda untuk menggambar ikon kotak, jadi ... mengapa tidak?

Orang-orang berdebat tentang radius sudut sedikit meningkat tetapi sebenarnya bukan itu masalahnya.

Dari blog ini :

'Rahasia' produk fisik Apple adalah mereka menghindari singgung (di mana jari-jari bertemu garis pada satu titik) dan membuat permukaan mereka dengan apa yang disebut kelengkungan kontinuitas .

Kamu tidak perlu menerapkan radius sudut ke ikon untuk iOS. Cukup sediakan ikon kotak. Tetapi jika Anda masih ingin tahu caranya, bentuk sebenarnya disebut Squircle dan di bawah ini adalah rumusnya:

Jawaban dari dbarnard memiliki rumus untuk menghitung jari-jari yang benar, tetapi karena Anda mencari templat, semua masker dan overlay dapat ditemukan di direktori ini:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(path adalah untuk versi terbaru dari XCode. Untuk versi yang lebih lama mungkin akan berada di dalam / Pengembang /).

Seperti yang telah dicatat orang lain, Anda TIDAK boleh menutupi sendiri, tetapi Anda dapat menggunakannya untuk memeriksa bagaimana ikon Anda akan terlihat setelah ditutup.

(kredit untuk temuan ini jatuh ke Neven Mrgan IIRC)

Jari-jari sudut ikon 57 x 57 piksel adalah 9 piksel.

Seperti yang dikatakan orang lain, Anda tidak ingin berbelit-belit. Anda ingin mengirimkan gambar kotak datar (tanpa lapisan atau alfa). Apple mengubah topeng yang mereka gunakan untuk membulatkan sudut Anda di iOS7 dan kemudian lagi di iOS8. Anda dapat menemukan topeng ini di dalam bundel aplikasi Xcode Anda. Path berubah dengan setiap versi SDK baru yang mereka rilis. Jadi, saya akan menunjukkan kepada Anda bagaimana Anda selalu dapat menemukannya.

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

Pada saat ini, jalan yang ditemukan oleh perintah itu adalah /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework tetapi tidak percaya itu. Gunakan perintah untuk menemukannya sendiri.

Jalur itu menunjuk ke direktori dengan file-file ini (sekali lagi, pada saat posting ini)

./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

Seperti yang Anda lihat, ada banyak topeng berbeda, tetapi mereka diberi nama cukup jelas. Ini AppIconMask@3x~iphone.pnggambarnya:

Anda dapat menggunakannya untuk menguji ikon Anda untuk melihat apakah itu akan terlihat oke setelah ditutup. Tapi, jangan di tikungan . Jika ya, saat Apple mengganti topeng itu lagi, Anda akan memiliki artefak.

Semua jawaban sebelumnya untuk pertanyaan ini sudah kedaluwarsa. Sejak setidaknya Mei 2015, Apple mengharuskan Anda untuk memberikan ikon kotak tanpa pembulatan:

Pertahankan sudut ikon persegi. Sistem menerapkan masker yang membulatkan sudut ikon secara otomatis.

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

Jika tidak mempertimbangkan goresan, jari-jari tepat sebenarnya 10px untuk ikon 57x57.

Saya mendapatkan info ini dari referensi ikon .

Ketika merancang ikon aplikasi saya dengan Photoshop, saya telah menemukan bahwa tidak ada radius bilangan bulat sudut cocok topeng perangkat persis .

Yang saya lakukan sekarang adalah membuat proyek kosong dengan Xcode, mengatur file PNG sepenuhnya putih sebagai ikon, dan mematikan bevel & gloss yang telah ditetapkan. Lalu, saya menjalankan aplikasi dan mengambil screenshot dari layar beranda. Sekarang, Anda dapat dengan mudah membuat topeng dari gambar itu, yang dapat Anda gunakan di Photoshop. Ini akan membuat Anda mendapatkan sudut yang bulat sempurna.

The iphone rounds corner untuk Anda, yang Anda butuhkan adalah ikon png 57x57 persegi dan Anda harus baik

Ada dua jawaban yang sangat bertentangan dengan jumlah suara yang besar satu adalah 160px @ 1024 yang lain adalah 180px @ 1024. Jadi penyihir?

Saya menjalankan beberapa percobaan dan saya pikir itu 180px @ 1024 jadi drbarnard benar.

Saya mengunduh ikon iTunes U dari App Store ini berukuran 175x175px. Saya meningkatkannya di photoshop menjadi 1024px dan meletakkan dua bentuk di atasnya, satu dengan jari-jari 160px dan satu dengan 180px.

Seperti yang Anda lihat di bawah bentuk (garis abu-abu tipis) dengan 160px (yang 1) agak off sedangkan yang dengan 180px terlihat baik-baik saja.

Inilah yang saya lakukan sekarang di PhotoShop:

1. Saya membuat kanvas berukuran 1026x1026px dengan topeng 180px untuk desain utama Smart Object .
2. Saya menduplikasi Smart Object utama 5 kali dan mengubah ukurannya menjadi 1024px, 144px, 114px, 72px dan 57px.
3. Saya meletakkan "Irisan Berbasis Layered Baru" pada setiap Smart Objects dan saya mengganti nama irisan sesuai dengan ukurannya (mis. Ikon-72px).
4. Ketika saya menyimpan karya seni saya pilih "Semua Irisan Pengguna" dan BANG! Saya memiliki semua ikon yang diperlukan untuk aplikasi saya.

Saya mencoba radius 228px untuk 1024x1024 dan berhasil :)

Pembaruan (per Januari 2018) untuk persyaratan Ikon Aplikasi:

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

Pertahankan sudut ikon persegi . Sistem menerapkan masker yang membulatkan sudut ikon secara otomatis.

Buat latar belakang sederhana dan hindari transparansi . Pastikan ikon Anda buram, dan jangan mengacaukan latar belakang. Berikan latar belakang sederhana agar tidak mengalahkan ikon aplikasi lain di sekitarnya. Anda tidak perlu mengisi seluruh ikon dengan konten.

Anda tidak perlu menerapkan radius sudut ke ikon aplikasi Anda, Anda bisa menerapkan ikon persegi. Perangkat secara otomatis menerapkan radius sudut.