Design the Website of a Travel Agency for e-Commerce and Portfolio Purpose

In this photoshop tutorial we will learn how to make a web 2.0 type travel template layout in Adobe Photoshop. Template layout color theme is black, gray and green. The tutorial is explained step by step. I have also used images to explain the tutorial in a easy. With the help of images you can easily understand the tutorial.

Final Image Preview

1.Step

Create a new document (File -> New) with following specifications.
Width: 1200px
Height: 1000px
Background Contents: white

2.Step

We will leave some equal margin from both left and right side. I am going to leave 150px from both left and right side. For making margin we will use guide.
Lets create left margin. Navigate to, View > New Guide, in the box select vertical and enter 150px (as shown in below image).

This will create a left margin line.

Now we will create right margin line. Repeat the process that we have done for left side margin line. View > New Guide in the box again select vertical and enter 1050px (as shown in below image).

We have now 150px margin both the sides and our center part if of 900px. Everything that we will create will be in center region.

3.Step

Now we will add a background color. Create a new layer (layer -> New -> Layer) and Select "Paint Bucket Tool. Set color to # 404040 and fill the layer.

4.Step

Select "Rounded rectangular shape" and set radius to 5px. Draw two shapes as shown in below image.

Apply following layer styles to these two shapes.
Stroke:
Sixe: 1px
Position: outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient:
Color # 000000 and # 404040
Styke: Linear
Angle: 90

Our layout looks like this now:

5.Step

In this step we will add logo to our template. Select "custom shape tool".

and set color to #89a81e. using custom shape tool add a logo type shape in top right position as shown in image.

Now, create a new layer and select "Text Tool". Type your sitename with following specifications:
Font: Nyala
Size: 40 pt
Color: #89a81e
and after sitename type .com with following specifications.
Font: Nyala
Size: 24 pt
Color: # 888888
step 6:

6.Step

In this step we will create primary menu buttons.
Select "Rounded rectangular tool".
Radius: 3px
Color: white
And draw few shape as shown in below image.

Apply following layer style to these buttons.



The buttons looks like this now:

7.Step

In this step we will add some text on the buttons. Select "Text Tool" and type some link text on these buttons with following specifications.
Font: Nyala
Size: 14 pt
Color: # 89a81e

8.Step

Select "Rounded rectangular tool", set color to white and radius to 5px. Draw a shape as shown in below image.

Apply following layer style to this shape.
Drop Shadow:
Blend Mode: Multiply
Color: #000000
Opacity: 30%
Angle: 90

Gradient Overlay:
Blend mode: Normal
Opacity: 100%
color: #424242and # 7c7c7c
Angle: 90

Stroke:
size: 1px
Color: # 000000
Position: Outside

Out layout looks like this now.

9.Step

Create a new layer, and create another rounded rectangular shape over the first shape. Care to leave equal margin above and bottom.

Create a duplicate shape of this shape. Go to Edit -> Free Transform and rotate the shape little anti-clock wise as shown in below image.

Now fill both these shapes with some image related to travel and that best fits your service. I have taken two random image.

10.Step

Select "Custom shape tool" and draw two arrow type shape to both side of image. Color should be white.

Apply following layer style to these two arrow buttons.
Drop Shadow:
Blend mode: Multiple
Color: #000000
Opacity: 75%
Angle: 90

Gradient:
Blend Mode; Normal
Opacity: 100%
Gradient color: # 89a81e and # c1c0c0
Angle: 0

It looks like this now.

11.Step

Create new layer. Select "Text tool" and type some text to related to your service.
Font: HansHand
Size: 36 pt
Color: # e2e2e2
Our layout look like this.

12.Step

Select "Rounded rectangular tool". Set radius to 5px and color to #ffffff. Now draw three rectangular shape as show in below image. All three shapes should be of equal width and height and there should be equal space between each shape.

Apply following layer style to these shapes.
Drop Shadow:
Blend mode: Multiply
Opacity: 30%
color: # 000000
Angle: 90

Gradient Overlay:
Blend mode: Normal
Opacity: 100%
color: # 424242 and # 7c7c7c
Angle: 90

Stroke:
size: 1px
Position: Outside
Color: # 000000

It looks like this now.

13.Step

Select "rounded rectangular tool" and create a shape of height around 50px as shown in below image. Set color to #000000 and radius to 10px.

Apply following layer style from blending options.

Create a new layer just above this. Select “Polygonal Lasso Tool” and make a selection like shown below.

Fill the selection with #202020 color. It looks like this now.

Follow same process for right side also.

So, the bar looks like this.

14.Step

Create new layer, and select "Text Tool" and type "Featured Packages" on the bar with following specifications.
Font: HelveticaNeue LT
Size: 36 pt
Color: #89a81e

15.Step

Add equal size image on each block as shown in below. Image should be related to travel.

16.Step

Add some description text and read more link just below each image.

17.Step

Now we will create footer bar. Select "rounded rectangular tool" and create a shape of height around 50px from left margin to right margin line. Set color to #000000 and radius 10px.
Apply following layer style from blending options.



Footer bar will look this.

18.Step

Create a new layer and add secondary link text on the left side of footer bar. Also add a copy right text on right side of the footer bar as shown below.
Font: Arial
Size: 14 pt
Color: #ffffff

Our travel template layout is ready. Below is the final image of the layout.

Download Psd file