In this special tutorial (as requested), you will know how to prepare the graphics for your layout and how to use adobe photoshop tricks for coding. So here it is, my own version (not very detailed though, but you should get the picture) of making a layout. :)

xoxo,kaila

Preparing the Graphics

Step 1

Create a new file that is 1000 pixels wide and 625 pixels in height. This is usually the standard size in order to prevent unwanted horizontal scrollbar/s.

Step 2

Remember that when you're making a layout, you should know how to manipulate your layers. Layering can be very useful especially when you want to move, delete, edit your layers. So for this, create a new layer above the default background layer.

Step 3

To make content or sidebar boxes, you use the (rounded) rectangular tool from the toolbar.

Step 4

This is the simple layout that I made using bru shes, text, etc. Notice that there is a "space" on the right part of the layout. We'll fix that in the next step.

Step 5

Using the crop tool, select the portion of the layout that you will only use. Press enter afterwards.

Step 6

The cropped layout (you could also crop the portion below because you won't really need that too). With this, you can save space for your photobucket accounts / file managers. Make sure that you've already saved this as a .psd file. If you're already finished with designing and all, save this as header.jpg. (Shift+CTRL+S)

Step 7

Now, we're going to make the background picture that we will use for our "layout". Select the crop tool again and crop the portion of your layout that will serve as the background picture that repeats. WAIT, do not hit CTRL+S!!! You will be doomed because your layout will be just like that (i hope that you get me). Hit the keys SHIFT+CTRL+S instead or go to FILE >> SAVE AS. Save it as bg.jpg.

Step 8

This is the background picture. Of course, I minimized that. XD So that's all for the preparation of the graphics!

Coding using PS help and NOTEPAD

Overview

I provided you below the codes that you will need in making a simple layout. The css can be learned in depth from here. Copy these to your notepad. I will further explain the important parts later.

<html>
<head>
<title>Insert your title here</title>
<style type="text/css">
body {
    font-family: Verdana;
    font-size: 11px;
    cursor: crosshair;
    color: red;
    background-color: pink;
    overflow-x: hidden;
    background-image: url('http://blabla.com/etc.jpg');
    background-repeat: repeat-y;
    text-align: justify;
    scrollbar-face-color: color;
    scrollbar-highlight-color: color;
    scrollbar-shadow-color: color;
    scrollbar-3dlight-color: color;
    scrollbar-arrow-color: color;
    scrollbar-track-color: color;
    scrollbar-darkshadow-color: color;

}

a:link, a:visited, a:active {
    text-decoration: none;
    color: hotpink;
    font-weight: bold;
    font-size: 11px;

}

a:hover {
    color: pink;
    background-color: white;
    border-bottom: 10px solid black;

}

h1 {
    font-family: Courier New;
    font-size: 18px;
    color: #1DA5EB;
    text-align: center;
}
</style>
</head>

<body>
<img src="http://yoursite.com/images/header.jpg style="position:absolute; left:0px; top:0px">


<div style="width: ##px; text-align: justify; position: absolute; left: ##px; top: ##px;">
<h1>This is a header</h1>
text here text here

<h1>This is a header</h1>
text here text here
</div>



<div style="width: ##px; text-align: justify; position: absolute; left: ##px; top: ##px;">
<h1>This is a header</h1>
text here text here

<h1>This is a header</h1>
text here text here
</div>


</body>
</html>

The Stylesheet

Okay stylesheet. Basically, it's just all about colors, fonts, and the like. For the colors, you can use "red", "blue", etc. If you want it to complement with your layout, use the "eyedropper" tool that can be found on your toolbar. In order to get the color code, double click on the color picker (on the toolbar too) and copy the color code. Example: #000000 or #5f0d0d. Don't forget the "#".

Header Image Positioning

Replace your header image's url there.. This means that this will be located at the left, topmost part of your webpage.

Content & Sidebar Positioning

Using the slice tool (K), select the portion wherein your content/sidebar will be "placed". Right click on it and get the number details. For this kind of layout, you won't need the "height" part. You will only need to find the "width". Here are some visuals..

Input the numbers here.. self-explanatory:

<div style="width: ##px; text-align: justify; position: absolute; left: ##px; top: ##px;">

<h1>This is a header</h1>
text here text here

<h1>This is a header</h1>
text here text here
</div>



<div style="width: ##px; text-align: justify; position: absolute; left: ##px; top: ##px;">
<h1>This is a header</h1>
text here text here

<h1>This is a header</h1>
text here text here
</div>

Finale

That's all about it. I hope that you've learned something from this tutorial. It took me a lot of time to make this. ^^