I have a PNG picture which I should use in my iPhone application, but first of all, I have to give it the dimensions of an iPhone 4 retina screen. Does any one know what could it be its dimensions or how to do that?
The retina display on the iPhone 4 has the double amount of pixels than that of an older iPhone. So the complete size of an iPhone 4 screen in pixels is 640x960.
In photoshop you can quickly resize any image by changing the image size property from the Image menu. If you don't want to lose quality I suggest you start with all retina images and halve them for the non retina displays. Doing it the opposite way will decrease your quality.
If you want to use an image designed for the iPhone 4 retina display you'll want to have both pictures, one for the normal iPhone screen (320x480) and one for the retina images, in your resource's folder of your Xcode project. Use the same name for those images but append "#2x" at the end of the retina images.
So if you have a "background.png" it will become "background#2x.png" and iOS will be smart enough to use the correct image for the correct type of screen.
At 72 dpi, it should be 640px by 960px.
iPhone4 screen resolution is 960x640
Related
I am completely new for Image assets in xcode. I am creating a sample project, In that I have story screen, It contains the UIPageViewController with images. I added 320*480px,750*1134px,1242*2208px images. In portrait modeworking fine, But the problem is, If I rotate the device from stretching to landscape the image is stretching. I tried with xcode image assets options. I saw different sizes(Refer image) while selecting the width and height like Any&compact, Any&Regular etc. I am not able to understand what are the size to add at 1*,2*,3*.
More details:
project supported version is iOS >=8. support iPhone and iPad both landscape and portrait.
Do we need to add all these images.
If we use iPhone and iPad, Why we need to use width and height attributes.
Can you help me.
Any one explain the below image and it's sizes.
I am creating an iPhone game in sprite kit. After weeks of research, I am still having trouble understanding how to properly size and implement sprites for each screen size.
I understand that these suffixes determine which image to use (depending on the aspect ratio of the screen)
#2x - 4s,5,6
#3x - 6+
I have read and tooled with different scaling modes in my view controller but had no luck and difficulty understanding them.
If I provide a background of 750x1136 (pixels) as the #2x, it will perfectly fit the iphone 6 but will be too big for the iphone 5. If scaling is the answer, how would "sprite kit" know I provided an image for the iphone 5 that I want scaled up for the 6, or vice versa? Is this a build setting? Same for characters, I need iphone 6 sprites to be proportionally bigger than the iphone 5 sprites.
How would I most appropriately size and scale sprites for the different devices? (easier to discuss in terms of the backgrounds that should be the exact size of the screen)
I am expecting to create one set of sprites for each aspect ratio using the resolution of the biggest screen size. Ex. #2x designed for iPhone 6 and scaled down for the 5 and 4s.
The 3x, 2x and normal images are not really intended to be manipulated that way. The three images should be essentially the same image with the 3x having exactly 3 times the pixel dimensions of the normal, the 2x having double dimensions etc.
If you need to scale the scene to better fit the format of a particular device, you may need to scale that when you create the scene, the way Apple sample code does:
var viewSize = self.view.bounds.size
// On iPhone/iPod touch we want to see a similar amount of the scene as on iPad.
// So, we set the size of the scene to be double the size of the view, which is
// the whole screen, 3.5- or 4- inch. This effectively scales the scene to 50%.
if UIDevice.currentDevice().userInterfaceIdiom == .Phone {
viewSize.height *= 2
viewSize.width *= 2
}
Currently I am designing the UITabbar of my App. I created a Photoshop layout for the Tabbar, it is 84px high and 640px wide. Is it the right way to create one image with the size of 84x640 and one with the size 320x42. And then name the larger image #2x.png.
I am struggling at this point, because when I log the width of the UITabbar it says 320.00, but I am using the Iphone 3.5inch retina simulator.
Any tips for me to realize the tabbar?
Yes. You should have two images. One for normal displays and one for retina.
Xcode works with point, not pixels, so the width will always be 320.
In the case of retina display one point is 2x2 pixels and in normal mode it is 1x1.
by the way, I think the height for the tab bar should be 320x49 for normal and 640x98 for retina.
the retina image should have the same name as the normal one with the #2x at the end
Example:
normal: image.png
retina: image#2x.png
You confused "Points" with "Pixels". The Points are resolution independent. You can normally check your scale factor by calling contentScaleFactor on your UIView.
It should say 2.0 for retina, and 1.0 for non retina.
What size should an application icon and menu bar icon for OS X be?
I can deal with small resolution displays but what about Retina - does an icon displayed on the menu bar (e.g. 20 x 20 ) will be smaller or blurred on a new MacBook Pro with Retina display?
I reckon that the Application icon will be scaled, so if I'll prepare twice larger than regular it should be OK on Retina.
I found an excellent guide for iOS development with sizes specification but I can't find similar size specifications for OS X.
NSStatusBar icons (i.e. Menu bar icons) are different from regular app icons. I have not been able to find an NSStatusBar official icon guideline, but I have to believe that the Toolbar Icon guideline for buttons is pretty close. It suggests:
Create icons that measure no more than 19x19 pixels.
Make the outline sharp and clear.
Use a straight-on perspective.
Use black (add transparency only as necessary to suggest
dimensionality).
Use anti-aliasing.
Use the PDF format.
Make sure the
image is visually centered in the control (note that visually
centered might not be the same as mathematically centered).
In testing, I've found:
NSStatusBar seems to look best with something 18 pixels high, or less. The systemStatusBar has a thickness of 22.
While it lists PDF format, I've been using png without issue.
If you want your icon to be white on blue when it's selected, you need to provide the alternateImage as a separate white version of your icon.
Code sample:
myStatusItem = [[NSStatusBar systemStatusBar]statusItemWithLength:NSSquareStatusItemLength];
NSImage *statusImage = [NSImage imageNamed:#"Status.png"];
[myStatusItem setImage:statusImage];
NSImage *altStatusImage = [NSImage imageNamed:#"StatusHighlighted"];
[myStatusItem setAlternateImage:altStatusImage];
[myStatusItem setHighlightMode:YES];
[myStatusItem setMenu:self.myStatusMenu];
To make your menu item support Retina displays, Dark Mode and different states (e.g. pressed)
Create two PNG images sized 16x16 and 32x32 pixels
Create a new image asset in Xcode with Render As set to Template Image and add your images for 1x and 2x
Initialize your NSImage from the image asset without changing its size: NSImage(named: "Example")
http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/Intro/Intro.html#//apple_ref/doc/uid/TP30000894-TP6
And:
http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html
Follow these steps and you will get a perfectly sharp status bar Icon for retina
Open a png file of your Icon in photoshop it should be larger than 88px x 88px
go to menu, Image, Image size
set resolution to 350
set size to 88px x 88px (pixels)
save image as png
add it xcode
adding on to Michael's answer apple are now requiring all the way up to 1024x1024px icons due to retina displays.
http://www.cultofmac.com/179738/apple-now-requires-high-res-1024x1024-icons-for-every-mac-os-x-app/
The maximum size for the app icon should be 1024 x 1024.
And you have to create both regular and retina resolution icons for 16 x 16, 32 x 32, 128 x 128, 256 x 256, 512 x 512 & 1024 x 1024.
The details for which you can find in the "High Resolution Guidelines for OS X" document from Apple.
The images on a few UIButtons are getting scaled down way smaller on the iPhone 4 compared to how the show up on interface builder, the iPhone simulator or an iPhone 3G.
How can I ensure the button images stay the same size as they appear in IB?
Do you have two images, e.g. one for 320*480 and one for 640*960 screen resolution? E.G one file named myImage.png and one named myImage#2x.png?