Photoshop® CS4 Bible

24.1. Exploring Web Workflows

For the uninitiated, there is sometimes confusion when first dipping a toe into the pool of Web publishing (sorry for the terrible metaphor). People often confuse the tasks of producing Web graphics and producing the HTML code that makes up the foundation of a Web page. This section aims to clear up any misconceptions by outlining a typical workflow for producing a Web site and clarifying the roles that Photoshop and Dreamweaver play in that workflow.

When producing a Web site, the place to start is with pencil and paper. Decide the purpose of your site, look at similar sites, and take note of the things that you think they got right (and what you think they got wrong). Is it easy to find information? Is the navigation simple and straightforward? How many top-level pages are there on the site (put another way, how many links are on the main navigation)? How about the use of typography and imagery? Once you've got a basic idea of those sorts of things, get your site's architecture (that is, the pages that make up your Web site) nailed down and sketch them out, so you have an idea of how everything fits together.

Next is visualization. Most Web designers will produce a "flat," nonworking version of what the site will look like, coming up with a color panel and type treatment that make up the visual language of the site. Design the headers, navigation links, position any photography or graphics you'll be using, add "dummy" text, and make everything look ...