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




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


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.

Drop Shadow:
Blend Mode: Multiply
Color: #000000
Opacity: 30%
Angle: 90

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

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 Web 2.0 Travel template Psd file

Get nicest photoshop tutorials, design resources and articles directly in your email. Subscribe to Psdeluxe Feed and stay be informed about latest design news.



25 cool photoshop photo effects tutorials
100+ Old Coca cola posters
30 most important web and graphic design blogs
25 photoshop light effect tutorials
Light effect wallpaper in Photoshop
Create sexy cyborg
Creepy bloody text effect in Photoshop




























