İPhone uygulamam için simge oluşturmaya çalışıyorum, ancak iPhone'un simgelerinin kullandığı yarıçapı nasıl alacağımı bilmiyorum. Bir öğretici veya şablon aradım ve aradım, ancak bir tane bulamıyorum.

Eminim ben sadece bir salakçıyım, ama yuvarlak köşeleri Illustrator veya Photoshop'tan simgenizle tam olarak nasıl elde edersiniz?

Düzenle:

Retina iPad yarıçapı nedir?

Uygulamanız için dört simge (bugün itibariyle) yapabilirsiniz ve hepsi 512x512 resme dayanmak zorunda kalmadan farklı bir görünüme sahip olabilir.

• 512x512 simgesi için köşe yarıçapı = 80 (iTunesArtwork)
• 1024x1024 simgesi için köşe yarıçapı = 180 (iTunesArtwork Retina )
• 57x57 simgesi için köşe yarıçapı = 9 (iPhone / iPod Touch)
• 114x114 simgesi için köşe yarıçapı = 18 (iPhone / iPod Touch Retina )
• 72x72 simgesi için köşe yarıçapı = 11 (iPad)
• 144x144 simgesi için köşe yarıçapı = 23 (iPad Retina )

Bir dizi özel simge oluşturursanız, UIPrerenderedIcon info.plist dosyanızda seçeneği true olarak bu, parlaklık efekti eklemez, ancak altına siyah bir arka plan yerleştirir ve yine de bu köşe yarıçaplarıyla görüntü köşelerini yuvarlar bu nedenle herhangi bir simgenin köşe yarıçapı daha büyükse, kenarların / köşelerin etrafında siyah görünür.

Düzenleme: @ devin-g-rhode'daki açıklamaya bakın ve gelecekteki herhangi bir 1:6.4simge boyutunun köşe yarıçapının simge boyutuna oranına sahip olması gerektiğini görebilirsiniz . Ayrıca çok iyi bir cevap varSimge köşelerini yuvarlamak için SDK'da kullanılan görüntü maskesi dosyalarının bulunduğu https://stackoverflow.com/a/29550364/396005 adresinden var.

Retina uyumlu bir dosya eklemek için aynı dosya adını kullanın ve '@ 2x' ekleyin. Eğer icon.png adlı 72x72 ikonum için bir dosyam olsaydı, projeye / hedefe icon@2x.png adlı bir 114x114 PNG dosyası da eklerdim ve Xcode bunu otomatik olarak bir retina ekranında simge olarak kullanırdı. Bunu doğru yaptıysanız bunu uygulama hedefinin Özet sayfasında görebilirsiniz. Aynı şey lansman resimleriniz için de geçerlidir. 320x480'de launch.png ve 640x960'da launch@2x.png kullanın.

Bu yazıdaki cevaplardan bazılarını denedikten sonra Louie Mantia'ya (eski Apple, Square ve Iconfactory tasarımcısı) danıştım ve bu yazıdaki tüm cevaplar yanlış (veya en azından eksik). Apple, 57 piksel simgesiyle başlar ve 10'luk bir yarıçap sonra oradan yukarı veya aşağı ölçeklenir. Böylece, herhangi bir simge boyutu için yarıçapı kullanarak hesaplayabilirsiniz 10/57 x new size(örneğin 10/57 x 114, 114px simgesi için uygun yarıçap olan 20 verir). En çok kullanılan simgelerin, uygun adlandırma kurallarının, piksel boyutlarının ve köşe yarıçaplarının bir listesi.

1. Icon1024.png - 1024 piksel - 179.649
2. Icon512.png - 512 piksel - 89.825
3. Icon.png - 57 piksel - 10
4. Icon@2x.png - 114 piksel - 20
5. Icon-72.png - 72 piksel - 12,632
6. Icon-72@2x.png - 144px - 25.263
7. Icon-Small.png - 29 piksel - 5,088
8. Icon-Small@2x.png - 58 piksel - 10.175

