Halloween Website Customization Tutorial

TemplateMonster is glad to present you a comprehensive tutorial of customization of your website Header for such a majestic holiday as Halloween. With a little help of Adobe Photoshop you can spread some festive mood on your website. Just follow all the steps in this tutorial, written in details by our designers, to create outstanding vivid designs for your website. Here we explain you general techniques of how to customize your header. Following our tutorial step-by-step and using your reach imagination you can produce fascinating designs for your website to give it 100% up-to-date look. So let’s begin!

1. Cleaning the Header

At first you have to remove all the useless elements of your header:

Go to the Layers Panel and select Layers or Layer Sets you would wish to remove and then hit the Delete button;

After all the unnecessary layers are removed the header should look like this;

2. Creating a background image.
Now let’s pick the colors for the header. Left Click on the foreground color icon in the toolbox to open the Color Picker and choose the color you like. Then hit the background color icon in the toolbox to open the Color Picker and choose the background color (we’ve chosen dark-blue for the foreground and blue-marin for the background).

Create a new Layer. Go to the Layer directory and hit the New Layer button;

Now pick the Rectangular Marquee tool from the Toolbox and define the area for the new header background;

***

Pick the Gradient tool from the toolbox;

In the Gradient Options Panel select Linear Gradient and Foreground to Background gradient preset from drop-down list;

Apply the gradient on the selected area from top to the bottom of selection;

3.Changing and editing the Fonts.
Now we need to pick the fonts that would match our main idea which is as you already know Halloween. Here is what you should do:

Select a Layer containing the text;

In the Fonts Option Panel choose the font that suits your idea best (We’ve chosen Giovedi Regular);

In the Layer directory Panel press Add Layer Style and select Outer Glow. This will give your text some shiny look.

In Structure section change Blend Mode to Screen and Opacity to 45%; in the Element Section adjust Size to 9 px. These settings can be easily changed according to your preferences (right click on the layer-Layer Properties-Outer Glow and change your settings).

And that’s how the Text messages should look like after customization.

4.Digging the graves

Now we will draw some graves to make our header look scary.

Pick the Rectangular Marquee tool from the Toolbox and make first selection as shown on the picture A. Than hold Shift and add second selection as shown on picture B. Your selection area should look like a grave cross now.

Select Black as a Foreground Color: Left Click on the foreground color icon in the toolbox to open the Color Picker and choose the black color.

Now we need to fill our selection with black color. Select Paint Bucket Tool from your Toolbox and fill the ‘Grave cross’ selection. Then press Ctrl+D to deselect the cross.

Go to the Layer directory Panel press Add Layer Style and select Stroke. Make Size of the stroke 2px and press Ok. Thus you’ll make the grave’s cross corners rounded.

Now You know how to make graves. To add another ‘grave cross’ simply duplicate layer – Right Click on the Grave Cross layer and choose Duplicate Layer option and then press Ok. To edit the size of the “grave cross” press Ctrl+T to select Free Transform Tool. Thus you can transform (rotate, skew, scale, etc.) the image. When you defined the shape you wanted hit Enter button on your keyboard. Here is the example of how we decided to line up 6 grave crosses.

5. Editing the Background

Now we will add some glow to the background to give the image look solid. Go to the Layer directory, select the Background image Layer (the one we’ve created in the step 2) and hit the New Layer button. Select the new layer which should be above background image Layer but below your ‘grave cross’ layers. Go to the Gradient Options Panel to choose Radial Gradient and “Foreground to Transparency” preset from the drop-down menu. Pick the white as a Foreground Color.

Select the Gradient tool from the Toolbox (hot key ‘G’) and add some Gradient to your image. It supposed to look like the one on the picture below.

Go to the Layer directory and change the layer blend mode to ‘Overlay’ and it’s done!

***

6.Flying the Moon

Now we will add the Moon to spread some natural light. Select Elliptical Marquee tool from the Toolbox and make a round selection. As you can see, we’ve placed it in the right top corner of the header, but you could place it wherever you want it to be. Pick Paint Bucket tool and fill your selection with the white color.

Now we need to make the moon a little blurry. Go to the Main menu - Filter - Blur – Gaussian Blur.

The Blur radius should be about 1.5 px. Hit Ok;

Now we’ll add Outer Glow as we did in the step 3;

Set the Blend mode to Overlay, Opacity - 50%, Size – 16 px ;

Now we will produce the effect that imitates the surface of the moon.
Go to the Main Menu - Filter - Render – Difference Clouds;

Next, Press Ctrl + Shift + L and the program will automatically define color levels;

Now we need to make the moon brighter.

Press Ctrl + L to open Levels Option panel and set

Input levels to : 0 ; 3,5; 255;

Output levels to: 0; 255;

The result should look like on the picture below:

Next, create a new layer above the moon layer. It will be a Layer Mask for the moon. Press Alt + Ctrl + G. Fill the selection with blue color. Press Ctrl + D to deselect. Set the layer’s Blend Mode to ‘Color’;

Create another layer and place it under the moon layer. Fill the layer with Radial Gradient of white color. Set the layer’s blend mode to ‘Overlay’ with Opacity - 50%;

Add another layer above the moon layer. Use Elliptical Marquee tool to make a simple selection around the moon. Hold Alt and make another selection inside the first one. Now your selection should look similar to the one shown on the picture below. Fill it with white color;

Go to the Main menu - Filter - Blur – Gaussian Blur.

Set the layers Blend mode to ‘Soft Light’ with Opacity-15%.

And now the moon is shining!

7. Adding the bats.
You can also add some bats to your masterpiece. It’s really simple. Save this image on your computer and then open it with Adobe Photoshop;

Duplicate the layer but this time, select your Header as Destination document ;

Add as much as you want of those flying creatures simply by duplicating the layer.

Use Free Transform tool (Ctrl + T) to edit your bats;
And finally you get astonishing design of your header right for the holiday! Enjoy!

Download Source File

“UPDATE”
This part of our tutorial is about putting additional design elements to make your customization even more creepy. Please note that these additional elements can be either produced by yourself or purchased from third parties.

8. Get a Witch

As soon as you’ve found the image you wish to place on your webpage header you are ready to start. Launch Adobe Photoshop, open the illustration and your webpage header layout.

We’ve decided to place the witch in the left bottom corner but we really didn’t appreciate her looking aside. It supposed to guard the web content, so we need to flip the witch horizontally so she would look down on the information posted on the website. To do this go to the main menu – Edit – Transform – Flip Horizontally. Now we need to scale the size of the image to suit into the header. Go to the main menu – Edit – Transform – Scale and find the most appropriate parameters.

We need to make the illustration match the colors of the Header. Here is what we’ll do:
Create a Mask layer for the illustration: go to the Layer Panel, select the Layer containing illustration and press Mask Layer icon as shown on the picture below.

Go to the Toolbox and select Polygonal Lasso tool and accurately select the witch’s coat. On the image below you can see how the selection should look like:

***

Go to the Layer Panel Again and change The Mask Layer Blend mode to Soft Light.

Cool! The colors are matching now!

Ok, now we would like to add some glow to the witches prop (it’s hard to guess what’s she is holding in her hand, so let’s just call it prop =)). Create a new layer above the layer containing the witch. Go to the Toolbox and select Gradient tool then in the Gradient Panel choose Radial Gradient type. Set the foreground color to red. Simply add the gradient above the prop.

Now all you need to do is to lean back and enjoy the masterpiece you’ve just created yourself. Happy Halloween!