6. Recent Entries Sidebar Box


Now we’re going to create a recent entries (posts, articles, etc.) side box for the template. First, start by creating a new layer, then make a selection of about 200 x 30 pixels (same width as the navigation box).
[You must be registered and logged in to see this image.]
Fill your selection with a nice, moderate-green (#307017). And now apply the following layer styles to this layer:

<LI sizset="54" sizcache="4">Inner Shadow
<LI sizset="55" sizcache="4">Gradient Overlay

1. Pattern Overlay (download .pat file)
   

[You must be registered and logged in to see this image.]
Looking good so far. Create a new layer then make a selection half the size of the main bar at the top. Fill this selection with a White to Transparent gradient.
[You must be registered and logged in to see this image.]
Change the layer mode for this layer to Soft Light then lower the opacity to around 15-30%.
[You must be registered and logged in to see this image.]
And then a 1px line at the top of the bar. For this layer change the layer mode to Soft Light and lower the opacity to about 50%.
[You must be registered and logged in to see this image.]
I then added in text, similar to what I’ve used on the rest of the template.
[You must be registered and logged in to see this image.]
Create another new layer, now make a selection a bit smaller than the first selection underneath it (my selection was 200 x 60 pixels)
[You must be registered and logged in to see this image.]
Fill the selection with the same color as you used for the original, larger bar. Apply the following layer styles:

<LI sizset="58" sizcache="4">Bevel and Emboss
<LI sizset="59" sizcache="4">Gradient Overlay

1. Pattern Overlay (Download .pat file)
   

[You must be registered and logged in to see this image.]
Duplicate this layer and move it down 16 pixels (if that’s how tall your rectangle is).
[You must be registered and logged in to see this image.]
Repeat this until you have about 8-10 bars. Now add in your text.
[You must be registered and logged in to see this image.]
7. Designing the Content Area (Recent Updates)


Basically you just have to do the same as with the last bar. You could even duplicate the first bar and move it along, stretch it then change the color, that’s what I did, and it was easy!
[You must be registered and logged in to see this image.]
The color I used for the recent updates bar was #1f7bc5. Next thing create a large selection all of the width of the updates bar, not completely to the bottom though:

[You must be registered and logged in to see this image.]
If you’re on a new layer, fill this selection with white then apply the following layer styles:

<LI sizset="63" sizcache="4">Blending Options: Main

1. Bevel and Emboss
   

Your box should now look like this:
[You must be registered and logged in to see this image.]

Add in some dummy text from Lipsum.com:
[You must be registered and logged in to see this image.]
Lastly for this section, I added a smaller version of the content box at the bottom underneath the first one with a higher opacity, I made it 80px in height so it would fit an ad banner in it nicely.
[You must be registered and logged in to see this image.]
8. Sidebar & Footer


Remember the last step where you added in those low opacity boxes? Duplicate the main box, move it over to the left under the recent entries then crop it so it fits properly.
[You must be registered and logged in to see this image.]
I then added in a nice little ad banner to fill it up nicely.
[You must be registered and logged in to see this image.]
Ok, lastly we’re going to add in the footer. First make a selection at the bottom of your template where you want the footer to be. My selection was 738 x 40 pixels.
[You must be registered and logged in to see this image.]
Fill this selection with a red color, I used #7e0a07. Next thing to do is apply the following layer styles:

<LI sizset="66" sizcache="4">Inner Shadow
<LI sizset="67" sizcache="4">Gradient Overlay

1. Pattern Overlay (Download .pat file)
   

If you want an easier way out of applying these layer styles, you can just as easily go to the header bar, copy the layer styles, come back to the footer layer and paste them.
[You must be registered and logged in to see this image.]
Now you can add in the shiny highlight like with the header bar. To remind you of that:

1. Make a selection half the size of the footer bar.
   
2. Fill the selection with a white to transparent gradient.
   
3. Change the layer mode to Soft Light and lower the opacity to 15-30%.
   
4. Make a 1px line at the top of the footer bar, change layer mode to Soft Light then lower the opacity to 40-70%.
   

[You must be registered and logged in to see this image.]
Now lastly for the footer bar we’ll add in the text. On the left I wrote in the word “Copyright” in the same style as the text in the header bar. Then on the right I added in the actual copyright notice.
[You must be registered and logged in to see this image.]
For the smaller text I used Tahoma, 11pt, #ebbe97.
[You must be registered and logged in to see this image.]
And that’s pretty much it for this tutorial! I hope you enjoyed the tutorial, and I hope you were able to follow it through to the end easily.






google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);]