Designing a Website Layout

This article will start you off in designing your own website layouts quickly and easily - without the boundaries of separating your layout into different parts and working on them separately.

This tutorial is based on using Adobe Photoshop CS, but the same techniques can be applied to other graphics suites (or older versions) that provide a slice or similar tool. Only the main concept of splicing will be covered in this article, and not the actual creation - that's up to your own imagination. Various images will be provided in thumbnail view that you will be able to click to expand. Some of the example images below contain a incomplete copy of The Risen Realm's layout. You do not have permission to use it nor distribute it in any way.

First, we'll start by creating a new document. Go to File > New, and enter in for Width: 750 and Height: 800. Your layout will turn out to be 750 pixels wide, and you will be able to create up to 800 pixels height (but it will not limit the final result). I've chosen 750 because it fits fine under the resolution of 800x600 (but not 640x480) and should give you ample space to fill in content. For height, I've chosen 800 because it fits nicely under my current resolution. You may change it to your needs.

Well, now you should have brand new spanking white canvas. This is where your imagination steps in. Draw your layout as you like.

Now that you're done, then begins the fun part. Select the Slice Tool from the Toolbar.

Now, using the slice tool, cut your layout into different sections. Keep in mind, this will eventually be turned into HTML so think about the best position to slice your layout. You do not have to export every slice you have created, as you will see later on.

Now, that you're done, select the Slice Select Tool.

Select all the slices you have and open its Slice Options dialog. Here, you will be able to change various aspects. For Name, I recommend you change it so when you export, the slice's filename will be the Name field of that certain slice. It's more for organization than anything.

You may also set for no image to be exported by selecting No Image under Slice Type.

Now that you're done, it's time for export. Select Save for Web from the File menu.

Here, you may change various settings for each slice. When you're done, click Save.

You've now reached the very interesting Save Optimized As dialog. As you will notice, at the bottom of the dialog, you will be seeing various options. I'm going to explain Save as type and Settings.

Save as type allows you to save just the images portion of your layout, or if you want Photoshop to generate HTML for your layout. You may also choose HTML only if you would like to. I prefer doing the HTML myself, but it's your choice.

Settings allows you to change settings, go figure, about how the layout will be exported. Click Other and explore around to see the options.

By now, hopefully you now have your own very layout you can use on your own website! Good luck!

User Feedback & Comments

Please click above to comment or to view comments!

© Copyright 2001-2004 The Risen Realm Studios. The contents of this site is the property of their respective owners. All rights reserved. By accessing this site, or any of its services, whether directrly, or indirectly, you acknowledge your acceptance to the Terms of Service.