info@murdochcarpenter.com
Why you shouldn’t design to retina
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.
The problem
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.
The downside
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
Sanity check
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.
Meet ExportDocument2xPNG.jsx
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!
Hello,
I’m trying out the scripts. Opened up a psd file and I keep getting an error that says “Error 8103: The document has not yet been saved. Line: 8 -> var docPath = doc.path;” Am I doing something wrong?
Hey Kim
You just need to save the document before you run the script. The reason being it won’t know where to save the images otherwise. That will stop the error.
If you won’t a bit more info on the @1x approach I also wrote an article for Smashing Magazine which you can check out here:
http://www.smashingmagazine.com/2015/05/18/retina-design-in-photoshop/
Cheers
HI there, I’ve just read your article on Smashing Magazine and think this is a great way to work. I’ve tried the script, and my only problem is that when I generate a @2x PNG the file size is coming out over 9MB. I’m prototyping the designs with InVision, so I can’t really upload these sizes – and I don’t want to have to run a Image Optimiser every time I generate a screen. I naively thought I could open your script and replace PNG references for JPG and reduce the quality slightly to generate a more manageable end result.
However this comes back with an ‘Error 8: Syntax error.
Line: 11
-> var extensionName = “_@2x.jpg”;
Is what I’m trying to do easily achievable? Any help, advice greatly appreciated.
Andy
Hi Andy
Check you have the latest files from github here https://github.com/murd/psd-export-document-retina-png/. I changed the compression settings as I noticed the issue myself also. Try that first.
You have a couple of options if your PNGs are still a bit large.
1) check out generate syntax which can be done off artboards https://helpx.adobe.com/photoshop/using/generate-assets-layers.html.
2) Mess around and make a JPG export script. Check out the guides here http://www.adobe.com/devnet/photoshop/scripting.html. They are a bit awkward being in PDFs rather than proper HTML documentation. If you give it a go and get stuck let me know. You need to change the PNGoptions to JPGoptions or similar (without me looking up correct syntax). JPG will also give you options for percentage to save down to.
Let me know how you get on. Cheers
Thanks for that, I’ll give it a try.
Andy
While working @1x on a retina Macbook, your fonts still look like hell though, right? If there’s any way around that I’d be sold on the 1x approach, but I can’t feel good about my work when all the text is blurry. ack!
I am not on a retina machine so haven’t run into this problem yet. It’s really a software issue in Photoshop (which was built before retina). Illustrator doesn’t have this problem being vector based. Looks like Project Comet should resolve this being built for retina from the get go. Hope the new updates fix this for you in PS!
This is so great, thank you. I’m just getting into the whole retina thing. How do you suggest implementing this? Placing the x2 image and using css to set the width?
Hi there, implementation will depend on web, app or other. There are JS libraries for web that can detect the retina level and serve the correct image. So I would suggest outputting at least @1x and @2x, then serving these depending if necessary or not. Your users will appreciate it. Nice crisp images!
Hi:-)
Just tried out the script, works very fine when exporting a complete PSD. But is there a way to modify it so that I can export a single artboard?
Thanks in advance:-)
Hi there. I have a new article pending. Take a look at Generate. But I can’t say more than that until my article comes out. Hope it helps. Will update here once it comes out. Thanks
This wouldn’t be a problem if you made UI work using vector software, which is definitely the way to go nowadays.
The concept was to use vector / fonts as much as possible. The script is now redundant with Adobe Generate in Photoshop. Check out https://www.smashingmagazine.com/2016/03/the-retina-asset-workflow-youve-always-wanted-for-photoshop/ for more info on that.