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

Marc Edwards

Community Staff Founder at Bjango Joined almost 5 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

  • 482 stories
  • 2048 comments
  • 1003 upvotes
  • Posted to Do you export images in all sizes for a mobile design?, in reply to Vlad Danilov , Nov 23, 2017

    Feelings aside, simple shapes are rendered identical when comparing PDF and PNG.

    Yep. Well, identical if you’re comparing Core Graphics shapes with Core Graphics shapes (things exported in Ps, Ai, AD will look different, Sketch will be the same, probably). My main concern is that there is no benefit in using PDFs, except designers being lazy. We may as well call it out for what it is — anyone willing to risk the quality of their work because they don’t want to turn on some exporting options is being lazy. The downside is shipping assets that look bad, and you won’t know unless you carefully test all densities in the simulator or on device.

    Why break such a robust process with PNGs, but introducing issues that often can’t be predicted ahead of time? Most designers don’t know the limitations of the PDF spec, and they probably won’t know which features are rendered to bitmaps by their design tool when exporting PDFs. The simple and better solution is to never use PDFs. You don’t gain anything in terms of app bundle size and launch time, and you certainly don’t gain quality.

    Asset Catalogs have pretty straightforward structure with a few quirks, nothing that can’t be implemented in design tools

    Yep.

    But I’m absolutely against the decision to force proprietary formats in Asset Catalogs.

    Yep.

    I honestly do like vector drawables though. They are exactly what’s needed, and nothing more, in a good format.

    0 points
  • Posted to Do you export images in all sizes for a mobile design?, in reply to Vlad Danilov , Nov 23, 2017

    They are in fact recommended by Apple

    Since when is that a definitive reason for anything. :P

    Beware that Photoshop PDF export tends to rasterize many features, e.g. layer fills (but not the corresponding vector masks).

    All the tools I’ve tested rasterise lots of features designers might use. The issue is more about the PDF format than Photoshop itself.

    With App Thinning introduced in 2015, Xcode and App Store effectively decide what formats and sizes will be send to a device. Standalone assets are currently missing all these benefits, and rarely used by top apps.

    Yep, I get all that. Asset Catalogs have so many other maintenance issues though. They’re definitely not a clear win. Even if you do use Asset Catalogs, I’d recommend using PNGs with them, and not PDFs. PDFs are terrible.

    0 points
  • Posted to Do you export images in all sizes for a mobile design?, in reply to Nick Terry , Nov 23, 2017

    The issue is that it may be fine for some assets, but not others, and you may not notice. There’s no disadvantage in using PNG workflow vs PDFs, but there are disadvantages in using PDFs.

    0 points
  • Posted to Do you export images in all sizes for a mobile design?, in reply to Nick Terry , Nov 22, 2017

    Please don’t use PDFs for iOS assets. There’s so many issues with them.

    1 point
  • Posted to Do you export images in all sizes for a mobile design?, Nov 22, 2017

    Yes, you should export all required sizes, and most of the time your assets should be bitmap images.

    For iOS, that means 1×, 2×, and 3× PNGs. For Android, that means 1×, 1.5×, 2×, 3×, and 4× PNGs or WebP images.

    Yes, it can mean your images take up a bit of space overall. Where possible, avoid images with really big dimensions — they’re huge files at higher screen densities. It’s not just download times that are impacted, but also app launch time, the amount of memory used, and the amount of disk space required.

    Android

    Android’s vector drawable format is good, when you can use it. Please note that it’s only suitable for some types of artwork, and you need to be a little careful on Android versions targeted, and drawing performance.

    If you can, WebP is a more optimal format than PNG, so that should be used.

    If you want, you can probably skip over the 1.5× assets, as not many devices use them. It could be worth checking with your target devices though.

    You should definitely create a Android adaptive app icon, too. That means you’ll need a normal and adaptive app icon.

    iOS

    Don’t use PDFs. If you need or want to draw vector icons in realtime, PaintCode is a better option, because it means you’re actually drawing the artwork realtime (PDFs just render a bunch of PNGs when building the app, and offer pretty much no advantage).

    You can optimise your PNG images, if you’d like. But, Xcode will recompress all your images, unless you tell it not to. That means your compression efforts will be lost unless you change your Xcode settings for the project. If you’re building Mac apps, and your 1× images end up in a different PNG format due to compression (greyscale 8bpc PNG vs RGBA 8bpc PNG etc), then macOS can use the wrong PNG to render. That means you can get a scaled down 2× image on a 1× display. It looks bad.

    4 points
  • Posted to Do you export images in all sizes for a mobile design?, in reply to Jan Zheng , Nov 22, 2017

    You need to be super careful of using image optimisation. ImageOptim and others can be really good, but there are some important things to keep in mind:

    • Xcode will recompress images using its own flavour of PNGCrush. If you want to use ImageOptim, you must turn off Xcode’s compression (more info here).
    • If you’re building Mac apps, and your 1× images end up in a different PNG format due to compression (greyscale 8bpc PNG vs RGBA 8bpc PNG etc), then macOS can use the wrong PNG to render. That means you can get a scaled down 2× image on a 1× display. It looks bad.
    2 points
  • Posted to Do you export images in all sizes for a mobile design?, in reply to Cihad Turhan , Nov 22, 2017

    PDFs don’t natively support layer styling features, so things like inner shadows, shadows and most gradients get rendered as a 1× bitmap in the PDF. The end result is 1×, 2×, 3× assets generated from 1× bitmap images.

    Don’t use PDFs if you care about the quality of your work.

    2 points
  • Posted to Do you export images in all sizes for a mobile design?, in reply to Andrew Ckor , Nov 22, 2017

    technically you don't save a big mount of app size

    Using PDFs for iOS assets can make them bigger, and you can cause some significant quality losses. My advice would be to never use PDFs for iOS assets (I’ve written more about PDF assets and why they’re bad.

    Android supports SVG for vector icons.

    Android Vector Drawables are really good, but not without their caveats. You need to be extremely cautious about how you create the artwork, which Android versions you target, and the code used to render them. I gave a talk recently on the topic with a smart developer: Build Better Android Apps with Vector Assets

    It’s a complex topic. I’m not here to pimp my stuff, but we did tons of research for the talk, and it surprised me how complex the topic is.

    From the artwork side, there’s some important things to remember.

    • Only certain styles of artwork will be okay (solid filled glyphs).
    • Create your artwork using a 1dp grid.
    • Flatten everything (combine all boolean ops so the paths are optimised).
    • All text needs to be outlined (Vector Drawables don’t support text).
    • Remove redundant points.

    Gradients are supported in Vector Drawables, but that’s very much a new feature. Vector Drawables are a small subset of SVG, and they do not have all of the SVG features (thankfully!). You also need to be very cautious in terms of performance — icons need to be fairly simple paths and small render sizes, in places where render time is critical.

    1 point
  • Posted to 5 international cities with up-and-coming UI/UX design communities, in reply to Suganth S , Nov 22, 2017

    \(^▽^)/

    0 points
  • Posted to Presentation Mode - One click to hide desktop icons, disable notifications and hide active apps..., in reply to Zeh Fernandes , Nov 21, 2017

    Oh, that helps a lot. Thanks!

    0 points
Load more comments