How to Create a Large Header with a Simple Western Scene
- 4 June 2009
- Tutorials, Web Design
- This post was written exclusively for PV.M Garage by Piervincenzo Madeo
- Comments (27)»
During these last months seeking for a good design I’ve found this two amazing web-sites: NineDesign and Outlaw Design Blog.
In my honesty opinion two beautiful examples of inspired design, with wonderful wood background and amazing illustrations. I’m loving this kind of approach.
So I decided to realize a tutorial that explains how to create a beautiful header with an illustration painted on wood background. Below there is the final result.
Final Image and Resources
For this tutorial I used the following resources:
- Wood Image
- Cowboy Image
- Old Paper Image
- Risingsun Brushes
- Tree Brushes Pack
- Web 2.0 Pattern Collection
At the bottom you can downlad the PSD Source File.
Background
STEP 1 – Wood Background Image
Create a new document of 1280 by 475 pixel at 72 dpi (for basic rgb). Download the wood image for the background at cgtextures.com.
Import the picture and resize it holding proportions with a width of 1280 pixel.
Adjust the picture.
Go to Image–>Adjust–>Hue/Saturation and desaturate softly the layer.
Go to Image–>Adjust–>Levels and adjust the level as shown.
Go to Image–>Adjust–>Exposure… and adjust the picture as shown.
STEP 2 – Background Color and Adjustement
Create new layer (Ctrl+Shift+N) and call it “color wood”. Generate a selection for all the document, fill it with #2d140f color and change the Blend Mode to Overlay. Set Opacity at 90%.
Now draw sunlight in a new layer with Brush Tool (B) using JavierZhX RisingSun Brushes. Change the Blend Mode to Overlay and set Opacity at 45%.
Add on top a brown (#1f0f05) bar in a new layer (with Rectangular Tool), go to Layer–>Layer Style and apply and optimize the following style: Drop Shadow, Gradient Overlay, Pattern Overlay (using this pattern pack) and one pixel (#843e23)Stroke.
Western Scene
STEP 3 – Landscape
Use Pen Tool to draw basic lines for the landscape.
Create a new layer “landscape” and with pen draw the first hill. Close the line, when you have a good result right-button-click on mouse and choose Make Selection.
At this point, with the selection active, choose Rectangular Marquee Tool (M), go to the center of selection and click the right button of mouse and through Fill option you can give #b14900 color at the selection. After modify Blend Mode to Color Dodge.
Iterate this operation to create a good landscape. You must remember to separate in different layers the portions of the scene, thus you can opportunely modify color (I suggest #73b401 for middle and #3a1803 for back), blend mode (I suggest Linear Light for far hill and Color Dodge for middle) and opacity for each layers.
When you draw the disinct segments you must be careful at the overlap of layers. If two levels are superimposed the color mixing will be wrong.
You can make a selection with Ctrl+click on layer thumbnail, so with Eraser Tools delete the overflowing pieces selecting the right level to delete.
Add some decoration elements using these brushes. Below you can appreciate the result.
STEP 4 – The Cowboy
Now download this image. Isolate the cowboy using the Pen Tool. Paste in our document.
Desaturate (click Ctrl+Shift+u) the cowboy image, click Ctrl+u and set brightness at -100, you’ll have a dark silhouette. Resize (you can also reflect it) pictures and position it on the scene’s center 
Now we create the shadow of the horseman.
Duplicate the layer of the cowboy, set Blend Mode at Overlay and Opacity at 35%, now right click on mouse and choose Free Transform (with Alteration) to drag the shadow. With eraser tool setting a soft brush delete the overflowing piece.
Go to Filter–>Blur–>Gaussian Blur and set a radius of 0,5 pixel.
Logo and Menu
STEP 5 – Logo
Use Text Tool (T) to insert a large text (font Vademecum at 117pt). Insert style at the layer: Drop Shadow (Opacity 64%, Distance 3px, Spread 0%, Size 4px); Gradient Overlay (black-to-white, blend mode Vivid Light, scale 75%); Stroke (1px #ad240e with opacity of 66%).
Repeat this operation for another little text string. See the following image to appreciate the result.
STEP 6 – Menu
Download this image, isolate paper with Pen Tool and paste in our document.
Add a Hue/Saturation Adjustment Layer to reduce saturation (Image–>Adjust–>Hue/Saturation).
Go to Layer–>New Adjustment Layer–>Solid Color and a select #ffd57c color. This layer must cover only paper, so click with right button on Solid Color Layer and select Create Clipping Mask
At the end add a logo and textual menu on old paper sheet.
Final Result and Source File
Below the final result and the button to download the PSD source file.
25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design
WOW! Thanks for this!
This is a very nice tutorial. Thank you to share the .psd source file. It’s very useful.
Great tutorial thanks
Thanks guys!
My first visist to your site and based on this tut, it certainly wont be the last! Thanks.
Wonderful! Awesome photoshop tutorial.
Really good tutorial, and easy to follow, even better is the fact you have given the psd away to learn even more from.
Cheers Pievincenzo
Cheers Geoff! I’m happy for your considerations! Thanks!
nice and really easy territorials i like them keep it up…doing great work
good post
I’ve been surfing online more than three hours as of late, yet I never discovered any attention-grabbing article like yours. It is beautiful worth enough for me. In my view, if all webmasters and bloggers made excellent content material as you probably did, the net will probably be a lot more useful than ever before.
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
how to send you an email? let us get closer
There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM
The article is worth reading, I will share with my friends. I also have information to share. Louis Vuitton is one of the world’s oldest and famous fashion brand. Every woman dream to own louis vuitton handbags . We offer you discount louis vuitton at low price in our louis vuitton online . Lots of feedbacks from our clients show that they are satisfied with the best materials.
Necessity for people to prepare a belstaff jacket in winter, because freezing snow outside, jacket is a pratice tool that make your more comfortable and warm. As there are so many belstaff jackets in the world, from north face jackets to belstaff trialmaster jackets, it is really difficult for people to choose the one that remain longer. Also online business opened a door to find cheap jackets, no matter buy for oneself or send friends, they should take many factors into consideration.From servey statistic, belstaff roadmaster jacket sale much better than others, because they are stylish, more fashionable and professional for riders. So it becomes popular among youngers, who prefer to show their personality everywhere, the more stylish it designed, the more popular it looks like.For hikers, climbers and also skiiers, what they prefer maybe columbia jackets and north face jackets because they are professional design. Even north face jackets are made by two professional climbers. Although belstaff coat are made for althete before, their professional manufacture make it lightweight and comfort during hiking. Not need to worry about danger, both of them make sure security. But is this enough? Different Belstaff UK Jackets made for different purposes, so for general people, the strandard maybe different.