In this tutorial I will be teaching you how to create this complete, festive Christmas-themed web layout! Note: This tutorial may be more well-suited for intermediate Photoshop users, as it does require quite a bit of Photoshop knowledge and work! Please feel free to try it though, if you’re unable to get it right, just try it over again a few times.

[You must be registered and logged in to see this image.]
(click for larger preview)
1. New Document


First of all, let’s start by creating a new document for the template we’re designing. I’ll be using a rather small document size of 780 x 880 pixels for this tutorial. So, now you’ve created the new document, fill the background with a nice color. I used a dark-reddish color, #4f0100.
2. Designing the Sidebars


Now we’ll create the candy-themed sidebar thingies [You must be registered and logged in to see this image.]
First, start by making 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.
[You must be registered and logged in to see this image.]
Next, after you’ve created your base bar, create another layer then get out the Polygonal Lasso Tool.
[You must be registered and logged in to see this image.]
Holding shift, click around and make a diagonal selection like the one shown below:
[You must be registered and logged in to see this image.]
Now, be sure you’re on a new layer, fill your newly-made selection with a bright-red color. Now delete the edges so that your newly-made shape is constrained to your base bar.
[You must be registered and logged in to see this image.]
Duplicate your new line layer and move it up about 10 pixels (shift+up arrow key)
[You must be registered and logged in to see this image.]
Duplicate again and move it up 10 pixels again. Repeat this 2-3 times.
[You must be registered and logged in to see this image.]

Merge your all of your ‘candy stripe’ layers together and apply this Gradient Overlay, you should now have a result pretty much like this one shown:
[You must be registered and logged in to see this image.]

Next, apply this Gradient Overlay to the main white rectangle layer, it just gives it a little bit of detail:
[You must be registered and logged in to see this image.]
Now we need to cut our bar up and make it into a pattern that tiles seamlessly. Make a selection the whole width of your bar, but only of about as much as mine in height:
[You must be registered and logged in to see this image.]
Do you see how mine words? 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 just make sure it tiles! Cut this selection out, duplicate it, move it downwards, merge, repeat. You should now have a sidebar similar to mine:
[You must be registered and logged in to see this image.]

Duplicate your sidebar, flip it horizontally (Edit > Transform > Flip Horizontal), then move it to the right side of the template. I also applied an Outer Glow to both of my sidebar layers.
[You must be registered and logged in to see this image.]
3. Designing Your Header Bar


Moving along, start by creating another new layer, then make a rectangular selection completely in-between both the sidebars, fill it with a slightly lighter-red color than what you used in the background. (#690806)
[You must be registered and logged in to see this image.]
Now, to make the header bar. Create a new layer then make a selection approximately 738 x 60 pixels in the middle of the document at the top. (note: you might want to keep your layers in layer sets/groups so you can keep things in order)
[You must be registered and logged in to see this image.]
Fill the selection with a yet lighter-red. (#7e0a07)
[You must be registered and logged in to see this image.]
Next, apply the following layer styles and settings to your header bar:

<LI sizset="27" sizcache="4">Inner Shadow
<LI sizset="28" sizcache="4">Gradient Overlay

1. Pattern Overlay (download .pat file)
   

And now your header bar should be looking like this nice thing:
[You must be registered and logged in to see this image.]
Create another new layer then a selection half the height of the header bar, fill this selection with a white to transparent gradient, this is for a nice shiny highlight.
[You must be registered and logged in to see this image.]
Change the layer mode for this gradient layer to Soft Light and lower the opacity to around 15-30%, it really depends on how it looks and how you want it to look. [You must be registered and logged in to see this image.]
Again, create a new layer, then make a 1px white line across the top of the header bar, this is really optional though, I don’t think anyone’s going to notice it!
[You must be registered and logged in to see this image.]
Change the layer mode for this layer to Soft Light and lower the opacity to about 30-50%.
[You must be registered and logged in to see this image.]
Lastly for the header bar, we need to add in some text. Get out the Horizontal Type Tool (regular text tool) and write out something like “Christmas Site” with a cursive/script-style font (in this example I’ve used a font called Cornet, but it’s a commercial font, not a free one, sorry.)
[You must be registered and logged in to see this image.]

In the above image I’ve used #edb27a for my font color, and if you don’t have any decent script/calligraphy fonts, you can of course download some from DaFont: DaFont Calligraphy Section.
Right-click your text layer, go into the Blending Options, and apply the following layer styles/settings:

<LI sizset="32" sizcache="4">Drop Shadow

1. Gradient Overlay
   

And now your text should look like this:
[You must be registered and logged in to see this image.]
Looking pretty nice so far, but now we need to add some navigation buttons/links. Get out the Text Tool again and write them out, using a small-sized, web-based font. Remember to set the Anti-Aliasing to None when making regular text/links.]