final-header-image

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 Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

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

define brush Design a Hand Drawn Wordpress style Website Header

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

brush picker Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

space dynamics Design a Hand Drawn Wordpress style Website Header

shape Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

Step 5:

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

red area Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

gradients packets Design a Hand Drawn Wordpress style Website Header

pattern over the earth Design a Hand Drawn Wordpress style Website Header

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

until now wallpaper Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

top header Design a Hand Drawn Wordpress style Website 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 Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

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.

logo for the header Design a Hand Drawn Wordpress style Website Header

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

just enjoy it Design a Hand Drawn Wordpress style Website Header

Step 12:

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

social icon Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

The button looks more artistic:

before and after Design a Hand Drawn Wordpress style Website Header

Step 14:

Create some more buttons using the same way.

home about contact Design a Hand Drawn Wordpress style Website Header

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

sign 3 Design a Hand Drawn Wordpress style Website Header

categories Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

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 Design a Hand Drawn Wordpress style Website Header

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.

  • http://www.allittips.com KHOKON

    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?

    • http://www.OurTuts.com 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: http://tutsplus.com/course/30-days-to-learn-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?

        • http://www.OurTuts.com 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!

    • http://www.OurTuts.com 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.

        • http://www.OurTuts.com 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 :)

          • http://www.OurTuts.com 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!

  • http://getfindmysite.blogspot.com top seo tips

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

  • http://www.tipsly.net 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

  • http://blogwithsuccess.com wordpress tutorials

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

  • makovetskiy

    awesome. was helpful

  • http://digitalrecordersreview.org/h4n/ h4n

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

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

  • http://ambassadorforsale.cz.cc 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?

  • http://www.whitecute.com/ ผิวขาว

    Bemerkenswert, es ist die sehr wertvollen Informationen

  • http://www.itmightbelove.com Patrina Chatriand

    Each and every success starts together with the determination to try

  • http://nickiminaj4738.tripod.com/thechelseahandlersextape/ chelseahandler

    Hey, great post.

  • http://blogtekmedia.com/ Blogtek Media

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

  • http://alturl.com/ujndj webbureau

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