12 Replies
      Latest reply on Jan 20, 2017 7:11 PM by KMT
      discoveringmypath Level 1 Level 1 (0 points)

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

        • Re: What size images to create for universal background image.
          KMT Level 9 Level 9 (15,305 points)

               >- 5 different images

           

          So, no rotation, then?

            • Re: What size images to create for universal background image.
              discoveringmypath Level 1 Level 1 (0 points)

              The app that I'm working on will be landscape only. I got the 5 different dimensions from the site I referenced, I'm not sure if that is correct approach or not, kind of why I'm asking.

                • Re: What size images to create for universal background image.
                  KMT Level 9 Level 9 (15,305 points)

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

                   

                  I believe it does. Seen this SO thread?

                   

                  http://stackoverflow.com/questions/27049937/how-to-set-a-background-image-in-xcode-using-swift

                    • Re: What size images to create for universal background image.
                      discoveringmypath Level 1 Level 1 (0 points)

                      I'm not concerned with how to call the images from code. I'm concerned with with how many images I need, what sizes, what do I name them, and how do I implement them in xcode.

                       

                      When I click new image set from the assets.xcassets file, I get 3 slots 1x, 2x, 3x. So I don't know how to go implementing a background for all devices using 3 slots...

                       

                      thanks for the reference. I'm not able to understand how it works from that thread...

                        • Re: What size images to create for universal background image.
                          KMT Level 9 Level 9 (15,305 points)

                              >I'm not concerned with how to call the images from code.

                           

                          Didn't furnish that link for code, but you should be...hint: iOS IS case-sensitive. See the 3rd reply w/sizes & using asset catalog(s).

                           

                          Naming involves using the right suffix and again, paying attention to the fact that iOS is case sensitive.

                           

                          Examples:

                          -  "bkg01@2x.png"

                          -  "bkg01@3x.png"

                           

                           

                          As for '3 slots', as I recall, when you add multiple (properly named) images more slots will appear as needed.

                            • Re: What size images to create for universal background image.
                              discoveringmypath Level 1 Level 1 (0 points)

                              Just when I think I'm getting a grasp of this, I get lost again.

                               

                              So here is my unofficial chart: (using portrait sizes)

                               

                              Devices                                  image size          file name

                              iphone 4s (@2x)                       640 x 960            ???

                              iphone 5 (@???x)                     640 x 1136           ???

                              iphone 6/7 (@2x)                      750 x 1334          background@2x.png

                              iphone 6+/7+ (@3x)                  1242 x 2208        background@3x.png

                              iphone SE (@???x)                   640 x 1136          ???

                              ipad2 / ipad mini (@1x)              768 x 1024          ???

                              ipad3+ / ipad mini 2+ (@???x)   1536 x 2048         ???

                              ipad pro (@???x)                       2048 x 2732        ???

                               

                               

                              So If I want to cover all my bases for the majority of iphone devices, and if it was portrait only, I would need 8 images. Is there a naming convention for the other images in the chart?

                               

                              This seems like a lot of work just for one image on all devices. I saw that you could do ~iphone and ~ipad and those would work for all iphone devices and all ipad devices.

                               

                              You have been helpful, I'm still on the hunt for full understanding.

                                • Re: What size images to create for universal background image.
                                  KMT Level 9 Level 9 (15,305 points)

                                  I would keep names short, all lower case and include a reference to their use.

                                   

                                  The convention in your example is all about their suffix. File names are important for launch images and icons, tho.

                                   

                                  Moving on...

                                  image1.png (= 1x, non-retina)

                                  image1@2x.png (=2x scale)

                                  image1@3x.png (=3x scale)

                                   

                                  Perhaps put the size in the name:

                                  750x1334@2x.png

                                  1242x2208@3x.png

                                   

                                  ...that way same sized images are shared between devices - don't bother with more than you otherwise need (duplicates).

                                   

                                       > I saw that you could do ~iphone and ~ipad

                                   

                                  That may be the legacy (icon) naming mentioned here - not sure I would get creative w/it today: https://developer.apple.com/library/content/qa/qa1686/_index.html

                                   

                                  I think the reason Apple stopped listing which-for-which everything sizes is because of the routine additions to the  product line...

                                   

                                  Have you worked thru icons and launchimages yet? Do the math 

                                   

                                  -=-

                                  For those contemplating scaling as a means to reduce image count, see https://forums.developer.apple.com/thread/72112

                                    • Re: What size images to create for universal background image.
                                      discoveringmypath Level 1 Level 1 (0 points)
                                      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
                                      • Re: What size images to create for universal background image.
                                        discoveringmypath Level 1 Level 1 (0 points)

                                        So I notice that all ipads have the same aspect ratio, and all iphones have the same aspect ratio as well. This would mean that if an image scales down, it should look pretty good.

                                         

                                        With that in mind, does this sound logical:

                                         

                                        I can make 3 images:

                                        ipad @2x image     size: 2048x2732   all ipads would use this image

                                        iphone @2x image  size: 750x1334    all iphones would use this, except for the 3x models

                                        iphone @3x image  size: 1242.2208   the iphone 6+ and 7+ would use this image

                                         

                                        I'm not worried about non-retina displays, because who really uses those anymore.

                                         

                                        Is this the standard way that someone would use for making an image that would serve as the background image for an app?

                                         

                                        with this logic I can do the same with all other images as well.

                                          • Re: What size images to create for universal background image.
                                            KMT Level 9 Level 9 (15,305 points)

                                            Just to be clear:

                                             

                                            @3x - Retina HD (model list as applies) - sizes used 2/3x may vary, since we basically have non-retina, retina and retina hd, but those 3 represent more than just 3 devices, of course.

                                             

                                                 >I'm not worried about non-retina displays, because who really uses those anymore.

                                             

                                            App Review does, when your app is iPhone-only so that your UI can be checked via 1x/2x emulation mode. Universal apps get a bye on this, I think.

                                             

                                                >Is this the standard way

                                             

                                            I guess your summary is about as 'standard' as the average dev could hope to apply at this point in time for static image use via the bundle, yes.

                                             

                                            Now the question is what is your workflow for generating the proper image, size, dpi and resolution for each example?

                                              • Re: What size images to create for universal background image.
                                                discoveringmypath Level 1 Level 1 (0 points)

                                                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?

                              • Re: What size images to create for universal background image.
                                KMT Level 9 Level 9 (15,305 points)

                                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