How To Create A Lightbox Header For A Traditional Automobile Shop

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.

How To Create A Lightbox Header For A Traditional Automobile Shop

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.

Automobile Header

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


Photoshop Pattern

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.

Photoshop Paint Bucket Pattern

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.

Photoshop Blending Modes

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.

Automobile Background Header

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.Photoshop Layer Properties

On a new layer, use a small soft blak brush, opacity 20%, paint over the red background several times to get this.

Photoshop Header Shadow

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.

Photoshop Header Sides

For each side, go to Layer Properties and add a Gradient Overlay. From Black to dark grey.

Photoshop Header Sides Gradient

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.

Photoshop Title Header

Using the pen tool, draw the wire and add in the shadow. You are done with the light box!Photoshop Header Full

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.

Navigation Gradient Layer

The gradient is only applied on the upper portion of the rectangle. This is what you will get.

Gradient Layer

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.

Navigation Link Reflected

Then add a white line, drop its opacity to about 20%. Draw a box behind the text and the reflection layer.
Navigation Background

Do the same for the rest of the links, to get this.
Full header

Full Site Example

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.