Want to learn how to make those simple yet amazing anime layouts? Well then this is just the right tutorial for you. In this tutorial, I will show you how to make an anime layout thats easy to create yet look like it was professionally done. Here is a small preview of what you should come up with after taking this tutorial:

1. Make a new document with the pixel dimensions 700 by 900 (we will adjust the size later). Set the background transparent. Press CTRL + A to select everything, and fill it with #FCFFEE by pressing ALT + DEL. You may rename this layer to table background if you wish. I say table because this is the background of the table, not the main background. Right click on this layer, and go to blending options. Check pattern overlay and give it these settings:

2. Now we will move on to the header. Select the rectangle marquee tool with a style of fixed size and dimension of 700 by 140 pixels. Make a new layer and click on an area near the top but be sure to leave some as it will be used later in this tutorial. Once selected, fill it with the color #323B9C by hitting ALT + DEL. Set the opacity of the layer to around 80%, this allows the scanlines to be viewed. The blue area will only serve as a top and bottom border of your banner. You should have something similar to this:

3. Moving on to the banner, on a new layer, make it a size of 700 by 130 pixels and try to center it vertically. This gives 10 pixels of the blue area on the top and bottom. On my banner, I added brushes and scanlines. Be sure that there is a blank area on the right of you banner, as you will be adding an image there. Here's what I came up with:

4. Using the rectangle marquee tool with a fixed size of 700 by 10 pixels, click right below top blue border. Make a new layer and fill it with #CCCCCC. Do the same process for the bottom blue border of the banner. Here's what you should have:

5. Select a render or image without a background, and place it on top the banner to the right. Be sure this render is on it's own layer. Duplicate this layer. Give a graussian blur to the original layer by going to Filter > Blur > Graussian Blur. Set the duplicated layer to Soft Light. You should of got this so far:

6. Wondering what will go to the left of the render and bottom of the banner? It's where you put your latest releases of course! Select the rounder rectangle tool with the foreground color #CCCCCC and drag a box until you see that it's a perfect fit. This make take several tries as it took at least 5 for me. You may prefer using the Edit > Free Transform technqiue. Once you get your perfect size, give it these settings:

(With the stroke color #323B9C)

Now duplicate this layer and place them in position. Now here's what I came up with:

7. You're half way done, hang in there! Moving on with the navigation and content. Create a new layer. Using the pencil tool and the foreground color #9A9A9A, draw two lines about 30 pixels apart below the bottom left of your render going straight down. These are the border lines for your content and navigation. You should get something similar to this:

Hold onto CTRL and click on your pencil layer, this allows you to select the two lines you've drawn. Go to Filter > Blur > Motion Blur with the angle 0 and distance about 10 to 15. Here is what I got:

8. Create a new layer and select the rectangle marquee tool again with a fixed size of 700 by 10 pixels. Fill an area blue setting the opacity to 80% and below it an area of grey(make sure the grey line is on a different layer from the blue line layer so the opacity of the blue line layer doesn't affect the grey line layer) below it like this:

Selecting the area between the two border lines of the content and navigation, delete the blue and grey line with a result of this:

9. Now make a new layer and using the rectangle marquee tool, select the area inside the borders and set the opacity of it to 80%. You should go came up with something like below:

10. Remember in the first step when I said something about a table and main background? Well, here's what I meant.

Go to Image > Canvas Size and set your width to 900 pixels. Remember to make it in pixels! Leave the anchor alone, it should be centered. The canvas size should now have changed. In your layers palette, scroll all the way down to you table background. Make a new layer and drag it under the table background. This new layer should be on the bottom of all your layers as of now. Hold CTRL and click on your table background layer. Press D to reset your colors and X to switch your foreground and background colors, thus making your foreground color white. So now, go to Select > Modify > Expand and fill the new layer white. Go to blending options and give this white border of your table a drop shadow with these settings:

Make another new layer and place it on the bottom of all your layers. Press CTRL + A to select all, fill the layer with the color #E5E6D8, thus making this layer your main background layer. You should now have this:

And now for the final step. I saved the hardest step last for you. Why is this the hardest step you ask? Well, it's simply because, this step requires your own creativeness. It's miscellaneous things like site name, latest release pictures, copyright information, titles, text, etc.

Final Result:

Click Here

For your site name on the top, you could also substitute that for a secondary navigation. Here's what I got, if I did this:

Final Result with Secondary Navigation:

Click Here

That's all folks, hope you liked this tutorial. If you have any questions about this tutorial, feel free to contact me at either felguard@animeark.com, or just PM in the forums. Thank you for taking the time to look at this tutorial, we hope you find this helpful.

Already got Comments? Click Here!