In this series of articles, we will cover a wide range of topics related to setting up Photoshop files for web design.
Topics will include:
- Using Photoshop layers to automate Web graphics creation
- Using Photoshop layer names for automating buttons
- Choosing GIF, JPG or PNG format for web graphics
- Choosing between Table (HTML3) and Style Sheet (DHTML) Layout
- Designing clean, user-friendly, fast-loading pages
- Creating backgrounds
- Adding Flash movies and other multimedia to your page
- Setting up layers for DHTML animation
If you have suggestions for other tips or topics you'd like to see, let me know by sending your suggestion to email@example.com. Make sure to mention this web site in the subject of your message.
This article, the first in the series, will cover the basics of setting up your file's size and resolution. The next article will cover color modes and backgrounds. In other words, in these two articles, I'll answer the question, "What should you select when you say "File, New" in Photoshop?"
Every time you create a new image in Photoshop, you are presented with this window:
Creating graphics for the web is very different than creating graphics for printing. When you send graphics to a print shop and get 1,000 copies of a brochure, they are all identical. When you send a file to a web server and 1,000 different users view the pages, they will all see something slightly different. That's because your printed brochures all came off of the same printing press, but each web site is viewed by a different user, in a different browser, with a different monitor, on a different platform, all configured with different settings.
What that means is the settings you would select for creating an image to be printed will not work when you are creating an image for the web.
Width & Height (AKA size) - These dimensions are the most important "new file attributes" for designing web pages.
Resolution - Resolution is complicated because both graphics files and monitors have resolution settings. However, this is more critical for print than for web design.
Computer images are made up of individual dots called pixels. Each pixel can be thought of as a single square on a piece of graph paper.
Zoom in on this 15x15-pixel graphic:
And you can see the pixels:
Monitors also display in pixels. The images you see on your screen are made up of rows and columns of pixels.
When you create graphics for the web, you should always set the measurements of the image in pixels.
A graphic's resolution is measured in dots per inch (DPI) or, sometimes, pixels per inch (PPI). This measurement tells you how many pixels fit into a 1-inch square.
How is resolution used?
In print design, graphics are measured in inches (or centimeters) and dots-per-inch (or dots-per-centimeter). The combination of the size and the resolution determines the quality of the printed image.
If you create a graphic in Photoshop that is set to be 1-inch high and 1-inch wide at 72dpi, and then print it, you will get a 1-inch graphic that is grainy or "pixelated."
If you create a second image that is a 1-inch square at 144dpi and print it, it will still be 1" square, but it will have twice the quality of the first because it has twice the number of pixels across and down.
When printed, graphics at lower resolutions
may look "pixelated":
While DPI is critical for print, it is practically meaningless on the web. What is important is the actual size in pixels of the file - that is the number of pixels the image contains across the top and down the side.
When images are displayed on-screen, they are measured in pixels and the resolution determines only the size of the image. Because graphics files are made up of pixels and monitors display in pixels, each pixel in a graphic file is displayed as one pixel on the monitor.
A 2-inch graphic at 72dpi and a 1-inch graphic at 144dpi will look the same on-screen because they both have a total of 144 pixels across the top and down the side.
Whether set to 300dpi or 72dpi, this image will contain
225 pixels - 15 across by 15 high:
Monitor size and resolution
Many people think that the size of your monitor determines the resolution. This is not true. Most monitors can be set to display at several different resolutions. You can have a 14-inch monitor set to a very high resolution, or you can set a 21-inch monitor to only 640x480 (640 pixels across the top and 480 pixels down the side).
Although not always technically accurate, screen resolution is generally accepted to be 72dpi and web graphics are built at this resolution.
Monitor resolutions actually range from 72 to 96dpi depending on two things:
1) the size of the monitor, for example 14- or 21-inch
2) the resolution the user has selected, for example 640x480 or 1024x768
Most users, however, don't even know the dpi of their monitor and no-one really talks about monitors in dpi. Instead, the number of pixels displayed across and down the screen is used to describe a monitor's resolution.
If a 14-inch monitor and a 21-inch monitor are both set to the same resolution, say 600x800 (again, that's 600 pixels across by 800 down), all of the images will appear larger on the 21-inch monitor because the same number of pixels are being displayed in a larger area.
However, if a smaller monitor is set to a low resolution (making each item appear larger) and a larger monitor is set to a higher resolution (making each item appear smaller), the actual size in inches of each graphic may end up being the same.
How does monitor resolution change image display?
Clearly, there's no one correct resolution for a file. No matter what dpi you select in Photoshop, the image will display in the resolution set by the user.
What all of this really means is you can't control the size of the elements on your page in an way that can be measured with a ruler. You can control the size of the elements in relation to the size of the user's screen.
Photoshop File Size
Some web designers still design for 640x480 resolution so users with the "lowest common denominator" monitors can view their pages comfortably. However, statistics tell us the average computer user is running at 600x800. If we design our web pages to fit into this size screen (minus space for the browser window and tool bars!), we can be reasonably sure that most users will be able to view the key content without a lot of scrolling.
These pages may appear smaller or larger when measured in inches - depending on the physical size of each user's screen - but they will always fit neatly into the browser window.