Building Web Sites All-in-One Desk Reference For Dummies®

Chapter 7. Creating a Web Page from a Photoshop File

In This Chapter

• Finishing a wire frame design

• Dealing with graphics: Slicing and optimizing

• Creating a transparent image

Planning and wire framing can save you a lot of headaches later because it's easier to fix mistakes before the whole site is built. In Book II, Chapter 4, we show you how to create a Photoshop wire frame that you can use for a page layout. In this chapter, we show you how to take that wire frame to the finished product. Creating a wire frame helps you decide what belongs on the screen, figure out the underlying structure of your site, and make adjustments as necessary before committing to a whole design. We also show you how to develop a layout, slice a document, and prepare graphics for use on your Web page.

Taking a Wire Frame to a Finished Design

With a complete wire frame, follow these steps to create your page layout:

1. Launch Photoshop.

2. Open your wire frame file.

3. Choose your color scheme.

   When choosing colors for the Web site, check to see whether the organization has already chosen colors for its communications. If so, ask for the RGB or hexadecimal codes for the colors to ensure that you use the correct ones. Book IV, Chapter 1 has more details about the different types of colors and why you need RGB or hexadecimal colors instead of CMYK.

   Some designers advise you to use the Photoshop Eyedropper tool to get the colors from a CMYK document, but this is not a good way of getting the colors. It can be unreliable, and ...