Help with iOS desing guidelines

2 min read
emey87's avatar
By emey87
0 Favourites
17 Comments
2K Views
Hi,

long time since I don´t log in on dA, I just wanted to make a cuestion, for sure somewhere here that uses iOS devices could help me. I am designig and iOS icon, I was about to finish the design and create all filesizes, then I saw the iOS guidelines and I don´t know what it means " icon_512x5122x    1024x1024 " this is the icon of 512x512 zoomed at 2x or a icon in 1024x1024 px?


     Table 5-1  App icon resource sizes
Filename    Size of canvas (in pixels)
icon_512x5122x    1024x1024
icon_512x512    512x512
icon_256x2562x    512x512
icon_256x256    256x256
icon_128x1282x    256x256
icon_128x128    128x128
icon_32x322x 64x64
icon_32x32    32x32
icon_16x162x    32x32
icon_16x16    16x16

Also, another question, I am designing some iOS icon rounded with a metallic rim (yes, like iTunes) for the iPhone version I will go for a square version of this, must it have the rim or not?

Thanks in advance for your answers.
Published:
© 2013 - 2020 emey87
Comments17
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
alexrusodev's avatar
Buenas! supongo que llego tarde, jeje, y los comentarios que ya hay están acertados, pero te pongo un pequeño resumen ya que dentro de poco van a cambiar algunos tamaños, (los tamaños y tal que hay en el journal son los de OS X). Para iOS serían:

iPhone: Icon.png (57px) & Icon@2x.png (114px)
iPad: Icon-72.png (72px) & Icon-72@2x.png (114px)
para el store: iTunesArtwork.png de 1024

Esos son los que te piden obligatorios, de hecho el del store no-retina ya no lo están pidiendo hoy en día. También pedían antes que el archivo no tuviera el .png pero en realidad sí tenía que tenerlo, se les colaría la gamba al escribir la documentación xD

Por otro lado, para iOS 7, que saldrá después del verano, han cambiado el de iPhone a 60px y 120 en @2x. Y también han cambiado el radio del borde, por lo que supongo que "joderá" a todos los que han ido poniendo el marco a mano y etc

saludos!
emey87's avatar
emey87Hobbyist Interface Designer
Sí, ya está solucionado, aun así te agradezco la explicación ya que había ciertas cosas con las que aún tenía dudas, un saludo y gracias por molestarte en explicármelo.
alexrusodev's avatar
de nada! la verdad es que las guías aunque casi todo lo explican bien, hay mil mierdecillas así que parecen tonterías pero a los diseñadores nos pueden dar o quitar ratos de curro
LukasKokoska's avatar
LukasKokoskaProfessional Interface Designer
1024x1024 is obviously retina display. The guideline markup of it probably means that if the 1024 size is not provided, it scales up 2 times to fit the size. Though I am not sure. Always just go with 1024 and youre clean to go :D

About the rim, when working on the icon that have rounded radius, system crops the squared imagery so it fits in. Think of it as a mask. Basically what you have on corners of the pure rectangle image wont show up because the radius crops it. Not sure whether this was exactly what you wanted to know. But I might have a PSD template somewhere on my HDD that shows you everything you need to know. I can check it if you want.

Also, nice to see you around here again :D
emey87's avatar
emey87Hobbyist Interface Designer
Yes, that was what I did, 1024px and done.

About the rim I finally designed with it, and also, used some templates to know how might be that radius. If everything is okay, you will know soon the results (or that was what I expect)

Nice yo see you too :)
LukasKokoska's avatar
LukasKokoskaProfessional Interface Designer
great news then ;)
emey87's avatar
emey87Hobbyist Interface Designer
Any idea about the rim thing?

Look at this app store icon, on OSx is like the one I drawed, but on iOS is squared and without rim:

[link]
Mulsivaas's avatar
MulsivaasHobbyist Photographer
Isn't that up to you?
Anyway, if I were you, I would just submit the app how I wanted it. If they don't like something, they'll reject it and tell you what to fix.
fediaFedia's avatar
fediaFediaProfessional Interface Designer
Just my two cents, but when we're uploading apps to the Appstore, there is a requirement for a 1024x1024 icon. 
emey87's avatar
emey87Hobbyist Interface Designer
Ok, thanks god that I used vector drawing haha because I made it on 512x512px
Mulsivaas's avatar
MulsivaasHobbyist Photographer
The Retina displays (4/4s/5) have the "same" resolution as the past iPhones (like the 3G), except the devices treats every two pixels as one. This means it is exactly four times (twice width and twice height) the area. This allows past specs to work pretty well on the higher-density displays: they'll be displayed at double size, but the media thinks it is still the small size.

So the 512x512 icon on a 3Gs will be exactly 512 pixels by 512 pixels, while the 512x512 icon on the iPhone 4s will actually be displayed at 1024x1024. If you took a physical photo of the icon on each phone, they would take up the same amount of physical screen real estate.

Help at all? I might have confused you more. To be honest, I am conjecturing with a bit of this, because I don't design for iOS.
BlackSheepRising's avatar
BlackSheepRisingHobbyist Digital Artist
I think he's asking what size he should make the actual icon, 512 or 1024.
emey87's avatar
emey87Hobbyist Interface Designer
Yes, that is what I was asking, thanks.
BlackSheepRising's avatar
BlackSheepRisingHobbyist Digital Artist
Any time.
Mulsivaas's avatar
MulsivaasHobbyist Photographer
1024.
BlackSheepRising's avatar
BlackSheepRisingHobbyist Digital Artist
Pimp.
emey87's avatar
emey87Hobbyist Interface Designer
Ok, thanks, I was confused because how it was explained on the guidelines. :)
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In