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, it's really important to understand the difference between pixel dimensions and resolution. Many times people refer to web graphics as being 72 ppi or 72 pixels per inch. However, the reality is that's not always the case. You see many of today's monitors are a much higher resolution, like maybe about 120 or 140 pixels per inch. If you look beyond just the computer screen, handheld mobile devices like phones for example, those can have even higher resolutions.
In fact, the iPhone 4 has a resolution of over 300 pixels per inch. The reality is that a real web designer doesn't care about pixels per inch at all. In fact, the whole 72 ppi thing probably started, because the original Macintosh had that resolution on its monitor. But to a web designer today, what matters most is the actual pixel dimension, meaning how many pixels wide and how many pixels tall. For example, if you look at your monitor, it's probably set to a certain resolution, things like 1024 x 768 or 1440 x 900.
We don't really care about the size of the pixels as much as we do as the number of pixels. Take this example that I have right here. As you can see, I've created three rectangles in this document called Resolutions.ai. The three different rectangles represent different pixel dimensions. For standard monitor sizes we have 1024 x 768, 1440 x 900, and 1600 x 1200. Now let's say we're creating some kind of a standard ad banner. So I'll select my Rectangle tool and create a rectangle here of 468 x 60, just a standard ad banner size for the web.
Notice now if I go ahead and position this right about here on the screen, you can see how much space this ad banner takes up on a monitor set to 1024 x 768. However, that same ad banner would appear much smaller on a resolution of 1440 x 900, because look how much more space there is on my screen. In fact, on an even higher resolution, at 1600 x 1200, that ad banner appears miniscule. To get a better idea of this concept, I'm going to come over here to my Artboards panel, and I'm going to double-click where it says Monitors to switch to this artboard.
Here, I have two laptop computers. These are both the 15-inch model that Apple makes for that MacBook Pros, but the resolutions are actually set to different resolution settings on the monitors. For example, on this laptop right here, the monitor is set to 1024 x 768, whereas on this laptop here the screen is set to resolution of 1440 x 900. You can see that on the higher resolution monitor, the graphics appear smaller. But I can also see a lot more information.
I could actually see more of my page at once than I would on the lower resolution one. In other words, if I have a very high resolution, I can see more content at once, but the content is a little bit smaller, whereas in a lower resolution I can actually see larger images, but I can get less content on my screen at any one time and I need to scroll more to see it. Now as a designer, there are two main things that you're going to need to think about. If you're creating graphics to the specification that someone else has defined, for example, you're creating graphics for someone else's web site.
That can be an ad banner or some other graphics, for example. In those cases, you will be given the precise pixel dimensions that you'll need to use. However, if you're designing your own web site, it's going to be up to you to decide which dimensions you want to use. Many web designers today assume that most people have at least 1024 x 768 monitor. So they generally design web sites at a width of around 950 pixels in width. Of course, these are all decisions that you're going to have to make.
But the first thing to realize is that the whole concept of 72 pixels per inch shouldn't factor into any of your decisions at all. The only thing that matters now is going to be the actual dimensions or the number of pixels in the artwork that you're going to be creating.
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.