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:
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 “DeliciousThemes”.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!
