Photoshop Tutorials

I am going to show you how to code a one column layout using purely CSS, I will start this off by saying that every template is different therefore one coding tutorial for all is not possible, I have made a template quickly for the purpose of this tutorial. Here is a screenshot of it:


(Click for full screenshot)
Now, We will begin by saving our images, I don't use the slice tool, I prefer the Rectangular Marguee Select tool.
I am going to show you how to save your images for the template using my header, on the rest I will not show an example because yours is probubly a bit different and it would just make this tutorial monotonous.
We start by figuring what the height of the header is, Here is the process I use when I am unsure.
Select the entire header by holding down your CTRL Key and clicking the layer's icon

That will make your header selected like this:


(Click for full screenshot)
Now press the following key combination:
CTRL + SHIFT + C
This selects all the layers visible in the selected area, Now create a new document and see what the height is:

As you can see, the height of my header is 100px. You can cancel the new document and go back to your template window, Now go to the Rectangular Marguee Select tool and look at the top, Select Fixed Size from the Style drop down select box. In the boxes beside it put the width at 1px and height as 100px (Or whatever the height of your header was in that new document)


(Click for full screenshot)
Now click on your header with the rectangular marguee tool, It should make a selection simalar to this:

(Click for full screenshot)
You may want to zoom in and make sure it has only selected your header, If it needs to be moved you can use the arrow keys on your keyboard to move the selected area.
When you are satisfied with your selection press this key combination:
CTRL + SHIFT + C
and create a new document (using the settings it says, It adjusts its width and height according to what your selection was.)
Now in the new document press CTRL + V to paste, now CTRL + SHIFT + S to save, go to your images folder and name this header_bg and select GIF as the document type.
Now do that for the rest of your images,
PS: If you have rounded corners on anything like I do, CTRL + Click the layer icon and just copy, create new document, paste, and save that as a full image, Saves alot of time and doesn't effect load effiency by much.
Once you have all your images saved, your ready to work on the coding. First create a new document named index.html and a new document named style.css...
We will work on index.html for now, Open it and put the following code in there:

Now we will start in style.css open it and put the following code,
So now that you have a basic page setup, We will make a wrapper...
Now go into your index.html and right under the body code put this:
Now create your header div in style.css, Yours will differ from mine but you can adjust it as needed.
Now go into your html page and put this code:
So now you have a basic page with a header, You will need to keep going on your own, Here is my end result You can view my My CSS Code if you get stuck.
I will now go over some techniques I use in CSS. Full Page Gradiant Background (Seen in template)
Do do this, replace the body code at the top of your CSS with this: What you need to do now is replace the #707070 with the last color in your background image, You also need to make a background image simalar to This
Make text go to the vertical center (Used in the content header of template)
To do this paste this code: Change the line-height: 34px; to whatever the height of your content top (In my case its 34px) Now in your html put this: Inside your content top div. Thats about it, I will be making tutorials for 2 and 3 column templates soon, Email me if there is something you don't understand and I will do my best to help