Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
Creating graphics for high-pixel-density displays like Apple's iPhone 4 and 4S can be a tricky process. These screens are oftentimes double the resolution of others and rely heavily on a high number of pixels per inch, or PPI, in order to look so crisp and clean. As designers we must be ready for this shift, because now with Apple releasing Retina display computers, the days of designing for one resolution are gone. The problem here is that while we have to account for the new high-resolution displays, we can't forget about the people who don't have them. There are still millions of people who are using older, smaller monitors, or who don't own products like an iPhone or an iPad.
So we have to take care of these people too. The solution here is to work closely with your developer and understand exactly what they need to deliver images to all of the devices and screens. If you're already a web designer and you know how to take your images from Photoshop and turn them into code, what you'll have to do is utilize something called CSS media queries in order to deliver the right graphics to the right screen based on certain criteria. When you're designing mobile applications for iOS, for example, you'll need to provide two sets of images: one for the standard display found in the older iOS devices, and one set of images for the new Retina Display.
These image sets are usually referred to as either 1x or 2x. You see, when Apple released about the Retina display for the iPhone 4, they did something very smart in my opinion. They made the resolution exactly double that of the original iPhone, and therefore we must create graphics that are exactly double, or 2x, the size of our originals. The key here is to use vector images when and if possible. In Photoshop, this means relying heavily on text and shape layers as well as layer styles to do most of our design work. All of these things scale without losing quality, whereas photographs and filters don't necessarily do so well.
If you find something that can't be done in a scalable way inside of Photoshop, consider doing it in another program like Illustrator or Fireworks. Both Illustrator and Fireworks are vector drawing programs and lend themselves more to flexible, scalable designs than Photoshop ever could. Even though Apple promotes the Retina display has a higher PPI, or Pixels Per Inch, ratio, the resolution of your files really doesn't matter. In fact, iOS devices ignore the PPI settings in images altogether. So you just have to make sure that you get the dimensions right for each device and then scale it up accordingly.
Here's my suggestion. Start by designing your projects at 1x, or the standard resolution for the original screen. In the case of the iPhone this means designing at 320 x 480. Make sure you enable Snap To Grid as well, by going up to the View menu, choosing Snap To, and selecting Grid. As long as you design your artwork using vector components, when it's time to export it out, you should be able to scale up your artwork to 200% without losing quality, thus creating a "2x" graphic, which would be perfect for a Retina display. Let's take look.
Here I have a Splash screen for an app that I'm working on called Happy Bot, and the Happy Bot design that I've been working on here is actually set to 320 x 480. If I go into the Image Size dialog box, you can see that the Width is 320. The Height is 480. Now what I want to be able to do is deliver this at one 1x, which is where it is right now, and also at 2x for the Retina display iPhone 4 and 4S. So in order to do that, what I need to do is I need to go up to the Image menu, choose Image Size, and then right here in the Pixel Dimensions at the top, I need to change this from Pixels to Percent. And then simply enter in 200 and you notice there that it automatically adjust the other one as well, and I'll hit OK.
Now when I do that, you're not going to notice any quality loss in the image. I'm still viewing it at 100%, and all the edges look crisp and clean. The text looks nice. The Background is okay. So are the clouds. Why is that? It's because I've used vector images for this design. You can see I've got a vector shape for the clouds right here. The robot is an Illustrator file that I placed into the document, so I actually created this in Illustrator first and then placed it into the file. And the text is just standard vector text. All text inside of Photoshop is vector. So when I went to scale this up to 200%, there were no real pixels being scaled, so I didn't lose any quality.
If I had any of this stuff rasterized or I'd used any bitmap images inside of this design, when I doubled the size, I would have gotten artifacts and just--it would have been a mess. So, what do you do if you've to use bitmap images, like photographs for instance? Well, you start big and then go small. So start at a higher size and then work your way back down. Always scale down when it comes to pixel-based images; never scale up. It's going to be kind of a tricky thing and we're still in the very beginning of this whole process of Retina displays. But I wanted to give you an idea of exactly how to start designing for these things now, so that you have a leg up when the time comes later on down the road.
Now, as far as exporting these things out, it's just as simple as saving a regular document for the web. You go to File > Save for Web. And in this case, I've got the 640 x 960 image open here. I would save this out and call it whatever I'm going to call it and then at the end of it I would append the 2x to it. Same holds true for when I shrink it down, which I'll do here in the Image Size. I'll type in 320 x 480, and I would save this out as whatever I wanted to call it and append a 1x to the end.
That way when I hand this off to a developer or if I'm utilizing media queries or something like that in CSS, it's easier for me to tell which graphic to deliver based on the 1x or 2x extension that I've added. So hopefully by now you have a better understanding of exactly how Retina display graphics work and how you can optimize and work with those types of images here inside of Photoshop.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.