**NOTE** This tutorial is for making simple table based layouts like the ones commonly seen throughout Horseland and other sim games. It works very well, even under the restrictions sim games put on the code that goes into their players' homepages. In my opionion, it is the best way to make layouts for sim games, and since this is the method in which all my free layouts are made, I will not be making any more tutorials on how to make layouts a different way.
TO USE THIS TUTORIAL, YOU MUST HAVE ADOBE PHOTOSHOP (OR SOME ADOBE GRAPHICS PROGRAM, OR POSSIBLY PAINT SHOP PRO) AND BASIC KNOWLEDGE OF HTML. IF YOU ARE LACKING ONE OR BOTH OF THESE REQUIREMENTS, JUST STOP NOW. REALLY. I DONT WANT TO DEAL WITH YOU. To get a free demo of Photoshop, go to http://adobe.com/photoshop, but for god's sake, learn to make simple graphics in it a little before you try to do any layout-making. It could get very messy if you don't.
Alright, if you're still reading, I can safely assume you've gotten your hands on a copy of the glorious Photoshop, and can use it pretty well, right? Right. Well lets get going, then. (I reccomend you read the whole thing through at least once before you actually start making your layout.)
1. First, create your layout's main image in Photoshop. I made this tutorial while I was making the new Harry Potter layout, so thats the one we'll be looking at in the pictures.
2. Then add the space where the text will go. Large blocks of solid color are always good if you're just starting out. So far, this is just like making any other graphic, isnt it?
3. Ok, this is where it gets different. In the toolbar, select the slice tool by clicking on it or pressing "K".
4. With the slice tool, click and drag over the area where you want the text to be on your layout.
5. Using the eyedropper tool, click somewhere inside your text space. The foreground color swatch should change to the color you selected. Next, click on the foreground color swatch. A menu should pop up, and there should be a six-character-long code (a hex color code, if you know what that means) near the bottom right corner. Write it down, we'll need it later.
6. Now, go to the File menu, and select "Save for Web." Click the save button. When the menu comes up, make sure "HTML and Images" is selected at the bottom under Format. Then click save. A HTML file and an images folder should be created wherever you told the program to save them.
7. Alright, now leave Photoshop, and open the HTML file in your favorite word processing application. (When it comes to HTML, the simpler the program the better, so if you have Windows, I recommend Notepad, and if you have a Mac, TextEdit, but any program will do.) You should see a sizable block of code. Find the part that includes <img src="images/nameofyourfilehere_03.jpg" width="###" height="###" alt=""> Take a look at the width and height values of the image.
8. Next, select the width="###" height="###" part, and cut and paste it inside the <td> tag, so it looks like this: <td width="###" height="###">.
Then delete the <img src="images/nameofyourfilehere_03.jpg" width="###" height="###" alt=""> part. You will put the content of your layout where the <img src.....> used to be.
Now, since the background of this text space is a solid color instead of an image, we can use a color code instead of a picture url. Remember the color code we copied earlier? Inside the <td> tag, write the following: bgcolor="#colorcodehere". (and replace "colorcodehere" with your color code, of course.)
Finally, make sure you write valign="top" inside the <td> tag. This will make sure the code stays at the top of the text space. The code should now look something like this:
9. Now, start up your web browser, and open your HTML file in it. It should should look something like this:
STOPPING POINT If your layout looks somewhat like the one above, good job! If not, go back and read over the instructions again, to see if you made a mistake somewhere. Once you've got it working, you can continue on if you feel like it.
DON'T FORGET: If you want to use your layout on your Horseland page, you'll need to upload the layout images onto Horseland horses or onto some sort of server (ie. Freewebs, Photobucket, etc.), and change the image URLs in the layout appropriately.
Want to add a scroll bar to your layout? Click here.