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.
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.
Here’s a look at all it combined.