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
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
