Designing A Web site Using Photoshop

The layout of a web page in Photoshop

I use Photoshop primarily to design web sites, although it would be impossible to design a web site effectively using Photoshop without having built one without understanding how a web site is laid out with HTML. The next important thing to understand is that download time is still an issue for the majority of internet users around the world, so keeping your graphic files to a minimum size is important. In this tutorial, I will cover these two concepts and explain to use this new knowledge to start creating your new web site layout

Relating a Web Site Layout to Photoshop

You can design a good-looking web site in Photoshop that is totally impractical for the real world internet. Briefly, let me explain how a web site works.

A Web Site is a Grid

A web site uses a language called HTML to tell a web browser what a web page is supposed to look like. Traditionally, web sites have been laid out using an HTML element called a table. A table consists of elements called cells, which form the grid of table. A web site is, in general, constructed like a table, meaning that the site should be designed in blocks. For instance, if you look at this web site as an example, there is a graphic block at the top of the page, followed by several smaller blocks for each navigation link. The navigation is followed by a big block of text, followed by another block for the footer links.

For those who already know something about HTML and coding web sites, I know that using CSS to create a web site layout as much as possible is ideal, but even if you are using CSS and div tags, the result is roughly grid-like. I'm using tables as an example because it is easy to understand and many web sites are still using tables for their layouts.

So a web site is laid out in squares and rectangles, all of which combine to form a grid. Of course, there are a lot of techniques a designer can use to get around this grid layout, and to make it even more confusing you can have layers on a web site, with layers overlapping other layers. You can achieve some neat effects this way, but for the most part, keeping to a grid-like structure improves the usability of your site, meaning that people are able to understand and use the site more easily.

Some More Photoshop Web Site Tips

Choose a Traditional Layout

Just like people are used to reading a book in a particular format, web visitors have expectations on how they will find information on your site. It is good to stick with a traditional layout format for your site, so that you don't make it more difficult than it needs to be for a user to find information. The following are the most typical options for a web site layout:

Be Flexible

Many modern web designs get away from having to use a flexible layout by creating a web site that cannot change size. They "fix" the width of the site so that it will look the same in every browser. A typical choice is to make the site about 775 pixels wide, that way it will still show completely on a monitor that is using a 800 x 600 pixel resolution. While it is much simpler to design, the users of the site suffer in a two major areas:

1. Because the design is not flexible, if a browser is a smaller size than the full monitor window, some of the site content will not be visible, and they will have to use horizontal scrolling to see the whole page.
2. If a user has a larger monitor, they will not benefit from the extra space their monitor allows because the site will not expand to fill the space.

Designing a site to be flexible can be tricky because you are designing a static graphic representation of what a site will look like once it is being displayed in a browser. You will need to identify areas in the design where something can expand or contract without actually being able to expand and contract it yourself. Lets talk about the different areas of the page and how they can be designed to be flexible.

The Body of the Web Page

Typically, the body of the page contains the main text, whereas the columns to either site display navigational links or information feeds. This text will expand or contract easily, so no problems there.

The Web Page Footer

The footer is typically easy to make flexible. Because the footer is traditionally used for text links and copyright information, the text can be expanded and contracted as needed. Much of the time there is enough space to one or both sides of the text that the edges of the browser window will not even be close to the edge of the text.

The Web Page Header

The header is often the most difficult to make flexible because it usually consists of pure graphics. The solution, however, is fairly simple. You will need to design the header so that there is an area of the header, either to a side, both sides or in the middle, which contains an image that can be repeated. Another option is to designate an area where there will be no graphics at all, and so the expanding area will consist purely of white space. I will cover this technique in more detail in a following section.

Keeping Graphic File Sizes to a Minimum

Understanding the relationship between the graphics you see on the screen and their respective file sizes takes some practice. Here are some general guidelines for keeping graphic sizes to a minimum:

The More Pixels, the Bigger the File Size

This is obvious, but its implications are important. If you are faced with the option of saving an image with a border or not, think about whether you can create the border using HTML and CSS. Also, if your graphic is a square shape, you can often cut off some of the top, bottom or sides where there is extra space and create a rectangle that is roughly the same size, but will make for a smaller file size.

Keep the Web Page Header Less Than 150 Pixels Tall

Since the header of the page is typically purely graphic-based, the taller it is the bigger the resulting image file sizes will be. Keeping the header small also has the additional benefit of allowing more room on the page for real information or money-making advertisements.

Understand the Difference Between GIF, PNG, JPG and BMP Image Types

This is very important. When I have the time, I will add a tutorial covering this subject, but for now you can find a lot of reference material on the web regarding these different file types. It is especially important to understand the difference between raster (or bitmap) and vector graphics. GIF and PNG are both vector based, while JPG and BMP are raster. It is also good to understand the terms "compression", "lossy" and "lossless".

In the next step in this tutorial series, we will discuss creating an ideal document type for designing a web page and some good ways of keeping your files organized.