Christmas-Themed Web Layout

1. New Document

First of all create a new document for the template. I'll be using a document size of 780 x 880 pixels for this tutorial.

So, now you've created the new document, fill the background with a dark-reddish color. I used #4f0100.

2. Sidebars

Now we'll create the sidebar candy things.

First create a selection with the rectangular marquee tool about 10 x 80 pixels. Be sure you're on a new layer then fill the selection with white.

Now after you created your rectangle, create another layer then get out the polygonal lasso tool.

Hold shift so your selection is diagonally correct, and make a selection like so:

Be sure you're on a new layer then fill the selection with a bright red then delete the outside parts.

Duplicate this line layer then move it up about 10 pixels, (shift+up arrow key.)

Duplicate again and move it up 10 pixels again. Repeat this 2-3 times.

Merge these 'line' layers and apply this Gradient Overlay.

You should have a result like this:

Now apply this Gradient Overlay to the main white rectangle layer.

Your bar should still be looking like mine:

Now we need to cut this bar and turn it into a tillable pattern.

Make a selection of the whole width, but only of about as much as mine in height:

See how mine goes? I've left two pixels of the top line off, and got 2 pixels of the top of the bottom line in my selection. You could also do it whatever way you want really, but make sure it tiles. Cut this selection out, duplicate it, move it downwards, merge, repeat. You should now have a sidebar similar to mine:

Duplicate the sidebar, flip it horizontally (Edit > Transform > Flip Horizontal), then move it to the right side of the template.

I also applied this Outer Glow.

3. Header Bar

Moving along.

Firstly create a new layer. Now create a selection completely in-between both the sidebars, fill it with a slightly lighter red than the background (#690806).

Now we'll start by making the header bar.

Create a new layer/layer set then make a selection approximately 738 x 60 pixels in the middle of the document at the top.

Fill the selection with a lighter red (#7e0a07).

Now apply the following layer styles and settings to the header bar:

(Download .pat file)

You should have a result like so:

Now create another new layer then a selection half the height of the header bar, fill the selection with a white to transparent gradient.

Now change the layer mode to Soft Light and lower the opacity to 20%.

Again create a new layer. Make a 1px white line across the top of the header bar.

Change the layer mode for this layer to Soft Light and lower the opacity to 30-50%.

Lastly for the header bar, we need to add in the text.

Get the text tool and write out something like "Christmas Site" with a cursive/script font.

The font color I used was #edb27a, and you can download some script fonts from DaFont Calligraphy.

Right-click the text layer and go into the Blending Options, apply the following layer styles and settings:

You should now have text looking like mine:

Now add in some regular, non-anti-aliased text to the right side of the header bar.

Above I used Tahoma, 11pt, Bold, #ebbe97, and with no Anti-Aliasing.

4. Navigation Buttons

Let's make the navigation box/buttons.

First create a new layer then make a large, rectangular selection underneath the header bar.

Now fill this selection with a moderately bright orange color. I used #d53900. You can in fact fill the selection with any color you want, but for this tutorial you can use what I used.

Apply the following layer styles to this box layer:

You should have a resulting image like this:

Now I added in a little bit of grunge brushing on the left side of the box. For this go to PhotoshopBrushes.com and get some of their old-school grunge brushes. I love 'em!

So after I did a little bit of random grunge brushing on the left side of my box, I changed the layer mode to Soft Light and lowered the opacity to about 60%.

Next thing to do is add in the buttons. All on the same layer make rectangles 1px apart like mine:

My selections were 180 x 26 pixels in size. Next go into the Blending Options for the buttons layer and use the following settings:

Your buttons should be looking like mine still:

Lastly for these buttons you need to add in the text.

Above I used Tahoma, 12pt, Bold, #ffffff.

5. Header Graphic

So let's make that header graphic for the template now.

First create a new layer then make a selection the same height as the navigation box, except all of the width left in the template. (other than 1px at each edge)

Fill this selection with a moderate blue color. (#1d78c4)

Apply the following layer styles and settings:

You should have a result like this now:

Again with the grunge, I added a little bit in the top left corner of the banner graphic. I then changed the layer mode to Overlay and left the opacity alone.

Next I added in the snowflakes. For these get the Custom Shape Tool and use the snowflake shapes on a new layer.

And here are the shapes:

If the shapes aren't there for you, click the little arrow on the right of the box and select All or Nature.

The snowflakes look quite cool just like that, but I also applied the following layer styles and settings:

Now my snowflakes look like this:

Next thing I did was add in some Clipart Trees, I didn't make them but you can download the .png file for them from here.

I then added a dark gradient 1px from the top of the banner and navigation box.

Now I added in a little bit of snow to the bottom of the banner.

To do this, first create a curvy path with the Pen Tool, make the path into a selection and fill it with white, delete the excess parts.

Then do a little soft brushing with a light grey color.

Lastly for the header add in the text, I used the same font as before.

To that text layer I applied this Drop Shadow

and this Gradient Overlay.

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:

(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:

(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:

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:

(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 easily, and I hope you learnt a thing or two.

Click to enlarge

For learning purposes only you can download the PSD file for this template tutorial. PSD Download.