Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS asset sizes and design method

The code for my first iOS 2D game is written. Now, when it comes to assets I feel lost. One reason is the feeling of imperfection due to outdated articles. I need to know the image sizes, to begin designing. The device orientation of the game is portrait only. The status bar is hidden (game). The devices is universal, primary iPhone but I have of course no objections if the sizes are well with iPads too. What is the best image size to start designing for this intention?

If I did not have your help, I would have started creating the background (fullscreen) image at 1242 x 2208 and 401ppi. Then, scale the final image down in Photoshop to 750 x 1334 (4,7“) and to 640 x 1136 (4“). Am I right with my method? Especially, is it best to start with 1242 x 2208 or is 1080 x 1920 fine?

like image 662
Maximilian Fuchs Avatar asked Sep 28 '16 01:09

Maximilian Fuchs


People also ask

What is 1x 2x and 3x in iOS?

1x, 2x, and 3x images allow developers and Apple to optimize app presentation based on the user's device, whether an entry-level iPhone or the most expensive iPad. Conceptually, 1x, 2x, and 3x images are the same image -- simply at different sizes.

What size image is best for iPhone?

The print size you choose for your iPhone photos will depend on what you want to use the photo for. For greeting cards, sharing with friends, and use in photo albums, 4 x 6 is the most common size. Most iPhone photos have about a 3:2 ratio, which means you will have to crop a bit off of one edge.

What is assets in iOS?

The Assets. An asset catalog, simply put, is a single folder in Xcode that you use to organize your app's images, icons, colors, and more. Instead of adding individual images to Xcode's file organizer, you add assets neatly organized in a single catalog.

How do I make assets Xcassets?

Create a new file (⌘N) and select the Asset Catalog template in the iOS – Resource panel. Choose a name, select the targets that should include the catalog, and click “Create.” Select the new *. xcassets file in the project explorer.


1 Answers

iPhone 5:
Display Size: 4 in
Screen Size: 320 x 568 points
Rendered Pixels: 640 x 1136 (@2x)
Pixels Per Inch (PPI): 326
Browser Size Portrait: 320 x 460 px (320 x 528* / 320 x 548**)

iPhone 6/7:
Display Size: 4.7 in
Screen Size: 375 x 667 points
Rendered Pixels: 750 x 1334 (@2x)
Pixels Per Inch (PPI): 326
Browser Size Portrait: 375 x 559 px (375 x 627* / 375 x 647**)

iPhone 6/7 Plus:
Display Size: 5.5 in
Screen Size: 414 x 736 points
Rendered Pixels: 1242 x 2208 (@3x)
Pixels Per Inch (PPI): 401
Browser Size Portrait: 414 x 628 px(414 x 696* / 414 x 716**)

So I would go for the rendered pixels sizes for the images.

like image 81
Rashwan L Avatar answered Nov 03 '22 01:11

Rashwan L