Layout Making | Eevee's HQ

Join the contest! Win a domain, advertising, and a free request for your website!

Layout Making

Intro This tutorial is going to teach you how to create, and code, a very simple square 3-column layout. Here's a suggestion - don't start out big. Start out with simple, square layouts, and slowly get more advanced. If you try to code an elaborate design, it's probably not going to work.

That being said, let's begin! First, we need to cover some very basic things. First, I don't expect you to know a lot of HTML; but if you don't even know how to create a link, it's better that you brush up on that first before going to layouts and tables and such. Next.. Don't use Microsoft Paint. Take the time to download a trial of Photoshop. I'll be using tool references from Photoshop, but they should all be fairly similiar - Paint just doesn't cut it, though. Kay? And last - patience. It takes a while to get things right. If it doesn't turn out very good the first time, try again.

Please take a moment to learn your program's tools before continuing with this tutorial!

Step 1 - Mapping the Layout For the first step, we're going to build a map of our layout. I like to make my layouts 800px wide, so create an 800x800px document. Instead of creating this layout piece-by-piece, we're going to design it as a whole.

Next, create a new layer called banner bg. It doesn't matter what the name is - just remember to name your layers so you don't forget and end up having to test each one to find them. Next, use your Select Tool and select from the top left of the document, all the way across it length-wise, and down to about 150px. Then fill it in with whatever color you want your banner's background to be.

Create another two layers (leftnav bg and rightnav bg). Again, using the Select Tool, select from the very bottom of the bottombg layer and down, making the width about 140px wide. Do the same with the right menu.

The last two are simple - using the desired base colors, select the middle white area and fill it in with the color of the content area, in a layer called content bg. Then for the footer (footer bg), do the same as the banner, but at the bottom - and it should be a little smaller.

Now we have our layout map! These backgrounds are plain and simple, but we'll use them to make sure our banners, menus and footers aren't getting out of line. Next up - spiffing it up!

Step 3 - "Spiffing it Up" This step applies for both the banner and the footer - since they don't have to repeat vertically, you can design them however you want. There are some very good places about the internet to download brushes - Hybrid-Genesis and Celestial Star provide really nice ones.

Back to the tutorial, people. I'm going to start out creating a nice texture (sadly, it's Photoshop only. If you aren't using Photoshop, download a texture from one of the above sites and paste it into the banner selection.)

To do this, create a new layer (banner texture), select the entire banner bg layer (nothing else, though!) and fill the new layer with black. Make sure your color pallet is black and white. From the top menu, choose Filter > Render > Difference Clouds. Then go back and choose Filter > Brush Strokes > Accented Edges, then Sharpen it. Then set banner texture's blending type to Overlay. If you don't like what you get, you should probably go and play around with some other filters! Use really cool combinations, and then do the same for the disclaimer. If you're still unsatisfied with the texture you've got, go ahead and use a free one. And if you have any brushes, use them now!

(note that I've also chosen to round the edges a little. Just use the Select Tool.
(if the edges start to catch, expand the canvas by a few pixels and clear it out, then retract it again.)

Step 4 - Ze Menus Cool, we're almost done with the design part! Here we have the menus. While we'd all like to go all-out with textures on the menus (at least I'd think so), it's not possible, unless you're willing to create a very, very, VERY high texture graphic to set as the background.

... That's what I thought. In any case, our menus are the parts of the layout that repeat, and repeat, and repeat over and over and over again vertically until we're done writing out all the content. That being said, we need to make sure the patterns and gradients on our textures can be repeated. So let's start out with a really basic gradient - using your gradient tool, select the left nav (you have to select it - don't let the gradient spill out over the whole layout!) and pull the gradient across very, very carefully, so it's perfectly horizontal. Or to avoid the precise work of manual gradienting, use a Filler Adjustment. And... do the same thing with the right menu (it doesn't have to be the exact same, though.) Here's our result!

Cool! Now, if you want to add a repeating pattern to the nav (it's best to make it light), or borders, do it now to both menus. And then you're done! Add any finishing touches you'd like to add to the content area, navigation, banner or footer - it's your layout!

(page 2)