--For the following 15 seconds, you will see pixels flashing in the background--
Introduction
This lesson is about pixels. This is not an elaborate lesson, just an essential one. We often like to think about dimensions of linear space in terms of inches or centimeters, and we could do that in graphics as many people in the publishing industry do.
However, we are in the interested in the internet industry, and as many of you know, when you write a web page and you put graphics in your HTML code you have to use pixels to set the dimensions.
As we discussed in the last lesson, every image has height and width because every image is rectangular. They often do not look rectangular because of transparency or the blending of backgrounds.
Definition
There's nothing really tricky about pixels. They are quite simply the smallest element (a picture element) that a device can display and of which a displayed image is constructed.
Example Dimensions
What You Need to Know
- Dimensions are always read width first and height second.
- Always keep in mind when choosing a graphic's dimensions, the overall appearance and layout of your site. Keep it large enough to read or view without squinting, but not so large that your site turns into a scrolling zoo.
- Start big, you can always make an image smaller and keep detail. If you start small and want bigger, you lose resolution in the process.
- GIFS can get very tricky, especially the edges. If you notice pixels that aren't the right color you can go in and manually repaint them with a brush and the zoom tool, or mask them out with the magic wand selection tool (we'll get to that in a couple lessons).
- The following three pictures of desktops will demonstrate how the same web page looks at different monitor resolutions. Observe that while all images have a definate size, their relative size on a web page can differ from user to user.
Activity
- Return to the top of this page and save the image of the wolves to a disk
- Open the image in PSP
- Click on the Zoom Tool
- Place the tool over the image and left click to zoom in and see the pixels
- What do think will happen if you right click?
