What size images to create for universal background image.

Hello,


I'm new to the forum and to iOS development. I'm working on an app and I've gotten to the point where I want to start designing some of the images for backgrounds, buttons, etc...


My question is how big and how many images will I need to make in order to make a background image that will appear nearly the same across all iOS devices?


My app is in landscape. I pulled up a reference website iosres.com and it lists out all the resolutions for different devices.


It would appear that if I wanted to make a background image to fit all these categories I would need the following:

640 x 1136

750 x 1334

1242 x 2208

1536 x 2048

2048 x 2732


- 5 different images


This is the resolution for all devices except for the watch (which I'm not developing for).


I'm not sure how to implement this, and also how this plays with the 1x, 2x, and 3x image variations that we would use within xcode.



I have been searching for good tutorials on this, but I'm lost because everything seems to reference the 1x, 2x, 3x. I get what that stands for, but it doesn't seem to apply when it comes to the background image. Also say I want a button to look the same across all devices. I want it to be 0.3 x the width of devices an 0.2 x the height of the device. Can I use the 1x,2x,3x variations to cover this. It doesn't seem like it based off the 5 different resolutions that I listed above.


I'm new to this and I accept any kind of feedback that I can get. I really love the framework that Apple has with iOS development and I look forward to getting some apps on the play store at some point. Thanks for any help!!!

Post not yet marked as solved Up vote post of discoveringmypath Down vote post of discoveringmypath
22k views
Posted by
discoveringmypath
Reply
Add a Comment

Replies

>- 5 different images


So, no rotation, then?

Posted by
KMT
Up vote reply of KMT Down vote reply of KMT
Add a Comment

I start with the largest (proofed) image, then resize down, keeping the dpi constant (I don't crop, but that's when I want the large image to appear the same regardless of device/scale, etc.).


I've used GraphicConverter for my dev work for years now (GC's batching tools are comprehensive and easy to configure, etc.), also Preview (great for a quick resize/resolution change/check - very reliable) - check out offerings via the mac app store, as an example. Some can batch icons to correct sizes and save tons of work. If you lean towards PhotoShop, be careful - it's not that iOS savvy without the right plug-ins, I think.


Experiment with a sample image or two to get your process worked out, then device test to confirm they look correct, then add the rest to the project but only once you have reliable assets. Don't get ahead of yourself/the process.


Resist the urge to juggle images once they've been added to the project. Don't change an image name* (in or outside of Xcode), or replace an existing image with the same name (especially outside of Xcode via the Finder) - Xcode loves to hang on to old/indexed info, and if you're not careful, you can make a legitimate change that doesn't seem to work and bamm....wash/rinse/repeat until you do nothing but get worn out chasing your tail.


If you find an image isn't what you want, delete it via Xcode's Resource navigator (confirm to move to trash)**, then drag/drop the next try, from the Finder, into Xcode's Resource window.


My opinion is that a good dev has at least basic image editing skills - more tools in the box, etc. and makes you easier to work alongside/explain things to should you bring an expert in later.


*As I tried to point out before, create a naming scheme that is consistent, lower case, not lengthy and helps to identify image purpose so you don't have to head scratch next year when you've been away from the project.


**If you make an image change and it seems to fail/not take, perform an option-clean build folder to force Xcode to out the old and in the new. Hold the option key, use the Product menu, choose 'clean build folder' (no just a simple clean).


Take your time to create a valid workflow that fits your style first...it will pay off later.


Good luck.


Ken

Posted by
KMT
Up vote reply of KMT Down vote reply of KMT
Add a Comment