Web Pages with Photoshop

Step 3:

Now we want to really start planning how we are going to lay this page out in HTML or in your WYSIWYG. The site I am showing you is template based for the most part. What I mean is that I put the pages together, so that they could be and are useful for every page of my site. This isn't always possible, or necessary, but for simplicity we will assume that this is how we are going to set our site up. If you did not set your site up this way, no big deal, you will just have to do this step for every page.

Look in the upper right hand corner of my page at http://www.jlswebsource.com and you will see an image. This is the only image that changes from page to page (other than images in the actual content). I set this up by making several images the same size and putting each of them on a layer. Then when I wanted to change the image I just turned off all the layers I didn't want and left the one that I did. Let's not get ahead of ourselves though. First things first...

We need to use some guides in order to plan out our site. Since web pages use tables to line up complex layouts, we want to make our guides reflect this. Plan out how you are going to do this in advance. How you ask? Well, I use that paper stuff that comes from trees. But I use graph paper for this step. What I do, is I make all the guides on the page in Photoshop. At the same time I am drawing out the layout on a piece of graph paper, thinking in terms of tables, nested tables etc... I usually do this about 3 times until I get it just right. It doesn't have to be pretty, just make it an outline of your page and what graphics go where. The reason you want to do this is that not only does it make coding pages about a million times faster, but it also let's you see what areas you can eliminate as graphics and replace with background colors in HTML code. Take a look at the next few pics.

Image 1:

This is a screen shot of my navigation. You can see that there are a bunch of guides running through it. I am going to break this up in to pieces so that I can make a JavaScript rollover for each "button" I have include another layer in Photoshop of each rollover state, so I can easily switch back and forth later. The entire navigation will be part of a single table cell, that has another table nested inside. Each "button" will occupy its own cell in this table.

Image 2:

This is a shot of the left side of the image/ web page. Most of this is just blank space that is a hex color of #003366. I will use HTML to make this portion. It will be individual cells in the page table. The uppermost part is part of the header portion. I included it so you could see where I was on the page.

Image 3:

Here is a shot of the header and that image I was talking about at the beginning of the article. I am going to break this into two pieces and make two table cells to hold them. When I go from one page to the next, only the right image will need to be loaded. The main header portion will be cached already. Bandwidth is vital!
Ok, I think you can see where I am going. Play around with this and do you best to make it work well. Next week we are going to start measuring sections of the page, and we will also start talking about slicing the image up. You may want to play with your slice tools in both Photoshop and Image Ready this week to prepare yourself. Also make yourself familiar with the measuring tool and the Info palette.