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.

Join the discussion

  1. Ankush on October 7, 2009 at 6:50 am Reply

    Very nice, interesting tutorial.

  2. Southlake Realtor on October 9, 2009 at 5:20 pm Reply

    Very interesting. But also very informative!

  3. PRP Joe on October 10, 2009 at 6:06 pm Reply

    Very nice, awsome tutorial.

  4. janice on October 14, 2009 at 4:56 am Reply

    i cant find the paper pattern on the link u gave

  5. Tyler Abell on December 4, 2009 at 1:18 am Reply

    Thank you for this wonderful tutorial, I used it for my website, and am currently finishing up the theme.

    For the content section of my blog, I want the top to have a spiral bind like on a notebook… Searching for tuts right now…

  6. eta muhasebe on December 21, 2009 at 12:42 pm Reply

    nice 🙂 thanks more

  7. hjemmesider on December 25, 2009 at 1:40 am Reply

    Hello i am so delighted I discovered your blog, I actually discovered you by error, while I was searching Yahoo for something else, Anyways I am here now and would just like to say thanks for a great blog posting and a all round absorbing blog (I also love the theme/design), I do not have time to read it all at the right now but I have bookmarked it and also added your RSS feeds, so when I have time I will be back to read more

  8. Angela Gaus on January 9, 2010 at 6:21 am Reply

    Sagt mal, was ich schon immer mal wissen wollte: Hei

  9. Lewis Koening on May 20, 2010 at 6:37 pm Reply

    Gives Thanks for this article, I will add together this site to my bookmarks, my roomie just made mention to me about this last week. gracias again

  10. Melany Candill on June 15, 2010 at 2:18 pm Reply

    thanks to you for the new post. It was super revealing.

  11. Viral Submitter Pro on June 20, 2010 at 4:33 am Reply

    I am surely thankful to you for providing us with this invaluable help and advice. My spouse and I are truly grateful, simply just the facts and strategies we needed.

  12. wusthof knife set on July 2, 2010 at 4:01 am Reply

    Hi, i must fantastic website you’ve, i stumbled across it in Yahoo. Does you get much traffic?

  13. Evie Roberts on July 15, 2010 at 8:50 am Reply

    data recovery is a very costly option, always make a regular backups.:.,

  14. Clair Pagnello on July 24, 2010 at 2:01 pm Reply

    I really wish more home recording tutorials were geared toward newbies who aren’t necessarily techies.

  15. webbureau on August 17, 2010 at 11:53 am Reply

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

  16. Blogtek Media on August 19, 2010 at 2:42 am Reply

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

  17. chelseahandler on August 20, 2010 at 9:26 am Reply

    Hey, great post.

  18. Patrina Chatriand on September 5, 2010 at 12:24 pm Reply

    Each and every success starts together with the determination to try

  19. ผิวขาว on September 10, 2010 at 12:14 pm Reply

    Bemerkenswert, es ist die sehr wertvollen Informationen

  20. baritone horn on September 25, 2010 at 1:33 pm Reply

    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?

  21. h4n on January 19, 2011 at 12:26 pm Reply

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

  22. makovetskiy on April 30, 2011 at 6:13 am Reply

    awesome. was helpful

  23. wordpress tutorials on September 2, 2011 at 5:39 pm Reply

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

  24. Faisal khan on November 13, 2011 at 3:50 am Reply

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

  25. Faisal khan on December 3, 2011 at 2:11 am Reply

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

  26. Noorani on January 12, 2012 at 7:40 pm Reply

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

  27. top seo tips on March 13, 2012 at 7:44 am Reply

    GREAT ARTICLE..!!
    THANK YOU FOR SHARING THIS..!!
    FRM

  28. Marcos Pereira on June 15, 2012 at 12:03 pm Reply

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

    1. Madalin Tudose on June 15, 2012 at 3:36 pm Reply

      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.

      1. Marcos Pereira on June 15, 2012 at 4:29 pm Reply

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

        1. Madalin Tudose on June 16, 2012 at 2:53 am Reply

          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.

          1. Marcos Pereira on June 16, 2012 at 4:38 am

            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 🙂

          2. Madalin Tudose on June 16, 2012 at 7:09 am

            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!

  29. Marcos Pereira on June 16, 2012 at 2:16 pm Reply

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

    1. Madalin Tudose on June 16, 2012 at 5:07 pm Reply

      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: http://tutsplus.com/course/30-days-to-learn-html-and-css/

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

      1. Marcos Pereira on June 17, 2012 at 6:54 am Reply

        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?

        1. Madalin Tudose on June 17, 2012 at 6:59 am Reply

          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.

          1. Marcos Pereira on June 17, 2012 at 7:34 am

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

    2. Parami on January 1, 2013 at 11:56 pm Reply

      through sprite concept u can do this

  30. KHOKON on October 19, 2012 at 1:19 am Reply

    Nice design. I like it!

Leave a Comment

Your email address will not be published. Marked fields are required.