Web Design with HTML and CSS

(National Geographic (Little) Kids) #1

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.
Free download pdf