Another week, another template – this time we are offering the tutorial for creating a web layout for a traveling agency. This is a Photoshop tutorial for creating this layout, the PSD downloadable file is published in another post, we will publish the tutorial for converting this template into HTML and CSS.

This template is for a travel agency that specializes in taking you to beaches and shores. For that I chose the color-scheme of Blue and I placed the pictures of beaches only. But you can easily edit this theme and make it in the theme of your choice.

Final Result

This is what we are making.

Photoshop Tutorial of Travel Template

Step 1: Blank File

A blank document, size of your choice, resolution 72. We do this every time.

Free Tutorial of Photoshop

Step 2: Background

I loaded the pattern from here because it seemed beautiful and relevant to the theme.

Photoshop tutorial

Step 3: Navigation Bar

Lets move forward to navigation bar. Select the Rounded Rectangle Tool and draw the shape. After rasterizing the vector graphic, you should give it 50% opacity.

Free Tutorial of Travel Travel Template

Step 4: Navigation Bar text

I’m in a mood of being childish that’s why I have chose Comic Sans font for the menu. And you see the separator, that’s also text. You can type it by pressing Shift>Backslash. Good thing is that you can make this nav. bar using plain CSS.

Free Tutorial of Photoshop

Step 5: Logo

Now since we don’t have a real logo, I’ll create a design which can work as a logo and also you can place the logo over it when you design your template. Select Pen Tool and Fill with this Gradient. I think you would already the basic stuff such as opening layer styles so I’m skipping them. If you want the tutorial to be explicitly detailed, do tell me in the comments.

Free tutorial of Photoshop

Step 6: Logo Outer Shadow

An outer shadow will make the logo design look hovering over background. Give Drop Shadow of these values in the Logo area.

Tutorial of Photoshop

Step 7: Logo Inner Shadow

Let’s give it a last touch through Inner Shadow in this area.

Template Tutorial of Photohsop

Step 8: Result

Our header is complete. Have a look, if you need to make any adjustments, do it and then we’ll move forward.

Tutorial of Photohsop

Step 9: Featured Bar

Let’s move towards the Featured area. Select the Rounded Rectangle Tool and draw this shape.

Photohshop Template Tutorial

Step 10: Filling Featured Box

Choose the beach or travel image and put it in this box with Create Clip Masking Tool. Again if you don’t know how to create this mask, do comment. I’m skipping the routine stuff for now.

Free Design of Photohshop Tutorial

Step 11: Featured Box Text

I just added some text, remember we are using the same font style everywhere.

Free Photoshop Tutorial

Step 12: Result

This is the our final result of the featured area.

Elegant Design of Travel Template

Step 13: Order Form

One thing a travel agency homepage needs more than anything is an order form. An order form enables the visitors to buy air tickets and stuff from the travel agency. So lets move towards the order area. Select the Rounded Rectangle Tool and draw the shape with 60% opacity.

Photoshop Tutorial

Step 14: Order Box Headings

Select the Rounded Rectangle Tool and draw these buttons, notice how their color varies.

Tutorial of Photohsop

Step 15: Order Box Text

Draw the text field shapes and buttons with Rounded Rectangle Tool and Rectangle Tool. You can see we got ourselves a very handy order box.

Template Tutorial of Photoshop

Step 16: Content Area

To fill the rest of the space of content area I just added names of a few countries. I placed Pakistan on top because my teacher is from Pakistan. I owe him a lot.

Free Templete Tutorial of Photoshop

Step 17: Content Slider

Text and pictures are like husband and wife, incomplete without each other. We added a few country names and now I’m adding a few pictures to spark up this area. Create Clip Masking Tool with 1 px Stroke of White Color.

Template Tutorial of Photoshop

Step 18: Result

Have a look.

Free Template Tutorial of Photoshop

Step 19: Footer

Lets move towards Footer, Add logo, navigation, social media icons and with contact number.

Photoshop Tutorial of Travel Template


Here’s a look at all it combined.

Photoshop Tutorial of Travel Template

Pin It