I ran into this problem recently. Basically I am working on a Desktop (72dpi) in Photoshop to create tablet designs for a 4:3 device. I then want to save as PNG and quickly view the designs on the device to see how they look.
If I design at 1x, then on device I get the image on the left. Up-scaled and horrible on any crisp edge, type or vector. If I design at 2x then I get a nice image on the device that is clean and crisp like the image on the right.
I think for the exact reason above, most designers (almost every single one I talk to) will argue that designing for retina (2x) is the way to go. But let’s look at some of the downsides of taking this approach:
- You have to be at 50% zoom to see your design because your canvas is doubled
- The PSD file size increases to store more pixel data. In the example file an extra 50%
- You will have to use extra RAM and CPU to manage a bigger file
- It’s only imagery that needs to be retina anyway
- Your font sizes are doubled
- Your dimensions on every single object are doubled
- The spec will be a mess with everything doubled
- This can be particularly bad if your measurements aren’t divisible by 2. Half pixels!
- Everything is doubled! Why?!
- What is 1px at non-retina? 0.5px? That’s not going to be pretty
Okay so suddenly this doesn’t sound like such a good idea after all. While you do get a nice crisp image output, it makes a mess of any dimensions and your workflow more difficult. You would constantly be dividing everything by 2. What font size is 16px in retina? 32px, great. Here’s the reasons to stay at 1x:
- Work at 100% zoom with better pixel snapping
- Smaller PSD size and better performance
- Font sizes are correct
- Dimensions are correct
- Your spec will now make sense to developers!
So what’s the solution?
Luckily there is a solution. And it will keep you sane. Work at mdpi pixel dimensions (have a coffee and check this link out for more info). For examples sake on a 4:3 large tablet (iPad or Nexus 9) this is 1024x768px. Tailor this to your preview device. In my case this is a retina iPad. Working at 1x allows for pixel precision and dimensions that make sense. Also developers will love you!
The trick is to only export to 2x when you want preview images for the device. So you get all the perks of working 1x and just double the output when necessary. Doing this without a script got a bit laborious. So I made a Photoshop script that does it all with a click.
Download ZIPView on GitHub
Copy and paste this script into your Scripts folder. On Windows this is ‘\Program Files\Adobe\Adobe Photoshop CC 2014\Presets\Scripts\’ and on Mac ‘\Applications\Adobe\Photoshop CC\Presets\Scripts\’. Then anytime you want to export a 2x PNG just click File > Scripts > ExportDocument2xPNG.
How the script works:
- Resizes your PSD 200%
- Creates a folder ‘retina’ in the same place as your PSD
- Saves the PNG as documentname_2x.png
- Clears and purges the history (Undo)
- Saves the document exactly how it was before the script ran
It’s very easy to modify and pretty straight forward so feel free to change as you see fit. See the results below.
And here are the example files if you want something quick to play around with.
Some things to keep in mind
- Always use vector objects where possible
- Make sure any bitmaps are Smart Objects and 2x their current dimensions
- Enjoy having your cake and eating it too!
Not convinced? Let me know in the comments. Cheers!