Humanity was living in childlike, wide-eyed wonder of what the future might hold. First came fire, then the wheel, paper, the printing press, the Internet… where could we possibly go next?
Then it happened, the latest and greatest breakthrough:
the Internet… in the palm of your hand!
Oh how wonderful life was! Every morsel of information ever recorded was suddenly at our fingertips in the blink of an eye. Gone were heated debates about facts and figures, as the answer to virtually any question could be instantly displayed.
That’s when humanity realized: “Your website looks wonky on my iPhone, bro”
It used to be so simple: clean Photoshop documents (PSDs), no breaking points, pixel-perfection. But with the advent of screens that have a high pixel density (AKA Retina displays), avoiding all-out war when working on project with your front-end developer suddenly became a gruelling endeavour.
High pixel density? What?
“Retina” is Apple’s fancy word for high pixel-density displays – displays with so many pixels per inch (PPI), you can’t discern individual pixels without sticking your eye on the screen. On Apple devices, that usually means twice the standard PPI, but on other devices it can be up to eight times more! With pixels being twice as small as usual, a 100 pixel-high header would look tiny, right? Your chubby fingers would be too big to press the tiny buttons! AhH! APPLE WHY CAN’T I PRESS THE BUTTON-
On retina displays, all user interface (UI) elements and images are doubled in size so you don’t have to cry. Basically everything looks the same size as usual, but clearer and crisper.
PPI PProblems
“So I just have to change my PSD’s resolution from 72 PPI to 144 PPI and I’m done right?”
No.
Let’s set the record straight: PPI has nothing to do with any web or screen based image. Every single image on a screen is measured in pixels. No one cares if your 400 pixel-wide image is 1200 PPI, it will still and forever be 400 pixels wide. PPI only comes into play when you use your image with something that involves inches. If you import it into Illustrator, for example, Illustrator will say “Well this image is 400 pixels wide, and it says here it should be 1200 pixels per inch. Wowzer! Then I better make it 0.333 inches wide!”
Higher PPI = Higher print quality
“Then why did they tell me to make all web images 72 PPI?”
Short story long, Apple’s earliest Macintosh computers had a 9 inch screen with a 72 PPI resolution. The first Macs were specifically designed to work in perfect harmony with Apple’s ImageWriter printers, which had a 144 PPI resolution - twice the screen’s resolution. Apple made it this way to provide users with an accurate preview of what would print out.
Soon, third party companies and competitors started making monitors as well, and because advertising terms like “MORE” (in this case “MORE RESOLUTION!”) also meant MORE sales, Apple’s 72 PPI did not become the standard. Three decades later, screens of all sizes and resolutions abound. Despite this, image files still need a number to represent their resolution for printing purposes; since 72 PPI is a vestigial remain of times gone by, it got the job and became the standard. I suggest using it, unless you really want to be a PPI anarchist.
Your options are…
Here’s the dilemma: When developers make a responsive website, they usually start with desktop resolution because that’s the medium they’re working in. When they go into your PSDs, they need the images to be twice their desktop resolution size to be retina-ready. However, they need the UI elements (buttons, menus, general interface) to be the standard desktop resolution. Both in the same file?! Inconceivable! Oh woe is us! What is a graphic designer to do? There are two ways of going about creating your designs:
1. Size them at 100%
An iPhone 6 Retina screen is 750 x 1334 pixels, so is your file.
2. Size them at 50%
An iPhone 6 Retina screen is 750 x 1334 pixels, therefore your working file would be 375 x 667 pixels.
Which one should you use? Both have their pros and cons, and one may be better than the other, depending on how you work.
If you’re using option 1, the developer must be able to scale it down 50% at any given time. This impacts how you design your file. If you do a 1 pixel wide stroke then scale down your file, you’ll end up with a 0.5 pixel wide stroke. That’s icky, don’t do it. You have to do everything in even numbers. If you’re designing for Android, your file can grow up to four times larger, and that’s when it becomes risky to work this way.
If you’re using option 2, the developer must be able to scale it up 200% at any given time. This also impacts how you design your file, but in different ways. You are now allowed to use uneven sizes on your objects.
“If I scale up my PSDs, won’t they get blurry and bad?”
Yes!
…
Uh, wait that’s a bad thing. If you don’t want that to happen, there are a couple of awesome techniques you can use (you should be using them anyway even if you’re not scaling up. They’re super useful!).
Working with vectors and smart objects
Start using vectors! Photoshop recently introduced powerful vector tools that can do very cool stuff. Now you can scale to your heart’s content, and everything will stay sharp. Oh, and don’t forget to check “Align Edges” on your menu bar to ensure your shapes stay pretty and don’t end up with weird edges.
For everything else that can’t be a vector, use Smart Objects.
Before scaling down your images, right click on its layer then click “Convert to Smart Object.” Voila! Your images now keep all their juicy pixel information as an embedded file (you can also double click it to go modify the layer). This makes your file heavier than resizing your images but they’ll actually look good now.
Understanding resampling
I’m surprised at how many people I meet don’t know about this stuff. Image resampling physically changes the number of pixels in your images when you resize them. The type of resampling you choose will affect how Photoshop decides to create or remove pixels. Let’s check out the Image Size dialog box:
See the “Resample” field? First, if you uncheck the box, then you’re not resampling the image any more. You’re only changing its resolution or its size in inches relative to its resolution. When resizing an image, you’re going to want to use the Bicubic options. Bilinear is basically a less powerful version of Bicubic. Nearest Neighbour is only good at one thing, and that’s resizing blocks of color; basically it doesn’t create anti-aliasing so you don’t get lighter pixels on the edges of your image. Try them all out, and find out which one works best for your task!
Other useful apps
Live previews are SICK! Use them! Check out either Adobe Preview or Skala. I simply can’t live without them anymore. Why wouldn’t you want to see what your masterpiece will look like in its final state? Beware, however; if you’re using option 2, you’re going to have to repeatedly scale up your file to see what it will actually look like; with these apps, this is where option 1 shines.
The Internet would collectively want to banish me if I didn’t talk about Sketch in an article on all things Retina. Sketch is an app for Mac that’s built for modern graphic designing. It’s got neat tricks built-in, such as exporting assets in multiple sizes as well as pages and artboards (something Photoshop recently got!). It’s a great alternative to working in Photoshop and has proven itself solid enough to handle full-fledged, large-scale projects.
There are still a couple of things to be wary of if you’re thinking of using Sketch. If you’re the one handling the entire project, you’ll be fine, but trying to use it in an already established workflow could be a nightmare. It also isn’t as deep as Photoshop, and because you can’t do stuff like complex image treatment, you may have to use Photoshop along with Sketch.
There you go! If you managed to make it all the way through this novel of a blog post, congrats! You are now a certified Retina-izer.