Design a Hand Drawn WordPress style Website Header

In this tutorial I`ll explain you the steps I took to create a hand drawn wordpress style website header in Photoshop.

I used some custom fonts,a paper pattern and a custom brush that I created exclusively for this tutorial.The steps for creating the brush are explained in the tut,so don`t worry,you don`t loose anything!Take a look!

Final Image Preview:

Take a look at the image we’ll be creating.You may click the image for a bigger preview!

final-header-image

Materials needed:

Daniel font

Mia`s Scribbling font

Roughage font

Grayscale Paper pattern

Handycons-social icons

Social icons hand drawned

First step:Setting up the workspace:

First step is to set up the workspace.For this,create a new file of 1260x300px:

workspace-of-photoshop

Step 2:Creating the brush

Now I`m gonna show you how to create a V brush to create the VVVVV effect that you may see in the final image.

Create a new document of 100x100px and add a vertical and an horizontal guide at 50px,like in the image.

creating-a-brush

Now select the Line Tool,set the weight to 10px and create a “V” symbol by adding 2 stripes,under the horizontal guide.With the Crop Tool(C), select only the “V” symbol,like in the picture:

v-brush-image

To create a brush from this image,go do Edit->Define Brush Preset,choose a name and hit “OK”.

define-brush

You should have now the brush in your Brush Preset Picker.

brush-picker

Step 3

Let`s add some options to the brush we`ve just created.Select brushes,choose our brush and add the next settings:

master-diameter

space-dynamics

shape

Step 4:

Now paint an horizontal line with the new brush ,but be sure that above the line you`ll have at least 200px for the header content.To make a perfect line,hold SHIFT key while you paint.

drawing-line

Step 5:

Fill the top area with the same color used when you painted the line.Mine was red.

red-area

Step 6:

Download the Paper pattern,install it by adding it to the Presets->Patterns folder.You may find the folder where you have Photoshop installed.

Step 7:

Double click the header layer and add the next blending options:

shadows-for-the-world

gradients-packets

pattern-over-the-earth

Ok!What we have until now:We have a piece of paper style header sitting on an apricot color background.

until-now-wallpaper

Step 8:

Now select the Rectangle Tool and draw a rectangle with the height of 40px.The width should be the same with the width of the entire page(aprox 1300px).

Fill it with a gray to black gradient and low the opacity of the layer to 50%.

gradient-for-the-top-bar

top-header

Step 9:

Now draw 2 lines at the bottom of the top shape.One gray and the other white,to create an effect of depth.

black-or-white

Step 10:

Add two vertical guides,one at 150px and the other at 1110px(150+960),because we want to have a content space of 960px wide.

960-grid

Step 11:Creating the logo

Download the Roughage font and write some text to create a logo.I wrote “DeliciousThemes”.Give it a linear soft gradient from black to dark gray to make it more interesting.

logo-for-the-header

Download the Mia`s Scribbling font and write again some smaller text under the big text,to finish the logo!

just-enjoy-it

Step 12:

Now download the two social icons packs and add the 48x48px icons to the main project.

social-icon

Write some suggestive text,like “Spread the word” or “Show us your love” or do like me:write “Tell them about me!”

spread-the-word

Step 13:

Let`s create the top header navigation!

Download the Daniel font and create some buttons above the logo.Let`s start with “Home”:

Type “Home” with white and under draw a white line.

home-button

Select the line layer and go to Filter->Liquify,select a big brush size and bend the line like in the image:

bending-a-line

The button looks more artistic:

before-and-after

Step 14:

Create some more buttons using the same way.

home-about-contact

At the middle,type “Categories:” and add a down-arrow from the custom shapes.

sign-3

categories

Final step:

The final step is to add a subscribe area in the top-right zone of the project.For this,type “Subscribe:” and add from the icons sets,the mail and the RSS icons.

subscribe-area

The Final Image:

If you followed all the steps,the final image should looks like the next one.You may click the image for a bigger preview!

final-header-image

That`s all,my friends!I hope you liked it and if is so,don`t hesitate to comment it! And if you want to stay closer,please subscribe to our RSS feed.

Feel free to stumble,tweet or digg the tutorial!

If you`re reading this line,it means that you watched the tutorial and I must thank you for your effort!

Have a great day!

[Total: 1    Average: 5/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.