Web Design with HTML and CSS

80

Resizing the image

Adding a matte to a GIF Web Design with HTML and CSS Digital Classroom

In this case, you have a mock-up that helps to determine the size of the fi nal images. Even if

you do not have a mock-up prepared, before optimizing your images, you should know the

approximate size of your fi nal images based on the fi nal size of the web page.

Images and Browser Window Size?

According to the website Counter.com, over 50 percent of users have monitors with a resolution

of 1024 × 768 pixels. Thirty percent have 1280 × 1024-pixel monitors. This does not mean their

browser window opens to that size; in fact, their browser window usually varies from 800 × 600

pixels to 960 × 600 pixels.

To determine how wide a web image should be, separate the total number of screen pixels into

sections, and specify the percentage of the screen you want the image to occupy. For example,

if you want the image to occupy half the screen (remember, browser windows are typically

about 900 pixels across), type 480 into the Width text fi eld in the Pixel Dimensions section of

the Image Size dialog box; for one-quarter of the screen, type 240 , and so on. You should also

remember that the pixel size will not change, regardless of what the ppi resolution of your image.

So, 200 pixels in a 300-ppi image occupy as much window space as 200 pixels in a 72-ppi image.

At this point, you can determine the approximate size of the optimized images. In this

example you will use the grid feature, separated into percentages, to help you determine the

size of the images.

4 With web0502.jpg open, choose View > Show > Grid. A grid appears in the image area.

You will now adjust the grid size.

5 Choose Edit > Preferences > Guides, Grids & Slices (Windows), or choose Photoshop >

Preferences > Guides, Grids & Slices (Mac OS).

6 In the Grid section of the Guides, Grids & Slices dialog box, type 100 in the Gridline

Every text box and choose percent from the drop-down menu.