Using Photoshop as a Web Page Layout Tool

TIPS IN THIS CHAPTER

► Create Sketches with Accurate Proportions 92

► Begin Designing with the Appropriate Page Size 94

► Use Guides to Plan Page Layout 96

► Customize Your Page for MSN TV and Other Set-Top Devices 97

► Create a Seamless Photographic Background Tile 98

► Create a Nonrepeating Photographic Background Tile 101

► Create a Seamless Graphical Background Tile 106

► Create Your Own (Hybrid) Web-Safe Colors 111

► Preview a Browser Tile in Photoshop 112

► Use Annotations to Ease Maintenance 113

► Save a Copy as a High-Quality JPEG for Client Approval 114

► Use Actions to Automate Common Processes 116

Whereas print designers use programs like Adobe InDesign or QuarkXPress to lay out their pages, web designs typically create their entire layouts first in Photoshop before transferring to another program. This process is often referred to as mockup or comp development, because you're developing a mockup design of how the page will look when it is ultimately displayed as a web page by a browser.

If you're working for a client, this mockup will likely be used to obtain the client's approval before moving on to the coding of the site. For example, in my web development projects, I typically create two possible versions of the home page of the site. I find that quickly creating two designs in Photoshop is much easier than designing them first in Photoshop, and then fully executing them in code— especially since one of those is likely to be rejected by the client anyway. In other words, why bother coding something that may never get used?

The other reason working in Photoshop tends to be better for web design mockups is that clients will undoubtedly request several changes to the pages before you enter the coding phase. Most designers are more comfortable in programs like Photoshop than in HTML editors and can, therefore, make such changes more quickly. This speeds up not only the time it takes to gain client approval, but also the entire development process.

0 0

Post a comment