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 pixel dimension and resolution. For many years people I have referred to web graphics as being 72 PPI, or Pixels Per Inch, and we as designers have just come to accept that number as the standard by which we create our screen graphics. However, in reality monitors today far exceed the limits of 72 pixels per inch, and devices like Apple's iPhone and iPad even have something called a Retina display, which displays in excess of 300 pixels per inch. In today's world, we don't need to concern ourselves with the PPI settings of our graphics anymore; instead, we should focus on the actual pixel dimensions of the graphics we're creating.
By this I mean the actual physical space, width, and height values that our graphics take up onscreen. For example, take a look at my screen here. I have a standard banner ad which is 468 pixels by 60 pixels tall, and it's sitting right now on a square that's 1024 x 768. So imagine this is a monitor at 1024 x 768. Notice how much space the banner ad takes up. It's a pretty significant amount of screen real estate if you are looking at it on a monitor this small. However, if I turn this layer off and activate the 1440 x 900 layer, you'll see that the same banner ad at the same size looks significantly smaller on the 1440 x 900.
But this banner ad is actually taking up the same amount of physical space that it was before; it's just the different resolution and different size makes it appear smaller. The same holds true for this 1600 x 1200 resolution. The banner ad looks really, really tiny, but it's taking up the same amount of physical space. Even if an object is displayed on different monitors with different resolutions, it will always occupy the same amount of physical space. But it may look larger or smaller depending on the resolution of the monitor on which it's being displayed.
Take a look at this real-world example I have here. I have two identical laptop computers here. The one on the left is set to 1024 x 768, and the one on the right has been set to 1680 x 1050. Both of these laptops are displaying the lynda.com homepage; however, with the laptop on the right set to the higher resolution, the graphics appear much smaller, but I am also able to see a lot more content on the homepage than I am on the monitor on the left. The monitor on the left, the graphics appear larger, but I am not able to see as much content.
So as you can see, the resolution of these graphics is pretty much irrelevant. The one thing that really does matter is how much physical space the objects take up on- screen, and how legible it will be at any given resolution. The choice ultimately is yours, so you need to test your designs extensively on multiple monitors and multiple resolutions to get the optimal user experience.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42405 Viewers
119 Video lessons · 53864 Viewers
65 Video lessons · 14201 Viewers
113 Video lessons · 82771 Viewers
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.
Your file was successfully uploaded.