II. Making the Layout

A. Introduction

Don't judge a site by it's layout? People certainly don't do that. Unfortunately, if you had the best content a website could offer, and your layout stunk, too bad for you. Most users won't think twice about closing the window and moving onto to another site, especially in the large Zelda community. The layout also gives your site a feel, which can be used to reflect your content in an effective way. In this section I will explore the ingredients for a esthetically pleasing layout and how to get it on the Internet.

B. Choosing a color scheme

When making a layout, usually one of the first things you'll do is choose a color scheme. It isn't as simple as saying, "Oh, I like red, so let's do that." You have to choose a variety of colors for different aspects of the website, all of which must blend together. I usually find green and blue the easiest colors to work for the Zelda series since most of the artwork use those colors. Red can be done, but it is more a challenge. You usually don't want to have a main color of yellow, orange, or purple since they don't reflect the series very well, however they can be support colors. Black, white and everything in between can be used for a more professional-looking layout, or add a darker tone to your website. Please don't use a white background unless you want people to get bored very easily.

Now if you look at Zelda Portal, you notice two main colors, a bluish purple and green. I didn't just use one shade of each color, because that just wouldn't work. The background is the darkest shade of blue, then the content box is a lighter shade of the color. The green works well (in my opinion) to balance out the blue. So essentially what you have to do is pick a main color or two, and then experiment with the placing down the road when you're actually putting the layout together. Remember, neutral colors (blacks, greys) go with any other color.

C. The scoop on Photoshop

Photoshop is one of the most useful investments for a website. Photoshop is used for editing images, mixing colors, making text fancier, putting your layout together, and a variety of other things. Depending on what version you get, they can be anywhere from around $100.00 to $600.00. For a fansite, you probably won't be needing the professional level ones, but you'll need some version if you wish to create a decent layout. You also need to get some practice using it, because buying it doesn't make you able to use all of it's features to their best ability. That is a tutorial in itself, so Google it, or pick somethings up on your own with practice. Don't use MS Paint please. >_<

D. Drawing a more detailed layout

You have your basic layout from last chapter, correct? Now it is time to jazz things up a little. Take out a blank sheet paper and draw your layout thus far. Now look around other sites to see what kind of designs you like. Don't copy them, just look. Once you've looked, try your hand at making variations of your favorite designs into one layout of your own. Also try to come up with a reoccurring design that appears frequently throughout the layout. For instance for Zelda Portal, you'll notice there is an transparent line inside the menu buttons and the recent review area. These repeated designs aren't really necessary, but it makes your site more uniform.

Keep making possible layout ideas until you sketch one that you think will work well. Here is what I came up with for Zelda Thing (great name, I know):

Remember, these are all sketches, so don't worry if they aren't perfect. The reoccurring designs I used where diamonds and curved bottoms. Like I said, the layout be as simple or complex as you want, as long as it looks "good."

E. Constructing your layout

Now open up Photoshop and begin to construct the outline of your website. It should look something like what you drew on paper, except more accurate. To make sure you don't make the outline too big, or too small, hit CTRL PRINT SCREEN on a blank webpage. Then CTRL V in Photoshop. Ta da, now you can make the layout the exact size you want it on the Internet. Just remember that not everyone's screen is the same size as your's (the smallest is 800x600 pixels), so you're probably safe with anything in the 700-1000 pixel range.

Now all you have to do is add backgrounds, artwork, and some other odds and ends. You can use sprites sparingly, but try not to make the entire layout sprite-based. Spriter's Resource is the best place to get them. To find official artwork, you're going to need a Zelda site with a filled image gallery. Don't worry, there's lots of them, and all the links are under the letters above.

Unless you're a Ganondorf shrine, you probably want to have Link somewhere on your layout. Play it safe with your first layout. You're going to have to customize the official art now too. Most of the artwork is too big as-is, so resize it (you may want to have a back up file incase you save something you don't want). Photoshop anything you think will look cool, add textures to the backgrounds, balance the colors; it really is all experimenting from here on out. You'll find yourself looking at other people's layout to see what works and what doesn't. That's fine as long as you aren't copying.

Also, don't be afraid to stray from your original layout plans. For instance, if you look at the Zelda Thing layout for this paragraph, it isn't laid out exactly the same as my plan. Once you've redone your layout, oh, at least 15 times, you may be ready to move on. What you see on your screen is what's going to be on the site, so only use what you like. Maybe you'll change things around 30 times, who knows. Also, a little bit of advice, make sure your titles, and everything else you want centered, are. If you noticed in the last picture of Zelda Thing's layout, the title was quite a bit off-centered.

F. Splitting the layout apart

Right now your layout is an image, but you goal is a layout correct? This may be the easiest part of the the layout making process, you could even use Paint. Basically what you're going to do is split your layout up into many different pictures that you can just order with coding. The first step is the easiest, the banner. Simply take the banner from the rest of the layout and save it as another file.

Depending on how complex your layout is, this could be where it gets tricky. Leave the places you've already taken out of the layout so you know exactly where you left off. Once you come to the menu and content, you'll need to take an image from your layout that repeats a number of times depending on your content. Using Zelda Portal as an example, you can see the hedge to your left. That repeats depending on how long the page is. A long page like this will have a very long hedge, but another page may only have a hedge the length of the menu. Same thing really with the background (unless you're using HTML colors). Of course menu buttons and other various things will be placed individually.

Important Note: I can't stress saving enough. You could waste the entire day by not saving something, or even worse, saving over something. Make sure you save something you may need to create later as a Photoshop image (like title images). The chances of you guessing the same exact font size/face/color/etc. aren't very good (especially color). I would personally just save the whole layout as a Photoshop image, but that's just me.

G. Turning a bunch of pictures into a layout

Don't worry, you're almost done with layout. Now that you actually get to make the website, you can pat yourself on the back for making it this far. I told you it was a lot of work, and we haven't even gotten to content yet.

Anyways, tables and CSS style sheets are going to your best friends from now on, if they aren't already. You're going to get the layout you split apart and now put it back together again, like a puzzle. Perhaps I'll make a coding guide to help you out with this part, because your first time coding a layout is frustrating (or atleast mine was). If you can't get something placed right with one table, put another table in that cell of the table. Then after you spend an hour trying to place one thing you'll find that Internet Explorer makes it completely wrong. =D Lots of fun. If you don't like trial-and-error problems, good luck surviving this stage.

CSS is what cuts down the amount of codes you have and also formats various things HTML can't, oddly enough. If you want all your hyperlinks to look a certain way, there is a CSS code for that. If you don't want to retype border=0 for all the image links, there is a CSS code for that. Again, I might make a guide to help with codes you won't find easily.

My first decent layout took me a month, so don't expect this all to be done in a day or two at this early level. Don't be discourgaged if your layout is presentable, but not amazing. You can make new layout versions in the future if you're up to it. With more experience you can speed this process up, but until then, slow and steady wins the race. The next chapter will be all about the most important feature of your site: content, and what you should do as a webmaster.