How large are the icons on the left and right side of the navigation bar for iOS 7 on iPhone 5?
How large are the icons on the left and right side of the navigation bar for iOS 7 on iPhone 5?
Question
Can anyone advise how large are the icons usually on the left and right side of the navigation bar?
See this (the cog wheel and info icon).
I read from the iOS human design guidelines it's 44 x 44 pt? Because the confusing thing is Apple is using pts instead of px, so the question is, how large should I make it in Photoshop? 44 pt = 44 px?
To make it more confusing, with the Retina displays, I assume multiply everything by 2?
My brain is getting cooked right now. I'm designing the mockup for iPhone 5 screen size.
Popular Answer
I read from the iOS human design guidelines it's 44 x 44 pt? Because the confusing thing is Apple is using pts instead of px, so the question is, how large should I make it in Photoshop? 44 pt = 44 px?
For non-Retina devices, 1 iOS point = 1 pixel.
For Retina devices, 1 iOS point = 2 pixels.
For Retina HD devices (iPhone 6 Plus only right now), 1 iOS point = 3 pixels.
So, 44×44pt means you’ll need assets at:
- 44×44px (1× scale, non-Retina, original iPhone etc).
- 88×88px (2× scale, Retina, iPhone 4, iPhone 6 etc).
- 132×132px (3× scale, Retina HD, iPhone 6 Plus).
But, 44pt is actually the height of the navigation bar, so you probably don’t want your icons that big. A good method for getting the right size: Take a screenshot of navigation bar icons that you think are the right size, and use that as your basis.