So now we are done! You can see the skeleton site we built here. And you can download the photoshop file as well.

We output five pages total, each one linked to the other with a working menu, each one has a content area defined on the page that can be easily modified in a traditional web editing package (DreamWeaver, GoLive, etc.)

Check out our other tutorials where we completely populate a site and define each page in Photoshop.

Let’s Build It! Launch SiteGrinder. On the Page setting panel, designate the home.html page as the home page by clicking its radio button. And, just to round it out, change default background color to teal.

To finish out our skeleton, we add a small graphic or logo to the right side of the page, and make a content area on the left.

Drag out a large text paragraph box on the left side of the document, and type some random text. Again, use a common font like Courier New, and make sure anti-aliasing is set to None.

Now, the bottom menu. In Photoshop duplicate the main-menu layer and name it bottom-menu. Move it to the bottom of the page. Set the character tracking to 0. Edit the menu. Each menu item is separated by double spaces, change it so that each menu item is separated by space, vertical bar, space.

Test it. Save the file, and launch SiteGrinder We’ll take the opportunity to set the default Text Button settings to make the menu pretty. Set the Border to solid, width 1, and use our teal color. For the rollover, turn off the italic checkbox, but turn on custom forecolor anc backcolor and set them to teal and tan, respectively.

Then Build Preview.

At this point the built web page should be looking something like this:

And the menu should be working.

Next, the menu. With Photoshops text tool we drag out a text box roughly 30 pixels tall and about the same width as the title. Make the text centered, black, and choose a common font like Verdana. Set the character tracking to 200. Anti-aliasing must be set to None.

Since this is a menu, each item is separated by two spaces from the next item.

Name the layer main-menu.

Third, we put the main website title across the top of the document. This is the main graphical element for this site.

Using Photoshop’s text tool, we type our title big and large in the center top part of the document. The main text is black, the second word teal. We used Twentieth Century MT as the font, tracking of -50, anti-aliasing smooth.

Alternately, consider using a more common font (like Verdana) with the anti-aliasing set to None. Then SiteGrinder will not make a graphic for the title, it’ll be real HTML text.

Second, we make a new document. Let’s say 700 pixels wide, 500 pixels tall, with white as the background color.

First we decide upon a color scheme. White for the background, black for the text, teal will be the dominant color, and tan as the subordinate.