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

A web developer with a crush on SEO. Having my skin in the game of website development and digital marketing for more than 10 years already, you might consider me an expert. At least this is what people call me. Honestly, I HATE that term. I prefer to describe myself as a person who takes action and risks. I test every hypothesis, document every step of the process, and implement what works.