Web Pages with Photoshop

A while back somebody asked me a simple question. "I want to make images for my web pages, but what size do I make them?" I remember having this same problem when I was first starting to lay pages out. How big do I make my header? What is a good width for a navigation area at the side of my page? How big should I make my text areas? My answer was also simple. Lay it all out in Photoshop first.

The concept is really simple. If you want to make your pages artistic, make them pieces of art first. Lay them out into web pages later. That doesn't mean you can turn an abstract rendition directly into an interface, although it doesn't mean you can't either. With some forward thinking and careful planning, you can make your web pages 10 times as good, in less time than you ever have.

To start let's talk about the web page size and screen resolutions. Now most people that are going to look at your site are going to be doing it with a screen that has an 800 x 600 pixel resolution. So if you make your pages 1024 pixels wide, these people will have to scroll sideways to view your pages. Let me tell you the first rule of web design... never make people scroll sideways. Sometime it is going to happen... but if you make them scroll more than a few pixels, they are going to leave! So just don't do it. I like to make my pages about 750 pixels wide.

Now keep in mind, that the best pages will fit any screen resolution. So when you comp your pages, keep this in mind. The way this works is that you design HTML formatting into your pages. Stop feeling like HTML is hindering your artistic ability and start using it to your advantage. Learn the limitations and work well with what is left. When you do this, you can have part of your art be HTML. A good example of this is when designers make rounded edges on boxes in a web page. We only make the very corners of the box graphic outside of HTML. The rest is done with HTML. This helps you to minimize bandwidth. An even better example is when browsers that are resized, change their size of the page to fit the screen perfectly. You do this by cutting your pages apart and making all the possible measurements of table cells etc... in percentages rather than in actual pixel sizes. Restrict your use of actual pixel sizes only to the areas where it is absolutely necessary. We will talk more about this later.

Now rather than go through a whole lesson in web design theory, I'd rather show you how to lay your pages out in Photoshop first. I have included a reduced version of my current website that I took from the original PSD file. Think of it as a blueprint for a building. You don't just go out and start building houses. You have to plan, plan, plan. Once you are done, you build.

Step 1: Sketching.
The very first thing you want to do to get started designning your pagess, is to sketch out some ideas on paper. Yeah... real paper that comes from a tree. Do this late at night in a smoky bar or cafe. Actually, this isn't necessary, but being in a place where you can get inspired helps tremendously. Jot down as many ideas as you can. Don't be disappointed by your complete lack of ability to draw with a ballpoint pen on a napkin. It really isn't important. Remember learning about brainstorming back in elementary school? Well this is when you can put it to good use. After a while, you may come to be able to put ideas on the screen as you are thinking of them, but don't do that for as long as you can stand it. I do a lot of sketching at school (when I should be listening to lectures), and late at night (when I should be sleeping). Once you have some skecthes done, it's time to move on to Step 2.