--
Published on Sat, Oct-03-2009 by Dainis

Create A Web 2.0 Travel Template In Photoshop


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.

You May Be Interested In The Following Posts


Final Image Preview

Photoshop tutorial - Make a web 2.0 Travel template

1.Step

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

This will create a left margin line.

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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.

Photoshop tutorial - Make a web 2.0 Travel template

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.

Photoshop tutorial - Make a web 2.0 Travel template

Photoshop tutorial - Make a web 2.0 Travel template

4.Step

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

Our layout looks like this now:

Photoshop tutorial - Make a web 2.0 Travel template

5.Step

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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:

Photoshop tutorial - Make a web 2.0 Travel template

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.

Photoshop tutorial - Make a web 2.0 Travel template

Apply following layer style to these buttons.

Photoshop tutorial - Make a web 2.0 Travel template

Photoshop tutorial - Make a web 2.0 Travel template

Photoshop tutorial - Make a web 2.0 Travel template

The buttons looks like this now:

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

8.Step

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

Out layout looks like this now.

Photoshop tutorial - Make a web 2.0 Travel template

9.Step

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

Photoshop tutorial - Make a web 2.0 Travel template

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.

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

10.Step

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

It looks like this now.

Photoshop tutorial - Make a web 2.0 Travel template

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.

Photoshop tutorial - Make a web 2.0 Travel template

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.

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

It looks like this now.

Photoshop tutorial - Make a web 2.0 Travel template

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.

Photoshop tutorial - Make a web 2.0 Travel template

Apply following layer style from blending options.

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

Follow same process for right side also.

Photoshop tutorial - Make a web 2.0 Travel template

So, the bar looks like this.

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

15.Step

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

Photoshop tutorial - Make a web 2.0 Travel template

16.Step

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

Photoshop tutorial - Make a web 2.0 Travel template

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.

Photoshop tutorial - Make a web 2.0 Travel template

Photoshop tutorial - Make a web 2.0 Travel template

Photoshop tutorial - Make a web 2.0 Travel template

Footer bar will look this.

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

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

Photoshop tutorial - Make a web 2.0 Travel template

Download Psd file

Advertisement


3 Responses

  • Reglan effects say:

    Interesting tutorial, do you think that three images or just one larger one for the body would be better for a site like this?

    1
  • aziz say:

    It’s very good tutorial for newbye. please add tutorial on template slicing .

    2
  • Sharon W say:

    Great tutorial, the layout is unique.

    3

Leave Your Response

About PsDeluxe

Psdeluxe is a Design blog dedicated to mainly Photoshop lovers and enthusiasts. We regularly update blog with free and easy to learn free Adobe photoshop tutorials, useful freebies for design projects, powerful tools that will make your work easier and we publish showcase of most beautiful and interesting designers works around the work that hopefully will inspire. Learn Adobe Photoshop techniques with us. Talented and professional designers are always welcome to join our author team. Feel free to subscribe to our Rss feed to be first who get all valuable information for designers.



     Hostgator Coupons | ThemeLabs | MaxReview theme | Review themes

Recommended Links



Wordpress review theme