Photoshop Question posted in
The official user guide can be found here.

How to cut iOS8 assets from a PSD designed at 1242px by 2208px – Photoshop

The designers on a project I am responsible for developing (one of my first iOS projects) designed the app using a Photoshop canvas set at 1242×2208 pixels, which is the number of pixels that the iPhone 6+ uses. I’ve scoured the internet and am just getting more and more confused by all the conversions for 1x, 2x, 3x and to further the confusion, apple downsizes to 1080×1920.

Anyways, how do I cut the assets correctly for @1x, @2x, @3x? When I crop the element I want, I save it out at 3x. But what do I divide by to get the 2x and 1x versions?

Here’s secondary question and a hypothetical situation: There is a button that is designed to be the full width of the screen in portrait, so the designer made it 1242×100. If I save it out at 3x, then scale it down for 2 and 1x, will this button fit all the different screen sizes all the way down to iPhone 4/4s, which has a smaller pixel dimension and different aspect ratio?

Confused, any help appreciated!

Tags:

3

Answers


  1. 0

    Indeed the Retina sizes are confusing, but this is what auto resize is used for in Xcode.

    But The API which Apple give us, chooses the @3, @2 and 1 sizes by itself. There isn’t anything that the developer/designer needs to do but provide all three images. An example is:

    ObjC:

    + (NSImage *)imageNamed:(NSString *)name]

    Swift: 

    init?(named name: String) -> NSImage

    Would just use the name of the image without the @ etc… So, [email protected] [email protected] myImageName.png would just be referred to as “myImageName”

    The API handles the rest 🙂

    Login or Signup to reply.
  2. 0

    I have had the same problem. What I did was, after cutting all images for iPhone 6+(@3x), I just resized the PSD to iPhone 5’s width which is 640px, (height would be 1138 px if you keep aspect ratio) and cut @2x images. For the 1x images, again resized to 320px width.

    Just, iPhone 6+, iPhone 6 and iPhone 5 have almost same aspect ratio.

    Good Luck!

    Login or Signup to reply.
  3. 0

    Example:
    If you original artwork is 960px by 1704px, just save you image including “@3x” 

    [email protected]   // (960  x 1704)

    Then you have to resize it to 640×1136 and save including “2x”

    [email protected]   // (640x1136)

    And then you have to resize it to 320×568 and save as 1x

    image.png      // (320x568)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search