4 Replies Latest reply on Jan 15, 2015 9:47 AM by Conrad C

    iPhone app screen size set up in Photoshop

    bobbyb777

      I'm designing an iPhone app in Photoshop. I want to work in 2X size.

       

      What size should I set the screen up in Photoshop to be able to export UI images and icons accurately?

       

      Should I use an iPhone 5 or iPhone 6 screensize?

       

      These are both 2X png but screensizes are different, therefore UI exported for the @2X size will differ depending on which screensize I first decide to start with.

        • 1. Re: iPhone app screen size set up in Photoshop
          JJMack Most Valuable Participant

          IMO you should be working on actual screen size images. If you want to support two size screens you should create two images sizes so that UI will be appropriate on each phone. .

           

          I don't use a cell phone but are there not two iPhone 6 with different screen sizes do they display the same number of pixels.  I don't know I have not checked.

           

          My guess is they have the same aspect ratio but different resolutions and number of pixels. So if the aspect ratio are the same you just need to handle the and different number pixels the resolution will not be that different  so interpolating  down a image create for the one that displays more pixels to the number of pixels of the smaller screen will not distort the image for the have the same aspect ratio.  If the Aspect ratios are different you may need to crop then interpolate.

          • 3. Re: iPhone app screen size set up in Photoshop
            JJMack Most Valuable Participant

            I just checked there are two size iPhone 6.  The the both have an 16:9 aspect ratio the smaller one in very similar to the iPhone 5's display 16:9 aspect ratio display. Has the same resolution but fewer pixels because of the differences ind screen size.  The large iPhone 16:9 display has a much higher resolution however you will not actually see this for the small displays resolution is 326dpi and the large one has a 401dpi resolution.   The human eye will not see the difference in resolution without using a magnifying glass.  There may be a difference in color capabilities.

            • 4. Re: iPhone app screen size set up in Photoshop
              Conrad C Adobe Community Professional & MVP

              If you choose File > New and choose the Mobile App Design preset, you'll find the Size menu already lists most recent iPhone screen sizes including the 6 and 6 Plus.

               

              Mylenium's link is very helpful; if you go there and go to Icon and Image Sizes there's a table of dimensions for all of those things.

               

              If you have Photoshop CC 2014, you can set up Generator and Extract Assets to export layers (e.g. button designs) to multiple pixel dimensions automatically. That will be a lot easier and faster than manually sizing/cropping/exporting.