Web Pages with Photoshop

Step 4:

Take a look at the above image. If you have never used the measure tool, here is where it is in Photoshop 6. It will be in a different place for earlier versions. Take a look at your documentation if you cannot seem to find it. Now this tool is designed for exactly what you think it is... measuring stuff. A good carpenter always has a tape measure on his/her belt and the same is true for a web designer. We are information and artistic architects and we need to have all our tools ready to use with skill. So get to know this little guy.

There are two ways in which to measure parts of the page. One of them does not use the measuring tool, and it is great if you are making squares or rectangles using the marquee selection tool.

Take a look above and see that the selection I have is around part of my image. Now look in the info palette and see what I have circled. This information tells you the height and the width of the rectangle or square that you just made. Very, very handy trick and I use this all the time. Keep this in mind.

But if you need to make a quick measure for one direction or you need to measure between particular elements such as the side of the page to the start of an image or between type of some kind you should use the measure tool.

Now look at what the measuring tool looks like when it is in use. It is a long line with two cross hairs at each end. I have a red arrow pointing to it. If you select the Snap to Guides option in Photoshop it will save you some headaches later. This option snaps the start and end points to your guide. It works on the selection tools as well. The info palette has some extra information now that it did not have before. The left hand side of the palette now tells you where you started the measure relative to the ENTIRE image starting at the upper left-hand corner. HINT: this is great for image maps where you need to know the coordinates for active areas. The right side is basically the same in that it gives you some height and width numbers from the initial starting point.

Whether you use the selection tool or the measure tool is up to you, but I encourage you to play with both. They both serve a great purpose now and then.

What you need to do at this point is to go around and measure all the areas you think you will need to help you markup your page. Place these numbers and notes inside your graph paper plan, to show you where you need to put table rows, cells etc... At this point I really begin to plan my attack on the code. I want to make it as simple as possible, but also extremely robust and cross-platform compatible (if possible). Use your HTML knowledge to help you with this process. It's hard for me to say too much here, because I don't know your plan exactly for marking up your page. It may take you a few tries, but you will get it eventually.

Next week we start to actually slice things up. If you don't know where the slice tool is, look below. The slice tool is now available in Photoshop, but the features are still far more powerful in Image Ready, which comes bundled with the software. Switch over and check it out.