Cover-photo-2015-05-30_03_13_02__0000-30520150530-3-pxt03x
Marc Edwards

Marc Edwards

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

  • 464 stories
  • 1909 comments
  • 926 upvotes
  • Posted to What Monitor do You Use ?, Apr 27, 2017

    Now: 24-inch Apple Thunderbolt display.

    Some time in 2018: 27-inch Apple Retina Thunderbolt display.

    :D

    5 points
  • Posted to RGB or sRGB? , in reply to Erik Shaw , Apr 27, 2017

    If you’re using an sRGB 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:

    • RGB colour profile in Preferences: “Display”.
    • Document colour format: “RGB/8” or “RGB/16”.
    • Document colour profile: “Display”.
    • Export settings: Disable “Embed ICC profile”.

    Affinity Designer settings

    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’re using a Display P3 or non-sRGB display

    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:

    • RGB colour profile in Preferences: “sRGB IEC61966-2.1”.
    • Document colour format: “RGB/8” or “RGB/16”.
    • Document colour profile: “sRGB IEC61966-2.1”.
    • Export settings: Disable “Embed ICC profile”.

    Affinity Designer settings

    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. :)

    0 points
  • Posted to Is anyone still using CSS sprites or... ?, Apr 27, 2017

    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.

    0 points
  • Posted to How to design on Google’s Pixel XL?, in reply to Taylor Ling , Apr 26, 2017

    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! :)

    0 points
  • Posted to How to design on Google’s Pixel XL?, in reply to Lee Beckwith , Apr 26, 2017

    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.

    0 points
  • Posted to Airbnb's new open source library React Sketch.app, in reply to Jon Gold , Apr 26, 2017

    Ace work. Generated design docs are definitely part of the future.

    0 points
  • Posted to RGB or sRGB? , in reply to David Molanphy , Apr 25, 2017

    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.

    0 points
  • Posted to RGB or sRGB? , Apr 22, 2017

    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).

    10 points
  • Posted to Are we always going to name our retina files as @2x?, in reply to Simone Magurno , Apr 14, 2017

    I’d like that. Stopping somewhere around 3× seems smart, and you’re right about the iPhone Plus models. Hopefully this year resolves that.

    0 points
  • Posted to Are we always going to name our retina files as @2x?, in reply to Simone Magurno , Apr 13, 2017

    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.

    0 points
Load more comments