Web Design with HTML and CSS

Resizing the image

Lesson 5, Graphics, Color, and Transparency 79

1 In Adobe Photoshop, choose File > Open. Navigate to the web05lessons folder and open
the fi le named web0501.jpg. An image of several people enjoying smoothies appears.

The designer has planned well and knows the approximate size that this image will be on
the web page. You will now open the rough comp that the designer created to plan the
size of the image within the page.

2 Keep the fi le web0501.jpg open, and choose File > Open. In the dialog box that appears,
navigate to the web05lessons folder.

3 Locate the image named web0502.jpg and click Open. The rough comp appears.
(The designer created this document using the SketchFlow feature in the Microsoft
Expression Blend application.)

The rough design for this web page.

The designer has decided that the fi nal web page will be approximately 800 pixels wide. For
more information, see the following sidebar, “Images and Browser Window Size.” The images
you will work on are represented by the two solid squares on the right.