Design a Website In Photoshop Article

Putting It All Together

Now it’s time to put all the images we just sliced up into an HTML document, to create our page template.

  1. Create a table that has 5 rows and 3 columns. Be sure to place the <center> tag before the table and the </center> tag after the table, to make sure it’s centered on the page.
  2. Then, in the top row, make the first cell on the left col span 3, so you can place the header.jpg image inside that cell. This will also establish the width of the template.
  3. In the row below the header, make each cell’s row height 18 pixels, to correspond with the blue_square.gif image, and make the cells’ width 16 pixels. Do the same for the fourth row.
  4. Now, place the blue_square.gif image in the outer cells of the second and fourth rows. Place the image gray_bar.gif into the first cell (to the left) of the third row, and repeat this step for the third column.
  5. Set the background colors of both cells to #CCCCCC. Set the second column in the second and fourth rows’ background color to #374256. Give the center column in the third row (where your content will be located) a background color of #CCCCCC.
  6. In the fifth row, choose the first cell and make it col span 3, so that you can place footer.jpg in it.
  7. Lastly, be sure to specify the row height of the first, second, fourth and fifth rows, leaving the third row unspecified, so it can grow with your content.

And that’s it! Your page should look like this:

881_screen10As the page’s original white background didn’t work well with the design, I created a background image to tile behind the interface.

To make these simple scanlines, create an image in Photoshop that is 1 pixel wide and 2 pixels tall. Select a square that is 1px by 1px and color it to compliment your design. Then, move that selection down, and fill the new square with another color. Save the entire image as a 2-color gif image and name it bg.gif. Simply place this gif in the body tag of your new template, and it will tile across the page. To see the end result, click here.

Notice how the text seems to be indented in the content area, as a result of the placement of the gray_bar image. You will need to change the background color of those cells to the same color (#CCCCCC) as the gray_bar image, so that when the page grows longer, it will still look the same.

To create the space on which the text links are placed, I merely made the background color of that cell in the table the same color as the blue_square image (#374256). The changing color rollover effect on the text links is created with CSS (Cascading Styles Sheets).

Go to page: 1 | 2 | 3 | 4

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.