Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Whether we're talking about desktop design or mobile application design, we have to factor in something now called Retina displays. The Retina display is something Apple started with the iPhone 4 and has continued with its iPhone and iPad line for the last couple of versions. They've also just released a laptop computer with a Retina display as well. The problem with these displays is the fact that they are almost double the pixel density of any display we've ever had to design for before, and so therefore the graphics that we design for them must in turn be retina-capable.
Illustrator is the perfect tool for creating these graphics because we can start at one size, like you see here, and instantly scale up without losing any quality. So using a vector editing program like Adobe Illustrator or even Adobe Fireworks is a great way to go about creating these Retina-style graphics. In terms of using Retina graphics on your web site or in an application that you might be creating, that's a totally different story. So you might want to do a little bit of research on something that I found called Retina JS, which is just Retina graphics for your web site.
This is set at a standard 320 x 480 display size for most mobile devices. However, the new iPhones are usually set to 960 x 640, which is significantly bigger than this, and that's why most of the time when you hear people talk about designing Retina graphics, you hear the phrase 2x. Apple did something very smart when they designed the iPhone 4 display. They actually just made it double the pixel size of the original, so making it easy for developers to just scale up their designs to 2x.
And if you take a look at that Retina JS that we just talked about, it actually looks for a modifier at the end of the file name called @2x, indicating that this is the same graphic, just at two times the size. So that's exactly what I'm going to do here. I'm going to take this and I'm going to save it out as a Retina graphic, but I need to do that at twice the size. In order to do that, you just take your standard graphics like you have here and go to the File menu and choose Save for Web. Once you're inside of the Save for Web dialog box, you'll pick the correct preset up here at the top. Most of the time that's going to be either a PNG or a JPEG; GIFs just don't really cut it in this case.
Then right here where it says percent, you can change this to 200%, and then press the Tab key. You'll notice when I do that, it goes from 320 x 480 to 640 x 960--exactly what we needed. And if I look at this at 100%, you can see, even though I've scaled this up, it still looks really crisp and really clean. And so what I would do now is take this file and save it out. So this would be let's say appmockup and then I would put @2x.
So I would save that out to my desktop and then upload that to my web server, and then if I use something like Retina JS or any other number of ways to do that, it would automatically pick that up and insert the Retina graphic in place of this graphic. The only other way around this Retina display problem that we have is to use something called SVG, and we'll explore exactly what SVG means and how you can create those types of graphics in the very next movie.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 47433 Viewers
117 Video lessons · 34415 Viewers
113 Video lessons · 80289 Viewers
116 Video lessons · 70209 Viewers