Christmas-Themed Web Layout

6. Recent Entries

Now we’re going to create a recent entries sidebox for the template.
First start by creating a new layer, then a selection of about 200 x 30 pixels.

Fill this selection with a moderate, dark-green. (#307017)
Now apply the following layer styles to this layer:

1. Inner Shadow
2. Gradient Overlay
3. Pattern Overlay (Download .pat file)

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.

Change the layer mode to Soft Light then lower the opacity to 15%.

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%.

I then added in text, similar to what I’ve used on the rest of the template.

Next create another new layer. Now make a selection a bit smaller than the first selection underneath it. (My selection was 200 x 60 pixels)

Fill the selection with the same color as you used for the original, larger bar.
Apply the following layer styles:

1. Bevel and Emboss
2. Gradient Overlay
3. Pattern Overlay (Download .pat file)

Duplicate this layer and move it down 16 pixels. (If that’s how tall your rectangle is)

Repeat this until you have about 8-10 bars. Now add in your text.

7. 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.

The color I used for this bar was #1f7bc5.
Next thing create a large selection all of the width of the updates bar, not completely to the bottom though:

If you’re on a new layer, fill this selection with white then apply the following layer styles:

1. Blending Options: Main
2. Bevel and Emboss

Your box should now look like this:

Add in some dummy text:

A good place to get this stuff from is Lipsum.com.
Lastly for this section, I added a smaller version of this box at the bottom with a higher opacity, I made it 80px in height so it would fit an ad banner in it nicely.

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.

I then added in a nice little ad banner to fill it up nicely.

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.

Fill this selection with a red color, I used #7e0a07.
Next thing to do is apply the following layer styles:

1. Inner Shadow
2. Gradient Overlay
3. Pattern Overlay (Download .pat file)

Rather than applying all of those layer styles, you can probably just go and copy then paste the layer style from the header bar

Now you can add in the shiny parts 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 light gradient.
3. Change the layer mode to Soft Light and lower the opacity to 20-35%.
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%.

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.

For the smaller text I used Tahoma, 11pt, #ebbe97.

And that’s pretty much it for this tutorial. I hope it you were able to follow it esaily, and I hope you learnt a thing or two
For learning purposes only you can download the PSD file for this template tutorial. PSD Download.

Copyright @ Photoshop Star 2006