Creating Retina Display Graphics

Author: | Posted in Tutorials No comments

 Creating Retina Display Graphics

Creating “retina display” graphics is all the rage these days. As more and more HiDPI devices come to market, the need for designers to create these high quality graphics will continue to increase… But how do we do it? Lucky for us, the answer is much simpler than you might think.

The basic premise of a HiDPI screen is that they display things at a higher resolution than even the human eye can detect. This means that when we look at things like images and text, we are unable to discern individual pixels (when looking at the image from a certain distance). The good news is that most manufacturers (Apple) are taking this into account and making it easy for us to design for these screens and devices.

Retina-caliber graphics can easily be created in Photoshop by simply increasing the size of your image by 200%. This is because retina screens are basically double the size (in pixels) of a regular screen. The key thing to remember here is that you have to create scalable artwork. This is my main reason for switching most of my web graphics workflow to Illustrator recently, but Photoshop has gotten much better at handling this kind of stuff as well.

As I said, creating flexible artwork is the key here. That means you’ll need to keep text “live” and editable and also use plenty of shape layers when you’re designing things like buttons and UI elements. Resist your urge to flatten artwork and try your best not to rasterize anything that is vector. That means when you go to upscale your image, you will get the most out of your graphics.

Upscaling the Image

There are two basic ways to “retinafy” your graphics. The first involves the Image Size Dialog Box.

 Creating Retina Display Graphics

  1. Go to Image  > Image Size
  2. Change the pixels to percent
  3. Change the percentage of scale to 200
  4. Click Ok

The second method is probably the easiest, and it assumes that you’re completely finished with your graphic(s) and ready for web output.

 Creating Retina Display Graphics

  1. Go to File > Save for Web
  2. Go the Image Size section of the dialog box
  3. Change the scale to 200%

Saving the Image

In either case, once you’ve resized the image(s) you will need to save them correctly. The best practice for saving retina graphics is to append @2x to the end of the file name. For example, if your regular graphic is named myfile.png, the retina counterpart would be named myfile@2x.png. This will allow frameworks like retina.js to instantly recognize the right graphic and serve it up to the HiDPI screen.

Conclusion

Truth be told, there are a TON of ways to implement retina graphics on your website, and that’s a little beyond the scope of what we’re talking about here. However, if you’re a code geek (like myself) and would like to read up about how to implement retina graphics from a coding perspective, check out this article on Smashing Magazine or this one from CSS Tricks. Also, if you want to know how to make retina-ready favicons, check out this Daring Fireball article.

0 comments