Web Design with HTML and CSS

Adjusting the image size.

Lesson 5, Graphics, Color, and Transparency 81

7 In the Subdivisions text box, type 8 and click OK.

Each of the eight grid subdivisions represents 100 pixels; you can use this value to

determine the size you want to optimize your image to.

Set up the grid lines to appear in eight subdivisions (top); the resulting grid (bottom).

Adjusting the image size

By looking at the grid on your mock-up, you can see the images on the right occupy

more than two grid divisions in both width and height, which means that this image is

approximately 225 pixels wide by 150 pixels high.

If you have Photoshop Extended, you can select an area in your image, choose Window >

Measurement, and then click the Record Measurements button to see the pixel dimensions of your

selection. This is a helpful feature when trying to rebuild from existing compositions.

You will now optimize this image to fi t the allotted space; fi rst, you’ll check the fi le size of
this image.