Ayrıca, diğer yanıtlarda belirtildiği gibi, ikili dosyada kullandığınız görüntüleri kırpmak veya Apple'a göndermek istemezsiniz. Bunların hepsi kare olmalı ve şeffaflığı olmamalıdır. Apple, her simgeyi uygun bağlamda otomatik olarak maskeleyecektir.

Bununla birlikte, yukarıdakileri bilmek, maskeyi kodda uygulamak veya photoshop'ta önceden render etmek zorunda olduğunuz uygulama kullanıcı arayüzünde simge kullanımı için önemlidir. Web siteleri ve diğer promosyon malzemeleri için sanat eserleri oluştururken de yararlıdır.

Ek okuma:

Ek simge boyutları ve diğer tasarım konuları hakkında Neven Mrgan: ios uygulaması simge boyutları

Photoshop'ta yuvarlak düzeltmeler oluşturmak için farklı seçenekler ve neden önemli: Bjango'dan Marc Edwards

Apple'ın simge boyutu ve tasarım konularındaki resmi belgeleri: Simgeler ve Görüntüler

Güncelleme:

Photoshop CS6'da bazı testler yaptım ve ondalık noktadan sonraki 3 basamak tam olarak aynı vektörle (en azından Photoshop tarafından% 3200 yakınlaştırmada gösterildiği gibi) sonuç verecek kadar hassas görünüyor. Yuvarlak Doğrultma Aracı bazen girişi en yakın tam sayıya yuvarlar, ancak 90 ile 89.825 arasında önemli bir fark görebilirsiniz. Ve birkaç kez Yuvarlak Dikdörtgen Aracı yuvarlanmadı ve ondalık noktadan sonra aslında birden fazla basamak gösterdi. Orada neler olduğundan emin değilim, ama kesinlikle girilen daha kesin sayıyı kullanıyor ve saklıyor.

