Re: What size images to create for universal background image.

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!!!

I tried the naming convention as you mentioned with the resolutions, but assets.xcassets doesn't recognize it.

The best I can do is have a set of 1x,2x,3x for iphone and a set for ipad. But that limits me. Not the worst idea to make just those sizes. but the image will have to be downsized to fit the appropriate device. I'm not sure if that is the standard technique for a background image.

I want to do my best to not have to use code to make things easier, but I don't know if that is possible in xcode 8 within th assets file

I didn't know the app review would matter, I'll have to look into that to be sure on universal apps. If not I could implement another image. As far as workflow goes, I'm not exactly experienced with graphic design and best practices when it comes to constructing images of different ratios... A possibility is to create an image that is bigger than the biggest image I need without regard to ratio... then crop it to the 2 image ratios I need. They won't be exactly the same, but fairly close... from there I can scale down as needed... Again, im not that experienced in this field so it would take some practice... I'm more of the programmer, definitely in need of a graphics guy. But I do want to develop enough graphic design skills to crank out prototypes at least... What do you think? Am I on the right track?

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.

More Like This

Incoming Links

This site contains user submitted content, comments and opinions and is for informational purposes only. Apple disclaims any and all liability for the acts, omissions and conduct of any third parties in connection with or related to your use of the site. All postings and use of the content on this site are subject to the Apple Developer Forums Participation Agreement.