This tutorial shows you how to create a header for an automobile shop using various techniques. I’ve made use of repeated patterns for the background of the header and I’d like to emphasize the power of patterns in web layout.
It is really important to learn how to use them in Photoshop as they adds more texture and depth to your work. They are very easy to use too.
1. Creating Green Metal Background
Create a new canvas, 1000px by 200px (the height of canvas does not really matter, because you can crop it away when you have finished it).
We start by creating green metal door behind the light box. Download this texture, open it and define it as a pattern. Edit > Define Pattern > OK
Create a new layer, using the Rectangular Marquee Tool (M), select a portion of the canvas. Click on the Paint Bucket Tool, select Pattern and choose the pattern that you have just defined.
Place your cursor withing the selected area, click once to pour the pattern.
Once we’ve done that, we’ll add in some highlights and shadow to the background.
Create a new layer, using a black soft paint brush with about 40% opacity, paint the sides of the metal. Change the Blending Mode to SOFTLIGHT. Create another layer, using the same brush and paint the middle portion of it, change Blending Mode to SCREEN. You will get something like the below.
2. Creating LightBox
Using the Rectangular Marquee Tool, draw a rectangle. Size 720px x 70px. Right click Layer Properties, set the drop shadow to the following settings below.
On a new layer, use a small soft blak brush, opacity 20%, paint over the red background several times to get this.
We are now going to create the sides of the lightbox. Remember to create a new layer for each side.
For the left and right sides: Draw a black rectangle box, width 10px height 75px. Edit > Transform > Skew. Adjust the edges of the rectangle to the correct perspective. Do the same for the bottom. You will get this.
For each side, go to Layer Properties and add a Gradient Overlay. From Black to dark grey.
Create a new layer, type in the name of the shop. Again, right click Layer Properties, give the text a subtle Outer Glow. You will get something similar to the bottom. You may want to try adding in a very light greyish outline to the text.
Using the pen tool, draw the wire and add in the shadow. You are done with the light box!
3. Navigation
Create a new layer, draw a rectangle across, 1000px x 22px. Colour: #1f1f1f
Add a new layer on top of this rectangle, draw another rectangle, 1000px x 11px.
Colour: #414141. Right click on this layer, Layer Properties, Gradient Overlay.
Adjust to the settings below.
The gradient is only applied on the upper portion of the rectangle. This is what you will get.
Start adding your button name and give each button a reflection.
Duplicate the text layer, Edit > Transform > Flip Vertical.
Click on Add Layer Mask. This adds a mask to the reflection layer.
Click on the layer mask (circled in red), use a small soft brush, make sure it is white in colour, brush over the layer mask, to ‘hide’ part of the text.
Then add a white line, drop its opacity to about 20%. Draw a box behind the text and the reflection layer.
Do the same for the rest of the links, to get this.
I went on creating the rest of the layout. A 2 coloum page layout with horizontal headers to separate the content into specific areas. Try creating the rest of the page yourself with a different layout.
Photoshop Hot Tip:
A good start with any design is to sketch out the plans on paper, the free reign of the pencil helps flesh out the rough layout with ease. Planning out a wireframe also helps develop a hierarchy and gives an insight into the best positions for key elements of the design.
