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
Francesco Belvedere
15,206 PointsDesigning 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
Front End Web Development Techdegree Graduate 35,236 PointsHey, 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
Front End Web Development Techdegree Graduate 35,236 PointsAffinity 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
15,206 PointsI 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 //