Hello and welcome to another tutorial, here on trendyTUTS.com. For today I will create a travel/booking website template in Photoshop. If you are a travel agent and you are looking to change the design of your agency, this tutorial it will be really useful for you. In the same time, if you are an freelancer and you have to create a booking/travel website for your client,  this tutorial it will definitely help you.

Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this template in Photoshop, but I will not cover the PSD to CSS/HTML conversion. If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.

As a premium member you will be able to download all our web layouts (PSD and CSS/HTML version for each tutorial), all premium files and unlimited access  to our PSD to CSS/XHTML tutorials.

Click Here To See The Live Preview (CSS/HTML)

Here is my final result for this tutorial:

To create this tutorial I have used:

• From our Premium Files available to our Premium Members I have used “Transportation Vector Icons” and “Summer Vector Icons“
• A stock image showing a beach with some palms. Unfortunately I can’t share with you this image because I don’t have the right to do it. Anyway, you can find some nice images (even better that the one I have used) on stock websites, such as Shutterstock, Istockphoto, etc. Also if you’re looking for low-quality, but free images, you can try sxc.hu

Once you have all of this, let’s start the tutorial.  Open Photoshop and create a new document:

Next set the Foreground Color to #85c4d1 and Background Color to #f8f8f8, than select Gradient Tool and Drag a similar line:

Next I will add a stock image on my document. You can add your image by going to File>Place

As you can see the image is quite large compared with my document. To integrate this image with your document, you will need to follow this steps:

First select the layer which contains the image in the Layer Palette, then click on “Create Clipping Mask”

Hit D on your keyboard, to set the default colors than select Gradient Tool and Drag  a similar line on your image (from the middle of the image to the left)

Once you have something that you like, right click on the mask  and choose Apply Layer Mask

Proceed in the same way for the top, right and bottom of the image. Here is my result:

As you can see the image is integrated perfectly with our layout.

Step 1 -  Creating the logo

To create the logo is quite easy, with Type Tool I will write “TravelWebsite” and as a tagline I will write “a design be trendyTUTS.com”

Step2- Creating the navigation

To create the navigation, select Rectangle Tool, and create a similar shape: 950x50px, and to make it a little bit transparent, lower the opacity to 54%.

With Type Tool add the links for navigation and with Rectangle Tool, create a orange shape. This will serve as a rollover.

Step3 – Creating the search area

First select Rectangle Tool and create this shapes:

On the right side, select Rectangle Tool and create a white shape, lower the opacity to 29% and apply this layer styles:

On the top of this shape, using Rectangle Tool, create another shape, this time I have used this color: #ffb506

With Rectangle Tool, using the same color, create a tab on the top of the shape, than with Pen Tool, create a small rectangle on the top right corner of the tab. Right click on the shape, choose “Make Selection”

Than go to Select>Inverse (Ctrl+Shift+I) to inverse the selection (so that we can have only that triangle selected), hit Delete on your keyboard to delete the selection and Ctrl+D to unload the selection.

In the same way I will create another 2 tabs. With Type Tool and Rectangle Tool I will add the forms.

Next I will create a button. With Rectangle Tool I will create a shape, than I will apply this layer styles:

Here is my result:

Step4 – Creating the Featured Area

Featured area is just below the Search Area
First select Rounded Rectangle Tool with a radius of 5px and create this shape:

Then apply this layer styles:

With line tool add 2 separators (1px width)

With Rectangle Tool, create a white shape (please see the screenshot below)

Then select Gradient Tool and draw this line

With a soft brush tool, create a white spot on the top left corner, than with Type Tool I will add some text and an icon from Transportation Vector Icons available to our Premium Members

For the price text I have used this layer styles:

In the same manner I will fill up the Featured Area. Here is my final result:

Step5- Creating the Content Area

To create the content area I will select first Rectangle Tool and I will create this shape

I will select Pen Tool and on the top left corner of the shape I will create this triangle

Then I will go to Filter>Blur>Gaussian Blur and for radius I will choose 8px. In the same way I will proceed for the right side

With Rectangle Tool I will create a blue shape and over it I will add the title

Under the blue shape, with Rectangle Tool I will create another shape and I will apply this layer styles:

Then I will add an image, some text and a button (created with rectangle tool)

I will go ahead and I will create 2 more similar posts, than on the right side with Ellipse Tool I will create this shape:

I will apply a Gaussian Blur with a radius of 8px, with Rectangular Marque Tool, I will make this selection

I will hit Delete on my keyboard to delete the selection and Ctrl +D to unload it. Here is my result

In the same manner I will add another row of posts

At the bottom I will add some images with the agency partners and I will add a small portion of the shape created on header.

Here is my final result

If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.
Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTs.com.