Firstly, adding your text to the layouts is very simple, all you have to do is change the text I have put in with your own text. For example a paragraph in my layouts would normally look like this:
<p>Text text text text.</p>
Now what you do is you ignore the <p> and </p> tags and simply edit the middle bit with the text.
The copy and paste tool is your friend as well. Depending on how many header sections you want all you have to do is to copy a section or block of html, and then paste it lower in the document. A segment will look something like:
<div id="header">Content</div>
<div id="link">
<p>Text text text text.</p>
</div>
Remember! It's very important to make sure you include all the beginning <div> and ending </div> tags in your selection or the page won't display correctly!
Labeling the headings in the heading boxes is simple! Where you see:
<div id="header"></div>
In between these two tags you will insert your title or heading, the html will then look something like this:
<div id="header">--{My Favourite Music}--</div>
Finally the end product would look something like this:
When you add a link to the navigation section remember to replace the filler/fake links with your own. From something like this:
<a href="link.html">Link</a><br>
To something like this:
<a href="index.html">Home</a><br>
Of course it helps if you have some background knowledge of html and how html tags work, but trust me these layouts aren't too difficult for beginners to figure out, all it takes is some pratice and some trial and error work! All the html for the layouts on the site has been generated (created) with wordpad and notepad, so there's nothing complicated or alien about it!
Templates for buttons/banners/avantars come as .psd files, that's adobe photoshop format. Why is this? Because adobe photoshop saves transparencies that are editable and uncompressed. What this means is you can work on adding graphics underneath these templates and 'cutting out' the bits you don't need.
First of all, what is a template?
A template is an outline or collection of outlines that form a design for a transparent image.
What's a transparent image?
To use a simple term, a transparent image basically lets you see the background of a webpage through certain parts of it, hence the term transparent.
Why would I want something that sounds so complicated?
The choice is completely yours, you can use simple jpeg and gif banners and buttons without even having to come near transparencies, but when you start wanting more funky banners and buttons, that's when transparencies come into the picture. You can design bits of banners that fade into cubes, or have circular corners, or looks like a scroll, or, or, or... The possibilities are endless!
Ok, so how is it done?
Well you WILL need a graphics editing tool, and since the templates on the site are all going to be in .psd format, you will probably need adobe photoshop to edit them. With that out of the way you simply unzip the set of templates, choose the one(s) you like best, and load them up into photoshop.
Now for some easy steps to follow:
First of all, choose a suitable picture for the template, preferably the same dimensions as the template or cropped to fit the template. Open the image in photoshop next to your template window. Left click on the template you chose, then drag it over to the window with your preferred image and drop it there. If the template is not centered then keep moving it over the image until it is.
Next, hold down the Ctrl key and hit the + key until you have zoomed in by 800%, it will display the number in the window toolbar. You'll see all the delicious little pixels of colour.
Now select the eraser tool and in the eraser options menu you will see an option labelled Brush: with an arrow next to it that will open a dropdown menu with all the brushes currently being used. Select the smallest brush, or enter the values 1 px in the box and hit enter.
When you have done this, turn your attention to the Mode: setting and click the arrow to open the drop down menu and select pencil. This will give you a crisp edge when erasing parts of the image you don't want showing through the template.
What you do now is select the bottom layer the one with your image and you start to simply erase the parts of the image you don't want to show according to the template design using the lines as your guide. Note! Make sure your image is not set as the background layer or this won't work! Place your image on a separate layer and delete the background layer so that it becomes transparent! To do this simply right click the background layer image, select 'duplicate layer' from the sub-menu, then delete the original background layer!
When you have finished erasing the pixels you don't want, hold down Ctrl and hit the - key to zoom back out to 100% to check and see that everything looks as you want it to look. If you're satisfied with your end product, all you have to do is go to File > Save For Web. In the right side of the screen that pops up will be several options, while in the left you'll see a preview screen.
On the righthandside, under the first dropdown menu, pick the image type as GIF, make sure the Transparency checkbox is checked ignore everything else, then click on the save button at the top. You will be prompted to enter a name for the new file, do so and hit save.
Congratulations! You just applied a transparency template to an image and created a transparent GIF! Crack open a can of beer and celebrate!