I use the program Photoshop to make my layouts. The results are usually pretty professional and satisfies guests. If you want to learn how to use the maximum capabilities of Photoshop to create astounding layouts, then this is a guide for you. ;) Now, this guide should be fairly easy to understand for most people, unless of course, you're totally and utterly helpless when it comes to making graphics - I can't help you with that. x_x Example images will be linked to, not directly put onto the page because of their size. ^^; It'll also be extremely useful if you have a good knowledge of Photoshop Layers, although it isn't required. There is a coding guide at the end of the PS guide.
Anyways, once you have your program open, open a new canvas (file) with a height of around 500-700 pixels, and a width of however wide you want your layout to be. I suggest about 775 to 800 pixels. (If you're doing a stretching div layout, set it at 800px.) Once you have set the dimensions, have your new canvas zoomed to 100%/actual pixels.
Now, you should have in mind what type of layout you want, and what colors you might want to use. Make a new layer. Leave your last layer/background layer completely blank and white. This layer will be a basic template to organize your banner and menus. Select a Square Brush and set the size to about 230px, which is a good height for a banner. Pick a light gray color and draw out a rectangle where the banner will be. Rename this layer "Banner" or whatever you want to use to classify it. Crazy as it sounds, I want you to put the banner, content area, menus, and disclaimer on separate layers. Next, select a 140px Square Brush or however big you want the menus to be. Use a different shade of gray and make the menus. Color in the content space that's left with yet another different shade of gray. Do a similar thing for the disclaimer. This is so that you'll have an easier time changing the colors if you change your mind on color schemes. Feel free to use your own colors early if you're 100% positive on your color choices.You should have something like this:
Yes, right now it's boring and gray. But it'll make your life easier. You should have at least some idea what colors you want to use now. Will you use shades of blue? Will you use red and purple? Rainbow colors? Decide. Decide. Will you use gradients? Grab the Paint Bucket tool and color in the sections we divided up for the layout. Make sure you are on the correct layer of whatever section you're coloring!
The above image is how I colored mine. (Again, the original image with the width of 800px was downsized to save space.) Not too exciting still, is it? I mean, it's just plain colors! xD So...let's spruce it up with some gradients. Gradients are the things that neatly fade from one color to another. If you want to put a gradient into a the menus/banner/etc., first make sure you are on the correct layer of the section, and then use the Magic Wand Tool and select the section. Keep it selected, make a gradient with the gradient tool, and draw it straightly across the section with the "marching ants", as some like to call them. (It's best not to make too much of a contrast between the colors you select for your gradient if you're using a color scheme with different shades of one color like I am in the example images.)
Now it looks slightly better, but still "blocky" and boring. Let's spruce up the banner a bit with some brushes. You can download free brushes at Endless-Rain.org, Crystal-Kiss.net, and Komet Tail Designs. Their affiliates have great brushes, too. After you download a brush, be sure to extract it with WinRar/WinZip and move it into your Photoshop's preset brushes directory if you want it to be accessible permanently, or you can click the Brush tool, open the drop-down, and select "Load Brush..." after clicking that arrow at its side.
Now, select the banner layer, select it again with the Magic Wand tool, and then make a new one to go right on top of it. It should still be selected. For now, lower the opacity of this new layer to 40%-50%. Select a color you think will look nice against whatever background color of banner you have. Use the brushes and spice it up!
I suggest you do not put any set decoration on the menus and content area, unless you want repeating backgrounds. Finish your banner by putting on funky text and an image. Put the text on the topmost layer to insure it'll show up perfectly. Anything you want ON the banner should be in layers above it. Don't be cautious about making layers - the more the better and easier it'll be, but don't make too much or you'll get confused which layer's for which thing.
Now it looks better, but still a little plain (at least to me it is xD). So...let's add a texture. Now, with textures, you MUST have its opacity down to below 50% at least, or everything below its layer will be completely unseeable, for textures cover the whole screen (unless of course, your texture looks good at full or most opacity). If so, how do we make sure it's only on the banner? Go to the banner's layer and select it with the Magic Wand tool. There should be "marching ants" marching around the banner's rectangular area. Now make a new layer somewhere above it, load the texture with the Paint Bucket options, and select from the drop-down of the Paint Bucket "Fill: Pattern" instead of "Foreground". If you're going to fill it with a real pattern instead of a texture, you can make one yourself by making a horizontal line on a new canvas or something and selecting "Define Pattern" from the Edit drop-down.
Putting in a texture is completely optional.Now, do the same for the disclaimer as you did for the banner. Try to make it a little bit different, and you don't have to put an image if you don't want to. Make sure you have room for the disclaimer text to be clearly seen.
Because everything's so weirdly pieced together right now, select a 3px-5px square Pencil and make borders around the entire layout and separate the banner/menus/disclaimer with solid borders.The last step to finishing the layout via Photoshop would be to use the text tool and put in "example links" and example text to see what colors of text would look best on it.
My finished layout is as of below, but it is only a Photoshop image and is not coded. I did not downsize this image, so please wait for it to load.
Now comes the annoying step. You have to code the layout that is right now merely an image into HTML. Luckily for you, I have the code ready for you. However...this coding I have for you will only work if your menus, banner, content area, and disclaimer are positioned similarly to how I have mine in the example.
First we have to cut up the layout. This does not mean destroying the image of the layout you have right now. Regardless of what layer you're on, go up to "Select", click "Select All", and your entire layout should now have marching ants around it. Next, go to "Edit", and select "Copy Merged". It's important you click Copy Merged, and NOT just "Copy". Copy Merged will copy ALL your layers, not just whatever layer you're on right now.Now, open a new file. ("File >> New" or "File >> Image from Clipboard".) Do not change the dimensions. They should already be the same dimensions as your layout. Now, go to "Edit" >> "Paste", or CTR + V if you used "File" >> "New". Your layout should now appear on your new canvas as one layer. In this new file, you should now have a blank background layer and the layout layer on top of it. You can close your other file now - the one where you made the layout image on.
You might be wondering why I made you make two layout files. Well, first off, the first file you have is divided into multiple layers. While it's okay to merge them all, it'll be complicated if you decide to change something on the layout. That's why your first file will be a "backup", and this new one you have now will be the one you use to code into HTML.Now comes the cutting-up part, where you have to be really careful. Click the Rectangular Marquee Tool, or what we like to call the marching ants tool. Now, be sure you're on the layer with your layout, and select the entire banner plus its borders. Copy it, and open the copied banner into a new file. Save that file. You should have something like the example below:
Next we shall start disecting the rest of it. Ignore your banner. Let's start with the left menu. With the marching ants tool, select it entirely in width but only a few pixels in height. Make sure you did not select any testing text you might have put on there. It should have borders on its sides, but no borders on its top and bottom. Never select half a border. It'll be more complicated that way. Do the same for the right menu.
There now much of a difference between the above images, but their gradients go in different directions. Remember, they should each be saved separately.
The content part should be easy. Do the same for it as you did for the menus, but don't select the border. Save the content area. Remember, it should only be a few pixels in height. Then, do the same for the disclaimer as you did for the banner, with all borders. Please place text on your disclaimer via Photoshop!
I hope this guide worked. Please report any errors.
Eonlight Valley, all its content and graphics are unless stated otherwise (c) Kronakitty (kronakitty@gmail.com) 2005-2011. Official Pokemon contents and images are (c) Nintendo. This is only a fan site, and I do not claim ownership of Pokemon.
Important Note: Due to the webmistress's slacking in updating, some pages on this site may be out-of-date. ;_;
