Christmas-Themed Web Layout

dangtruong

Author lv1 (3900/5000)

3,940 views

2 Comments

(3 votes, average: 5.00 out of 5)

In this tutorial I will be teaching you how to create this complete, Christmas-themed web layout. This tutorial is probably best for the intermediate Photoshop users rather than beginners, as it contains quite a lot of work.

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 thingies.
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+uparrow 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 tilable 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:

1. Inner Shadow
2. Gradient Overlay
3. Pattern Overlay (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:

1. Drop Shadow
2. Gradient Overlay

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:

1. Inner Shadow
2. Gradient Overlay

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:

1. Blending Options: Main
2. Inner Glow
3. Bevel and Emboss
4. Gradient Overlay
5. Stroke

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:

1. Inner Shadow
2. Gradient Overlay

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:

1. Blending Options: Main
2. Inner Shadow
3. Outer Glow
4. Inner Glow

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.

Page : 1 2