Advanced Search

How to Draw The Header from the Christmas Greetings Template

This entry was posted By Cubert on Thursday, December 17th, 2009 at 3:15 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

When Christmas time comes, we think of Christmas trees, presents, Santa Claus and Christmas ornaments. That’s why we used all of these elements in the Christmas Greetings Template, and below you can see how the header of this template was made using Photoshop.


Christmas Template

You can download the “Christmas Greetings” template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

Here I have prepared few of illustrated Christmas theme images. I have a white Christmas tree, some presents, a cute little Santa, plus a few Christmas ornaments.


Step 1

Now let’s start making a collage with these illustrated images. First, open a new project (CTRL+N) with the size of 1000px X 900px. Before we start making the collage images, let’s give a nice background color. Lets pick red, since it suits Christmas. So lets fill the background with red #ab232a.


Step 2

Next, make a strip with 16px height on the very top of your page and fill it with Dark red #590405. Then, below the strip, add another 1px line with a darker red #5a0405 to create a two tone effect on it.



At the center of the strip, I added a red glow to mimick a light source shining down on the page. Now, create a new layer for it, and use the brush tool with the size of 200px, color #f84f57.


Then,  just brush it at the center of the strip, and you will see that the lighting on the outside of the strip. Just select the strip by holding on the ctrl key, and click on the strip layer.


Next, the strip will be selected: got to Select > Invest (Shift+Ctrl+I) and hit the delete key. Then the outer lighting will be deleted, and the remaining lit portion will look like a glossy and festive ribbon.



Now we have our top strip ready, let’s add in the logo for the theme template. Here I made a simple text logo which says ”Xmas Ideas”, which suits the theme of this template. I Used white for it so that it stands out. Below it, I just added in a slogan (it’s Christmas…get everything here) using a pink color (#ff979d) so that it doesn’t overshadow the text logo.


Now, let’s add some Christmas ornaments beside the logo to get the Christmas feel. I added some mini Christmas trees, a big bright Star, and some round ornaments, making it look like it’s hanging down from the top strip. Remember to create a new layer each time you added new stuff on your documents.


Step 6

It’s navigation time. Since we wanted to make things simple, and I have already added some nice Christmas ornaments at the top area, let’s just keep the navigation clean by just using simple text so that it won’t look too packed up. Just type, the few links title > 1. Shop, 2. Ideas, 3. About, 4. Contact with a pink color as well (#ff979d) Then add a line across to separate the navigation and the main header.



Next, let’s go to the main header with the main image collage. Here I used the white Christmas tree, the Santa Claus image, and some presents. First, let’s put the Christmas tree right at the left corner of the header and make it biger untill the star falls just beside the logo. Like how it show below.



Hmmm, okay now Santa is cmoing to town, I mean to the header. Add in Santa just right in front of the Christmas tree, not too centered, but slightly to the right side of the tree. Next, add in the presents behind Santa, one on the right and one on the left… just like below. A nicely arranged collage.



Now, on the right side of the header, add in a short description for the theme template with the big title “It’s Christmas Time !!!” using color (#000000).


I added a bright red strip around the title, just double click the layer with the title and add the stroke effect, color red (#e02c35) > stroke size 2px. Below the collage add another line to separate from the content area too.



Finally… the text description and the more button. Click on the Rounded Rectangle Tool and draw a small little rectangle for the more button. Next select the gradient tool gradient with the foreground color #4b8708 – Bright Green and Background color #3e6e08 – Darker Green. color. Click on the path tab and select the retangular path that we draw just now.


Fill it from top to bottom of the little rectangle, then double click on the layer and add a stroke surrounding it.

more button


Next add in the MORE text for the button. And Finally your simple header is done! Hope you enjoy creating this.


You can download the “Christmas Greetings” template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

('DiggThis') StumbleDelicious


Awesome tutorial with nice sweet web layouts
Thanks so much for posting & making such a Great tuts always
Your all tuts are Awesome
Thanks so much
God bless you :-)

Can you tell me what font you used in text logo ?

[...] Draw a Header for a Christmas Greetings Template [...]

Leave a Reply

  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost