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!


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:


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.


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:


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


You should have now the brush in your Brush Preset 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:




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.


Step 5:

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


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:




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


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%.



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.


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.


Step 11:Creating the logo

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


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


Step 12:

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


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


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.


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


The button looks more artistic:


Step 14:

Create some more buttons using the same way.


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



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.


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!


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!

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.


    Nice design. I like it!

  • Marcos Pereira

    I have a question. After finishing this header, how do you add the links to the social buttons using html?

    • Madalin Tudose

      Using HTML and CSS, of course. But that`s another story. Here`s a free and the best course series you`ll ever find on internet about HTML and CSS:

      Once you`ll learn them, sky is the limit!

      • Marcos Pereira

        I know (enough I think) of html and css :) and I know how to turn images into links. But I don’t know how to turn part of an image (the header in this case) into a link.

        Maybe using a transparent div with a certain position, height and width and using it to make a clickable link, it will work?

        • Madalin Tudose

          The idea is to split the design into more images. Then you can set a div by adding it the background-image of each small image. You should find this technique inside the course I gave you.

          • Marcos Pereira

            Oh I get it. Just put the icons in a separate folder and add them separately.

    • Parami

      through sprite concept u can do this

  • Marcos Pereira

    What did you do on step 5? Because when I use the fill bucket, the lines still have some white around them. Please help!

    • Madalin Tudose

      You need to create a new layer and then paint it. You have to understand first what layers are. They are…layers. Is easy to use them as you`ll see if you`ll keep practicing.

      • Marcos Pereira

        Wow, do you think I’m stupid or something? I already did that with the pen tool. Well, thanks, pro.

        • Madalin Tudose

          Here`s what you gotta do. Select the Magic Wand Tool(W), click on the area above the zigzag line and you should get the top area selected. Then create a new layer and paint the selected area with red.

          • Marcos Pereira

            I was doing that, but the tool didn’t select the area next to the red line. Anyways, I did it with the pen tool. Thanks anyways.
            And by the way, you have a really great site here! Thanks for putting on the effort to bring us such good tutorials :)

          • Madalin Tudose

            I`m glad you made it work. Let me know if you have more questions and don`t hesitate to share with us your output!

  • top seo tips


  • Noorani

    Found this while searching for Photoshop tutorials to design my site. You have well described tutorials. Thank you. Bookmarked your site. :)

  • Faisal khan

    plzzz can anyone help me with the V brush step??? plzzz i really like it but i get stuck in that step..

  • Faisal khan

    i didnt understand the top 2nd step how do i create vertical and horizontal line…

  • Pingback: 20+ Helpful Web Graphics Photoshop Tutorials | Tutorials Share | Tutorials, Resources & Tips for Designers!()

  • Pingback: design for the web » Blog Archive » headers with impact()

  • wordpress tutorials

    this is a very helpful post, i already included it on my bookmark thanks

  • makovetskiy

    awesome. was helpful

  • h4n

    Awesome — this is what I like to see! – Step-by-step instructions. Thanks heaps!

  • Pingback: design for the web » Blog Archive » header design()

  • baritone horn

    Solid weblog. I bought a whole lot of good records. I?ve been retaining an eye on this technologies for awhile. It?s interesting the way it retains varying, nevertheless a few of the core components remain the identical. Have you seen a lot alter because Google produced their latest acquisition in the field?

  • ผิวขาว

    Bemerkenswert, es ist die sehr wertvollen Informationen

  • Patrina Chatriand

    Each and every success starts together with the determination to try

  • chelseahandler

    Hey, great post.

  • Blogtek Media

    excellent tutorial! thank you very much for this. you are amazing

  • webbureau

    Hi, thanks for this very great blog post. I can definitely use this! I’ve bookmarked your blog