Be nice. Or else.
Community Staff Founder at Bjango Joined over 4 years ago via an invitation from Christophe T. Marc has invited Matt Kelsh, Rene Ritchie, Dan V Peterson, Troy Mcilvena, Graham Clarke and 12 others, Jeremy Olson, Ramy M., Andrew Hart, Ricky Synnot, Aen Tan, Justin Velgos, Nik Fletcher, Rok Benedik, Nghia Nguyen, Jared Sinclair, Matt McDaniel, Elliot Jackson
Now: 24-inch Apple Thunderbolt display.
Some time in 2018: 27-inch Apple Retina Thunderbolt display.
If you want life to be easy, you can pretty much avoid colour management. It works as long as your display is sRGB (or very close to it), and as long as you’re exporting sRGB assets. If you’re building iOS, Android, macOS or web apps, you probably are.
That means the settings you need are:
The preferences setting doesn’t really matter. It’s just for new document creation. The document colour profile does matter though.
Some pundits will tell you this is a bad idea. If they do, their background is probably in print design. Don’t listen to them. This is a perfectly valid strategy, and it eliminates most of the common issues.
If you own a 5K iMac, a 2016 MacBook Pro, or are using a Display P3, AdobeRGB or some other kind of wide gamut display, you need to work a little differently. The settings you need are:
This means the document is assigned an sRGB profile, and what you see while editing will be converted from sRGB to your display’s profile. Note this may cause banding on the canvas that won’t be in the exported files.
I hope that helps. :)
I’m not in any current projects, but the method is still definitely valid. Just be careful when using SVG with sprite sheets — SVGs render to the final output size, and with fractional zooming, that can mean hover and other states that are set by position offsets won’t align.
tl;dr when using SVG sprite sheets, hover states and other states can move slightly. The solution is to use two sprite sheets, and place the elements at the same positions, and switch the sprite sheets for state.
Yep, keeping smaller devices in mind and starting with 360dp or 320pt wide is a great idea. That’s what I do as well.
Also, thanks for the kind words! :)
The device’s UI density is used to scale Android’s dp units to the screen pixels.
This means 1 dp will become 2.6 pixels on the Pixel. If you want to deal with dp units on your canvas when designing, you need to use a canvas that’s the screen res divided by 2.6. Dividing by 2.6 results in a fraction, so it has to be rounded up or down. It’s not as perfect as working with integer scaled displays, but I still think working at 1× is the best way to go.
Hopefully that makes the maths a bit clearer?
It’s worth noting that 1 dp becoming 2.6 pixels is a little more complex than noted above, when it comes to the final app running on the device — bitmap assets will be bitmap scaled down from the nearest larger size (probably 3×), and view sizes will be rounded so they align on a pixel boundary.
Ace work. Generated design docs are definitely part of the future.
In terms of saving PNGs, the best current approach is the same as before — just use Save for Web or Export As in Photoshop, or export as normal in Sketch.
But, the 2016 MacBook Pro and 5K iMacs do have wide gamut (Display P3) screens. They do complicate things a little. Design tools that are not colour managed will show wildly oversaturated colours (they’ll assume sRGB, but present the values in Display P3). In Photoshop, Illustrator and Affinity Designer, that’s fairly easy to work with — just set the document to use the sRGB colour space and everything should have the correct appearance.
Are you talking about saving PNGs used in iOS apps? Android apps? For the web? Or is the question more about general colour management and setup?
Actually embedding an ICC profile in your UI images won’t help much — if there’s no profile, iOS and Android treat them as sRGB. Web browser behaviour is a bit more complex, but Safari treats images with no profile as sRGB as well.
If you want to target Display P3 (as found on some new iOS devices), you will need to embed an ICC profile in your images though.
Sketch doesn’t embed ICC profiles in PNGs it saves. If you have “Save for web” turned on, it just includes a gamma chunk. If you turn “Save for web” off, it’ll just include an sRGB chunk (and no gamma info).
I’d like that. Stopping somewhere around 3× seems smart, and you’re right about the iPhone Plus models. Hopefully this year resolves that.
Yep, but what about 3×? That’s a common scale now. If you use 2× as your base, then 3× is 1.5 times 2×. And scaling by 1.5 means lots of blurry edges.
Far simpler and better to still work at 1×, so you can target 1×, 2×, 3×, 4× and 5× from the same base artwork. If you use 2× as your new base, things get a lot more difficult.