It is common knowledge among designers that by blowing up a photo from its original size to double its size in photoshop, the photo will look awful. Obvious pixilation and fuzziness. With Retina display, the web with it’s old DPI standards looks exactly like that – fuzzy and pixilated.
Obviously most of the population doesn’t have retina display. However we have witnessed Apple setting trends that others live by, not conforming to the ordinary and easy. Apple doesn’t jump on the bandwagon, they create the bandwagon. Long story short, I believe retina resolution is the future of web.
That being said, how do we design for retina display? There are two possible routes to take:
- Design at 2x the size you usually do
- Design like you normally would, then blow up the PSD to 2x the size
My recommendation is option number 2. With option number 1, the PSD files are huge and runs much slower. There is also the frustration of being accustomed to designing at a certain size and then being thrown off by the new scale.
“Wait, Kat, didn’t you just mention blowing something up to twice its size in Photoshop makes it look terrible?” you ask? Why yes I did. Howeverw there are ways to build your PSD so that blowing up a design to twice its size will not affect the quality of your imagery.
Design in vector
Start to get comfortable with your shape tools and don’t rasterize. Be sure to select “snap to pixels.” Making your design elements pixel perfect is a must.
Use Smart Objects
When using images in your photoshop file, don’t paste it directly into your file. Instead, open your image in photoshop, color correct if needed and then save as a Photoshop file. Once your file is saved, drag the .PSD directly into your design. This will make your image a smart object. This will give you the freedom to resize freely without losing information if you size it down from the original size. If you need to modify the image file, double click on the smart file in your layers window, modify your image and save.
If you need to make an object smart on the fly in your Photoshop document, select the layers you wish to convert into a smart object, right click and select “Convert to Smart Object.” Same logic applies – your pixel information will be stored, and you can always double click on the smart object if you wish to modify it.
After you are done designing, open “modify image size” and edit your pixel dimensions to 200 percent. Voilà! You file is retina display ready.