If you're new here, you may want to subscribe to my RSS feed.

For those of you who love anime and love blogging I have come up with a wordpress layout so you can express both your loves together.

First you need to decide what the size of your blog is going to be but for tutorial purposes I am going to show you on an 800×600 scale.

Open PhotoShop and Create a New file and fill it with white. Then create a new layer and call it “Floor”. Now grab a guide and section off the bottom so the height is 110 pixels. Finally make a selection of that area and fill it with #E5E5E5.

Floor Guide

Now that you have the Floor layer ready we are now going to add some blending options. The blending option we are going to use are a DropShadow and a Stroke. Use the settings below to blend the “Floor” layer.

DropShadow

Stroke

This should be your result:

Floor Blended

Now create a new layer and call it “Canvas”. The canvas layer is going to be the section that houses your blog enteries. Now drag out two vertical and two horizontal guides to mark out the Canvas area. The two vertical guides should be at 150 and 650 on the horizontal ruler. The two horizontal guides should be at 60 and 550 on the vertical ruler. Like below:

Canvas Guide

Now make a selection using the guides and fill the selection with White. Now we are going to add some blending options to the “Canvas” layer as well. We are going to add a DropShadow with the Settings below:

Canvas DropShadow

This should be your result:

Canvas

Next we are going to add a more impressive shadow so your blog look like it is sitting in a 3D space. So create a new Layer under your “Canvas” layer and call it “CanvasShadow”. Then drag out three more guides two vertical and one horizontal. The new horizontal guide should be at 90 and the two new vertical guides should be at 250 and 700. Like below:

Shadow Guide

With the guides in place grab your pentool and mark out a section like the image below:

Shadow Outline

Fill the path with black and you should have something very close to this:

Shadow Outline

Finally go to Filter > Blur > Gausian Blur and set the amount to about 10 - 20 and hit ok. Then set the layer fill to 40%. Here is the result:

Canvas Shadow

Now that we have the base of the site set up we are going to move to the header and navigation. Create a new layer and call it “Header”. Grab your pentool and make an outline that looks like the selection below:

Header Outline

Fill the outline with white. Then we are going to add a Dropshadow and a Gradient Overlay like the settings below:

Header DropShadow

Header Gradient Overlay

Your header should look close to this:

Header

The next part of the header is the Navigation section. Again drag out 3 new guides. Two verticle and one horizontal, the two vertical at 20 and 720 and the horizontal at 120. Then grab the Rounded Rectangle Tool with a 10px radius. Draw section out and fill it with black to look like the image below:

Navigation Outline

Then we need to add three Blending options a Drop Shadow, Stroke, and Gradient Overlary in the settings that follow:

Navigation DropShadow

Navigation Gradient Overlay

Navigation Stroke

You should have something very close to this:

Navigation

Now we are going to add the font on the navigation. I chose NEUROPOL for my font but you can choose whatever you like. Set the font size to 20px. The first Button we are going to create is Home. So type out the word home in the navigation area just like the image below:

Home Black

Then we are going to add four blending options to this font. The Options are a Drop Shadow, Outer Glow, Gradient Overlay, and Stroke like below:

Home Drop Shadow

Home Outer Glow

Home Gradient Overlay

Home Stroke

Resulting in this look:

Home Button

Repeat those steps on the next sets of fonts until you have something like this:

Navigation Buttons

Now create some dividers between each word:

Navigation Dividers

Next step is to add the header title I named the site Anime Girl Blog, but the title is up to you. Make the font size 45 and select neurpol as the font again. Then add three blending options (Outer Glow, Gradient Overlay, Stroke) shown below:

Title Outer Glow

Title Gradient Overlay

Title Stroke

Resulting in this look:

Title

Next we are going to add a global date area for your Blog. Make a new layer and call it “Date”. Drag out 4 new guides (Two vertical {115, 150} and two Horzontal {570, 765}). Then grab the Rounded Rectangle Tool with a 10px radius. Create the box using those guides and fill it with black.

Date Guide

Now we are going to add three new blending options (Drop Shadow, Gradient Overlay, and Stroke)

Date Drop Shadow

Date Gradient Overlay

Date Stroke

Resulting in this look:

Date

Now that we have the date area it’s time to add the date. Use the same font we have been and set the font size to 14. Now use the present date and ad these four blending options (Drop Shadow, Outer Glow, Gradient Overlay, and Stroke) like below:

Present Date Drop Shadow

Present Date Outer Glow

Present Date Gradient Overlay

Present Date Stroke

Resulting in this look:

Present Date

We have now created most of the blog layout. The step is to add the Post area and our anime girl. You can use whatever you like for this section the steps will be the same. Drag out 4 new guides (Two vertical {115, 200} and two Horzontal {120, 215}). Now make that outline a selection and save it as “hostBox” so we can use it later. Then grab your image and paste it into the layout. Name the new layer and call it “Host”. Next adjust the size to what you would like and load the selection we saved early by going to Selection > Load Selection > select the name “hostBox” and hit OK. Then grab the magic wand tool and right click in the selection to copy out the are you want. Delete the layer with the part of the image that is not inside the box. Now you should have something close to this:

Host with No Blending

Finally add these Blending Options (Drop Shadow and Stroke) below:

Host Drop Shadow

Host Stroke

Resulting in this look:

Host

Now we need to create the post area so drag out 4 new guides (Two vertical {155, 550} and two Horzontal {220, 580}). Create a new layer and call it “Post” Now make a rounded rectangle selection in the guides and fill it with white. Then add a Drop Shadow and Stroke with the settings below:

Post Drop Shadow

Post Stroke

Resulting in this:

Post

Now that we have the shading done we need to duplicate this layer and call it “Post Header”. Add a new horizontal line (190) and drag out a rectangle marquee selectionand cut it out of the “Post Header” and delete the excess. Then apply the following Drop Shadow, Gradient Overlay, and Stroke:

Post Header Drop Shadow

Post Header Gradient Overlay

Post Header Stroke

Resulting in this:

Post Header

The Final step is to Slice this image into section for display in WordPress. Here is the final with a mock up post added and some optional decorations:

Final