Creating a Travel Agency Web Layout in Photoshop

FINAL RESULT

This is what we are making.

Step 1: Blank File

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

Step 2: Background

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

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.

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.

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.

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.

Step 7: Logo Inner Shadow

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

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.

Step 9: Featured Bar

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

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.

Step 11: Featured Box Text

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

Step 12: Result

This is the our final result of the featured area.

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.

Step 14: Order Box Headings

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

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.

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.

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.

Step 18: Result

Have a look.

Step 19: Footer

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

VOILA..!

Here’s a look at all it combined.