Design a Beautiful Red and Gold Christmas Themed Website

Step 1

Create a new document (1100px by 1150px).

Create a new layer called 'background', and fill your canvas with be0000.

Step 2

Create a new layer called 'gradient header' and drag down a 930000 to transparent linear gradient from the top of your canvas. This should add a certain depth to your header, but shadowing the top of your canvas.

Step 3

Now create a new layer called 'white top gradient'. Select your radial gradient tool and drag a gradient out from the top center of your canvas (ranging from white to transparent).

Then change this layer's blend mode to 'overlay' and reduce it's opacity to 30%.

Step 4

Now download a fractal lines brush. I'm afraid that I can't find the source of the brush that I'm using (I've had it quite a while). However, I can recommend this alternative brush set:

Ocean Breeze Fractal Brushes Set.

Apply your lines brushes to a new layer called 'lines brush'.

Make sure to use a 30% opacity white brush (although you can adjust your opacity as needed). I also went to filter>sharpen>sharpen in order to bring out the detail of my lines.

Step 5

Now create a new layer called 'content area'.

Use your marquee selection tool and paintbucket tool to create a white rectangle in the top center of your canvas. The vertical edges of your rectangle should be set at 100px and 1000px, and the top/bottom edges should be set at 30px and 800px.

Step 6

Now apply a stroke blending option to your content area shape:

Stroke Settings

Size: 10px
Opacity: 6%
Color: Black

Step 7

Download this cloudy sky photo.

Paste it into the top right of your white content area.

Then use your marquee tool to crop it, and reduce the layer opacity to 70%:

Step 8

Now go to layer>apply layer mask>reveal all. Use a soft, black paintbrush to mask off the edges of your cloudy sky photo, until you're happy with how it looks. Don't worry too much about the bottom edge of your photo as this will be covered eventually with other photos.

Step 9

Now I want to apply a couple of adjustment layers to my sky photo layer. In order to make each adjustment layer only apply to my sky photo layer, and not my entire document, I must remember to go to layer>apply clipping mask for each adjustment layer.

I apply a hue/saturation adjustment layer and a color balance adjustment layer (settings below):

Hue/Saturation Adjustment Layer:

Hue: 0
Saturation: +10
Lightness: +30

Color Balance Adjustment Layer:

Highlights: -15 / 0 / 0
Midtones: 0 / 0 / 0
Shadows: 0 / +5 / -20

Step 10

Download this photo of a house with Christmas lights.

Apply a layer mask and mask off the edges of the photo in order to crop the house:

Step 11

Now apply a hue/saturation adjustment layer and color balance adjustment layer.

Remember to apply a clipping mask so that these layers only effect your house layer:

Hue/Saturation Adjustment Layer:

Hue: 0
Saturation: +15
Lightness: 0

Color Balance Adjustment Layer:

Highlights: +5 / 0 / -30
Midtones: -10 / -5 / -30
Shadows: +10 / 0 / -40

Step 12

Download this photo of snow and paste it into your document.

Crop your image until you have a nice chunk of snow remaining.

Step 13

Resize this image, and mask off the edges using a soft, black paintbrush.

Call this layer 'snow peak 1?.

Step 14

Now apply a hue/saturation adjustment layer and levels adjustment layer (apply a clipping mask to both):

Hue/Saturation Adjustment Layer

Hue: 0
Saturation: -60
Lightness: 0

Levels Adjustment Layer

25 / 1.16 / 238

Step 15

Now repeat this technique to create other areas of snow, until you've created a snowy landscape in front of your house:

Step 16

Create a new layer called 'ribbon'.

Use your pen tool to create a ribbon shape spanning the top of your content area. Fill this area with eab631 (gold).

Step 17

Now apply a drop shadow blending option and inner shadow:

Drop Shadow:

Opacity: 26%
Distance: 1px
Spread: 0%
Size: 2px

Inner Shadow:

Opacity: 24%
Distance: 1px
Choke: 0%
Size: 2px

Step 18

Now option+click on your ribbon layer within your layer's palette.

This will select your ribbon shape. With your selection in place, create a new layer called 'dark ribbon'. Use a soft, black paintbrush to paint over certain areas of your ribbon and make them shadowed.

Then create a new layer called 'ribbon dodge'. Then use a soft, white paintbrush to paint in the highlights of your ribbon.

On your 'dark ribbon' layer, change this layer's blend mode to 'multiply' and reduce it's opacity to 36%.

On your 'ribbon dodge' layer, simply change this layer's blend mode to 'overlay'.

Step 19

Download this ribbon tie photo.

Cut it out using your preferred method, and then paste it over the edge of your ribbon.

Apply a drop shadow blending option (settings below):

Drop Shadow:

Opacity: 22%
Distance: 1px
Spread: 0%
Size: 5px

Step 20

Apply a color balance adjustment layer, making sure to apply a clipping mask to it.

Color Balance Adjustment Layer

Highlight: -9 / +5 / -9
Midtone: +12 / +1 / -11
Shadows: +9 / -6 / -28

This will make your ribbon tie more saturated and golden.

Now repeat these steps to apply another piece of ribbon tie to the other end of your ribbon:

Step 21

Now create a new layer called 'ribbon joins dodge/burn'.

Go to edit>fill and fill your layer with 50% gray. Then change this layer's blend mode to 'overlay'. This will hide your gray fill. Use a soft black paintbrush to paint in shadows over your ribbon ties, and then a soft white paintbrush to paint in your highlights.

The images below show the layer at 'normal' blend mode and 'overlay' blend mode:

Step 22

Download this badge icon.

Paste it over the top-right area of your ribbon.

You want to make it a different color, in order to blend better with your overall layout. Go to image>adjustments>hue/saturation. Reduce your hue to -90 in order to make your badge red.

Step 23

Download this great Christmas present icon.

Paste it into the top-left part of your content area. This will be your logo icon.

Step 24

Now type out some text for your logo. (settings below).

Font Settings

Font Face: Mido
Size: 36pt
Color: b40000
Kerning: -50

Step 25

Select your shapes tool, and start creating a left aligned menu.

Your menu will consist of a series of rounded rectangles, each one filled with a gradient overlay (d40000 to 940000).

Step 26

Now use your line tool to create a series of white 1px dividing lines between each menu button. Then merge all lines into a single layer, and change this layer's blend mode to 'overlay'.

Step 27

Now use the lasso tool to create an arrow from the right of your top menu button.

Fill this with red, and it should help this menu button act as an active menu item.

Step 28

Now go to the top left of your top menu item, and use your selection tools and paintbucket tool to create the effect of your menu wrapping around your content area:

Step 29

Now type out some menu text.

Font Settings:

Font: Mido
Size: 16pt
Color: White
Kerning: -50

Step 30

Now create an arrow next to your 'Home' menu item. This will signify your 'active' menu item.

Apply a drop shadow and outer glow blending option to your arrow shape.

Drop Shadow:

Color: Black
Opacity: 34%
Distance: 1px
Spread: 0%
Size: 2px

Outer Glow:

Blend Mode: Overlay
Opacity: 25%
Color: White
Spread: 25%
Size: 29px

Step 31

Now type out some welcome text just to the right of your menu.

Step 32

Now create a rounded rectangle (5px radius) to act as a learn more button underneath your welcome text.

To style your button apply a gradient overlay and inner shadow blending option:

Inner Shadow:

Color: Black
Opacity: 50%
Distance: 1px
Choke: 0%
Size: 0px

Gradient Overlay:

Opacity: 100%
Gradient: Ranges from 8b8b8b to 4e4d4d.

Step 33

Now create a new layer called 'gray area'.

Create a gray rectangle (e8e8e8) underneath your welcome area. Apply an inner shadow blending option.

Inner Shadow:

Color: Black
Angle: 90 degrees
Distance: 5px
Choke: 0%
Size: 5px

Step 34

Now use your line tool to create a subtle divider effect at the top of your gray content area.

Create a top line (1px thickness, cbcbcb) and a 1px white line beneath this.

This helps add depth to your gray area:

Step 35

Paste in some Christmas themed images into your gray area:

Step 36

Now type out some text underneath each photo, and add a simple arrow icon next to each bit of text:

Step 37

Create a new layer called 'footer highlight'. Create a radial gradient at the bottom-center of your canvas. (white to transparent).

Then change this layer's blend mode to 'overlay' and reduce it's opacity to 60%.

Step 38

Finally, to finish up your design add some text/icons to your footer as footer content.

And We're Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome: