Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Posted by Noel Gonzalez
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points

How to convert 2x images to 3x images

Hello everyone,

I started my iOS app design for iPhone 6 (750x1334) I understand that this would be considered 2x. I have created all the assets in PNG format.

Now I need to convert my creative assets to 3x so they are iPhone 6 Plus friendly.

I have the original PSD file. Should I just scale the design to iPhone 6 Plus resolution (1242x2208) and export the creative assets again?

From my understanding the iPhone 6 creative assets would be compatible with the iPhone 5.

Any help would be greatly appreciated.

3 Answers

Alp Eren Can
Alp Eren Can
25,230 Points
Alp Eren Can
Alp Eren Can
25,230 Points

You should look at sizes of individual assets that you are going to use, not the entire design. Say, like a background image for a button: if it has 40x40 px size in the @2x, you should scale the original image to 60x60 px in size and export it as @3x.

Hope this helps.

Noel Gonzalez
seal-mask
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points
Noel Gonzalez
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points

Thanks for the reply Alp.

I under stand the following size rules (example): 1x = 20px, 2x 40px and 3x = 60px

Is there a way to export to 3x in photoshop cc 2015?

I was able to export all 2x files in PNG format via Files > Layers to Files

Thanks in advance

Noel Gonzalez
seal-mask
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points
Noel Gonzalez
.a{fill-rule:evenodd;}techdegree
Noel Gonzalez
Full Stack JavaScript Techdegree Student 5,130 Points

FYI

I found a solution to problem. Photoshop has an export option Generate > Image Assets

More info here https://helpx.adobe.com/photoshop/using/generate-assets-layers.html