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 “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!
Download testking 1Y0-A08 questions with detailed testking E20-322 study guides and testking 646-276 practice exam to prepare and pass real test.
Related Posts :
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
Each and every success starts together with the determination to try
Hey, great post.
excellent tutorial! thank you very much for this. you are amazing
Hi, thanks for this very great blog post. I can definitely use this! I’ve bookmarked your blog
I really wish more home recording tutorials were geared toward newbies who aren’t necessarily techies.
data recovery is a very costly option, always make a regular backups.:.,
Hi, i must fantastic website you’ve, i stumbled across it in Yahoo. Does you get much traffic?
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.
thanks to you for the new post. It was super revealing.
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
Sagt mal, was ich schon immer mal wissen wollte: Hei
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
nice
thanks more
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…
i cant find the paper pattern on the link u gave
Very nice, awsome tutorial.
Very interesting. But also very informative!
Very nice, interesting tutorial.