How to design for retina properly?

[joaosp]

I downloaded some bootstrap grids to follow while creating designs on Photoshop, just to make things easier, and I got inside the zip a txt file where author of those psd's grids commented this: "for retina double the psd image size".

So, I got a question: Is that the only thing we need to do? I'm working on some new redesign projects to feed my Behance and I wanna get started designing for retina, something that I ever hadn't done before.

Which steps should we follow to reach retina correctly?

[Dan Rodney]

I think I know the PSD's you downloaded. They are designed at 1x (low-res). I prefer to double-their size so they become 2x (Retina) size. I design at this size on a 2x (Retina) screen so I can see all the details in them. If you're designing on a 1x screen you'll have to zoom to 50% so the files don't appear huge on your screen.

If you design in the 2x file keep in mind that everything is double what it would be in HTML/CSS code. 14px type in CSS would be 28px in Photoshop. A 1px stroke in CSS would need to be 2px in Photoshop. So if you need to give specs to a web developer, cut anything in Photoshop in half and that's what they want to know. That means in Photoshop you should always work with even amounts (type sizes, leading, strokes, etc) so they can be cut in half for coding as HTML/CSS.

And just to be clear, to double the filesize of the 1x PSD files:

• Go into Image > Image Size
• Make sure Resample is checked on.
• For Width change the menu to Percent.
• Change Width to 200 (Percent).
• Click OK.

Lastly, I made a Bootstrap Grid Template for Photoshop that uses Artboards. I included both 1x and 2x versions. You can download it for free from my website:

Photoshop Bootstrap 3 Grid Template using Artboards: Free Download

[joaosp]

Good points! Actually I have watched some video on YouTube, they said that is easier to design everything using @1x standard size and double the size when you're going to export it, but in order to avoid a low quality they've pointed about always using vector instead of bitmaps. It's correct and I got it, however sometimes we just don't find assets in a vector format, only bitmap.

Just to summarize, you start your design from @2x or you resize after ending your work?

[Dan Rodney · Accepted solution]

I always design in 2x files. If I worked in a 1x file, it wouldn't look good on my 2x Retina display (it would be pixelated). Even if you don't have a 2x display now, you will eventually. Just like all displays went from B&W to color, they will eventually all become 2x. At some point we won't have to worry about 1x anymore. So why would you want all your files to be at 1x?

Plus if you're using Adobe Generator, exporting 1x and 2x aren't a problem when scaling a 2x file down to 1x. The same can't be said for designing in 1x files. Adobe Generator has a bug with JPEG based Smart Objects so it can't enlarge them to 2x properly. Just another reason to work at 2x.

Working at 1x or 2x both have pros and cons. But I think working at 2x has fewer problems and is a more modern workflow. Fewer people use it because they don't really know all of Photoshop's features and are so used to working at 1x, but I believe designing at 2x is absolutely the way to go.

You do want to use as much vector art as possible, in part because it should later be exported as SVG for use in your webpages. Sadly Photoshop often can't export SVG properly (if it's a vector smart object it can't export properly) so you'll end up needing to export the SVG from Illustrator.

As a side note, designing in Sketch or Adobe XD avoids many of the headaches of designing in Photoshop. XD isn't quite ready for prime time for most people, but it's getting closer with each release.

P.S. I know a lot about this topic because I'm an Adobe Certified Instructor in Photoshop with many years of experience with all sorts of web design apps (such as Photoshop, Illustrator, ImageReady, Fireworks, Sketch, and Adobe XD). I wrote Noble Desktop's Photoshop for Web Design & UI Training Book which teaches these types of concepts. In there I cover designing at 1x and 2x. We should have a CC 2017 version of the book on our site in the coming weeks, although the CC 2015 version will still mostly work in CC 2017. The biggest change is the File > New dialog.

[joaosp]

Yes, you're right. I've started to design on @2x. Some graphics look weird sometimes with a 50% zoom, but on 100% they look fine.

Thanks for your answer and help!