Product Design

Get Your Assets In Line and Your PSDs In Order

OMG. There are so many screen sizes now.

Not to worry though. This is no big deal and I’m here to guide you.

Your keys to sanity will be setting up a PSD and using the right tools to make your life easier. in case you missed it, yes, I did say PSD. And for those of you that use Sketch, or have considered it, look out for my upcoming post comparing the two design tools. It pits Photoshop CC 2015 against Sketch 3 in a fight to the designer’s death. (Stress induced. Obviously.)

Set up your PSD in points

Using points as a unit of measure has become a source of confusion and relief here at WillowTree. At first it’s difficult to wrap your head around all of the resolutions, pixels and densities. But once you begin using points, everything from font sizes, scale, padding, and positioning all match up with what the developers use or need from us, and life is good.

Below is a quick-start guide you can use to set up your Photoshop document or Artboard:

  1. Switch your Rulers and Type measurements to use points instead of inches or pixels. You can do this by going to Preferences > Units & Rulers.
  2. Setup your PSD (or Artboard, if using CC 2015) using the sizes below: blog-post-image assets-in-line MH-488x161@2x

Okay, I designed in points, now what?

Okay, let’s get to exporting. Internally, we use a tool called PNG Express. It’s rather amazing (and no they didn’t sponsor us to post this). I’ve even seen designers import Sketch designs to Photoshop simply to use this extension. Using PNG Express, we can simply name layer groups, or layers, something like “PNG:img_superawesomegraphic” and it will export at all of the resolutions that you choose, based on the platform you’re designing for. If you’re designing for iOS, choose 200% as your starting point, and if you’re designing for Android choose 300%. To explain, you’re designing at “@2x” resolution on iOS. A resolution of 144 is twice that of 72 (which is standard for non-retina screen resolution).

*Note: Even if you didn’t design in points, you can always switch your units over to the settings above and use them to size assets and specs for developers.

*Tip: Size your assets in even numbers that are divisible by 3. Why? It allows the asset to scale in full-point/pixel increments at time of export so you don’t have to deal with any weird banding or clipping. Fine lines also look fuzzy if they’re scaled improperly.

If you’re confused, just remember:

  • Use 200% on iOS
  • Use 300% on Android

Finally, these are some alternatives to PNG Express for exporting:

Quiet innovations and a push for mindfulness: Takeaways from Apple’s WWDC 2021 Keynote

From iOS 15, iPadOS 15, and macOS Monterey getting announced to a clear push for...

Read the article