Using Image Files to Design Website Layouts

Many people choose to design the layout of their web pages using a graphics application such as Photoshop. This can be a very useful approach if you know what you are doing. By this we mean you should understand the following:

Web pages are based on HTML, not graphics. Except in very rare cases, you should not use image files to create a web page. Rather, you create the web page using HTML and CSS and add image files as required. If you are using a graphics app for design, the idea is to create the layout in the graphics app, then convert the layout into HTML/CSS. Image files should almost never be the sole content of the page.

If you are one of the many people who wants to make a nice-looking photoshop temple and then click "Save As..." to make a web page, think again. You need to go back a step and learn how web pages are made first. You should only proceed with your image-based template once you know how to make it into a nice standards-compliant HTML page.

Why Not Use Image Files For Web Pages?

Just to clarify, we are talking about using only image files as the content of your web page. Images themselves are fine of course, it's only a problem when you don't have any decent HTML, CSS, text copy, etc.

Here are some of the reasons why using only images is a bad idea:

• Images have much bigger file sizes than text, making them slow to load and requiring more bandwidth.
• Some people don't have images enabled, or have slow connections that make images very slow to load. These people will never see your content.
• Search engines cannot read image files, so your site will be invisible to them.
• Images cannot resize to fit the user's browser window.
• Images cannot be used with accessibility features such as text readers for the visually impaired.
• And finally, anyone who knows anything about websites will see what you have done and know that you are an amateur.

Making Image-Based Templates

The best advice we can give is to check out some of these web page templates made in Photoshop. You will see how the templates were made plus the resulting HTML, CSS and image files. Follow the same path and you should be fine.

Here are some more tips:

• Decide whether the page is going to be fixed width or dynamic (variable). Fixed-width will obviously be easier to design in a graphics app.
• You will almost certainly want to use layers for different page elements; for example, the header, body, footer, navigation menu, etc.
• You will probably use a combination of text and image layers. Text layers, especially those used for the main text copy in the page, should use a common font suitable for web text. Don't use unusual fonts if they will be converted to text in the HTML page.

More Help

Web design is a complex thing so don't expect do go into a forum and ask "How do I make a great website using Photoshop?" You will need to search, read tutorials and see how other web designers do it. In time you will pick up most of the basics, after which you will be able to ask specific questions in places such as our web design forum.