Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we start learning how to create web graphics, we need to first understand the difference between something called resolution and something called pixel dimension. For many years, it's been assumed that we should always design our web graphics in a 72-pixel-per-inch or dots-per-inch resolution. And in many ways, that is considered to be standard practice for creating graphics for screens. However, in today's day and age, we have to deal with many device types and screen resolutions. For instance, Apple has a series of retina displays that go in its iPad, iPhone, and now MacBook Pros.
These resolutions exceed even 300 pixels per inch. There are also many other devices and screens that go even higher than 72, things like 150 pixels per inch, 240, and even higher. The key thing to remember here is that no matter what the resolution, the pixel dimension is what counts and what stays the same. The pixel dimension refers to the actual amount of space an object takes up on a given screen regardless of the resolution or screen size. Take a look at this example that I have opened here on my screen.
I have opened the screen_sizes.psd document, and I have three different screen sizes showcased here: 1024 x 768, 1440 x 900, and 1600 x 1200. Directly in the middle of each one of these screen sizes is a small white circle. The white circle actually takes up 200 pixels by 200 pixels of actual space. But you'll see as I start to move through the screen sizes, the circle looks as though it's becoming smaller simply because it's being lost in the larger screen size. So if I turn off the 1024x768 to reveal the circle in the 1440, you'll see that it looks significantly smaller than it did before, but it's actually the same size as it was on the previous screen size.
Same holds true for 1600 x 1200; if I turn that off, the circle is even smaller, directly in the middle of the screen. This is because there are more actual pixels in the screen, making it look as though this graphic has gotten smaller, when in fact, it's just on a different- sized canvas, making it appear to be smaller than it actually is. Let's switch over to this monitors.jpg document, and look at how the lynda.com homepage is displayed on two different resolution screens. On the left is a higher resolution, and on the right is a lower-resolution screen.
The homepage doesn't change at all. The pixel counts all remain the same. It's just that with the monitor on the right, you have less pixels on screen; thus you don't have as much room to show things, meaning you'll have to scroll around a little bit more to find the things you're looking for. On the left-hand side, everything is exactly the same size on the homepage-- images, text, et cetera--but it looks as though things are smaller, because we have more pixels that are able to be displayed on this higher-resolution screen. So, as we design our web sites, it's important to remember and take into account the pixel value of our images that we create, more so than the actual resolution.
We'll explore retina graphics in a later movie, and how we can adapt our workflow for these new higher-resolution screens to get the best results. But for now, let's worry about the pixel dimensions of the objects we're creating as opposed to the resolution or screen size.
Get unlimited access to all courses for just $25/month.Become a member
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.