1 [PS]Photoshop Tutorial Designing a Christmas-Themed Web Layout 2 Mon Sep 20, 2010 10:12 pm
Admin
Admin
[You must be registered and logged in to see this image.]
In the above image I’ve used: Tahoma, 11pt, Bold, #ebbe97, and Anti-Aliasing set to None. [You must be registered and logged in to see this image.]
4. Navigation Area
Let’s make the navigation box/buttons. Firstly, start by creating a new layer, then make a large, rectangular selection underneath the header bar (with only about 1 pixel between them).
[You must be registered and logged in to see this image.]
Now, fill this selection with a relatively bright-orange color, I’ve used #d53900 here. You can in fact fill the selection with any color you want, but for this tutorial you can use what I used! [You must be registered and logged in to see this image.]
After filling your selection, apply the following layer styles to your navigation box layer:
And now your box should look like this:
[You must be registered and logged in to see this image.]
Looking good! Now I’ve added in a little bit of grunge brushing on the left side of the box, for the sake of nice little details. For some nice grunge brushes you can go to PhotoshopBrushes.com and download some of their free brushes (they have paid ones aswell, just don’t get sucked in!)
A few other good brush resources are:
I love ‘em! [You must be registered and logged in to see this image.]
So, after you’ve done a little bit of black and white grunge brushing inside of your navigation box, change the layer modes to either Overlay or Soft Light and lower the opacity to around 40-60%, this will make your brushing blend in a little bit nicer.
[You must be registered and logged in to see this image.]
Can you see it? Well, I can at least.
Next thing to do is add in the actual buttons. So, all on the same layer, make some button-sized rectangles 1px apart, just like mine shown here:
[You must be registered and logged in to see this image.]
My selections were 180 x 26 pixels in size. Again, go into the Blending Options for your buttons layer and use the following settings:
And now, your buttons should look like this!
[You must be registered and logged in to see this image.]
Very nice so far. Lastly for these buttons you need to add in the navigation text.
[You must be registered and logged in to see this image.]
In the above preview I”ve used Tahoma, 12pt, Bold, #ffffff. Not bad so far, huh?
5. Designing the Header Graphic
So let’s make that header graphic for the template now. Firstly, create a new layer then make a selection the same height as the navigation box, and all of the width left in the template (other than 1px at each edge, that is).
[You must be registered and logged in to see this image.]
Fill this selection with a nice sea-blue color (I’ve used #1d78c4).
[You must be registered and logged in to see this image.]
More layer styles. Apply the following layer styles and settings:
Should be resulting in something nice like this:
[You must be registered and logged in to see this image.]
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 intact.
[You must be registered and logged in to see this image.]
Now I’ve added in some snowflake shapes for a nice detail. For these, get the Custom Shape Tool out and use the snowflake shapes on a new layer.
[You must be registered and logged in to see this image.]
And here are the shapes:
[You must be registered and logged in to see this image.]
If the shapes aren’t there for you, click the little arrow on the right of the box and select All, or Nature, then you should have the snowflakes shapes.
[You must be registered and logged in to see this image.]
The snowflakes look quite cool just like that, but I went ahead and applied these layer styles anyway:
My snowflakes now look like this:
[You must be registered and logged in to see this image.]
Next thing I did for the header was add in some trees. Please note that I did not make these, they’re some clipart I found on the internet somewhere. You can download them from here though: Carton Christmas Trees Clipart.
[You must be registered and logged in to see this image.]
For the sake of tiny details, I then added a dark gradient 1px from the top of the banner and navigation box.
[You must be registered and logged in to see this image.]
Now I’m going to add in a little bit of snow to the bottom of the banner. To do this, you’ll first need to create a smooth, hill-like path with the Pen Tool, make your path into a selection then fill with white (finish off by deleting excess white).
Finish this off by doing a little bit of brushing inside of the snow layer.
[You must be registered and logged in to see this image.]
Lastly for the header, you need to add in some text, preferably your website name or some descriptive text. I’ve used the same font as before, so I recommend you do aswell.
[You must be registered and logged in to see this image.]
To this text layer I applied a Drop Shadow and a Gradient Overlay.]
In the above image I’ve used: Tahoma, 11pt, Bold, #ebbe97, and Anti-Aliasing set to None. [You must be registered and logged in to see this image.]
4. Navigation Area
Let’s make the navigation box/buttons. Firstly, start by creating a new layer, then make a large, rectangular selection underneath the header bar (with only about 1 pixel between them).
[You must be registered and logged in to see this image.]
Now, fill this selection with a relatively bright-orange color, I’ve used #d53900 here. You can in fact fill the selection with any color you want, but for this tutorial you can use what I used! [You must be registered and logged in to see this image.]
After filling your selection, apply the following layer styles to your navigation box layer:
- Gradient Overlay
<LI sizset="34" sizcache="4">Inner Shadow
And now your box should look like this:
[You must be registered and logged in to see this image.]
Looking good! Now I’ve added in a little bit of grunge brushing on the left side of the box, for the sake of nice little details. For some nice grunge brushes you can go to PhotoshopBrushes.com and download some of their free brushes (they have paid ones aswell, just don’t get sucked in!)
A few other good brush resources are:
- DeviantART
<LI sizset="37" sizcache="4">Brusheezy
<LI sizset="38" sizcache="4">Misprinted Type
I love ‘em! [You must be registered and logged in to see this image.]
So, after you’ve done a little bit of black and white grunge brushing inside of your navigation box, change the layer modes to either Overlay or Soft Light and lower the opacity to around 40-60%, this will make your brushing blend in a little bit nicer.
[You must be registered and logged in to see this image.]
Can you see it? Well, I can at least.
Next thing to do is add in the actual buttons. So, all on the same layer, make some button-sized rectangles 1px apart, just like mine shown here:
[You must be registered and logged in to see this image.]
My selections were 180 x 26 pixels in size. Again, go into the Blending Options for your buttons layer and use the following settings:
- Stroke
<LI sizset="40" sizcache="4">Blending Options: Main
<LI sizset="41" sizcache="4">Inner Glow
<LI sizset="42" sizcache="4">Bevel and Emboss
<LI sizset="43" sizcache="4">Gradient Overlay
And now, your buttons should look like this!
[You must be registered and logged in to see this image.]
Very nice so far. Lastly for these buttons you need to add in the navigation text.
[You must be registered and logged in to see this image.]
In the above preview I”ve used Tahoma, 12pt, Bold, #ffffff. Not bad so far, huh?
5. Designing the Header Graphic
So let’s make that header graphic for the template now. Firstly, create a new layer then make a selection the same height as the navigation box, and all of the width left in the template (other than 1px at each edge, that is).
[You must be registered and logged in to see this image.]
Fill this selection with a nice sea-blue color (I’ve used #1d78c4).
[You must be registered and logged in to see this image.]
More layer styles. Apply the following layer styles and settings:
- Gradient Overlay
<LI sizset="45" sizcache="4">Inner Shadow
Should be resulting in something nice like this:
[You must be registered and logged in to see this image.]
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 intact.
[You must be registered and logged in to see this image.]
Now I’ve added in some snowflake shapes for a nice detail. For these, get the Custom Shape Tool out and use the snowflake shapes on a new layer.
[You must be registered and logged in to see this image.]
And here are the shapes:
[You must be registered and logged in to see this image.]
If the shapes aren’t there for you, click the little arrow on the right of the box and select All, or Nature, then you should have the snowflakes shapes.
[You must be registered and logged in to see this image.]
The snowflakes look quite cool just like that, but I went ahead and applied these layer styles anyway:
- Inner Glow
<LI sizset="47" sizcache="4">Blending Options: Main
<LI sizset="48" sizcache="4">Inner Shadow
<LI sizset="49" sizcache="4">Outer Glow
My snowflakes now look like this:
[You must be registered and logged in to see this image.]
Next thing I did for the header was add in some trees. Please note that I did not make these, they’re some clipart I found on the internet somewhere. You can download them from here though: Carton Christmas Trees Clipart.
[You must be registered and logged in to see this image.]
For the sake of tiny details, I then added a dark gradient 1px from the top of the banner and navigation box.
[You must be registered and logged in to see this image.]
Now I’m going to add in a little bit of snow to the bottom of the banner. To do this, you’ll first need to create a smooth, hill-like path with the Pen Tool, make your path into a selection then fill with white (finish off by deleting excess white).
Finish this off by doing a little bit of brushing inside of the snow layer.
[You must be registered and logged in to see this image.]
Lastly for the header, you need to add in some text, preferably your website name or some descriptive text. I’ve used the same font as before, so I recommend you do aswell.
[You must be registered and logged in to see this image.]
To this text layer I applied a Drop Shadow and a Gradient Overlay.]