How to Create a Large Header with a Simple Western Scene

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 (29)»

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.
Nine Lion Design
Outlaw Design Blog
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

Preview

For this tutorial I used the following resources:

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.
Large Head Tutorial
Go to Image–>Adjust–>Levels and adjust the level as shown.
Large Head Tutorial
Go to Image–>Adjust–>Exposure… and adjust the picture as shown.
Large Head Tutorial

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%.
Large Head Tutorial
Large Head Tutorial
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%.
Large Head Tutorial
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.
Large Head Tutorial

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.
Large Head Tutorial
Large Head Tutorial
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.
Large Head Tutorial
Large Head Tutorial
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.
Large Head Tutorial
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.
Large Head Tutorial
Add some decoration elements using these brushes. Below you can appreciate the result.
Large Head Tutorial

STEP 4 – The Cowboy

Now download this image. Isolate the cowboy using the Pen Tool. Paste in our document.
Large Head Tutorial

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 Large Head Tutorial

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.
Large Head Tutorial
Large Head Tutorial

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.
Large Head Tutorial

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).
Large Head Tutorial

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
Large Head Tutorial
Large Head Tutorial
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.
Large Head Tutorial

Download Source

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

29 Comments

  1. Christin

    WOW! Thanks for this!

  2. millencol

    This is a very nice tutorial. Thank you to share the .psd source file. It’s very useful.

  3. CgBaran Tuts

    Great tutorial thanks

  4. piervix

    Thanks guys!

  5. photo retouching

    My first visist to your site and based on this tut, it certainly wont be the last! Thanks.

  6. Mitar

    Wonderful! Awesome photoshop tutorial.

  7. Geoff

    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

  8. piervix

    Cheers Geoff! I’m happy for your considerations! Thanks!

  9. ntiremedia

    nice and really easy territorials i like them keep it up…doing great work

  10. nike shox oz

    good post

  11. Adult Friend Finder

    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.

  12. http://bestblogbox.com/freebies/solid-denim-textures/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  13. ways to lose belly fat

    how to send you an email? let us get closer

  14. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  15. louisvuitton

    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.

  16. belstaff

    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.

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US