Her neyse, yukarıdaki listeyi ondalık noktadan sonra sadece 3 basamak içerecek şekilde güncelledim (13'ten önce!). Çoğu durumda, 90 piksel yarıçapında maskelenmiş bir şeffaf 512 piksel simge ile 89.825'te maskelenmiş bir tane arasındaki farkı söylemek zor olabilir, ancak yuvarlak köşenin kenar yumuşatma kesinlikle biraz farklı olur ve özellikle bazı durumlarda görünür olur Apple tarafından, kodda veya başka bir şekilde ikinci, daha hassas bir maske uygulanırsa.

Çok fazla "px" tartışma görüyorum ama kimse hesaplamak istediğiniz sabit sayı olan yüzdeleri konuşmuyor.

22.37% anahtar yüzde . Yukarıda belirtilen görüntü boyutlarından herhangi birini 0.2237 ile çarpın ve bu boyut için doğru piksel yarıçapını elde edin.

İOS 8'den önce Apple,% 15.625 kullanarak daha az yuvarlama kullandı.

EDIT : iOS 8/9/10 yarıçapı yüzdesi ile yorum yaptığınız için @Chris Prince'e teşekkür ederiz: 22.37%

Önemli: iOS 7 simge denklemi

İOS 7'nin gelecek sürümünde "standart" simge yarıçapının arttığını göreceksiniz. Bu yüzden Apple ve ben bu cevabı önerdiklerini yapmaya çalışın.

120 piksellik bir simge için iOS 7'deki şeklini en iyi temsil eden formülün aşağıdaki süper elips olduğu anlaşılıyor:

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

Açıkça 120, ilgili işlevi elde etmek için sayıyı istenen simge boyutuyla değiştirebilirsiniz.

orijinal

90 ° köşeleri olan bir görüntü sağlamalısınız (simgenizin köşelerini kırpmaktan kaçınmak önemlidir — iOS, köşe yuvarlama maskesini uyguladığınızda bunu sizin için yapar) ( Apple Belgeleri )

En iyi yaklaşım, simgelerinizin köşelerini hiç yuvarlamamaktır. Simgenizi kare simgesi olarak ayarlarsanız iOS, simgeyi otomatik olarak uygun yuvarlatılmış köşeleri ayarlayacak önceden tanımlanmış bir maske ile kaplar.

Simgeleriniz için yuvarlatılmış köşeleri manuel olarak ayarlarsanız, yuvarlama maskesi bir iOS sürümünden diğerine biraz değiştiği için muhtemelen bu cihazda veya bu cihazda kırık görünecektir. Bazen simgeleriniz biraz daha büyük, bazen (iç çekiş) biraz daha küçük olur. Kare bir simge kullanmak sizi bu yükten kurtarır ve uygulamanız için her zaman güncel ve iyi görünümlü bir simgeye sahip olduğunuzdan emin olabilirsiniz.

Bu yaklaşım her simge boyutu (iPhone / iPod / iPad / retina) ve ayrıca iTunes resmi için geçerlidir. Bu yaklaşımı birkaç kez izledim ve isterseniz size yerel kare simgeleri kullanan bir uygulamanın bağlantısını gönderebilirim.

Düzenle

Bu yanıtı daha iyi anlamak için lütfen iOS simgeleriyle ilgili resmi Apple belgelerine bakın . Bu sayfada, bir iOS cihazında görüntülendiğinde kare bir simgenin bu şeyleri otomatik olarak alacağı açıkça belirtilmektedir:

1. Yuvarlatılmış köşeler
2. Düşen gölge
3. Yansıtıcı parlaklık (parlaklık etkisini önlemezseniz)

Böylece, sadece düz bir kare simge çizmek ve içindeki içeriği doldurmak istediğiniz etkiyi elde edebilirsiniz. Son köşe yarıçapı, buradaki diğer cevapların söylediklerine benzer bir şey olacak, ancak bu asla garanti edilmeyecektir, çünkü bu sayılar iOS'taki resmi Apple belgelerinin bir parçası değildir. Sizden kare simgeler çizmenizi istiyorlar, o zaman ... neden olmasın?

Köşe yarıçapının biraz arttığını tartışan insanlar ama aslında durum böyle değil.

Gönderen bu blog :

Apple'ın fiziksel ürünlerinin bir sırrı, teğetten kaçınmaları (bir yarıçapın tek bir noktada bir çizgiyle buluştuğu yer) ve yüzeylerini eğrilik sürekliliği olarak adlandırılan şeylerle oluşturmalarıdır .

Sen gerekmez iOS için simgelere köşe yarıçapını uygulamak. Sadece kare simgeleri sağlayın. Ancak yine de nasıl olduğunu bilmek istiyorsanız, gerçek şekle Squircle denir ve aşağıdaki formüldür:

Dbarnard'ın cevabı, doğru yarıçapı hesaplamak için formüle sahiptir, ancak şablonları aradığınızdan, tüm maskeler ve kaplamalar bu dizinde bulunabilir:

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

(yol, XCode'un son sürümleri içindir. Daha eski sürümler için muhtemelen / Developer / içinde olacaktır).

Diğerlerinin de belirttiği gibi, bunları kendiniz maskelememelisiniz, ancak simgelerinizin maskelenince nasıl görüneceğini kontrol etmek için bunları kullanabilirsiniz.

(bu bulgu için kredi Neven Mrgan IIRC'ye aittir)

57 x 57 piksel simgesinin köşe yarıçapı 9 pikseldir.

Diğerlerinin söylediği gibi, köşelerinizi yuvarlamak istemezsiniz. Düz (katman veya alfa yok) kare grafikler göndermek istiyorsunuz. Apple, iOS7'de ve daha sonra tekrar iOS8'de köşelerinizi yuvarlamak için kullandıkları maskeyi değiştirdi. Bu maskeleri Xcode uygulama paketinizin içinde bulabilirsiniz. Yol, yayınladıkları her yeni SDK sürümüyle değişir. Size her zaman nasıl bulabileceğinizi göstereceğim.

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

Şu anda, bu komutun bulduğu yol /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework buna güvenmiyor ama güvenmiyor. Kendiniz bulmak için komutu kullanın.

Bu yol, bu dosyaları içeren bir dizine işaret eder (yine bu yazı sırasında)

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

Gördüğünüz gibi, birçok farklı maske var, ancak oldukça açık bir şekilde adlandırılmışlar. İşte AppIconMask@3x~iphone.pnggörüntü:

Maskelentikten sonra iyi görünüp görünmeyeceğini görmek için simgenizi test etmek için bunu kullanabilirsiniz . Ancak, köşelerinizi yuvarlamayın . Bunu yaparsanız, Apple bu maskeleri tekrar değiştirdiğinde, eserleriniz olur.

Bu soruya verilen tüm önceki yanıtlar artık güncel değil. En az Mayıs 2015'ten bu yana Apple, yuvarlama olmadan kare simgeleri sağlamanızı istiyor:

Simge köşelerini kare tutun. Sistem, simge köşelerini otomatik olarak yuvarlayan bir maske uygular.

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

Kontur dikkate alınmazsa, tam yarıçap 57x57 simgesi için aslında 10 pikseldir.

Bu bilgiyi iconreference'den alıyorum .

Uygulama simgelerimi Photoshop ile tasarlarken, cihazın maskesine tam olarak tam bir köşe yarıçapı sığmadığını gördüm .

Şimdi yaptığım şey Xcode ile boş bir proje oluşturmak, simge olarak tamamen beyaz bir PNG dosyası ayarlamak ve önceden ayarlanmış eğim ve parlaklığı kapatmak. Sonra uygulamayı çalıştırıyorum ve ana ekranın ekran görüntüsünü alıyorum. Artık bu görüntüden Photoshop'ta kullanabileceğiniz bir maske kolayca oluşturabilirsiniz. Bu size mükemmel bir şekilde yuvarlatılmış köşeler verecektir.

İphone sizin için köşeleri yuvarlar, tek ihtiyacınız olan bir kare 57x57 png simgesi ve u iyi olmalı

Biri 160px @ 1024, diğeri 180px @ 1024 olmak üzere çok sayıda oyla tamamen çelişen iki cevap vardır. Yani bir cadı mı?

Bazı deneyler yaptım ve bunun 180px @ 1024 olduğunu düşünüyorum, bu yüzden drbarnard doğru.

İTunes U simgesini App Store'dan indirdim 175x175px Photoshop'ta 1024px'e yükselttim ve üzerine 160px yarıçaplı ve 180px olmak üzere iki şekil koydum.

Gördüğünüz gibi 160px (birincisi) ile şeklin altında (ince gri çizgi) biraz kapalı iken 180px ile olanı gayet iyi görünüyor.

PhotoShop'ta yaptığım şey şu:

1. Ana tasarım Akıllı Nesne için 180 piksel maske ile 1026x1026 piksel boyutunda bir tuval oluşturuyorum .
2. Ana Akıllı Nesneyi 5 kez çoğaltır ve 1024px, 144px, 114px, 72px ve 57px olarak yeniden boyutlandırırım.
3. Her Akıllı Nesneye bir "Yeni katmanlı Tabanlı Dilim" koydum ve dilimleri boyutlarına göre yeniden adlandırıyorum (örn. İcon-72px).
4. Resmi kaydettiğimde "Tüm Kullanıcı Dilimleri" ve BANG! Uygulamam için gerekli tüm simgelere sahibim.

1024x1024 için 228 piksel yarıçapı denedim ve işe yaradı :)

Uygulama Simgesi gereksinimleri için güncelleme (Ocak 2018 itibariyle):

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

Simge köşelerini kare tutun . Sistem, simge köşelerini otomatik olarak yuvarlayan bir maske uygular.

Arka planı basit tutun ve şeffaflıktan kaçının . Simgenizin opak olduğundan emin olun ve arka planı karıştırmayın. Basit bir arka plan verin, böylece yakındaki diğer uygulama simgelerini aşmaz. Tüm simgeyi içerikle doldurmanıza gerek yoktur.

Uygulama simgenize köşe yarıçapı uygulamanız gerekmez, sadece kare simgeleri uygulayabilirsiniz. Cihaz otomatik olarak köşe yarıçapı uyguluyor.