Web Pages with Photoshop

Step 2:

Now start to think about how you are going to get your sketches from the paper into the computer. First thing you need to do is decide what width you want to make your pages. We talked a little bit about this last week. I make mine 750 pixels wide. There is a way to determine what percentage this will be later, if you decide that you are going to lay your pages out with percentages rather than pixels. We will talk about that in a few steps.

First you need to gather all the stuff you need. If you need photos, get those. Find the fonts that you want etc... Then you can really begin to design your pages in Photoshop. Begin to lay the page out exactly as you want to have it online. Create your headers, your text areas, your navigation etc... If you need to put some text in a text area just to see how it looks, you can do that now also. Use the font you want to use in your HTML text, try some different colors etc...

You will undoubtedly find that you make revisions as you go. You want to balance the page nicely. Remember that navigation is important, but you want to integrate it nicely within your pages. Make the navigation easy to find, but you don't have to design around it. Try your best to make it part of the artistic whole. This isn't easy and it takes practice, but it is really important. Nobody wants to go to a site where they can't find the navigation. But nobody wants to look at a site that is designed around the navigation. It's just boring to do. So keep that in mind.

Remember also that your page will be longer that it is wide (for the most part). This isn't always true, but for most documents it is. So make sure that your page is not too length dependent on the design aspect. For example, if you have everything within a box that is 500 pixels in height, you are going to be limited to that in the future. When you start to get a ton of content, it will stop working. Try to think ahead. When you design the page, think about having it look good both when it is a short page that does not scroll at all vertically, to a page that scrolls a long way vertically.

Here's a little trick that I like to do. It sounds hokey but it works really well for me. Once you have your layout done, close it and leave it alone for a few hours or a day. When you go back to open it, do so with your eyes closed. Wait until you know it has loaded completely on to the screen and open your eyes. Listen to how you "feel" about the page. What does it convey? How do your eyes move around the screen? Is there any areas that are too "heavy" and not enough negative space? Is it too empty, with too much negative space? And most importantly, how does it make you react. If you have a smile of pride on your face, you are on the right track! If you think it is terrible, you aren't.

Play around with tweaking and changing some stuff and then repeat the process. You will find that over time, the page emerges as a real work of art.