If you have recently decided to purchase a MacBook Pro you will almost certainly see the world through a retina screen from now on. Retina displays have obviously been around for a while now but unknown to me, Apple has stopped selling non retina laptops altogether (how could I be so oblivious), with the exception of the older 13” model.

I recently needed to switch from my 27” iMac to a logistically more efficient alternative and purchased a 15” MacBook Pro. Having worked with Macs for most of my childhood (hello PowerMac G4 dinosaurs!) and adult life I expected this to be rather something - And it is!

While I was impressed with the crisp beauty of (mostly) everything I also found many graphics online that now appeared blurry and outdated (especially many favicons and logos). It seemed that a lot of stuff out there hadn’t been designed with retina in mind.

As conscientious makers and doers most of us will be keen to craft their designs to be ‘retina-safe’. I would like to list a few guiding points of how I go about setting up files to be, dare I say, future-proof (if there is such a thing).

Preparing files for retina

For the time being, I consider the following:

A.) Are made up of vector/shape layers (snapped to the pixel grid)

B.) By no means use bitmap graphics of any kind (jpegs, png etc.)

C.) Make your lines 2px thick instead of 1px

D.) Ensure everything is ‘on pixel’ (switch on ‘snap to pixel’)

E.) Don’t draw circles with the ellipse tool (it doesn’t snap well), use the rounded rectangle tool with a large corner radius

F.) Watch blending effects such as drop shadows as their pixel values will change when scaled

G.) Even better, try and use gradients as much as you can

Note: I have heard many people wonder if they should create files that are 2x the ‘normal’ pixel size (i.e. 320px iOS screen becomes 640px). I personally do this but if you consider all the points mentioned above then you should be able to scale up (change image size from 100% to 200%) without a glitch. Though, I personally like to start big and scale down if needs be.

With my new retina screen, all these carefully considered design files got their moment and I am glad that I do not have to go through the tedious task of editing files that were not set up for retina use in the first place.

Pre retina files

Some designer might still use the old formats, and that’s fine as long as all assets are vector based and therefore fully scalable. Bare in mind though that you want to check all your lush layer effects and lines as these will probably need adjusting in thickness and blending effects.

If you do find assets that are either rasterised layers or bitmap files then you might want to consider reworking them.

Designing in Photoshop CC (retina updated)

You’ll see that these pre-retina PSDs are looking tiny in Photoshop CC (14.2) and that’s basically because Photoshop has been updated to look ace on your new retina screen (thank you Adobe) but your pre-retina files haven’t (see advice above!). The only thing I can mention here is to zoom in at 200% to edit your files. Your designer OCD will be making this pixelation-hell for you but as far as I know this is the only way for now.

Some people suggest switching to a low res view in Photoshop CC (you have this option when right clicking on the program icon and selecting ‘more info’) but I personally find this horrendously distracting because your entire program interface will appear pixelated.