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

Design Mobile App Design for iOS Designing our App Designing for Retina Display

Francesco Belvedere
Francesco Belvedere
15,206 Points

Designing for @2x and @3x

I love the bit on how to design for retina devices.

But now we have devices that are 2x, and even 3x and beyond — not to mention our graphics still need to remain sharp for @1x devices too.

What is the best approach to designing assets for all of these pixel densities — especially the part where the instructor says that @2x assets need to be divisible by 2? How do we achieve this kind of divisibility of assets so they snap to @1x, @2x and @3x grids and stay sharp on all devices.

Do we need to be sure our assets are divisible by 1, 2 and 3?

F //

3 Answers

John Hill
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
John Hill
Front End Web Development Techdegree Graduate 35,236 Points

Hey, so not necessarily divisible by 1, 2, and 3; rather, multiples in 2 and 3 of the initial file size. For example, an icon at 77px X 77px isn't divisible by 2 or 3, but you would want to export it at 2x (154px X 154px) and 3x (231px X 231px).

If you can figure out the margins of the app or website, then you can custom your initial 1x dimensions to fit right in with where it's going to be on the screen.

Check out Apple's iOS Human Interface Guide and Android's Design Guide for recommendations on certain dimensions. The rec'd file format is PNG, non-interlaced and remember DPI doesn't matter for designing web assets, so everything could be kept at 72dpi when you setup your document.

And so yeah, if you find yourself designing for an Android, instead of 1, 2, and 3x, you'll need 1, 1.5, 2, 3, and 4x (according to this article).

In a nutshell: design in vector, scale as needed, export in PNG, stay current on recommended dimensions and resolutions.

John Hill
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
John Hill
Front End Web Development Techdegree Graduate 35,236 Points

Affinity Designer. $50 in the app store. Has this really cool export module that makes exporting your images in 2x and 3x as easy as a clicking a checkbox.

Francesco Belvedere
Francesco Belvedere
15,206 Points

I guess the meat-and-potatoes of my question is the final line: "Do we need to be sure our assets are divisible by 1, 2 and 3?"

From what I understand if they are not easily divisible by the grid they are being placed on then they get dithered and lose some of the pixel-perfectness. How do we design so that they stay sharp no matter how they are exported, or are some resolutions just going to be sharper than others?

This article I found by Bjango is pretty good: https://bjango.com/articles/everythingisagrid/

========== As for export options:

I was monkey-ing around with the new Sketch and I think it can export multiple resolutions and sizes as well now.

I have been keeping an eye on Affinity's apps. They sound super cool and are getting some great reviews. I might look into them, but at this point there are too many options with apps. Photoshop is getting the hint and there has been slight improvements with the latest CC update.

The time I spend learning and re-learning apps is starting to get counter-productive. I might just stick with Adobe at this point as I have a subscription.

F //