Creating a Travel Agency Web Layout in Photoshop


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

create free website wix below post

Further Related Readings

  1. Tilly Webb October 25, 2011 at 12:51 am

    Brilliant layout design tutorial, appreciate your work which easily defined steps from first to last. Thanks

    1. Jawad October 25, 2011 at 6:34 am

      Thank you very much for the appreciation, that’s all I need to fuel my self.

  2. kuldeep January 6, 2012 at 7:00 am

    Thank you very much for the appreciation, that’s all I need to fuel my self.

  3. Image Masking January 17, 2012 at 12:27 am

    You’ve done really awesome job! Mind blowing tutorial it is & very easy to follow step by step, thanks a lot for sharing this nice post & I’ll visit your site again 🙂

  4. marianne wiggels September 24, 2012 at 2:39 am

    Thank you for the steps it is very easy to follow and the lay out is perfect:)

    1. Jawad September 24, 2012 at 4:28 am

      Thanks for the Comment. Glad you liked it.

  5. jhaya September 27, 2012 at 5:36 am

    wow verry nice your design

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved