Once the basic requirements of a Web page or Web site have been determined and outlines and site architecture have been loosely established, the actual design work often begins with a wireframe:

Wireframes can be simple, hand-drawn sketches:

or elaborate blueprints (drawn with dedicated wireframing software) that are filled with detailed illustrations and annotations:

The more complex your site is, the more important it is that you wireframe it before starting construction. More examples of wireframes are here and here.

To use Photoshop as your sketch pad for Web design, begin by opening a new file at whatever width you are building your site. The most common widths in use at this time are 800 or 1000 pixels. Resolution should be 72 pixels per inch and color mode should be 8-bit RGB:

Height is not important since it will be determined by the amount of content you place in the HTML page. The purpose of this step is to build the site's graphics, its "look and feel."

Working from a Wireframe

At this point, if you are working from a wireframe, you can rough-in the page layout:

If you are working for a client or as part of a team, this is a "review point." Initial wireframes should be reviewed and approved by everyone involved before work proceeds.

If you are working for a client or as part of a team, this is a secondary "review point." Finalized wireframes should also be reviewed and approved by everyone involved. Wireframes should address how content is presented, how the user navigates the site and any included interface elements like drop-down menus, forms, etc.

From here, you start the actual design of the Web page:

Again, if you are working for a client or as part of a team, this is a "review point." Before you start actually coding the pages, save JPEGs of your Photoshop design work to distribute to anyone who needs to approve the site. There can be a huge amount of "back and forth" at this stage of site development as logos, navigation, color, etc. are finalized.

Once the Photoshop mock-ups are approved, use Photoshop's Web tools to export the graphics and begin building the site.

Here's another example. Mouse over it to see the mock-up based on this wireframe: