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:
